Difference between revisions of "Introducción Parte 3"

From Lianjapedia
Jump to: navigation, search
(Created page with "==Vea También== [http://videos.lianja.com/video/71411231 Vea el vídeo] Read this in English ==Ampliando su primera Aplicación== ===Agregando u...")
 
Line 4: Line 4:
 
[[Getting Started Part 3|Read this in English]]
 
[[Getting Started Part 3|Read this in English]]
  
−
==Ampliando su primera Aplicación==
+
==Ampliar su primera Aplicación==
  
−
===Agregando una Página nueva===
+
===Agregar una página nueva===
 +
[[{{ns:file}}:getstart3_1.png|450px|thumb|left|link={{filepath:getstart3_1.png}}|Página nueva]]
  
−
[[{{ns:file}}:gs3_1.png|450px|thumb|left|link={{filepath:gs3_1.png}}|Add Another Page]]
 
  
  
 
Ahora vamos a darle vida a la aplicación mediante la creación de una página adicional que proporciona información sobre los empleados.
 
Ahora vamos a darle vida a la aplicación mediante la creación de una página adicional que proporciona información sobre los empleados.
  
−
Cree una nueva página en blanco haciendo clic en el icono Page icon en las Form tools (herramientas de Formulario).  
+
Cree una nueva página en blanco: haga clic en el icono 'Page' en las '''Form Tools''' (herramientas de formulario) Y seleccione '''Blank'''.  
  
−
Si usted recibe una sección Form en blanco creado de forma predeterminada con la página - ésto está determinado por la Configuración de la Aplicación (Settings) en la parte inferior de la Modebar) - haga clic en el icono de la papelera en el encabezado de la sección para eliminarlo, cuando no lo necesite.
+
El '''Name''', '''Title''' y '''Caption''' de la página se les dará el valor page''N'' donde ''N'' es el número de página siguiente.
  
 
<br clear=all>
 
<br clear=all>
  
−
===Tiras de Imagen===
+
===Agregar una sección Form===
 +
[[{{ns:file}}:getstart3_2.png|450px|thumb|left|link={{filepath:getstart3_2.png}}|Sección Form]]
  
−
[[{{ns:file}}:gs3_2.png|450px|thumb|left|link={{filepath:gs3_2.png}}|Add an Image Strip Section]]
 
  
  
−
Ahora haga clic en el icono Sections (Secciones) en las Form Tools y seleccione la Image Strip (Tira de Imágenes).
+
Haga clic en la tabla 'employees' y arrastrarlo hasta la página en blanco para crear una sección '''Form'''
  
 
<br clear=all>
 
<br clear=all>
  
−
===Rellenando una Image Strip===
+
===Agregar un gadget de imágenes===
 +
[[{{ns:file}}:getstart3_4.png|450px|thumb|left|link={{filepath:getstart3_4.png}}|Image Gadget]]
  
−
[[{{ns:file}}:gs3_3.png|450px|thumb|left|link={{filepath:gs3_3.png}}|Populate Image Strip]]
 
  
  
−
Ahora haga clic en la tabla employees en el panel Tables, haga clic en el campo Photograph y arrástrelo a la sección Image Strip que creó en el paso anterior.
+
Haga clic y arrastre el tirador azul en el centro del borde inferior de la sección seleccionada para cambiar su tamaño.
  
−
También puede arrastrar un campo de objeto de imagen directamente en un área vacía de una página y una sección Image Strip será creada y poblada.
+
Luego desplácese hasta la columna 'Photograph' en el explorador 'Columns', selecciónelo y arrástrelo a la sección Form.
−
 
+
−
<br clear=all>
+
−
 
+
−
===Agregar una Sección Form Adicional===
+
−
 
+
−
[[{{ns:file}}:gs3_4.png|450px|thumb|left|link={{filepath:gs3_4.png}}|Populate Employee Form]]
+
  
 +
Esto agregará automáticamente un gadget de imágenes ('''Image Gadget''') para la columna 'photo'.
  
−
Ahora haga clic en Sections en las Form Tools y seleccione Form. Una nueva sección Form será añadido a la página. Ahora haga clic en la tabla employees, como se muestra a continuación y arrástrelo a la nueva sección que acaba de crear (o simplemente arrastre la tabla a un área vacía de la Página).
+
La columna 'photo' es un blob (objeto binario grande) previamente cargado con un archivo de imagen de foto de empleado.
  
 
<br clear=all>
 
<br clear=all>
  
−
===Personalizando los campos===
+
===Personalizar los campos===
 +
[[{{ns:file}}:getstart3_5.png|450px|thumb|left|link={{filepath:getstart3_5.png}}|Icono de edición]]
  
−
[[{{ns:file}}:gs3_5.png|450px|thumb|left|link={{filepath:gs3_5.png}}|Field Caption]]
 
  
  
−
El título para los campos en la sección Form se puede personalizar moviendo el cursor del ratón sobre el título y haciendo clic en el icono de edición. 
 
  
−
Si hace doble clic en el título, el cuadro de diálogo Atributos del Campo se abrirá y usted será capaz de modificar cualquiera de sus atributos.
+
El título (Caption) para los campos en la sección '''Form''' se puede personalizar moviendo el cursor del ratón sobre el título y haciendo clic en el icono de edición (Edit).
  
 
<br clear=all>
 
<br clear=all>
  
−
[[{{ns:file}}:gs3_6.png|450px|thumb|left|link={{filepath:gs3_6.png}}|Remove Field]]
+
[[{{ns:file}}:getstart3_6.png|450px|thumb|left|link={{filepath:getstart3_6.png}}|Eliminar un campos]]
  
  
−
Puede eliminar los campos que no desea que aparezcan haciendo clic en el icono de eliminación.
+
 
 +
Puede eliminar los campos que no desea que aparezcan haciendo clic en el icono de eliminación (Remove).
  
 
<br clear=all>
 
<br clear=all>
  
−
===Dividers===
+
===Separadores y Subtítulos===
  
−
[[{{ns:file}}:gs3_7.png|450px|thumb|left|link={{filepath:gs3_7.png}}|Dividers]]
+
[[{{ns:file}}:getstart3_7.png|450px|thumb|left|link={{filepath:getstart3_7.png}}|Agregar un subtítulo]]
  
  
−
Haga clic y arrastre el tirador azul en el centro del borde inferior de la sección seleccionada para cambiar su tamaño.
 
  
−
Se puede hacer clic y arrastrar sin problemas los campos en una sección Form para cambiar el orden de visualización.  
+
Se puede hacer clic y arrastrar los campos en una sección Form para cambiar el orden de visualización.  
  
−
También puede agregar Subtitles (subtítulos), Horizontal Separators (separadores horizontales), Column Dividers (separadores de columna) o Spacers (espaciadores) a la sección haciendo clic en el icono de Dividers (Divisores) en las Form Tools.  
+
También puede agregar '''Subtitles''' (subtítulos), '''Horizontal Separators''' (separadores horizontales), '''Column Dividers''' (separadores de columna) o '''Spacers''' (espaciadores) a la sección haciendo clic en el icono '''Dividers''' en las '''Form Tools'''.  
  
−
Una vez que el Subtitle (subtítulo) aparece en la sección Form puede arrastrarlo todo a una posición adecuada.
+
Una vez que el Subtitle (subtítulo) aparece en la sección Form puede arrastrarlo a una posición adecuada.
  
 
<br clear=all>
 
<br clear=all>
  
−
Subtitles son títulos horizontales que se pueden colocar en cualquier lugar del formulario. Column Dividers son títulos horizontales en la parte superior de una columna vertical. Horizontal Separators se muestran como una línea horizontal, mientras que los Spacers se usan para proporcionar un espacio en blanco entre Campos y otros controles.
+
Subtitles son títulos horizontales que se pueden colocar en cualquier lugar del formulario. Column Dividers son títulos horizontales en la parte superior de una columna vertical. Horizontal Separators se muestran como una línea horizontal, mientras que los Spacers se usan para proporcionar un espacio en blanco entre campos y otros controles.
  
−
===Personalización de Dividers===
+
===Personalizar los Subtítulos===
 +
[[{{ns:file}}:getstart3_8.png|450px|thumb|left|link={{filepath:getstart3_8.png}}|Personalización de Subtítulos]]
  
−
[[{{ns:file}}:gs3_8.png|450px|thumb|left|link={{filepath:gs3_8.png}}|Subtitle and Column Divider]]
 
  
  
−
Agregue un Subtitle y un Column Divider y edite sus títulos, como se muestra.
+
 
 +
Agregue dos Subtitles y edite sus títulos, como se muestra.
  
 
<br clear=all>
 
<br clear=all>
  
−
[[{{ns:file}}:gs3_9.png|450px|thumb|left|link={{filepath:gs3_9.png}}|Subtitle Attributes]]
+
===Agregar una sección Webview===
 +
[[{{ns:file}}:getstart3_9.png|450px|thumb|left|link={{filepath:getstart3_9.png}}|Agregar una sección Webview]]
  
  
−
Al igual que Campos, haga doble clic en el título para personalizar los atributos de un Divisor.
+
Ahora arrastre el campo 'Notes' sobre la página. Por defecto, el campo (memo) 'Notes' se muestra en una sección Webview.
  
−
<br clear=all>
+
Tenga en cuenta que la sección Webview permite que cualquier contenido de la web se represente en una sección.
  
−
===Webview section===
+
La URI especificada puede contener referencias a los registros de datos activos de otras secciones.
  
−
[[{{ns:file}}:gs3_10.png|450px|thumb|left|link={{filepath:gs3_10.png}}|Webview Section]]
+
Para hacer referencia a los datos de la URI use llaves, por ejemplo: {CUSTOMERS.NAME}. Ésto permite que el contenido web sea relacionado con los datos de la base de datos.
  
 +
<br clear=all>
  
−
Ahora arrastre el campo Notes sobre la página. Por defecto, el campo (memo) Notes se muestra en una sección Webview.
+
===Personalizar las páginas===
 +
[[{{ns:file}}:getstart3_10.png|450px|thumb|left|link={{filepath:getstart3_10.png}}|Personalizar las páginas]]
  
−
Tenga en cuenta que la Webview permite que cualquier contenido de la web se represente en una sección.
 
  
−
La URI especificada puede contener referencias a los registros de datos activos de otras secciones.
 
  
−
Para hacer referencia a los datos de la URI use llaves, por ejemplo: {CUSTOMERS.NAME}. Ésto permite que el contenido web sea relacionado con los datos de la base de datos.
+
Asegúrese de que los atributos de página (Page) están seleccionados en el '''App Inspector''' y cambie el '''Title''': el texto que aparece en el menú páginas (haga clic en el icono de hamburguesa para mostrar el menú páginas) y el '''Caption''' - el texto que aparece en el encabezado de página.
 +
 
 +
Y cambie el atributo '''Caption''' para las secciones como antes.
  
 
<br clear=all>
 
<br clear=all>
  
−
===Personalizando Secciones===
+
[[{{ns:file}}:getstart3_11.png|450px|thumb|left|link={{filepath:getstart3_11.png}}|Personalizar las páginas]]
  
−
[[{{ns:file}}:gs3_11.png|450px|thumb|left|link={{filepath:gs3_11.png}}|Section Attributes]]
 
  
  
−
Puede personalizar la apariencia de secciones usando el diálogo Section Attributes, haciendo doble clic en el encabezado de la sección o haciendo clic en el icono de la rueda dentada.  
+
Para las páginas 'Customers' y 'Employees', cambie el atributo '''Stretch last section''' a 'True' (verdadero).
  
−
Establezca el Caption (título) de cada una de las tres secciones.
+
Esto amplía la sección inferior para llenar la página.
 +
 
 +
Tenga en cuenta que en la vista de desarrollo el menú páginas se puede acceder desde la hamburguesa en la barra de encabezado.
  
 
<br clear=all>
 
<br clear=all>
  
−
===Relacionando Secciones Image Strip===
+
===Personalizar el gadget de imágenes===
 +
[[{{ns:file}}:getstart3_12.png|450px|thumb|left|link={{filepath:getstart3_12.png}}|Personalizar el gadget de imágenes]]
  
−
[[{{ns:file}}:gs3_12.png|450px|thumb|left|link={{filepath:gs3_12.png}}|Relate Image Strip]]
 
  
  
−
Ahora relacione la sección Image Strip (varios registros de empleados) a la sección Form (detalles de los registros individuales de empleados) y la sección Form a la sección Webview.
+
Cambie los atributos '''Fixed width''' (ancho fijo) y '''Fixed height''' (altura fija) del gadget de imágenes (400).
  
 
<br clear=all>
 
<br clear=all>
  
−
[[{{ns:file}}:gs3_13.png|450px|thumb|left|link={{filepath:gs3_13.png}}|Employees Desktop App View]]
+
===Desktop App View===
 +
[[{{ns:file}}:getstart3_13.png|450px|thumb|left|link={{filepath:getstart3_13.png}}|Desktop App View]]
  
  
−
Eche otro vistazo a su Aplicación en Desktop App View (Vista Tiempo de Ejecución).
 
  
 +
Para ver la aplicación ampliada en vista en tiempo de ejecución, haga clic en el icono '''Desktop App View''' de la barra de encabezados.
 +
<br clear=all>
  
 +
[[Introducción Parte 4]]
  
 
[[Category:Getting Started]]
 
[[Category:Getting Started]]

Revision as of 09:23, 12 July 2017

Vea También

Vea el vídeo

Read this in English

Ampliar su primera Aplicación

Agregar una página nueva

Página nueva


Ahora vamos a darle vida a la aplicación mediante la creación de una página adicional que proporciona información sobre los empleados.

Cree una nueva página en blanco: haga clic en el icono 'Page' en las Form Tools (herramientas de formulario) Y seleccione Blank.

El Name, Title y Caption de la página se les dará el valor pageN donde N es el número de página siguiente.


Agregar una sección Form

Sección Form


Haga clic en la tabla 'employees' y arrastrarlo hasta la página en blanco para crear una sección Form


Agregar un gadget de imágenes

Image Gadget


Haga clic y arrastre el tirador azul en el centro del borde inferior de la sección seleccionada para cambiar su tamaño.

Luego desplácese hasta la columna 'Photograph' en el explorador 'Columns', selecciónelo y arrástrelo a la sección Form.

Esto agregará automáticamente un gadget de imágenes (Image Gadget) para la columna 'photo'.

La columna 'photo' es un blob (objeto binario grande) previamente cargado con un archivo de imagen de foto de empleado.


Personalizar los campos

Icono de edición



El título (Caption) para los campos en la sección Form se puede personalizar moviendo el cursor del ratón sobre el título y haciendo clic en el icono de edición (Edit).


Eliminar un campos


Puede eliminar los campos que no desea que aparezcan haciendo clic en el icono de eliminación (Remove).


Separadores y Subtítulos

Agregar un subtítulo


Se puede hacer clic y arrastrar los campos en una sección Form para cambiar el orden de visualización.

También puede agregar Subtitles (subtítulos), Horizontal Separators (separadores horizontales), Column Dividers (separadores de columna) o Spacers (espaciadores) a la sección haciendo clic en el icono Dividers en las Form Tools.

Una vez que el Subtitle (subtítulo) aparece en la sección Form puede arrastrarlo a una posición adecuada.


Subtitles son títulos horizontales que se pueden colocar en cualquier lugar del formulario. Column Dividers son títulos horizontales en la parte superior de una columna vertical. Horizontal Separators se muestran como una línea horizontal, mientras que los Spacers se usan para proporcionar un espacio en blanco entre campos y otros controles.

Personalizar los Subtítulos

Personalización de Subtítulos



Agregue dos Subtitles y edite sus títulos, como se muestra.


Agregar una sección Webview

Agregar una sección Webview


Ahora arrastre el campo 'Notes' sobre la página. Por defecto, el campo (memo) 'Notes' se muestra en una sección Webview.

Tenga en cuenta que la sección Webview permite que cualquier contenido de la web se represente en una sección.

La URI especificada puede contener referencias a los registros de datos activos de otras secciones.

Para hacer referencia a los datos de la URI use llaves, por ejemplo: {CUSTOMERS.NAME}. Ésto permite que el contenido web sea relacionado con los datos de la base de datos.


Personalizar las páginas

Personalizar las páginas


Asegúrese de que los atributos de página (Page) están seleccionados en el App Inspector y cambie el Title: el texto que aparece en el menú páginas (haga clic en el icono de hamburguesa para mostrar el menú páginas) y el Caption - el texto que aparece en el encabezado de página.

Y cambie el atributo Caption para las secciones como antes.


Personalizar las páginas


Para las páginas 'Customers' y 'Employees', cambie el atributo Stretch last section a 'True' (verdadero).

Esto amplía la sección inferior para llenar la página.

Tenga en cuenta que en la vista de desarrollo el menú páginas se puede acceder desde la hamburguesa en la barra de encabezado.


Personalizar el gadget de imágenes

Personalizar el gadget de imágenes


Cambie los atributos Fixed width (ancho fijo) y Fixed height (altura fija) del gadget de imágenes (400).


Desktop App View

Desktop App View


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

Introducción Parte 4

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