Usuario:ManuelRomero/preferencias/moviles/AppInventor/DescripcionEntorno

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 tres componentes:
  1. dos ventanas
  2. terminal (bien dispositivo móvil conectado o bien un emulador)
Ventanas de nuestro entorno
  • '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 http://beta.appinventor.edu.mit
  • Al abrir debemos estar conectados y se abrirán todas las aplicaciones que hayamos desarrollado
  • Al abrir la ventana vemos 4 secciones según se puede ver en la imagen

Entorno.png RTENOTITLE

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

RTENOTITLE

  • 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)

RTENOTITLE

  • 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....)

RTENOTITLE

Componentes

  • Aquí aparecerán los componentes que haya seleccionado para mi aplicación
  • Todas las aplicaciones tendrán al menos un componente padre donde se ubicarán el resto
  • Al crear un nuevo proyecto aparece dicho componente Screen1
  • Dicho componente no se puede ni borrar ni cambiar el nombre
  • Tampoco se puede agregar más, y representa la pantalla del dispositivo móvil

ComponenteScreen.png

Propiedades

  • Los objetos tienen propiedades
  • Muchas de ellas son configurables en tiempo de diseño
  • Posteriormente en tiempo de ejecución las puedo leer y algunas modificar
  • Las propiedades que aparecen siempre son del componente seleccionado

PropiedadesComponentesAppInventor.png

Block Editor

  • En esta parte del entorno especificaremos el comportamiento de los componentes
  • Cada vez que añadimos un componente dicho componente me aparecerá en el editor de bloques
  • en este entorno tengo dos secciones

EditorBloquesGeneral.png

Seccion 1

  • En ella podemos seleccinar un comportamiento o acción para nuestra aplicación
  • Los tenemos en tres grupos

Built-in.png

Bluit-in
  • Constituyen las instrucciones de nuestro lenguaje de programación
  • En un lenguaje de programación podemos:
  1. Definir variables y procedimientos o funciones
  2. Realizar asignaciones
  3. Especificas instrucciones de control
  4. Hay expresiones,
  5. Puedo realizar operaciones sobre las variables o valores (matemáticas de cadenas de caracteres,...)
  • Todo ello se especificará en mi programa cogiendo bloques de esta sección

Built-in Definiciones

Built in definiciones.png

  • Sirven para definir variables, parametros, funciones y procedimientos

Built-in Texto

Built in text.png Trabajar con cadenas de caracteres

Built-in listas o vectores

Built in listas.png Permiten trabajar con arrais o vectores o listas de elementos

Built-in Matemáticas

Built in matematicas.png Trabajar con valores numéricos

Built-in Lógicas

Built in logicas.png

  • Operaciones lógicas o booleanas y sus correspondientes valores

=Built-in Estructuras de Control=-

Built in control.png

  • Estructuras de control
    • selectiva
    • Repetitiva
    • Secuencial u órdenes

Built-in Colores

Built in colores.png

My Block

  • Aquí tendremos un elemento por cada componente que tengamos definido en el diseño
  • Al menos siempre habrá uno que es el screen1 expuesto anteriormente
  • También tendremos un elemento correspondiente a las definiciones (variables / acciones) que definamos

Archivo:MyBlock.png

Tipos de comportamiento

  1. Eventos
  2. Leer propiedades
  3. Escribir o establecer valor de propiedades
  4. Llamar a un procedimiento
Eventos

Los eventos son bloques de tipo when

  • Pueden recibir parámetros
    • Por ejemplo el evento touched (tocar con el dedo) recibe como parámetro la posición x y donde hemos tocado
  • Puede dar o retornar valores que se ven como parámetros
    • El mismo evento retorno un booleano que diche si donde hemos tocado había un sprite o muñequito

EventosAppInventor.png

  • El componente Screen1 tiene un evento importante que es cuando se inicia la aplicación initial

EventoScreenInitial.png

Leer propiedades

PropiedadesBlockApp.png

Escribir o establecer valor de propiedades

Archivo:SetPropiedadesBlockApp.png

Llamar a un procedimiento

CallProceduraApp.png