0

Conociendo el vendor Playgroung

29Oct
en Code Snippets, Componente visual, CRIAX-SDK, Documentación, Firefox OS, Herramientas, Javascript, Tutoriales, XUL

Como se anunció en el post “Liberada CRIAX-SDK 1.0” CRIAX-SDK cuenta entre otras cosas nuevas con un vendor llamado Playground.

Si no estás para leer el post:

Juega con él un rato.

Playground es una modificación de la aplicación Playground del framework Qooxdoo.

Un vendor no es más que una herramienta que facilita el trabajo con la platforma. En el caso que nos ocupa en este post Playground se encarga de desarrollar interfaces para las aplicaciones creadas con CRIAX-SDK, ya sean de escritorio:

Playfround app escritorio

Playground app escritorio

o webapp para Firefox OS:

Playfround webapp

Playground webapp

Este vendor es muy sencillo de utilizar pues se compone de 2 opciones (para app de escritorio y webapp)

Opciones

Opciones

y 3 paneles principalmente (existe un 4 panel que es para mostrar los logs de ejecución de las aplicaciones):

Log de las aplicaciones

Log de las aplicaciones

Inicialmente se encuentran disponibles 2 ejemplos, uno para cada tipo de aplicación. En el panel de la izquierda se puede ver debajo de la categoría Static, el nombre de cada uno de los ejemplos:

Ejemplo

Ejemplo

Al seleccionarlo, nos aparece el código del mismo en el panel del medio, donde podremos editarlo (se verá mas adelante). Una vez seleccionado el ejemplo podemos ejecutarlo para apreciar como funciona. Eso lo logramos dando click en el boton Run:

Run

Run

En el panel de la derecha podremos apreciar el resultado:

Correr una aplicación

Correr una aplicación

Opciones de aplicación:

Existen como se dijo anteriormente 2 opciones de desarrollo de interfces con Playground:

Desktop: para el desarrollo de interfaces de aplicaciones de escritorio

Mobile: para el desarrollo de interfaces de aplicaciones Firefox OS

Botones de la barra de herramientas:

Run: Para ejecutar el código del ejemplo seleccionado

Samples: Para ocultar el panel de ejemplos y así tener más espacios en el panel de edición de código.

Log: Para mostrar y ocultar el panel de mensajes de log.

Paneles:

Samples:

En el panel de ejemplo se listan todos los ejemplos de un tipo de aplicación. El mismo tiene las opciones en la parte de abajo, de Salvar, Salvar como, Eliminar y Renombrar. Como es de imaginar de nada serviría esta herramienta sin la posibilidad de agregar más ejemplos y poder modificarlos o eliminarlos.

Lo primero para tener nuestro propio ejemplo es:

Señalar el ejemplo de Hola Mundo

1-Señalar el ejemplo de Hola Mundo

Salvar como

2-Save As

3- Una vez que tengamos nuestro código salvado, simplemente vamos al botón de Run. En el panel a la derecha se mostrará el resultado.

3-Ejemplo salvado

3-Ejemplo salvado

Cada vez que relicemos un cambio en nuestro código por supuesto que tenemos que salvar, lo hacemos en el primer botón abajo a la izquierda en el panel de Samples.

Save

Save

Si queremos eliminar un código, lo señalamos y seleccionamos el 3 botón de Samples (el cestico).

Eliminar

Delete

Por último en caso de que queramos renombrar algun código, lo hacemos en el último botón a la derecha, nos saldrá un cuadro de diálogo, ponemos el nombre nuevo y OK.

Rename

Rename

Source Code:

Este panel es el encargado de recibir el código a visualizar, el mismo está compuesto por la librería Ace de JavaScript. Tiene facilidades como coloreo de sintáxis, compresión de bloques de código, resalta la línea en la que se está trabajando, nos muestra errores y advertencias en nuestro código, entre otras cosas.

Source code

Source code

Panel Visual:

En este panel se muestra el resultado del código desarrollado, ademas del log de incidencias.

Panel visual

Panel visual

El panel visual tiene 2 opciones, una mostrar el log del código desarrollado (muy importante cuando cometemos errores), que nos muestra los mensajes en azul si todo salió OK y en rojo si hubo algún error en el código.

Error en el código

Error en el código

Como se puede apreciar en la imagen anterior, este panel de Log, tiene un botón arriba a la derecha que permite borrar las entradas del mismo.

Por otro lado el panel visual, tiene un pequeño boton arriba a la derecha, que amplía el panel a todo el ancho de la pantalla y si tenemos el Log abierto tambien.

Maximar/Minimizar

Maximar/Minimizar

Por último, una pequeña diferencia entre el panel visual de las aplicaciones de escritorio y las webpp. Las webapp para móviles, tiene un select en la barra de título que permite ajustar el ancho del contenido, para distintas medidas como son:

  • Fit to viewport (Ajuste completo a la pantalla)
  • 320×480 FirefoxOS
  • 320×480 IPhone3+4, Android
  • 480×320 IPhone3+4, Android
  • 320×568 IPhone5
  • 568×320 IPhone5
  • 480×800 Android table
  • 800×480 Android table
  • 380×685 Android table
  • 685×320 Android table
Medidas de pantallas

Medidas de pantallas

Bonificación

Plugin para Firefox de vendor Playground

Playground online.

En el caso de la opción online, pueden probar los códigos y los errores ponerlos en: https://ctrl-c.prod.uci.cu/

Para aquellos que no puedan ver la version móvil, aquí les dejo las versiones de escritorio.

Playground escritorio window

Playground escritorio linux

Dejar un comentario