Usuario:ManuelRomero/DAW/moviles/entorno

De WikiEducator
Saltar a: navegación, buscar
Road Works.svg Trabajo en proceso, espera cambios frecuentes. Tu ayuda y retroalimentación son bienvenidos.
Ver página de charlas.
Road Works.svg




Elementos en el entorno

  • Para construir aplicaciones trabajamos con dos ventanas
  • 'App Inventor Designer' o ventana de diseño de componentes
  • 'App Inventor Block Editor' o descriptor del comportamiento de los componentes

App Inventor Designer

  • Se abre accediento al url de MIT appinventor.edu.mit
  • Debemos tener una cuenta de google para poder acceder al entorno
  • Así tenemos nuestro espacio en la nube para guardar nuestras aplicaciones
  • Al abrir la ventana vemos 4 secciones según se puede ver en la imagen

AppDesigner.png

App Inventor Designer

  • La Sección de Palette contiene los componentes que a continuación describiremos
  • Con ellos diseñaremos la aplicación
  • Se agrupan por bloques con relación funcional
  • Justo encima de ella aparece el nombre del proyecto en el que estemos trabajando

DesignerPalete.png

  • Cada componente tiene
    • Metodos
    • Responder o provocar eventos
    • Propiedades
  • Algunos de ellos son modificables en tiempo de ejecución, otros no (Pero podrían ser leídos sus valores)

ComponentesApp.png

  • Analizaremos cada grupo de componentes de forma individual

App Inventor Designer

  • La sección de Viewer o visor gráfico de los componentes de la aplicación que estamos desarrollando
  • Se ve como va a quedar en el teléfono.
  • Si tenemos el teléfono conectado lo iremos viendo también en el móvil
  • En la parte superior tenemos diferentes opciones típicas de un editor (guardar....)

DesignerViewer.png

Basic

  • Responden a los componentes más usados
  • Este grupo lo constituyen

ComponentesBasic.png

Button

  • Componentes que son pulsados para realizar acciones.
  • Este componente tiene propiedades de apariencia puede contener un texto o imagen y la propiedad enabled permite que el botón esté o no habilitado para ser presionado

PropiedadesBotones.png

  • Tiene asociados tres eventos
click(),GotFocus() y GetFocus()

Canvas

  • Es este un componente muy importante.
  • two-dimensional touch-sensitive Es un espacio
    • de dos dimensiones (X,Y)
    • sensible al tacto
    • en ese espacio puede dibujar
    • en ese espacio los sprites se pueden mover.
  • La anchura y la altura se mide en píxeles y debe ser positivo.

Una posición en el canvas se puede especificar como un par (X, Y) los valores, en donde

X es el número de píxeles de distancia desde el borde izquierdo de la lona Y es el número de píxeles de distancia desde el borde derecho de la lona

  • Las propiedades se pueden ver en la imagen donde tablero es un canvas en esta aplicación

PropiedadesCanvas.png There are events to tell when and here a Canvas has been touched or a Sprite ( ImageSprite or Ball ) has been dragged. There are also methods for drawing points, lines, and circles.

CheckBox

Clock

checkBox

Clock

Image

Label

ListPicker

PaswordTextBox

Screen

TextBox

TinyDB

Media

ComponentesMedia.png

Animation

ComponentesAnimation.png

Social

ComponentesSocial.png

Sensor

ComponentesSensor.png

Screen Arrangement

ComponentesScreen.png

LEGO MINDSTORMS

ComponentesLego.png

Other stuff

ComponentesStuff.png