|
|
| Línea 1: |
Línea 1: |
| − | {{TEP}} | + | {{TEP}} {{:Usuario:ManuelRomero/daw/moviles/AppInventor/Entorno/nav}} <br> |
| − | {{:Usuario:ManuelRomero/daw/moviles/AppInventor/Entorno/nav}} | + | |
| − | <br> | + | |
| − | ==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
| + | |
| − | [[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
| + | |
| − | [[Image: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)
| + | |
| − | [[Image:ComponentesApp.png]]
| + | |
| − | *Analizaremos cada grupo de componentes de forma individual
| + | |
| | | | |
| − | ==App Inventor Designer== | + | == Elementos en el entorno == |
| − | *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....)
| + | |
| − | [[Image:DesignerViewer.png]]
| + | |
| | | | |
| − | ==Basic==
| + | *Para construir aplicaciones trabajamos con dos ventanas |
| − | *Responden a los componentes más usados | + | *''''App Inventor Designer'''' o ventana de diseño de componentes |
| − | *Este grupo lo constituyen | + | *''''App Inventor Block Editor'''' o descriptor del comportamiento de los componentes |
| − | [[Image: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
| + | |
| − | [[Imagen:PropiedadesBotones.png]]
| + | |
| − | *Tiene asociados tres eventos
| + | |
| − | click(),GotFocus() y GetFocus()
| + | |
| | | | |
| − | ===Canvas=== | + | == App Inventor Designer == |
| − | *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''' ''pequeños imágenes'' se pueden mover.
| + | |
| | | | |
| − | *La anchura y la altura se mide en píxeles y debe ser positivo. | + | *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 |
| | | | |
| − | *Una posición en el canvas se puede especificar como un par (X, Y)
| + | [[Image:AppDesigner.png|RTENOTITLE]] |
| − | **'''X''' píxeles desde el borde izquierdo del canvas
| + | |
| − | **'''Y''' píxeles desde el borde superior del canvas o lienzo
| + | |
| − | *Las propiedades se pueden ver en la imagen donde '''tablero''' es un canvas en esta aplicación
| + | |
| − | **en este caso vemos como por ejemplo '''width'''tiene especificado que ocupe el espacio del móvil '''Fill parent''' o rellenar el espacio del padre.
| + | |
| − | [[Imagen:PropiedadesCanvas.png]] | + | |
| − | ;Propiedades
| + | |
| − | :BackgroundColor
| + | |
| − | ::El color del fondo..
| + | |
| − | :BackgroundImage
| + | |
| − | ::La imagen de fondo del lienzo
| + | |
| − | :Width y Height
| + | |
| − | ::Anchura y altura del espacio del canvas.
| + | |
| − | :LineWidth
| + | |
| − | ::La anchura de las líneas dibujadas.
| + | |
| − | :PaintColor
| + | |
| − | ::El color con el que se pinta en el canvas.
| + | |
| − | :Visible
| + | |
| − | ::Booleano que indica si es o no visible.
| + | |
| − | ;Eventos:
| + | |
| − | Dragged(number startX, number startY, number prevX, number prevY, number currentX, number currentY, boolean draggedSprite)
| + | |
| − | :Evento que ocurre cuando el usuario realiza un movimiento arrastrando el dedo (u otro objeto) de una posición a otra sin levantar el dedo; si lo levantara y lo volviera a poner serían dos eventos Dragged.
| + | |
| − | :El movimeinto se produce desde una posición '''''(prevX, prevY)''''' a otra '''''(currentX, currentY)'''''. El par '''''(startX, startY)''''' indica el primer punto donde el usuario tocó la pantalla; El booleano '''''draggedSprite''''' especifica si un '''sprite''' estás siendo movido en dicho desplazamiento.
| + | |
| − | Touched(number x, number y, boolean touchedSprite)
| + | |
| − | :Si es tocado el lienzo en una posición '''(x,y)'''; El booleano '''touchedSprite''' indica si se tocó un sprite (o sea que una imagen sprite estaba en dicha posición.
| + | |
| − | ;Métodos
| + | |
| − | Clear ()
| + | |
| − | :Borra el contenido del canvas mantendiendo '''BackgroundImage'''.
| + | |
| − | DrawCircle (number x, number y, number r)
| + | |
| − | :Dibuja un círculo con el centro '''(x,y)''' y '''r''' de radio.
| + | |
| − | DrawLine (number x1,number y1, number x2, number y2 )
| + | |
| − | :Dibuja una línea entre las coordenadas dadas en el lienzo.
| + | |
| − | DrawPoint (number x, number y)
| + | |
| − | :Dibuja un punto en las coordenadas dadas en el lienzo.
| + | |
| − | Save () SaveAs (text fieldname)
| + | |
| − | :Guarda una imagen de este lienzo en un dispositivo de almacenamiento externo.
| + | |
| − | :Estos métodos devuelve el nombre de ruta completo del archivo guardado.
| + | |
| − | :Si se produce un error, se invoca al método ErrorOccurred.
| + | |
| − | :en el caso de '''SaveAs''', el nombre de fichero debe tener extensión '''jpeg''', '''jpg''', o '''png'''.
| + | |
| | | | |
| − | ===CheckBox=== | + | == App Inventor Designer == |
| − | *Es un tipo de botón llamado '''casilla de verificación''' que puede estar seleccionado o no
| + | |
| − | *Ante un toque cambia su estado.
| + | |
| − | *Las propiedades y métodos son muy similares a las de los botones.
| + | |
| − | *No puede tener imagen como los botones, y la propiedad '''text''' es el texto que aparece junto a la casilla de verificación
| + | |
| − | *El valor de la propiedad '''Checked''' especifica si la casilla está marcada o no.
| + | |
| | | | |
| − | ===Clock===
| + | *La Sección de Palette contiene los componentes que a continuación describiremos |
| − | *Es un componente muy importante y utilizado. | + | *Con ellos diseñaremos la aplicación |
| − | *Sirve en muchas ocasiones para iniciar la ejecución del programa. | + | *Se agrupan por bloques con relación funcional |
| − | *Es un elemento ''no visible'' en el espacio gráfico de la aplicación. | + | *Justo encima de ella aparece el nombre del proyecto en el que estemos trabajando |
| − | *Sirve para crear señales a intervalos regulares de tiempo (que cada x tiempo ejecute un procedimiento, p.e.). | + | |
| − | *Otro uso es manipular el tiempo: tener una referencia temporal (siempre respecto a otra, tiempo que ha pasado desde que ...
| + | |
| − | ;Propiedades
| + | |
| − | :''TimerInterval'' tiempo del intervalo del timer en milisegundos.
| + | |
| − | :''TimerEnabled'' para que el timer se dispare.
| + | |
| − | :''TimerAlwaysFires'' Booleano que puede activa el timer aunque la aplicación no esté en la pantalla.
| + | |
| − | ;Events
| + | |
| − | Timer()
| + | |
| − | :Evento que se produce cuando el timer es disparado
| + | |
| | | | |
| − | ;Metodos
| + | [[Image:DesignerPalete.png|RTENOTITLE]] |
| − | SystemTime()
| + | |
| − | The phone's internal time in milliseconds
| + | |
| − | Now()
| + | |
| − | The instant in time read from phone's clock
| + | |
| − | MakeInstant(Text from)
| + | |
| − | Make an instant specified by MM/DD/YYYY hh:mm:ss or MM/DD/YYYY or hh:mm.
| + | |
| − | MakeInstantFromMillis(Number millis)
| + | |
| − | Make an instant specified by time in milliseconds
| + | |
| − | GetMillis(instant)
| + | |
| − | The instant in time measured as milliseconds since 1970
| + | |
| − | AddSeconds(instant, Number seconds) AddMinutes(instant, Number minutes) AddHours(instant, Number hours)
| + | |
| − | AddDays(instant, Number days) AddWeeks(instant, Number weeks)
| + | |
| − | AddMonths(instant, Number months) AddYears(instant, Number years)
| + | |
| | | | |
| − | Duration(Calendar start, Calendar end) Second(Calendar instant) Minute(Calendar instant)
| + | *Cada componente tiene |
| − | Hour(Calendar instant) DayOfMonth(Calendar instant) Weekday(Calendar instant)
| + | **Metodos |
| − | WeekdayName(Calendar instant) Month(Calendar instant) MonthName(Calendar instant)
| + | **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) |
| | | | |
| − | Year(Calendar instant) FormatDateTime(Calendar instant)
| + | [[Image:ComponentesApp.png|RTENOTITLE]] |
| − | FormatDate(Calendar instant) FormatTime(Calendar instant)
| + | |
| | | | |
| − | ===Image===
| + | *Analizaremos cada grupo de componentes de forma individual |
| − | *Es un componente para representar una imagen | + | |
| − | *La imagen puede ser posteriormente modificada. La imagen se puede mostrar en el diseñador o en el editor de bloques
| + | |
| − | ;Propiedades.
| + | |
| − | :picture , visible, height, width
| + | |
| − | *'''Picture''' representa la ubicación del fichero que muestra el componente de imagen. '''visible''' booleano que indica si se muestra o no la imagen
| + | |
| − | *Si se quiere cargar una imagen en el editor de bloques (durante la ejecución), previamente ha de ser cargada en la nube
| + | |
| − | [[Imagen:selecionarImagen.png]]
| + | |
| − | *Las propiedades de alto y ancho se pueden adaptar al contenedor
| + | |
| − | [[Imagen:tamanoImagen.png]]
| + | |
| | | | |
| − | ===Label=== | + | == App Inventor Designer == |
| | | | |
| − | *Es un componente para mostrar una '''etiqueta''' en pantalla; Se visualiza el contenido de la propiedad '''text''' | + | *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. |
| − | ;Propiedades
| + | *Si tenemos el teléfono conectado lo iremos viendo también en el móvil |
| − | :''BackgroundColor'' Color del fondo
| + | *En la parte superior tenemos diferentes opciones típicas de un editor (guardar....) |
| − | :''TextColor'' Color del texto
| + | |
| − | :''FontBold'' Fuente en negrita
| + | |
| − | :''FontItalic'' Fuente en cursiva
| + | |
| − | :''FontSize'' Tamaño de la fuente
| + | |
| − | :''FontTypeface''
| + | |
| − | :''Height'' ''Width'' ancho y alto de la etiqueta (no de la fuente)
| + | |
| − | :''Text'' texto de la etiqueta
| + | |
| − | :''TextAlignment'' alineación del texto dentro de la etiqueta
| + | |
| − | :''Visible''
| + | |
| − | | + | |
| − | ===ListPicker===
| + | |
| − | *Este componente es un botón que muestra al usuario una lista de elementos de cadena de caracteres para que elija uno.
| + | |
| − | | + | |
| − | *Para especificar la lista de elementos se hace a través de la propiedad '''''ElementsFromString'''''; Ésta se puede modificar en el diseñador o en el editor de bloques. | + | |
| − | *Se hará especificando una serie de elemntos separado por comas. | + | |
| − | *Al hacer click el usuario en este tipo de botón aparecerá en una ventana nueva la lista de opciones.
| + | |
| − | [[Imagen:PropiedadesListPicker.png]]
| + | |
| − | | + | |
| − | ;Propiedades
| + | |
| − | :Selection
| + | |
| − | *Elemento de la lista seleccionado.
| + | |
| − | :ElementsFromString
| + | |
| − | *Lista separada por comas de elementos a mostrar cuando se despliegue la lista.
| + | |
| − | :BackgroundColor FontBold FontItalic FontSize FontTypeface TextColor
| + | |
| − | :Height Width Text TextAligment Visible
| + | |
| − | *Todas estas propiedades son sobre el botón para desplegar opciones.
| + | |
| − | ;Eventos
| + | |
| − | AfterPicking()
| + | |
| − | :El usuario ha seleccionado un elemento de la lista.
| + | |
| − | BeforePicking()
| + | |
| − | :El usuario ha pulsado el botón para seleccionar pero aún no ha seleccionado ningún elemento.
| + | |
| − | GotFocus()LostFocus()
| + | |
| − | :El botón ha ganado o perdido el foco
| + | |
| − | | + | |
| − | ===PaswordTextBox===
| + | |
| − | *Caja de texto donde se oculta con caracteres especiales el texto escrito en él.
| + | |
| − | | + | |
| − | Si Text está en blanco, puede utilizar la propiedad Hint para proporcionar al usuario una sugerencia de lo que puede escribir. La Hint aparece como texto débil en el cuadro. | + | |
| − | | + | |
| − | | + | |
| − | ;Propiedades
| + | |
| − | BackgroundColor Enabled FontBold FontItalic FontSize FontTypeface
| + | |
| − | Height Width TextAlignment TextColor Visible
| + | |
| − | :Propiedades típicas de aspecto, etc.
| + | |
| − | Hint
| + | |
| − | :Sugerencia sobre la contraseña, se utiliza si '''text''' está en blanco.
| + | |
| − | ;Eventos
| + | |
| − | GotFocus() LostFocus()
| + | |
| − | :Perder o ganar el foco
| + | |
| − | | + | |
| − | ===Screen===
| + | |
| − | *No es un objeto que aparezca en la paleta
| + | |
| − | *Es el contenedor de mayor nivel y siempre está. El sistema lo incluye de forma transparente para la desarrolladora de la aplicación
| + | |
| − | *Cada proyecto tiene una pantalla, llamada '''''Screen1''''', y este nombre no puede ser cambiado.
| + | |
| − | | + | |
| − | ;Propiedades
| + | |
| − | BackgroundColor BackgroundImage Height
| + | |
| − | :Color del fondo de la pantalla.
| + | |
| − | | + | |
| − | icon
| + | |
| − | :icon representa en fichero que se utilizará como icono de la aplicación
| + | |
| − | :Debe ser png o jpg y de extensión pequeña p.e. 48*48.
| + | |
| − | Scrollable
| + | |
| − | :Con esta propiedad podemos hacer que el tamaño de la ventana exceda el del móvil, apareciendo una barra de desplazamiento vertical .
| + | |
| − | Title
| + | |
| − | :Es un texto que aparecerá en la parte superior izquierda del dispositivo donde se ejecuta la aplicación, cuando ésta esté corriendo.
| + | |
| − | Width
| + | |
| − | ;Eventos
| + | |
| − | Initialize()
| + | |
| − | :Importante evento que se lanza cuando la aplicación se inicia.Todo lo que queramos hacer al principio de la aplicación lo debemos indicar aquí.
| + | |
| − | ErrorOccurred(component, functionName, number errorNumber, message)
| + | |
| − | :Evento que se dispara cuando se produce un error.
| + | |
| − | :El evento ErrorOccurred se utiliza actualmente para un pequeño conjunto de errores, incluyendo:
| + | |
| − | #Errores que se producen el componente NXT de LEGO Mindstorms
| + | |
| − | #Errores que se producen en los componentes Bluetooth
| + | |
| − | #Errores que se producen en el componente de Twitter
| + | |
| − | #Errores que se producen en el componente de SoundRecorder
| + | |
| − | #ActivityStarter - cuando se llama a startActivity, pero no hay ninguna actividad que se corresponde a las propiedades definidas.
| + | |
| − | #LocationSensor - cuando LatitudeFromAddress o LongitudeFromAddress fallan.
| + | |
| − | #Player - al establecer la fuente en propiedades, falla.
| + | |
| − | #Sound - al establecer la fuente en propiedades, falla, o bien, falla durante la reproducción.
| + | |
| − | #VideoPlayer - al establecer la fuente en propiedades, falla.
| + | |
| − | *Por esos errores, el sistema le mostrará una notificación por defecto, con un número de error y un mensaje. Se puede utilizar este controlador de eventos para prescribir un comportamiento de error diferente al predeterminado, poniendo a prueba ErrorNumber y tomar la acción apropiada.
| + | |
| − | | + | |
| − | ===TextBox===
| + | |
| − | *Componente para insertar cadena de caracteres
| + | |
| − | | + | |
| − | | + | |
| − | ;Propiedades
| + | |
| − | BackgroundColor height TextColor Visible Width
| + | |
| − | :Propiedades cuyo significado es el visto anteriormente, pero aplicado a la caja de texto
| + | |
| − | Enabled FontBold FontItalic FontSize FontTypeface TextAlignment
| + | |
| − | :Estas propiedades sólo están disponibles en el diseñador, no son modificables en el editor de bloques. Su significado es el visto anteriormente
| + | |
| − | Hint
| + | |
| − | :Muestra un texto suave como sugerencia sobre lo que se debe insertar.
| + | |
| − | MultiLine
| + | |
| − | :Para que la cadena de caracteres pueda ocupar varias líneas; Cada una de ellas se insertará con la tecla return.
| + | |
| − | Si es '''false''', la tecla return quita el foco de la caja de texto, cerrando el teclado.Si es '''true''' , la aplicación debe utilizar el método HideKeyboard o confiar en que el usuario pulse la tecla Atrás.
| + | |
| − | NumbersOnly
| + | |
| − | :Sólo deja insertar números, mostrando exlusivamente el teclado numérico; No obstante se puede utilizar '''SetTextAt''' para introducir cualquier texto.
| + | |
| − | Text
| + | |
| − | :El texto en el cuadro de entrada, que se puede establecer por el programador en el diseñador o el Editor de bloques, o puede ser introducido por el usuario.
| + | |
| − | | + | |
| − | ;Eventos
| + | |
| − | GotFocus()LostFocus()
| + | |
| − | ;Métodos
| + | |
| − | HideKeyboard()
| + | |
| − | :Oculta el teclado. Sólo los cuadros de texto multilínea lo necesitan.
| + | |
| − | | + | |
| − | ===TinyDB===
| + | |
| − | *Elemento no visible que permite la persistencia de datos después de que la aplicación deje de funcionar, y tomar valores de datos de él cuando la aplicación empiece a funcionar. Es una sencilla base de datos.
| + | |
| − | Estos valores se pueden asignar a variables al iniciar la aplicación
| + | |
| − | método '''inizialice()''' del componente '''screen''' visto anteriormente
| + | |
| − | | + | |
| − | <!-- PENDIENTE Aclarar todo esto de forma resumida-->
| + | |
| − | *Los elementos de datos se almacenan en las etiquetas. Para guardar un elemento de datos, se debe especificar la etiqueta bajo la que debe ser almacenado bajo. Posteriormente, se puede recuperar el elemento de datos que se almacena en una etiqueta determinada. Si no hay ningún valor almacenado en una etiqueta, entonces el valor devuelto es el texto vacío. En consecuencia, para ver si una variable tiene un valor almacenado en ella, comprobar si el valor de retorno es igual a la de texto vacío (es decir, un cuadro de texto sin texto, en blanco).
| + | |
| − | | + | |
| − | *Sólo hay un almacén de datos por aplicación. Si usted tiene múltiples componentes TinyDB, se utilizará el mismo almacén de datos. Para obtener el efecto de almacenes separados, utilice claves diferentes. Además, cada aplicación tiene su propio almacén de datos. No se puede utilizar TinyDB para pasar los datos entre dos aplicaciones diferentes en el teléfono.
| + | |
| − | | + | |
| − | Propiedades
| + | |
| − | ninguno
| + | |
| − | Eventos
| + | |
| − | ninguno
| + | |
| − | Métodos
| + | |
| − | StoreValue(text tag, valueToStore)
| + | |
| − | Almacenar el valor en la etiqueta dada. La tag debe ser una cadena de texto, el valor puede ser una cadena o una lista.
| + | |
| − | GetValue(text tag)
| + | |
| − | Obtiene el valor que se almacena bajo la etiqueta dada. Si el valor no se almacena, se devuelve el texto vacío.
| + | |
| | | | |
| − | ==Media==
| + | [[Image:DesignerViewer.png|RTENOTITLE]] |
| − | [[Image:ComponentesMedia.png]] | + | |
| − | ==Animation==
| + | |
| − | [[Image:ComponentesAnimation.png]]
| + | |
| − | ==Social==
| + | |
| − | [[Image:ComponentesSocial.png]]
| + | |
| − | ==Sensor==
| + | |
| − | [[Image:ComponentesSensor.png]]
| + | |
| − | ==Screen Arrangement==
| + | |
| − | [[Image:ComponentesScreen.png]]
| + | |
| − | ==LEGO MINDSTORMS==
| + | |
| − | [[Image:ComponentesLego.png]]
| + | |
| − | ==Other stuff==
| + | |
| − | [[Image:ComponentesStuff.png]]
| + | |
