{{indexmenu_n>1}} ===== 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ú: {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:menu_vent.png|}} Las opciones a las que podemos acceder son: ^ Opciones Menú Ventanas ^ Descripción ^ | [[wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:start#Inicio|Inicio]] | Activa el panel central y principal del Xone Cloud Studio, que contiene el editor del código XML. | | [[wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:start#Solución|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. | | [[wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:start#Archivos|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. | | [[wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:start#Propiedades|Propiedades]] | Activa y nos posiciona en el panel de diseño de propiedades //Properties// que conforman el proyecto. | | [[wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:start#Caja de Herramientas|Caja de Herramientas]] | Activa y nos posiciona en el panel que contiene la caja de herramientas //Toolbox// del Xone Cloud Studio. | | [[wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:start#Estructura del proyecto|Estructura del proyecto]] | Activa y posiciona en el panel que contiene la pestaña //Structure// del Xone Cloud Studio. | | [[wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:start#Eventos|Eventos]] | Activa y posiciona en el panel que contiene la pestaña //Events//. | | [[wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:start#Restaurar Configuración|Restaurar Configuración]] | Restaura la configuración por defecto de las distintas ventanas que conforman el Xone Cloud Studio. | | [[wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:start#Info Xone 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 ==== {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:pant_inicio.png|}} 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 ==== {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:vent_solution.png|}} 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 {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:btn_busca.png|}}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: {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:btn_editar.png|}} Renombra fichero o colección \\ {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:btn_copiar.png|}} Copiar fichero o colección \\ {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:btn_eliminar.png|}} Eliminar archivo o Colección \\ {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:btn_decargar.png|}} 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 {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:btn_busca.png|}}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: \\ {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:btn_editar.png|}} Renombra fichero o colección \\ {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:btn_copiar.png|}} Copiar fichero o colección \\ {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:btn_eliminar.png|}} Eliminar archivo o Colección \\ {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:btn_decargar.png|}} Descargar fichero o Colección \\ Igualmente encontramos el siguiente botón {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:btn_anadir.png|}}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: {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:anadir_elementos.png?750|}} \\ 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. {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:btn_finalizar.png|}} Finaliza la operación y abandona la pantalla. ==== 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: \\ {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:vent_propiedades.png|}} \\ Tributos visuales * 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. \\ {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:vent_toolbox.png|}} \\ * Controles Básicos como: Etiqueta, Botón, Caja de Texto, CheckBox, Foto, Numérico, Imagen, fecha, Lupa de búsqueda, etc. \\ {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:basicos.png|}} \\ * 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. \\ {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:layout.png|}} \\ * Controles avanzados: Campo firma, Videos, Códigos de Barras, Adjuntar archivos, etc. \\ {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:avanzados.png|}} \\ * 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.) {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:estructure.png|}} ==== Eventos ==== \\ Ventana que muestra los eventos definidos en la colección. Se aprecia de la siguiente forma: {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:eventos.png|}} Para añadir un nuevo evento a la colección, utilizar el ícono {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:btn_anadir1.png|}}. Mostrará la siguiente pantalla: \\ {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:crea_eventos.png?750|}} \\ En esta pantalla será necesario definir : * Origen de evento que queremos añadir a colección actual * Evento que queramos añadir {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:btn_crear_evento.png|}} Crea evento y finaliza proceso. \\ {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:btn_cancelar.png|}} Cancela añadir evento. ==== 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 === \\ {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:barra_buscar.png|}} \\ 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 === \\ {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:copiar_vent.png|}} \\ 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 === \\ {{:wiki:2.-desarrollo-app:2.1.-ide-desarrollo:cloudstudio:ventanas:cerrar_proy.png|}} Este ícono nos permite cerrar el proyecto fácilmente, actúa como ícono de atajo para cerrar todo. ==== 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 |