Ventanas
Opción que se encuentra en el menú superior del XoneCloud Studio que nos permite movernos a través de las ventanas que conforman la estructura del Xone Cloud Studio, y al seleccionarla muestra el siguiente submenú:
Las opciones a las que podemos acceder son:
Opciones Menú Ventanas | Descripción |
---|---|
Inicio | Activa el panel central y principal del Xone Cloud Studio, que contiene el editor del código XML. |
Solución | Activa y posiciona el cursor en el panel del Cloud Studio en la pestaña Solution y ficheros del proyecto, ubicados en forma de explorador de ficheros. |
Archivos | Activa y nos posiciona el cursor en el panel del Cloud Studio que contiene la pestaña File System del proyecto, ubicados en forma de explorador de ficheros. |
Propiedades | Activa y nos posiciona en el panel de diseño de propiedades Properties que conforman el proyecto. |
Caja de Herramientas | Activa y nos posiciona en el panel que contiene la caja de herramientas Toolbox del Xone Cloud Studio. |
Estructura del proyecto | Activa y posiciona en el panel que contiene la pestaña Structure del Xone Cloud Studio. |
Eventos | Activa y posiciona en el panel que contiene la pestaña Events. |
Restaurar Configuración | Restaura la configuración por defecto de las distintas ventanas que conforman el Xone Cloud Studio. |
Info Xone Studio | Muestra la versión actual del Xone Cloud Studio con el que estamos trabajando. |
A continuación detallaremos cada una de las distintas ventanas que conforman la estructura del Xone CloudStudio y sus características principales:
Inicio
Ventana central y principal de edición del Xone Cloud Studio, donde se muestra el proyecto abierto en cuestión, no es más que el editor de texto donde se pueden ver los códigos XML. A medida que nos movemos por el árbol del panel izquierdo Solution y File System, se irán creando pestañas en la parte superior. Esta distribución de pestañas se guardará siempre cuando cerremos el proyecto, lo cual al volver a abrirlo se nos ha guardado la última distibución que dejamos.
Solución
En esta ventana encontraremos la distribución en forma de explorador de archivos de todos los ficheros,archivos, colecciones que conforman nuestro proyecto. Colecciones como Empresas, Entrada App, Usuarios, las propias colecciones definidas por el desarrollador, los cssstyles, imagenes, base de datos, etc.
En la parte superior de la misma aparece una pequeña ventana de búsqueda que nos permite buscar cualquier elemento contenido en la misma.
En la parte derecha de cada uno de los ficheros o colecciones podemos encontrar los siguientes íconos cuyas funciones son:
Renombra fichero o colección
Copiar fichero o colección
Eliminar archivo o Colección
Descargar fichero o colección
Archivos
Ventana Archivos o File System, situada en el panel de la izquierda, pestaña a la derecha de la ventana Solution. La ventana de Archivos es la que contiene todos los elementos de nuestro proyecto en formato de carpetas, contiene los ficheros .xml y .xne por cada colección creada. Aquí es donde está la distribución de nuestro proyecto de forma unificada. Es la visualización de cada fichero y carpeta de nuestro proyecto.
En la parte superior de la misma aparece una pequeña ventana de búsqueda que nos permite buscar cualquier elemento contenido en la misma.
En la parte derecha de cada uno de los ficheros o colecciones podemos encontrar de forma similar a la ventana de Solution, diferentes íconos con las siguientes funciones:
Renombra fichero o colección
Copiar fichero o colección
Eliminar archivo o Colección
Descargar fichero o Colección
Igualmente encontramos el siguiente botón que nos permite adicionar cualquier fichero que nos interese incluir y se encuentre en cualquier fuente externa al proyecto. Al seleccionar, se visualiza la siguiente pantalla:
Definiremos en esta pantalla los elementos siguientes:
Nuevo Fichero: Nombre que daremos al nuevo fichero a incluir en el proyecto.
Crear como carpeta: Nos permite adicionar el elemento en forma de carpeta.
Browse: Nos remite a la ventana de selección habitual de ficheros, lo cual también puede hacerse arrastrando dicho fichero a la ventana central.
Propiedades
Muestra la ventana del mismo nombre, situada en panel derecho inferior.
Esta función nos muestra el nombre y tipo de propiedades que contienen los elementos visuales.
Para ello, si nos colocamos encima de un prop, por ejemplo, como en la siguiente imagen, en la pantalla de propiedades nos mostrará todas las propiedades de ese prop que hayamos señalado, como descripción, color, tamaño, anchura, alineación, márgenes, tipo de letra…etc:
Ejemplo propiedades de un prop tipo B:
- Título Imagen
- Bordes de Etiqueta
- Alineación de texto
Colores
- Color Etiqueta
- Fondo Etiqueta
Fuentes
- Tamaño de Fuente
- Nombre de Fuente
- Fuente BOLD
Tamaño y Posición
- Ancho Etiqueta
- Ancho
- Alto
- Margen Izquierdo
- Margen derecho
- Margen Superior
Caja de Herramientas
Esta opción nos permite acceder a la ventana clásica Toolbox de diseño que contiene cada uno de los controles que permite Xone usar en sus proyectos.
- Controles Básicos como: Etiqueta, Botón, Caja de Texto, CheckBox, Foto, Numérico, Imagen, fecha, Lupa de búsqueda, etc.
- Layout: Aquellos destinados a los tipo frames en todas sus variedades, frame flotante, frame múltiple, frame triple, frame doble derecha, frame doble izquierda, etc.
- Controles avanzados: Campo firma, Videos, Códigos de Barras, Adjuntar archivos, etc.
- Contenedores: Controles como drawers, Calendario, Mapas, Gráficos, etc.
Cada una de estas ventanas puede ser cerrada, minimizada y moverse, de manera similar a cuando tratamos ventanas de entorno Windows.
Estructura del Proyecto
Ventana que muestra estructura del proyecto, según la colección donde se esté posicionado. Va mostrando en forma de árbol, por ejemplo; los grupos (G), dentro de los grupos los frames (F) de ese grupo, dentro de los frames, las propiedades definidas dentro de los frames ((b)-En este ejemplo porque solo hay definido propiedades tipo botones.)
Eventos
Ventana que muestra los eventos definidos en la colección. Se aprecia de la siguiente forma:
Para añadir un nuevo evento a la colección, utilizar el ícono . Mostrará la siguiente pantalla:
En esta pantalla será necesario definir :
- Origen de evento que queremos añadir a colección actual
- Evento que queramos añadir
Restaurar configuración
Opción que permite restablecer el formato de cada una de las ventanas anteriores a su configuración por defecto.
Info XoneStudio
Opción que muestra la versión actual del XOne Studio con el que estamos trabajando.
Otras opciones disponibles en barra superior de Menú Principal
Buscar
En esta opción situada en la barra superior del Menú principal, nos permite la búsqueda de cualquier cadena de texto en nuestro proyecto, podemos seleccionar si lo queremos en el documento actual en que nos encontramos posicionado o en todo y cada uno de los documentos del proyecto.
Copiar
Opción que permite hacer copia al dispositivo de los nuevos cambios que hemos hecho en el proyecto o volver a copiar el proyecto al dispositivo en su totalidad. Esto se genera en el momento que queramos depurar o probar nuestro proyecto en el dispositivo.
Cerrar proyecto
Teclas de Controles para Acciones Rápidas
Estas acciones se podrán realizar combinando varias teclas, estas funciones son válidas utilizando el Cloud Studio en el Navegador Chrome
Teclas | Acción |
---|---|
CONTROL + / | COMENTAR LINEAS |
CONTROL + W | CERRAR VENTANA ACTIVA DEL NAVEGADOR |
CONTROL + E | LLEVA EL CURSOR A LA BARRA DEL BUSCADOR, Y TE ABRE EL BUSCADOR DE GOOGLE |
CONTROL + R | RECARGAR LA PAGINA |
CONTROL + T | ABRE UNA NUEVA PESTAÑA |
CONTROL + U | CONVERTIR PALABRA EN MAYUSCULAS |
CONTROL + O | ABRIR FICHERO |
CONTROL + P | IR AL FINAL DE ESE NODO |
CONTROL + A | SELECCIONAR TODO |
CONTROL + S | GUARDAR ESA PAGINA ABIERTA. NO GUARDA EN CLOUDSTUDIO, SINO PARA DESCARGAR FICHERO |
CONTROL + D | BORRA LA LINEA EN LA QUE ESTA EL CURSOR |
CONTROL + F | ABRE VENTANA PARA BUSCAR EN LA VENTANA QUE ESTES DE LA PAGINA ENTERA. |
CONTROL + G | ABRE VENTANA PARA BUSCAR EN TODA LA PESTAÑA |
CONTROL + H | ABRE VENTANA PARA REEMPLAZAR |
CONTROL + J | ABRE VENTANA DE DESCARGAS |
CONTROL + L | ABRE VENTANA PARA INDICAR A LA LINEA QUE QUIERES IR |
CONTROL + Z | DESHACER |
CONTROL + C | COPIAR LO SELECCIONADO |
CONTROL + V | PEGAR LO COPIADO |
CONTROL + N | ABRE UNA VENTANA NUEVA |