PC SOFT

AYUDA EN LÍNEA
DE WINDEV, WEBDEV Y WINDEV MOBILE

Este contenido proviene de una traducción automática.. Haga clic aquí para ver la versión original en inglés.
  • Presentación
  • Implementación
  • Creando un nuevo diseño para una ventana de móvil
  • Creación de un nuevo diseño para una ventana
  • Creación de un nuevo diseño para una ventana interna
  • Crear un nuevo diseño para una página
  • Manejo de layouts
  • Gestión de controles en los layouts
  • Caso especial de la Action Bar
  • Características de los layouts
  • Comparando ventanas o páginas con diseños
  • Gestionar los diseños en tiempo de ejecución
  • Modo de funcionamiento por defecto
  • Programación
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReportes y ConsultasCódigo de Usuario (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Código Navegador
WINDEV Mobile
AndroidWidget Android iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Otros
Procedimientos almacenados
Presentación
Los diseños se utilizan para definir varias vistas de una ventana/página en el mismo proyecto sin duplicar esta ventana/página.
WINDEVWINDEV Mobile Así, in una aplicación WINDEV o WINDEV Mobile, puede definir, por ejemplo:
  • una vista específica para el modo de retrato,
  • una vista específica para el modo de paisaje,
  • una vista específica para el teléfono,
  • una vista específica de la tableta,
  • ...
En tiempo de ejecución, puedes:
Versiones 25 y posteriores
WEBDEV - Código Servidor WEBDEV ofrece varias soluciones para crear sitios móviles amigables: Diseño Web receptivo (o RWD), Servidores y diseños dinámicos.
En un sitio WEBDEV, puedes definir:
  • una vista específica para el modo de escritorio,
  • una vista específica para el modo móvil, etc.
En tiempo de ejecución, puedes:
Los layouts son otra forma de hacer que un sitio sea optimizado para dispositivos móviles (Mobile-friendly). A diferencia del modo de diseño web receptivo (RWD), los diseños no tienen restricciones en el orden de los controles.
Por lo tanto, los diseños le permiten:
  • hacer diseños que no se pueden hacer fácilmente en RWD.
  • crear sin esfuerzo elementos en un diseño y esconderlos en otro diseño.
Nueva funcionalidad versión 25
WEBDEV - Código Servidor WEBDEV ofrece varias soluciones para crear sitios móviles amigables: Diseño Web receptivo (o RWD), Servidores y diseños dinámicos.
En un sitio WEBDEV, puedes definir:
  • una vista específica para el modo de escritorio,
  • una vista específica para el modo móvil, etc.
En tiempo de ejecución, puedes:
Los layouts son otra forma de hacer que un sitio sea optimizado para dispositivos móviles (Mobile-friendly). A diferencia del modo de diseño web receptivo (RWD), los diseños no tienen restricciones en el orden de los controles.
Por lo tanto, los diseños le permiten:
  • hacer diseños que no se pueden hacer fácilmente en RWD.
  • crear sin esfuerzo elementos en un diseño y esconderlos en otro diseño.
WEBDEV - Código Servidor WEBDEV ofrece varias soluciones para crear sitios móviles amigables: Diseño Web receptivo (o RWD), Servidores y diseños dinámicos.
En un sitio WEBDEV, puedes definir:
  • una vista específica para el modo de escritorio,
  • una vista específica para el modo móvil, etc.
En tiempo de ejecución, puedes:
Los layouts son otra forma de hacer que un sitio sea optimizado para dispositivos móviles (Mobile-friendly). A diferencia del modo de diseño web receptivo (RWD), los diseños no tienen restricciones en el orden de los controles.
Por lo tanto, los diseños le permiten:
  • hacer diseños que no se pueden hacer fácilmente en RWD.
  • crear sin esfuerzo elementos en un diseño y esconderlos en otro diseño.
Esta página de ayuda presenta:
Implementación
AndroidiPhone/iPadUniversal Windows 10 App

Creando un nuevo diseño para una ventana de móvil

Para crear un nuevo diseño para una ventana:
  1. Abrir la ventana correspondiente en el editor.
  2. En la pestaña "Ventana", en el grupo "Layouts", despliegue "Layouts" y seleccione "Agregar layouts".
    Agregar layouts
  3. La asistente para añadir un diseño comienza. Pasar el paso de presentación si es necesario.
  4. La asistente propone manejar las diferencias entre el teléfono y la tableta.
    Diferencias tableta / teléfono
    Puedes:
    • Elegir la plataforma actual (sólo teléfono o sólo tableta).
    • Crear diseños (porque los controles están organizados de forma diferente en la tableta y en el teléfono).
    • Use los anclajes solamente (porque los anclajes son suficientes para reposicionar los controles en la ventana de acuerdo a su tamaño)..
  5. Pase a la siguiente etapa del asistente.
  6. La asistente propone gestionar la orientación Retrato/Paisaje de la aplicación.
    Vertical / Horizontal
    Puedes:
    • Crear diseños (porque los controles están organizados de forma diferente en la tableta y en el teléfono).
    • Utilice los anclajes únicamente (porque los anclajes son suficientes para reposicionar los controles en la ventana según su orientación).
  7. Pase a la siguiente etapa del asistente.
  8. La asistente propone utilizar una presentación diferente para cada plataforma utilizada (por ejemplo, una presentación para iOS y una presentación para Android).
    Sistema operativo
  9. Seleccione la opción deseada y vaya al siguiente paso de la asistente.
  10. Valide el asistente.
  11. Si es necesario, se crean los diferentes layouts.
    Layouts
  12. El editor muestra (a la derecha) los diferentes diseños que se pueden utilizar para la ventana.. Haciendo doble clic en la insignia del diseño deseado se puede abrir en el editor y modificarlo.
Consejo:
  • La creación de una maqueta se basa en la plataforma de edición actual. Es más rápido posicionar gráficamente sobre el layout más cercano para limitar las modificaciones..
  • Para personalizar los controles que se encuentran en los diferentes diseños, le aconsejamos que empiece con el diseño más grande y completo y luego cree los otros diseños reduciendo u ocultando elementos..
Versiones 22 y posteriores
WINDEV

Creación de un nuevo diseño para una ventana

Para crear un nuevo diseño para una ventana:
  1. Abrir la ventana correspondiente en el editor.
  2. En la pestaña "Ventana", en el grupo "Layouts", despliegue "Layouts" y seleccione "Agregar layouts".
  3. Si el proyecto WINDEV no contiene una plataforma móvilEn la ventana para la creación de un layout se visualiza. Haga clic en "Añadir" para añadir un nuevo diseño.
  4. Si el proyecto WINDEV contiene al menos una plataforma móvil, comienza la asistente para agregar una disposición. Pasar el paso de presentación si es necesario.
    1. La asistente propone manejar las diferencias entre el teléfono y la tableta.
      Puedes:
      • Elegir la plataforma actual (sólo teléfono o sólo tableta).
      • Crear diseños (porque los controles están organizados de forma diferente en la tableta y en el teléfono).
      • Use los anclajes solamente (porque los anclajes son suficientes para reposicionar los controles en la ventana de acuerdo a su tamaño)..
    2. Pase a la siguiente etapa del asistente.
    3. La asistente propone gestionar la orientación Retrato/Paisaje de la aplicación.
      Puedes:
      • Crear diseños (porque los controles están organizados de forma diferente en la tableta y en el teléfono).
      • Utilice los anclajes únicamente (porque los anclajes son suficientes para reposicionar los controles en la ventana según su orientación).
    4. Pase a la siguiente etapa del asistente.
    5. La asistente propone utilizar una presentación diferente para cada plataforma utilizada (por ejemplo, una presentación para iOS y una presentación para Android).
    6. Seleccione la opción deseada y vaya al siguiente paso de la asistente.
    7. Valide el asistente.
  5. El editor muestra (a la derecha) los diferentes diseños que se pueden utilizar para la ventana.. Haciendo doble clic en la insignia del diseño deseado se puede abrir en el editor y modificarlo.
Nueva funcionalidad versión 22
WINDEV

Creación de un nuevo diseño para una ventana

Para crear un nuevo diseño para una ventana:
  1. Abrir la ventana correspondiente en el editor.
  2. En la pestaña "Ventana", en el grupo "Layouts", despliegue "Layouts" y seleccione "Agregar layouts".
  3. Si el proyecto WINDEV no contiene una plataforma móvilEn la ventana para la creación de un layout se visualiza. Haga clic en "Añadir" para añadir un nuevo diseño.
  4. Si el proyecto WINDEV contiene al menos una plataforma móvil, comienza la asistente para agregar una disposición. Pasar el paso de presentación si es necesario.
    1. La asistente propone manejar las diferencias entre el teléfono y la tableta.
      Puedes:
      • Elegir la plataforma actual (sólo teléfono o sólo tableta).
      • Crear diseños (porque los controles están organizados de forma diferente en la tableta y en el teléfono).
      • Use los anclajes solamente (porque los anclajes son suficientes para reposicionar los controles en la ventana de acuerdo a su tamaño)..
    2. Pase a la siguiente etapa del asistente.
    3. La asistente propone gestionar la orientación Retrato/Paisaje de la aplicación.
      Puedes:
      • Crear diseños (porque los controles están organizados de forma diferente en la tableta y en el teléfono).
      • Utilice los anclajes únicamente (porque los anclajes son suficientes para reposicionar los controles en la ventana según su orientación).
    4. Pase a la siguiente etapa del asistente.
    5. La asistente propone utilizar una presentación diferente para cada plataforma utilizada (por ejemplo, una presentación para iOS y una presentación para Android).
    6. Seleccione la opción deseada y vaya al siguiente paso de la asistente.
    7. Valide el asistente.
  5. El editor muestra (a la derecha) los diferentes diseños que se pueden utilizar para la ventana.. Haciendo doble clic en la insignia del diseño deseado se puede abrir en el editor y modificarlo.
WINDEV

Creación de un nuevo diseño para una ventana

Para crear un nuevo diseño para una ventana:
  1. Abrir la ventana correspondiente en el editor.
  2. En la pestaña "Ventana", en el grupo "Layouts", despliegue "Layouts" y seleccione "Agregar layouts".
  3. Si el proyecto WINDEV no contiene una plataforma móvilEn la ventana para la creación de un layout se visualiza. Haga clic en "Añadir" para añadir un nuevo diseño.
  4. Si el proyecto WINDEV contiene al menos una plataforma móvil, comienza la asistente para agregar una disposición. Pasar el paso de presentación si es necesario.
    1. La asistente propone manejar las diferencias entre el teléfono y la tableta.
      Puedes:
      • Elegir la plataforma actual (sólo teléfono o sólo tableta).
      • Crear diseños (porque los controles están organizados de forma diferente en la tableta y en el teléfono).
      • Use los anclajes solamente (porque los anclajes son suficientes para reposicionar los controles en la ventana de acuerdo a su tamaño)..
    2. Pase a la siguiente etapa del asistente.
    3. La asistente propone gestionar la orientación Retrato/Paisaje de la aplicación.
      Puedes:
      • Crear diseños (porque los controles están organizados de forma diferente en la tableta y en el teléfono).
      • Utilice los anclajes únicamente (porque los anclajes son suficientes para reposicionar los controles en la ventana según su orientación).
    4. Pase a la siguiente etapa del asistente.
    5. La asistente propone utilizar una presentación diferente para cada plataforma utilizada (por ejemplo, una presentación para iOS y una presentación para Android).
    6. Seleccione la opción deseada y vaya al siguiente paso de la asistente.
    7. Valide el asistente.
  5. El editor muestra (a la derecha) los diferentes diseños que se pueden utilizar para la ventana.. Haciendo doble clic en la insignia del diseño deseado se puede abrir en el editor y modificarlo.
Versiones 22 y posteriores
WINDEVWINDEV Mobile

Creación de un nuevo diseño para una ventana interna

En móviles, las ventanas internas son utilizadas por varias características: ventana detallada en un tabla, cita en un control Planificador, ....
El uso de layouts en las ventanas internas le permite proponer una interfaz para el modo vertical y para el modo apaisado..
Para crear un nuevo diseño para una ventana interna:
  1. Abrir la ventana interna correspondiente en el editor.
  2. En la pestaña "Ventana", en el grupo "Layouts", despliegue "Layouts" y seleccione "Agregar layouts".
  3. Aparece la ventana para añadir layouts.
    Haga clic en "Añadir" para añadir un nuevo diseño.
  4. Validar la ventana.
  5. El editor muestra (a la derecha) los diferentes diseños que se pueden utilizar para la ventana interna..
    • Haciendo doble clic en la insignia del diseño deseado se puede abrir en el editor y modificarlo.
    • La opción "Descripción" del menú contextual de la barra de título del layout permite definir los parámetros del layout.
Nueva funcionalidad versión 22
WINDEVWINDEV Mobile

Creación de un nuevo diseño para una ventana interna

En móviles, las ventanas internas son utilizadas por varias características: ventana detallada en un tabla, cita en un control Planificador, ....
El uso de layouts en las ventanas internas le permite proponer una interfaz para el modo vertical y para el modo apaisado..
Para crear un nuevo diseño para una ventana interna:
  1. Abrir la ventana interna correspondiente en el editor.
  2. En la pestaña "Ventana", en el grupo "Layouts", despliegue "Layouts" y seleccione "Agregar layouts".
  3. Aparece la ventana para añadir layouts.
    Haga clic en "Añadir" para añadir un nuevo diseño.
  4. Validar la ventana.
  5. El editor muestra (a la derecha) los diferentes diseños que se pueden utilizar para la ventana interna..
    • Haciendo doble clic en la insignia del diseño deseado se puede abrir en el editor y modificarlo.
    • La opción "Descripción" del menú contextual de la barra de título del layout permite definir los parámetros del layout.
WINDEVWINDEV Mobile

Creación de un nuevo diseño para una ventana interna

En móviles, las ventanas internas son utilizadas por varias características: ventana detallada en un tabla, cita en un control Planificador, ....
El uso de layouts en las ventanas internas le permite proponer una interfaz para el modo vertical y para el modo apaisado..
Para crear un nuevo diseño para una ventana interna:
  1. Abrir la ventana interna correspondiente en el editor.
  2. En la pestaña "Ventana", en el grupo "Layouts", despliegue "Layouts" y seleccione "Agregar layouts".
  3. Aparece la ventana para añadir layouts.
    Haga clic en "Añadir" para añadir un nuevo diseño.
  4. Validar la ventana.
  5. El editor muestra (a la derecha) los diferentes diseños que se pueden utilizar para la ventana interna..
    • Haciendo doble clic en la insignia del diseño deseado se puede abrir en el editor y modificarlo.
    • La opción "Descripción" del menú contextual de la barra de título del layout permite definir los parámetros del layout.
Versiones 25 y posteriores
WEBDEV - Código Servidor

Crear un nuevo diseño para una página

Para crear un nuevo diseño para una página:
  1. Abra la página correspondiente en el editor.
  2. En la pestaña "Página", en el grupo "Layouts", despliegue "Layouts" y seleccione "Agregar layout a partir de la vista activa".
  3. Aparece la ventana de creación del diseño:
  4. Especificar el tipo de pantalla para el que debe crearse la disposición. También se puede especificar el ancho mínimo de la pantalla.
  5. Validar.
  6. A la derecha, el editor muestra los diferentes diseños disponibles para la página. Haciendo doble clic en la insignia del diseño deseado se puede abrir en el editor y modificarlo.
Observaciones
Los diseños no están disponibles:
  • en las páginas en el modo de diseño web de respuesta.
  • en las páginas internas.
  • en plantillas de páginas.
Nueva funcionalidad versión 25
WEBDEV - Código Servidor

Crear un nuevo diseño para una página

Para crear un nuevo diseño para una página:
  1. Abra la página correspondiente en el editor.
  2. En la pestaña "Página", en el grupo "Layouts", despliegue "Layouts" y seleccione "Agregar layout a partir de la vista activa".
  3. Aparece la ventana de creación del diseño:
  4. Especificar el tipo de pantalla para el que debe crearse la disposición. También se puede especificar el ancho mínimo de la pantalla.
  5. Validar.
  6. A la derecha, el editor muestra los diferentes diseños disponibles para la página. Haciendo doble clic en la insignia del diseño deseado se puede abrir en el editor y modificarlo.
Observaciones
Los diseños no están disponibles:
  • en las páginas en el modo de diseño web de respuesta.
  • en las páginas internas.
  • en plantillas de páginas.
WEBDEV - Código Servidor

Crear un nuevo diseño para una página

Para crear un nuevo diseño para una página:
  1. Abra la página correspondiente en el editor.
  2. En la pestaña "Página", en el grupo "Layouts", despliegue "Layouts" y seleccione "Agregar layout a partir de la vista activa".
  3. Aparece la ventana de creación del diseño:
  4. Especificar el tipo de pantalla para el que debe crearse la disposición. También se puede especificar el ancho mínimo de la pantalla.
  5. Validar.
  6. A la derecha, el editor muestra los diferentes diseños disponibles para la página. Haciendo doble clic en la insignia del diseño deseado se puede abrir en el editor y modificarlo.
Observaciones
Los diseños no están disponibles:
  • en las páginas en el modo de diseño web de respuesta.
  • en las páginas internas.
  • en plantillas de páginas.
Manejo de layouts

Gestión de controles en los layouts

Predeterminada:
  • Un control creado en un layout se crea en todos los layouts..
  • Se coloca un control en la misma ubicación en todas las presentaciones.. Incluye las mismas propiedades de anchura y altura.
  • Un control movido en una presentación se mueve en todas las presentaciones.
Para que un control tenga propiedades y posición específicas de acuerdo con los diseños, debe ser disociado. Hay varias opciones disponibles.
To manipular un control independiente en los diferentes layouts:
  1. Seleccione el control.
  2. Mostrar el menú contextual (clic derecho).
  3. En el menú "Layouts" se muestran las diferentes posibilidades::
    • Disociar la posición: se utiliza para modificar la posición de control en una o varias disposiciones.
    • Disociar el tamaño: se usa para modificar el tamaño del control en uno o más diseños.
    • Disociar el ancla: se utiliza para disociar el ancla en uno o más diseños.
    • Versiones 20 y posteriores
      Disociar la fuente: se usa para disociar la fuente en uno o más diseños. Por ejemplo, puede utilizar una fuente específica para Android y otra fuente para iOS. También es posible especificar un tamaño de fuente para cada diseño.
      Nueva funcionalidad versión 20
      Disociar la fuente: se usa para disociar la fuente en uno o más diseños. Por ejemplo, puede utilizar una fuente específica para Android y otra fuente para iOS. También es posible especificar un tamaño de fuente para cada diseño.
      Disociar la fuente: se usa para disociar la fuente en uno o más diseños. Por ejemplo, puede utilizar una fuente específica para Android y otra fuente para iOS. También es posible especificar un tamaño de fuente para cada diseño.
    • Hacer invisible en este diseño: se utiliza para hacer que el control sea visible o invisible en uno o más diseños.
Observaciones:
  • Este menú emergente está disponible para una selección de controles.
  • también tiene la posibilidad de utilizar el icono de que se encuentra en la barra de título del diseño actualmente editado. Haciendo clic en este icono se disocia automáticamente el tamaño y/o la posición del control seleccionado durante la primera modificación (realizada con el ratón o con el teclado)..
Límite: Para los controles Chart, las propiedades del título y las propiedades de la leyenda no se pueden disociar entre varios diseños..
AndroidiPhone/iPad

Caso especial de la Action Bar

El control Action Bar está disponible en Android e iOS.
Al generar la aplicación, se seleccionará automáticamente el control nativo correspondiente a la plataforma actual.

Características de los layouts

El menú emergente de miniaturas de los diseños disponibles se utiliza para gestionar los diseños.:
Es posible:
  • Ver la descripción del diseño y modificarlo. Para obtener más información, consulte Parámetros de presentación.
  • Activar la maqueta, es decir, mostrarla para modificarla..
  • Activar la presentación en modo de doble vista: los dos diseños pueden visualizarse y modificarse en paralelo.
  • Crear un nuevo layout.
  • Borrar el layout seleccionado.
  • Versiones 23 y posteriores
    Mostrar miniaturas proporcionales.
    Nueva funcionalidad versión 23
    Mostrar miniaturas proporcionales.
    Mostrar miniaturas proporcionales.
  • Versiones 21 y posteriores
    Actualizar automáticamente: Se utiliza para actualización la disposición tan pronto como se realiza una modificación en la ventana..
    Nueva funcionalidad versión 21
    Actualizar automáticamente: Se utiliza para actualización la disposición tan pronto como se realiza una modificación en la ventana..
    Actualizar automáticamente: Se utiliza para actualización la disposición tan pronto como se realiza una modificación en la ventana..
  • Versiones 21 y posteriores
    Actualizar este layout: Se utiliza para actualización inmediatamente la disposición.
    Nueva funcionalidad versión 21
    Actualizar este layout: Se utiliza para actualización inmediatamente la disposición.
    Actualizar este layout: Se utiliza para actualización inmediatamente la disposición.
  • Versiones 21 y posteriores
    Actualizar todo: Utilizado para actualización inmediatamente todos los layouts.
    Nueva funcionalidad versión 21
    Actualizar todo: Utilizado para actualización inmediatamente todos los layouts.
    Actualizar todo: Utilizado para actualización inmediatamente todos los layouts.

Comparando ventanas o páginas con diseños

WINDEV Mobile le permite comparar dos proyectos, dos elementos de proyecto, ... Para obtener más información, consulte Comparador de proyectos.
Al comparar ventanas que contienen layouts, se listan las diferencias encontradas para cada layout..
Gestionar los diseños en tiempo de ejecución

Modo de funcionamiento por defecto

El layout inicial se selecciona automáticamente según:
  • el sistema,
  • la orientación,
  • el tamaño de la plataforma,
  • WEBDEV - Código Servidor el tamaño del navegador,
  • el tamaño de la ventana o página (en el editor).
La disposición cambia automáticamente:
  • WINDEV Mobile cuando el dispositivo cambia del modo vertical al modo horizontal.
  • Versiones 25 y posteriores
    WEBDEV - Código Servidor según el tamaño del navegador.
    Nueva funcionalidad versión 25
    WEBDEV - Código Servidor según el tamaño del navegador.
    WEBDEV - Código Servidor según el tamaño del navegador.
Los parámetros de diseño pueden ser definidos ("Descripción" en el menú emergente de la barra de título del diseño):
  • WINDEVWINDEV Mobile para cada plataforma:
  • WEBDEV - Código Servidor según el tamaño del navegador.
Estos parámetros se tienen en cuenta para elegir la disposición en tiempo de ejecución:
  • Tamaño mínimo del dispositivo en el que se puede iniciar el diseño.
  • WINDEVAndroidiPhone/iPad Sistema operativo. Si se selecciona "Multi OS", el diseño puede iniciarse en todos los sistemas operativos.. Tiene la posibilidad de seleccionar sistemas específicos (los sistemas propuestos corresponden a las plataformas definidas para el proyecto).
  • AndroidiPhone/iPad Orientación ventana.
  • WINDEVAndroidiPhone/iPad Plataforma de edición.
WINDEVAndroidiPhone/iPad El orden de los parámetros que se tienen en cuenta depende del tipo de ejecución de la ventana. Por lo tanto:
  • Si la ventana es una ventana móvil maximizada, se tienen en cuenta los siguientes criterios: el sistema, la orientación y el tamaño de la plataforma.
  • Si la ventana es una ventana de Windows, se tienen en cuenta los siguientes criterios: el sistema. Se elige la ventana más grande. Si varias ventanas tienen el mismo tamaño, la elección se realiza en función de la orientación..
  • Si la ventana es una ventana móvil no maximizada, se tienen en cuenta los siguientes criterios: el sistema, la orientación y el tamaño de la plataforma.

Programación

Es posible:
Versión mínima requerida
  • Versión 19
Esta página también está disponible para…
Comentarios
Haga clic en [Agregar] para publicar un comentario