Difference between revisions of "Introducción Parte 1"

From Lianjapedia
Jump to: navigation, search
(→‎Llenar una sección Grid Con los datos)
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
Este artículo ofrece una introducción general a Lianja y Lianja App Builder. El público objeto es para principiantes que no saben nada acerca de Lianja y quieren obtener una comprensión de la plataforma de aplicaciones Lianja y cómo desarrollar aplicaciones utilizando Lianja App Builder.
 
Este artículo ofrece una introducción general a Lianja y Lianja App Builder. El público objeto es para principiantes que no saben nada acerca de Lianja y quieren obtener una comprensión de la plataforma de aplicaciones Lianja y cómo desarrollar aplicaciones utilizando Lianja App Builder.
  
−
==See Also==
+
==Vea También==
−
[http://videos.lianja.com/video/71411227 Vea el vídeo]
+
[[Getting Started (Video)]]
  
 
[[Getting Started Part 1|Read this in English]]
 
[[Getting Started Part 1|Read this in English]]
 +
 +
[[Introducción Parte 2]]
 +
 +
[[Introducción Parte 3]]
 +
 +
[[Introducción Parte 4]]
  
 
==Lianja App Builder==
 
==Lianja App Builder==
 +
[[{{ns:file}}:getstart1_1.png|450px|thumb|left|link={{filepath:getstart1_1.png}}|Lianja App Builder - Home]]
  
−
[[{{ns:file}}:gs1_1.png|450px|thumb|left|link={{filepath:gs1_1.png}}|Lianja App Builder - Home]]
 
  
  
−
El Lianja App Builder está contenido dentro de una sola ventana que consta de varios Workspace Panels (paneles de espacio de trabajo) que se pueden activar haciendo clic en las pestañas de selección de la Modebar (Barra Vertical Izquierda).
 
  
−
Se empieza en el App Center en el Home Workspace.
+
El Lianja App Builder está contenido dentro de una sola ventana que consta de varios '''Workspace Panels''' (paneles de espacio de trabajo) que se pueden activar haciendo clic en las pestañas de selección de la '''Modebar''' (barra vertical izquierda).
  
−
Aquí tiene acceso con un clic a las aplicaciones publicadas y las acciones clave de desarrollo de aplicaciones.
+
Se empieza en el '''App Center''' en el panel '''Home'''.
 +
 
 +
Aquí tiene acceso con un clic a las aplicaciones publicadas, la documentación en línea y las acciones clave de desarrollo de aplicaciones.  
  
 
<br clear=all>
 
<br clear=all>
  
−
===Page Builder===
+
[[{{ns:file}}:getstart1_1b.png|450px|thumb|left|link={{filepath:getstart1_1b.png}}|Open Lianja Demo App]]
  
−
[[{{ns:file}}:gs1_2.png|450px|thumb|left|link={{filepath:gs1_2.png}}|Pages Workspace - Page Builder]]
 
  
  
−
El Page Builder es el centro de coordinación para la construcción de aplicaciones de escritorio y web en Lianja.
 
  
−
El Page Builder es el diseño visual y el panel de área de trabajo de desarrollo y a ésto es lo que vamos a concentrarnos en este tutorial.  
+
Para iniciar la aplicación de ejemplo 'lianjademo', haga clic en su ícono 'Lianja Demo' en el '''App Center'''.
  
−
Para iniciar la Aplicación de ejemplo lianjademo, haga clic en su ícono en el App Center. 
+
El panel '''Pages''' se selecciona automáticamente y la aplicación 'lianjademo' se carga en el '''Page Builder'''.
−
 
+
−
El Pages Workspace se selecciona automáticamente y la App lianjademo se carga en el Page Builder.
+
  
 
<br clear=all>
 
<br clear=all>
  
 +
===Page Builder===
 +
El Page Builder es el centro de coordinación para la construcción de aplicaciones de escritorio y web en Lianja.
  
−
[[{{ns:file}}:gs1_3.png|450px|thumb|left|link={{filepath:gs1_3.png}}|Pages Workspace - Page]]
+
El Page Builder es el diseño visual y el panel de área de trabajo de desarrollo y a ésto es lo que vamos a concentrarnos en este tutorial.
  
 +
Usando el Page Builder puede crear visualmente una aplicación centrada en los datos que se pueden combinar y otros contenidos interesantes desde una amplia variedad de fuentes de datos, bases de datos, servicios web usando REST, y otras fuentes de datos personalizados.
  
−
Usando el Page Builder puede crear visualmente una aplicación centrada en los datos que se pueden combinar y otros contenidos interesantes desde una amplia variedad de fuentes de datos, bases de datos, servicios web usando REST, y otras fuentes de datos personalizados.  
+
Si usted no es un programador pero tiene un buen conocimiento de dominio de su negocio, lo más probable es que sea capaz de construir una aplicación que no requiere programación en lo absoluto.
  
−
Si usted no es un programador pero tiene un buen conocimiento de dominio de su negocio, lo más probable es que sea capaz de construir una aplicación que no requiere programación en lo absoluto.
+
¿Cómo es posible ésto se preguntará?
−
 
+
−
¿Cómo es posible ésto se preguntará?  
+
  
 
Usted encontrará en el transcurso de estos tutoriales cómo Lianja tiene una visión radicalmente diferente del proceso de desarrollo de aplicaciones en comparación con otras bases de datos y herramientas de desarrollo web.
 
Usted encontrará en el transcurso de estos tutoriales cómo Lianja tiene una visión radicalmente diferente del proceso de desarrollo de aplicaciones en comparación con otras bases de datos y herramientas de desarrollo web.
  
−
<br clear=all>
+
[[{{ns:file}}:getstart1_2.png|450px|thumb|left|link={{filepath:getstart1_2.png}}|Pages Workspace]]
  
−
===Páginas===
 
  
−
[[{{ns:file}}:gs1_4.png|450px|thumb|left|link={{filepath:gs1_4.png}}|Page Components]]
 
  
  
−
Como se mencionó anteriormente, se usa Page Builder para construir visualmente una aplicación centrada en los datos.  
+
Como se mencionó anteriormente, se usa Page Builder para construir visualmente una aplicación centrada en los datos.
  
−
En Lianja, las aplicaciones se componen de una variedad de elementos visuales.  
+
En Lianja, las aplicaciones se componen de una variedad de elementos visuales.
  
−
Usando Page Builder, usted arregla estos elementos visuales en una aplicación.  
+
Usando Page Builder, usted arregla estos elementos visuales en una aplicación.
  
−
El elemento base es una Página (Page).  
+
El elemento base es una Page (página).
  
−
Las Páginas se componen de Secciones (Sections).
+
Las Páginas se componen de Sections (secciones).
  
 
<br clear=all>
 
<br clear=all>
  
−
===Secciones===
+
[[{{ns:file}}:getstart1_3.png|450px|thumb|left|link={{filepath:getstart1_3.png}}|Page]]
 +
 
  
−
[[{{ns:file}}:gs1_5.png|450px|thumb|left|link={{filepath:gs1_5.png}}|Form Section Components]]
 
  
  
−
Hay varios tipos de secciones pre-construidas utilizadas para ayudar a acelerar su desarrollo: Form (Forma), Grid (Cuadrícula), WebView (Vista Web), Image Strip (Tira de Imagen), Canvas (Lienzo) y TabView. una sección Form se compone de Fields (campos) y Gadgets (Dispositivos).
+
Hay varios tipos de secciones pre-construidas utilizadas para ayudar a acelerar su desarrollo: Form (forma), Grid (cuadrícula), WebView (vista web), Image Strip (tira de imagen), Canvas (lienzo) y TabView. una sección Form se compone de Fields (campos) y Gadgets.
  
−
Para desarrolladores profesionales, también se puede desarrollar secciones Personalizadas y dispositivos Personalizados en el contexto, Visual FoxPro, JavaScript, PHP o Python y reutilizarlos a través de muchas de las aplicaciones que construya.
+
Para desarrolladores profesionales, también se puede desarrollar secciones y Gadgets personalizados en el contexto, Visual FoxPro, JavaScript, PHP o Python y reutilizarlos a través de muchas de las aplicaciones que construya.
  
 
<br clear=all>
 
<br clear=all>
Line 78: Line 80:
 
Para que sea más fácil construir aplicaciones que se ejecutarán desde su escritorio, así como en un navegador web, Lianja tiene una característica completa Estructura de Aplicación. Este marco de aplicación es una implementación de la estructura de aplicaciones Visual FoxPro 9. Se ha extendido ampliamente para proporcionar el más moderno y fácil uso de componentes que son multi-plataforma, de lenguaje e interfaz de usuario independiente.
 
Para que sea más fácil construir aplicaciones que se ejecutarán desde su escritorio, así como en un navegador web, Lianja tiene una característica completa Estructura de Aplicación. Este marco de aplicación es una implementación de la estructura de aplicaciones Visual FoxPro 9. Se ha extendido ampliamente para proporcionar el más moderno y fácil uso de componentes que son multi-plataforma, de lenguaje e interfaz de usuario independiente.
  
−
Usted puede construir secciones y dispositivos personalizados utilizando el Marco de Aplicaciones Lianja en el contexto, Visual FoxPro, JavaScript, PHP y Python. Para detalles completos de la Estructura de Aplicación Lianja vea la documentación en el Home Workspace.
+
Usted puede construir secciones y Gadgets personalizados utilizando el Marco de Aplicaciones Lianja en el contexto, Visual FoxPro, JavaScript, PHP y Python. Para detalles completos de la Estructura de Aplicación Lianja vea la documentación en el panel '''Home'''.
  
 
==Construya su primera Aplicación Lianja==
 
==Construya su primera Aplicación Lianja==
Line 84: Line 86:
 
La forma más fácil de mostrar el poder y la simplicidad de Lianja es construyendo una aplicación!
 
La forma más fácil de mostrar el poder y la simplicidad de Lianja es construyendo una aplicación!
  
−
Regrésese al App Center en el Home Workspace hacienda clic en la ficha Home ubicado en la Modebar en el lado izquierdo de la la ventana principal o el botón herramienta Home en el Headerbar. Puede alternar entre los diferentes Workspace Panels en cualquier momento.
+
Regrésese al '''App Center''' en el panel '''Home''' hacienda clic en la ficha 'Home' ubicado en la '''Modebar''' en el lado izquierdo de la la ventana principal o el botón herramienta 'Home' en el '''Headerbar'''. Puede alternar entre los diferentes paneles en cualquier momento.  
  
 +
===Crear una Aplicación===
 +
[[{{ns:file}}:getstart1_6.png|450px|thumb|left|link={{filepath:getstart1_6.png}}|Crear una aplicación]]
  
−
===Creando una Aplicación===
 
  
−
[[{{ns:file}}:gs1_6.png|450px|thumb|left|link={{filepath:gs1_6.png}}|Create an App]]
 
  
  
−
Ahora haga clic en la opción Create an App (Crear una Aplicación).
+
Ahora haga clic en la opción 'Create an App' (Crear una Aplicación).
  
−
También puede crear aplicaciones desde el Apps Workspace Panel hacienda clic en el botón + del Actionbar del Apps Panel ubicado en la Apps Sidebar.
+
También puede crear aplicaciones desde el panel '''Apps''' hacienda clic en el botón + del actionbar de la pestaña 'Apps'.
  
 
<br clear=all>
 
<br clear=all>
  
−
[[{{ns:file}}:gs1_7.png|450px|thumb|left|link={{filepath:gs1_7.png}}|Name new App]]
+
[[{{ns:file}}:getstart1_7.png|450px|thumb|left|link={{filepath:getstart1_7.png}}|Lianja App Wizard]]
  
  
−
El diálogo Create an App se desliza desde la izquierda de la ventana principal.  
+
El panel '''Apps''' se seleccionará automáticamente y se abrirá el Lianja App Wizard.
  
−
Escriba el nombre de la Aplicación que desea crear y pulse Enter o haga clic en el botón Create (Crear).
+
Haga clic en 'Next' para continuar.
  
 
<br clear=all>
 
<br clear=all>
  
 +
[[{{ns:file}}:getstart1_7b.png|450px|thumb|left|link={{filepath:getstart1_7b.png}}|Lianja App Wizard]]
  
−
===Las Aplicaciones Lianja se componen de páginas===
 
  
−
[[{{ns:file}}:gs1_8.png|450px|thumb|left|link={{filepath:gs1_8.png}}|New App - Open Database]]
 
  
  
−
Ahora el Pages Workspace Panel le mostrará una página en blanco.  
+
Escribe un nombre para tu aplicación.
  
−
Las páginas son los elementos visuales básicos de una Aplicación y, a su vez, se dividen en Secciones (Sections).
+
También puede seleccionar el tipo o los tipos de cliente en que se ejecutará su aplicación. Los tipos también se pueden modificar en la configuración de la aplicación más adelante, si es necesario.
  
−
Haga doble clic en la base de datos de southwind en la barra lateral del panel Databases.  
+
Dejar todos los tipos seleccionados y haga clic en 'Next' para continuar.
  
−
Usted se dará cuenta que las tablas contenidas en la base de datos southwind ahora se muestran en el panel Tables.
+
<br clear=all>
 +
 
 +
[[{{ns:file}}:getstart1_7c.png|450px|thumb|left|link={{filepath:getstart1_7c.png}}|Lianja App Wizard]]
 +
 
 +
 
 +
 
 +
 
 +
Seleccione su lenguaje de programación preferido. Para aplicaciones web y móviles, seleccione 'JavaScript'.
 +
 
 +
Este es el lenguaje de programación predeterminado de la aplicación, no significa que todo el código de la aplicación debe estar escrito en ese lenguaje o que su aplicación debe incluir ningún código.
 +
 
 +
Selecciona 'JavaScript' y haga clic en 'Next' para continuar.
  
 
<br clear=all>
 
<br clear=all>
 +
 +
[[{{ns:file}}:getstart1_7d.png|450px|thumb|left|link={{filepath:getstart1_7d.png}}|Lianja App Wizard]]
 +
 +
 +
 +
 +
Opcionalmente, elija una base de datos.
 +
 +
La base de datos 'southwind' es una base de datos de ejemplo incluida en la distribución y utilizada en los tutoriales y documentación.
 +
 +
Selecciona 'southwind' y haga clic en 'Next' para continuar.
 +
 +
<br clear=all>
 +
 +
[[{{ns:file}}:getstart1_7e.png|450px|thumb|left|link={{filepath:getstart1_7e.png}}|Lianja App Wizard]]
 +
 +
 +
 +
 +
La página final del asistente muestra un resumen de la configuración de la aplicación.
 +
 +
Haga clic en 'Finish' para continuar.
 +
 +
<br clear=all>
 +
 +
===Las Aplicaciones Lianja se componen de páginas===
 +
Ahora el panel '''Pages''' le mostrará una página en blanco.
 +
 +
Las páginas son los elementos visuales básicos de una aplicación y, a su vez, se dividen en secciones (Sections).
 +
 +
El '''App Inspector''' tendrá la pestaña vertical 'Pages' seleccionada y la pestaña 'Tables' mostrará las tablas de la base de datos 'southwind'.
 +
 +
Si no puede ver las tablas, seleccione la pestaña 'Databases' y haga doble clic en 'southwind'.
 +
 +
===Agregar secciones Form a las páginas===
 +
[[{{ns:file}}:getstart1_9.png|450px|thumb|left|link={{filepath:getstart1_9.png}}|Agregar una sección Form]]
  
  
−
===Agregando secciones Form a las páginas===
 
  
−
[[{{ns:file}}:gs1_9.png|450px|thumb|left|link={{filepath:gs1_9.png}}|Drag and Drop Form Section]]
 
  
  
−
Haga clic en la tabla 'customers' y arrastrarlo hasta la página en blanco para crear una sección de Forma y rellenarla con las columnas de la tabla.
+
Haga clic en la tabla 'customers' y arrastrarlo hasta la página en blanco para crear una sección '''Form''' y rellenarla con las columnas de la tabla.
  
 
No se preocupe el orden en que se agregan los campos de la sección Form ya que se pueden reordenar o eliminar por completo después. Vamos a obtener un formulario predeterminado ya diseñado.
 
No se preocupe el orden en que se agregan los campos de la sección Form ya que se pueden reordenar o eliminar por completo después. Vamos a obtener un formulario predeterminado ya diseñado.
  
−
También puede agregar una sección del formulario de las Form Tools y arrastre la tabla o campos individuales en él para poblarlo.  
+
También puede agregar una sección del formulario de las [[Form Tools]] y arrastre la tabla o campos individuales en él para poblarlo.  
  
 
Vamos a ver cómo se hace con una sección Grid.
 
Vamos a ver cómo se hace con una sección Grid.
Line 139: Line 185:
 
<br clear=all>
 
<br clear=all>
  
−
===Agregando secciones Grid a las páginas===
+
===Agregar secciones Grid a las páginas===
  
−
[[{{ns:file}}:gs1_10.png|450px|thumb|left|link={{filepath:gs1_10.png}}|Add Grid Section]]
 
  
 +
[[{{ns:file}}:getstart1_10.png|450px|thumb|left|link={{filepath:getstart1_10.png}}|Agregar una sección Grid]]
  
−
Ahora haga clic en el botón de Sections en las Form Tools. Seleccione Grid, y una sección Grid vacía se agrega a la página.
 
  
−
<br clear=all>
 
  
−
===Llenando una sección Grid Con los datos===
 
  
−
[[{{ns:file}}:gs1_11.png|450px|thumb|left|link={{filepath:gs1_11.png}}|Populate Grid Section]]
+
Ahora haga clic en el botón de '''Sections''' en las [[Form Tools]]. Seleccione 'Grid', y una sección Grid vacía se agrega a la página.
  
 +
<br clear=all>
  
−
Haga clic para seleccionar la tabla orders en el panel Tables y arrástrela a la sección Grid que acaba de crear. La Grid se rellena con las columnas de la tabla orders.
+
===Llenar una sección Grid Con los datos===
 +
[[{{ns:file}}:getstart1_11.png|450px|thumb|left|link={{filepath:getstart1_11.png}}|Llenar una sección Grid Con los datos]]
 +
 
 +
 
 +
Haga clic para seleccionar la tabla orders en el panel 'Tables' y arrástrela a la sección Grid que acaba de crear. La Grid se rellena con las columnas de la tabla orders.
  
 
Las columnas de la Grid se pueden mover mediante arrastrar y soltar los encabezados de columna de la cuadrícula.  
 
Las columnas de la Grid se pueden mover mediante arrastrar y soltar los encabezados de columna de la cuadrícula.  
  
−
Columnas individuales se pueden personalizar haciendo doble clic en el encabezado de la columna.  
+
Columnas individuales se pueden personalizar en los atributos de la columna en el '''App Inspector'''.  
  
−
Clic Derecho en el encabezado de la columna le permite ocultar una columna.  
+
Clic derecho en el encabezado de la columna le permite ocultar o insertar una columna.  
  
−
Tenga en cuenta también, que los datos con los que está trabajando en vivo usted los está viendo exactamente cómo se verá la aplicación en tiempo de ejecución.The grid columns can be moved around by dragging and dropping the grid column headers. Individual columns can be customized by double-clicking on the column header. Right-clicking on the column header allows you to hide a column.  
+
Tenga en cuenta también, que los datos con los que está trabajando en vivo usted los está viendo exactamente cómo se verá la aplicación en tiempo de ejecución.
  
 +
<br clear=all>
 +
Nota: desde Lianja v4.2 'Move Column Left' y 'Move Column Right' también están disponibles desde el menú contextual de clic derecho.
 +
[[{{ns:file}}:gridcolumnrightclick.png|left|link={{filepath:gridcolumnrightclick.png}}|Right-click Context Menu]]
 
<br clear=all>
 
<br clear=all>
  
 
===Arrastrar y Soltar===
 
===Arrastrar y Soltar===
  
−
[[{{ns:file}}:gs1_12.png|450px|thumb|left|link={{filepath:gs1_12.png}}|Drag and Drop Grid Section]]
+
[[{{ns:file}}:getstart1_12.png|450px|thumb|left|link={{filepath:getstart1_12.png}}|Arrastrar y Soltar]]
 +
 
 +
 
 +
 
  
 +
También puede crear secciones Grid usando arrastrar y soltar. Sólo tiene que pulsar la tecla '''Shift''' mientras arrastra la tabla order_details a una parte vacía de la página y se agregará y se rellena una nueva sección Grid.
  
−
También puede crear secciones Grid usando arrastrar y soltar. Sólo tiene que pulsar la tecla Ctrl mientras arrastra la tabla order_details a una parte vacía de la página y se agregará y se rellena una nueva Sección Grid.
 
 
<br clear=all>
 
<br clear=all>
  
−
===Relacionando secciones===
+
===Relacionar secciones===
 +
 
 +
[[{{ns:file}}:getstart1_13.png|450px|thumb|left|link={{filepath:getstart1_13.png}}|Relationship Builder]]
 +
 
  
−
[[{{ns:file}}:gs1_13.png|450px|thumb|left|link={{filepath:gs1_13.png}}|Relationship Builder]]
 
  
  
 
Ahora que tiene una página básica que contiene tres secciones predefinidas se puede relacionar el cliente en la sección Form customers a sus órdenes en la Grid orders y cada orden con sus detalles de la orden (Grid order_details).  
 
Ahora que tiene una página básica que contiene tres secciones predefinidas se puede relacionar el cliente en la sección Form customers a sus órdenes en la Grid orders y cada orden con sus detalles de la orden (Grid order_details).  
  
−
En Lianja ésto es simple: cada Sección se puede relacionar visualmente a otras secciones de la página con el Relationship Builder (Generador de Relaciones).
+
En Lianja ésto es simple: cada Sección se puede relacionar visualmente a otras secciones de la página con el '''Relationship Builder''' (generador de relaciones).
  
−
Haga clic en el signo + en el panel del Relationship Builder junto a la sección principal.  
+
Haga clic en el signo + en el panel del '''Relationship Builder''' junto a la sección principal.  
  
 
A continuación, haga clic en el encabezado de sección para la sección secundaria con la que desea relacionarse.
 
A continuación, haga clic en el encabezado de sección para la sección secundaria con la que desea relacionarse.
Line 188: Line 244:
 
<br clear=all>
 
<br clear=all>
  
−
Nota para los desarrolladores avanzados. Juntas Relacionales se hacen fácilmente y super rápido. Si las claves primarias y externas elegidas por Lianja no son las deseadas, se pueden especificar manualmente haciendo doble Clic correspondiente en el encabezado de la sección cambiándolos en la sección atributos de diálogo.
+
Nota para los desarrolladores avanzados. Juntas Relacionales se hacen fácilmente y super rápido. Si las claves primarias y externas elegidas por Lianja no son las deseadas, se pueden especificar manualmente en los atributos de la sección en el '''App Inspector'''.
  
 
===Generador de Relaciones Visual===
 
===Generador de Relaciones Visual===
 +
[[{{ns:file}}:getstart1_14.png|450px|thumb|left|link={{filepath:getstart1_14.png}}|Relationship Builder]]
 +
  
−
[[{{ns:file}}:gs1_14.png|450px|thumb|left|link={{filepath:gs1_14.png}}|Relationship Builder contd.]]
 
  
  
−
Ahora verá que el Relationship Builder muestra un diagrama de la relación entre las secciones.  
+
Ahora verá que el '''Relationship Builder''' muestra un diagrama de la relación entre las secciones.  
  
 
Cada sección puede referirse a una o más secciones dependientes, que pueden ser de cualquier tipo: Form, Grid, WebView, Image Strip, TabView, Attachments (Adjuntos) o Custom (Personalizado).  
 
Cada sección puede referirse a una o más secciones dependientes, que pueden ser de cualquier tipo: Form, Grid, WebView, Image Strip, TabView, Attachments (Adjuntos) o Custom (Personalizado).  
Line 207: Line 264:
 
Relacione visualmente tantas secciones como desee. Uno-a-uno o uno-a-muchos totalmente compatible. No se requiere programación.
 
Relacione visualmente tantas secciones como desee. Uno-a-uno o uno-a-muchos totalmente compatible. No se requiere programación.
  
−
===Personalizando una página===
+
===Personalizar una página===
  
−
[[{{ns:file}}:gs1_15.png|450px|thumb|left|link={{filepath:gs1_15.png}}|Page Attributes]]
+
[[{{ns:file}}:getstart1_15.png|450px|thumb|left|link={{filepath:getstart1_15.png}}|Atributos en el App Inspector]]
  
  
−
Para personalizar la apariencia de la página, haga doble clic en la Barra de Encabezados de la Página o haga clic en el botón herramientas Engranaje.
 
  
−
Usted puede personalizar la apariencia de las secciones y dispositivos haciendo doble clic en su encabezado.
 
  
−
En el caso de Campos, divisores y separadores de columnas, haga doble clic en el título.
+
Para personalizar la apariencia de una página, establezca sus atributos.
 +
 
 +
Haga clic en el encabezado de la página y el '''App Inspector''' cambiará a la pestaña "Atributos".
 +
 
 +
Dentro de la pestaña '''Attributes''' hay pestañas internas para 'Page', 'Section', 'Formitem' y 'GridColumn'.
  
 
<br clear=all>
 
<br clear=all>
  
−
[[{{ns:file}}:gs1_16.png|450px|thumb|left|link={{filepath:gs1_16.png}}|Page Attributes contd.]]
+
[[{{ns:file}}:getstart1_15b.png|450px|thumb|left|link={{filepath:getstart1_15b.png}}|Atributos en el App Inspector: ventana flotante]]
  
  
−
El cuadro de diálogo Page Attributes (Atributos de Página) se desliza desde la parte derecha de la ventana principal.
 
  
−
Ahora cambie el Title (Título) de la Página y el Header Caption (Título del Encabezado), como se muestra.
+
 
 +
Al hacer doble clic en el título 'Attributes' de la pestaña vertical se abre la ficha '''Attributes''' en una ventana flotante.
 +
 
 +
Para obtener más información sobre el '''App Inspector''', consulta el [[Lianja 3 App Inspector (Video)|vídeo aquí]].
  
 
<br clear=all>
 
<br clear=all>
  
−
===Personalizando una Sección===
+
[[{{ns:file}}:getstart1_15c.png|450px|thumb|left|link={{filepath:getstart1_15c.png}}|Atributos (App Inspector cerrado)]]
 +
 
 +
 
  
−
[[{{ns:file}}:gs1_17.png|450px|thumb|left|link={{filepath:gs1_17.png}}|Section Attributes]]
 
  
 +
Si el '''App Inspector''' está cerrado, haga doble clic en la barra de encabezados de la página o haga clic en el botón herramientas engranaje.
  
−
Para personalizar la apariencia de las secciones, haga doble clic en el encabezado de Sección y el cuadro de diálogo Section Attributes (Atributos de Sección) se deslizará.  
+
En el caso de sections y Gadgets, haga doble clic en su encabezado.  
  
−
Cambie el Title (Título) de la Sección a Customers (Clientes), a continuación, repita el mismo proceso para la sección Orders (de pedidos) y la sección Order_details.
+
En el caso de campos, divisores y separadores de columnas, haga doble clic en el título.
 +
 
 +
<br clear=all>
 +
 
 +
[[{{ns:file}}:getstart1_15d.png|450px|thumb|left|link={{filepath:getstart1_15d.png}}|Atributos (App Inspector cerrado)]]
 +
 
 +
 
 +
 
 +
 
 +
El cuadro de diálogo '''Page Attributes''' (atributos de página) se desliza desde la parte derecha de la ventana principal. 
 +
 
 +
<br clear=all>
 +
 
 +
[[{{ns:file}}:getstart1_16.png|450px|thumb|left|link={{filepath:getstart1_16.png}}|Cambiar atributos]]
 +
 
 +
 
 +
 
 +
 
 +
Ahora cambie el 'Title' (título) de la página y el 'Header Caption' (título del encabezado), como se muestra.
 +
 
 +
<br clear=all>
 +
 
 +
===Personalizar una Sección===
 +
 
 +
[[{{ns:file}}:getstart1_17.png|450px|thumb|left|link={{filepath:getstart1_17.png}}|Atributos de Sección]]
 +
 
 +
 
 +
 
 +
Para personalizar la apariencia de las secciones, haga clic en la sección de clientes y se seleccionará en la ficha '''Attributes''' del '''App Inspector'''.
 +
 
 +
(Si el '''App Inspector''' está cerrado, haga doble clic en el encabezado de Sección y el cuadro de diálogo '''Section Attributes''' se deslizará.)
 +
 
 +
Cambie el 'Caption' (título del encabezado) de la sección a Customers (clientes), a continuación, repita el mismo proceso para la sección Orders (pedidos) y la sección Order_details (detalles del pedido).
  
 
<br clear=all>
 
<br clear=all>
Line 242: Line 337:
 
===Listo para ejecutar===
 
===Listo para ejecutar===
  
−
[[{{ns:file}}:gs1_18.png|450px|thumb|left|link={{filepath:gs1_18.png}}|Complete Pages]]
+
[[{{ns:file}}:getstart1_18.png|450px|thumb|left|link={{filepath:getstart1_18.png}}|Listo para ejecutar]]
 +
 
  
  
Line 251: Line 347:
 
===Desktop App View===
 
===Desktop App View===
  
−
[[{{ns:file}}:gs1_19.png|450px|thumb|left|link={{filepath:gs1_19.png}}|Desktop App View]]
+
[[{{ns:file}}:getstart1_19.png|450px|thumb|left|link={{filepath:getstart1_19.png}}|Desktop App View]]
  
  
−
Para ver la aplicación en Vista en Tiempo de Ejecución, haz clic en el icono Desktop App View de la Barra de Encabezados.
+
Para ver la aplicación en vista en tiempo de ejecución, haga clic en el icono '''Desktop App View''' de la barra de encabezados.
  
 
<br clear=all>
 
<br clear=all>
Line 260: Line 356:
 
===Desktop App View y Development View===
 
===Desktop App View y Development View===
  
−
[[{{ns:file}}:gs1_20.png|450px|thumb|left|link={{filepath:gs1_209.png}}|Return to Development View]]
+
[[{{ns:file}}:getstart1_20.png|450px|thumb|left|link={{filepath:getstart1_20.png}}|Desktop App View]]
  
  
−
Ahora podrá ver la Aplicación ejecutándose! Es tan simple como eso.  
+
Ahora podrá ver la aplicación ejecutándose! Es tan simple como eso.  
  
−
Puede moverse entre los registros usando los controles de navegación en la Barra de Acción.  
+
Puede moverse entre los registros usando los controles de navegación en la barra de acción.  
  
−
Para volver a la vista de Desarrollo simplemente haga clic en el icono Development view de la Barra de Encabezados.
+
Para volver a la vista de desarrollo simplemente haga clic en el icono '''Development view''' de la barra de encabezados.
  
 
<br clear=all>
 
<br clear=all>
 +
 +
[[Introducción Parte 2]]
  
 
[[Category:Getting Started]]
 
[[Category:Getting Started]]

Latest revision as of 11:33, 18 June 2018

Este artículo ofrece una introducción general a Lianja y Lianja App Builder. El público objeto es para principiantes que no saben nada acerca de Lianja y quieren obtener una comprensión de la plataforma de aplicaciones Lianja y cómo desarrollar aplicaciones utilizando Lianja App Builder.

Vea También

Getting Started (Video)

Read this in English

Introducción Parte 2

Introducción Parte 3

Introducción Parte 4

Lianja App Builder

Lianja App Builder - Home



El Lianja App Builder está contenido dentro de una sola ventana que consta de varios Workspace Panels (paneles de espacio de trabajo) que se pueden activar haciendo clic en las pestañas de selección de la Modebar (barra vertical izquierda).

Se empieza en el App Center en el panel Home.

Aquí tiene acceso con un clic a las aplicaciones publicadas, la documentación en línea y las acciones clave de desarrollo de aplicaciones.


Open Lianja Demo App



Para iniciar la aplicación de ejemplo 'lianjademo', haga clic en su ícono 'Lianja Demo' en el App Center.

El panel Pages se selecciona automáticamente y la aplicación 'lianjademo' se carga en el Page Builder.


Page Builder

El Page Builder es el centro de coordinación para la construcción de aplicaciones de escritorio y web en Lianja.

El Page Builder es el diseño visual y el panel de área de trabajo de desarrollo y a ésto es lo que vamos a concentrarnos en este tutorial.

Usando el Page Builder puede crear visualmente una aplicación centrada en los datos que se pueden combinar y otros contenidos interesantes desde una amplia variedad de fuentes de datos, bases de datos, servicios web usando REST, y otras fuentes de datos personalizados.

Si usted no es un programador pero tiene un buen conocimiento de dominio de su negocio, lo más probable es que sea capaz de construir una aplicación que no requiere programación en lo absoluto.

¿Cómo es posible ésto se preguntará?

Usted encontrará en el transcurso de estos tutoriales cómo Lianja tiene una visión radicalmente diferente del proceso de desarrollo de aplicaciones en comparación con otras bases de datos y herramientas de desarrollo web.

Pages Workspace



Como se mencionó anteriormente, se usa Page Builder para construir visualmente una aplicación centrada en los datos.

En Lianja, las aplicaciones se componen de una variedad de elementos visuales.

Usando Page Builder, usted arregla estos elementos visuales en una aplicación.

El elemento base es una Page (página).

Las Páginas se componen de Sections (secciones).


Page



Hay varios tipos de secciones pre-construidas utilizadas para ayudar a acelerar su desarrollo: Form (forma), Grid (cuadrícula), WebView (vista web), Image Strip (tira de imagen), Canvas (lienzo) y TabView. una sección Form se compone de Fields (campos) y Gadgets.

Para desarrolladores profesionales, también se puede desarrollar secciones y Gadgets personalizados en el contexto, Visual FoxPro, JavaScript, PHP o Python y reutilizarlos a través de muchas de las aplicaciones que construya.


Para que sea más fácil construir aplicaciones que se ejecutarán desde su escritorio, así como en un navegador web, Lianja tiene una característica completa Estructura de Aplicación. Este marco de aplicación es una implementación de la estructura de aplicaciones Visual FoxPro 9. Se ha extendido ampliamente para proporcionar el más moderno y fácil uso de componentes que son multi-plataforma, de lenguaje e interfaz de usuario independiente.

Usted puede construir secciones y Gadgets personalizados utilizando el Marco de Aplicaciones Lianja en el contexto, Visual FoxPro, JavaScript, PHP y Python. Para detalles completos de la Estructura de Aplicación Lianja vea la documentación en el panel Home.

Construya su primera Aplicación Lianja

La forma más fácil de mostrar el poder y la simplicidad de Lianja es construyendo una aplicación!

Regrésese al App Center en el panel Home hacienda clic en la ficha 'Home' ubicado en la Modebar en el lado izquierdo de la la ventana principal o el botón herramienta 'Home' en el Headerbar. Puede alternar entre los diferentes paneles en cualquier momento.

Crear una Aplicación

Crear una aplicación



Ahora haga clic en la opción 'Create an App' (Crear una Aplicación).

También puede crear aplicaciones desde el panel Apps hacienda clic en el botón + del actionbar de la pestaña 'Apps'.


Lianja App Wizard


El panel Apps se seleccionará automáticamente y se abrirá el Lianja App Wizard.

Haga clic en 'Next' para continuar.


Lianja App Wizard



Escribe un nombre para tu aplicación.

También puede seleccionar el tipo o los tipos de cliente en que se ejecutará su aplicación. Los tipos también se pueden modificar en la configuración de la aplicación más adelante, si es necesario.

Dejar todos los tipos seleccionados y haga clic en 'Next' para continuar.


Lianja App Wizard



Seleccione su lenguaje de programación preferido. Para aplicaciones web y móviles, seleccione 'JavaScript'.

Este es el lenguaje de programación predeterminado de la aplicación, no significa que todo el código de la aplicación debe estar escrito en ese lenguaje o que su aplicación debe incluir ningún código.

Selecciona 'JavaScript' y haga clic en 'Next' para continuar.


Lianja App Wizard



Opcionalmente, elija una base de datos.

La base de datos 'southwind' es una base de datos de ejemplo incluida en la distribución y utilizada en los tutoriales y documentación.

Selecciona 'southwind' y haga clic en 'Next' para continuar.


Lianja App Wizard



La página final del asistente muestra un resumen de la configuración de la aplicación.

Haga clic en 'Finish' para continuar.


Las Aplicaciones Lianja se componen de páginas

Ahora el panel Pages le mostrará una página en blanco.

Las páginas son los elementos visuales básicos de una aplicación y, a su vez, se dividen en secciones (Sections).

El App Inspector tendrá la pestaña vertical 'Pages' seleccionada y la pestaña 'Tables' mostrará las tablas de la base de datos 'southwind'.

Si no puede ver las tablas, seleccione la pestaña 'Databases' y haga doble clic en 'southwind'.

Agregar secciones Form a las páginas

Agregar una sección Form



Haga clic en la tabla 'customers' y arrastrarlo hasta la página en blanco para crear una sección Form y rellenarla con las columnas de la tabla.

No se preocupe el orden en que se agregan los campos de la sección Form ya que se pueden reordenar o eliminar por completo después. Vamos a obtener un formulario predeterminado ya diseñado.

También puede agregar una sección del formulario de las Form Tools y arrastre la tabla o campos individuales en él para poblarlo.

Vamos a ver cómo se hace con una sección Grid.


Agregar secciones Grid a las páginas

Agregar una sección Grid



Ahora haga clic en el botón de Sections en las Form Tools. Seleccione 'Grid', y una sección Grid vacía se agrega a la página.


Llenar una sección Grid Con los datos

Llenar una sección Grid Con los datos


Haga clic para seleccionar la tabla orders en el panel 'Tables' y arrástrela a la sección Grid que acaba de crear. La Grid se rellena con las columnas de la tabla orders.

Las columnas de la Grid se pueden mover mediante arrastrar y soltar los encabezados de columna de la cuadrícula.

Columnas individuales se pueden personalizar en los atributos de la columna en el App Inspector.

Clic derecho en el encabezado de la columna le permite ocultar o insertar una columna.

Tenga en cuenta también, que los datos con los que está trabajando en vivo usted los está viendo exactamente cómo se verá la aplicación en tiempo de ejecución.


Nota: desde Lianja v4.2 'Move Column Left' y 'Move Column Right' también están disponibles desde el menú contextual de clic derecho.

Right-click Context Menu


Arrastrar y Soltar

Arrastrar y Soltar



También puede crear secciones Grid usando arrastrar y soltar. Sólo tiene que pulsar la tecla Shift mientras arrastra la tabla order_details a una parte vacía de la página y se agregará y se rellena una nueva sección Grid.


Relacionar secciones

Relationship Builder



Ahora que tiene una página básica que contiene tres secciones predefinidas se puede relacionar el cliente en la sección Form customers a sus órdenes en la Grid orders y cada orden con sus detalles de la orden (Grid order_details).

En Lianja ésto es simple: cada Sección se puede relacionar visualmente a otras secciones de la página con el Relationship Builder (generador de relaciones).

Haga clic en el signo + en el panel del Relationship Builder junto a la sección principal.

A continuación, haga clic en el encabezado de sección para la sección secundaria con la que desea relacionarse.


Nota para los desarrolladores avanzados. Juntas Relacionales se hacen fácilmente y super rápido. Si las claves primarias y externas elegidas por Lianja no son las deseadas, se pueden especificar manualmente en los atributos de la sección en el App Inspector.

Generador de Relaciones Visual

Relationship Builder



Ahora verá que el Relationship Builder muestra un diagrama de la relación entre las secciones.

Cada sección puede referirse a una o más secciones dependientes, que pueden ser de cualquier tipo: Form, Grid, WebView, Image Strip, TabView, Attachments (Adjuntos) o Custom (Personalizado).

Añada nuevas relaciones entre las secciones haciendo clic en el signo + junto al principal y luego haga clic en el encabezado de la sección dependiente.

Si desea hacer un cambio, puede desconectar una relación haciendo clic en el signo -.


Relacione visualmente tantas secciones como desee. Uno-a-uno o uno-a-muchos totalmente compatible. No se requiere programación.

Personalizar una página

Atributos en el App Inspector



Para personalizar la apariencia de una página, establezca sus atributos.

Haga clic en el encabezado de la página y el App Inspector cambiará a la pestaña "Atributos".

Dentro de la pestaña Attributes hay pestañas internas para 'Page', 'Section', 'Formitem' y 'GridColumn'.


Atributos en el App Inspector: ventana flotante



Al hacer doble clic en el título 'Attributes' de la pestaña vertical se abre la ficha Attributes en una ventana flotante.

Para obtener más información sobre el App Inspector, consulta el vídeo aquí.


Atributos (App Inspector cerrado)



Si el App Inspector está cerrado, haga doble clic en la barra de encabezados de la página o haga clic en el botón herramientas engranaje.

En el caso de sections y Gadgets, haga doble clic en su encabezado.

En el caso de campos, divisores y separadores de columnas, haga doble clic en el título.


Atributos (App Inspector cerrado)



El cuadro de diálogo Page Attributes (atributos de página) se desliza desde la parte derecha de la ventana principal.


Cambiar atributos



Ahora cambie el 'Title' (título) de la página y el 'Header Caption' (título del encabezado), como se muestra.


Personalizar una Sección

Atributos de Sección


Para personalizar la apariencia de las secciones, haga clic en la sección de clientes y se seleccionará en la ficha Attributes del App Inspector.

(Si el App Inspector está cerrado, haga doble clic en el encabezado de Sección y el cuadro de diálogo Section Attributes se deslizará.)

Cambie el 'Caption' (título del encabezado) de la sección a Customers (clientes), a continuación, repita el mismo proceso para la sección Orders (pedidos) y la sección Order_details (detalles del pedido).


Listo para ejecutar

Listo para ejecutar


Ahora la página debería ser como ésta.


Desktop App View

Desktop App View


Para ver la aplicación en vista en tiempo de ejecución, haga clic en el icono Desktop App View de la barra de encabezados.


Desktop App View y Development View

Desktop App View


Ahora podrá ver la aplicación ejecutándose! Es tan simple como eso.

Puede moverse entre los registros usando los controles de navegación en la barra de acción.

Para volver a la vista de desarrollo simplemente haga clic en el icono Development view de la barra de encabezados.


Introducción Parte 2

Retrieved from "https://www.lianja.com/doc/index.php?title=Introducción_Parte_1&oldid=21273"