AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

Este contenido se ha traducido automáticamente.  Haga clic aquí  para ver la versión en inglés.
Ayuda / Desarrollar una aplicación o un sitio web / Controles, ventanas y páginas / Controles: tipos disponibles / Control Action Bar
  • Presentación
  • description de los diferentes elementos del Action Bar (pestaña "General")
  • El botón izquierdo de la Action Bar
  • Botón izquierdo
  • Opciones de menú que aparecen en el Action Bar (sólo sistema Action Bar)
  • En Android
  • En iOS
  • En Universal Windows 10 App
  • Vistas/Barra de navegación
  • Aspecto de la Action Bar (pestaña "Detalles")
  • Presentación
  • Apariencia del Action Bar
  • Varios
  • Búsqueda en la Action Bar (sólo sistema)
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReportes y ConsultasCódigo de Usuario (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Código Navegador
WINDEV Mobile
AndroidWidget Android iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Otros
Procedimientos almacenados
Presentación
Una Action Bar puede ser:
  • Y el sistema Action Bar: La Action Bar depende del sistema utilizado. Puede variar en función de la plataforma utilizada.
  • Un Action Bar personalizado, para que get tenga el mismo comportamiento en todas las plataformas. En este caso, puede:
    • Cambia la altura de la Action Bar,
    • Insertar controles en la Action Bar.
Esta página de ayuda presenta los principales aspectos de la ventana Action Bar description:
description de los diferentes elementos del Action Bar (pestaña "General")
La pestaña "General" permite definir los diferentes elementos de Action Bar en función de la plataforma utilizada. Estos elementos son los mismos en iOS y en Android, pero están organizados de forma diferente.
Diferentes elementos de la Action Bar
Las dos interfaces se presentan una al lado de la otra: la interfaz iOS a la izquierda, la interfaz Android a la derecha.
Si su proyecto está disponible en una sola plataforma, sólo se habilitará la interfaz correspondiente..
Para definir los diferentes elementos de la Action Bar, todo lo que tiene que hacer es hacer clic en los números.
El botón izquierdo de la Action Bar

Botón izquierdo

La Action Bar reemplaza la barra de título de la ventana:
  • Android en Android: Por Default, el Action Bar muestra el título de la ventana actual y un botón.
    Action Bar en Android
  • iPhone/iPad en iOS: Por Default, el Action Bar muestra el título de la ventana actual y un botón.
    Action Bar en iOS
  • Universal Windows 10 App en Universal Windows 10 App: Por Default, el Action Bar muestra el título de la ventana actual.
Es posible que el título no se muestre de acuerdo con los elementos que aparecen en la pantalla de Action Bar.
La opción "1" de la pestaña "General" de la ventana de descripción del control Action Bar permite configurar diferentes elementos:
  • Botón Visible o no,
  • iPhone/iPad Título del botón.
  • Universal Windows 10 AppAndroidiPhone/iPad Se muestra Icon.
  • AndroidiPhone/iPad Acción realizada.
Android Observación: Estos parámetros pueden modificarse mediante programación a través de las siguientes propiedades:
  • Título utilizada en la ventana.
  • Image utilizado en el Action Bar.
    Si esta Property es una cadena vacía (""), el icono de la aplicación será utilizado por Default.
    Atención, esta Property está disponible a partir de la versión 4.0 de Android (Ice cream sandwich, nivel 14 de API). Esta Property no tiene efecto si se utiliza en una versión anterior.
El usuario puede hacer clic en el botón izquierdo que aparece en la Action Bar de una ventana. La Event "Pulsar el botón izquierdo" de la Action Bar se associated con esta acción.
La ventana description del Action Bar sirve para configurar la acción del clic en el botón izquierdo. Puede seleccionar una de las siguientes opciones:
Ventana de descripción
  • Código: Ejecutar proceso de clic del control: Al hacer clic en el botón izquierdo se ejecutará automáticamente Event.
  • AndroidiPhone/iPad Atrás: Ejecutar el código para volver atrás (es decir: cerrar la ventana): En ese caso:
    • Android La aplicación ejecutará el "Haga clic en el botón izquierdo" Event.
    • La aplicación ejecutará el preset Process utilizado para volver a la ventana anterior.
    • Una flecha aparecerá en la esquina superior izquierda de la Icon para simbolizar la navegación.
      Observaciones:
      • Si la ventana mostrada es la única ventana de la aplicación, no se ejecutará ninguna acción de Default.
        Android Sólo se ejecutará la Event "Pulse el botón izquierdo".
      • Si la ventana actual está cerrada, se ejecutará su código de cierre.
      • iPhone/iPad Para este tipo de acción, la Icon especificada para el botón no se muestra.
      • iPhone/iPad El botón "Atrás" puede convertirse en un botón "OK" en tiempo de ejecución en los siguientes casos:
        - la ventana anterior no tiene Action Bar control.
        - la animación de apertura no se realiza de derecha a izquierda.
  • Universal Windows 10 AppAndroid Inicio: Volver a la primera ventana de la aplicación: En este caso, la aplicación:
    • Se ejecutará el "Haga clic en el botón izquierdo" Event.
    • Se ejecutará el preset Process: todas las ventanas que siguen abiertas se cierran, excepto la ventana principal (que se vuelve a abrir si es necesario). Este proceso preestablecido no se ejecutará si el "Pulse el botón izquierdo" Event devuelve False (utilizado para pedir confirmación al usuario, por ejemplo).
      Observaciones:
      • Si la ventana principal ya se muestra o si la aplicación no tiene ventana principal, no se ejecutará ninguna acción de Default. Sólo se ejecutará la Event "Pulsar el botón izquierdo.
      • El código de cierre de las ventanas cerradas no se ejecutará.
  • Ventana deslizante izquierda: Abre la ventana deslizante izquierda: En este caso, la aplicación:
    • Se ejecutará el "Haga clic en el botón izquierdo" Event.
    • Se ejecutará el preset Process: la ventana deslizante izquierda definida en la ventana description se mostrará con el efecto especificado.
      Para obtener más información, consulte Ventana corredera (menú deslizante).
Opciones de menú que aparecen en el Action Bar (sólo sistema Action Bar)
Android

En Android

En una ventana sin Action Bar, el menú principal de la aplicación se muestra en la parte inferior de la ventana..
En una ventana con Action Bar, el menú principal es un menú desplegable, que se muestra a la derecha del menú Action Bar.
En la edición, se muestra un botón con tres líneas. Este botón corresponde al menú de la Action Bar. Se utiliza para visualizar las diferentes opciones de menú.
Menú mostrado por el botón
En tiempo de ejecución, este botón muestra las opciones del primer nivel del menú. Si una opción incluye subopciones, un clic en la opción la reemplazará por las subopciones.. No se realizará ninguna visualización en cascada.
Recordatorio: Por convención, le aconsejamos que tenga un solo nivel de opciones.
En Android, puede utilizar dos tipos de menús en el Action Bar:
  • menú desplegable,
    Menú desplegable
  • opciones directamente en el Action Bar. El tamaño de la Action Bar puede cambiar según el dispositivo utilizado. Si el Action Bar incluye suficiente espacio, puede ser interesante mostrar una o más opciones del menú desplegable en el Action Bar. El sistema gestiona automáticamente los problemas de espacio y los problemas de solapamiento..
    Action Bar
Para gestionar las opciones de menú que se encuentran en el menú Action Bar:
  • Caso 1: Una ventana con menú se convierte en una ventana con Action Bar: el menú de la ventana se muestra automáticamente en la pantalla Action Bar.
  • Caso 2: Se crea una ventana con Action Bar y desea crear el menú desplegable:
    1. En la pestaña "General" de la ventana description del Action Bar, haga clic en "2" o "3" (opciones de la barra de herramientas).
    2. Se visualizan dos listas.
      • La lista "Arriba a la derecha" permite definir directamente las opciones que aparecen en Action Bar (véase el párrafo siguiente)..
      • La lista "En la parte inferior del menú" permite definir las opciones de menú que se muestran en el menú desplegable del Action Bar.
    3. Haga clic en "+" para añadir una nueva opción: la opción añadida se puede modificar en la parte inferior de la pantalla.
      Si la opción de menú es associated con un Image, sólo se mostrará el Image en el Action Bar.
Observación: Otro método puede ser usado para mostrar una opción de menú en el Action Bar directamente.:
  1. Abra la ventana description de la opción de menú ("description" en el menú contextual).
  2. En la pestaña "UI", seleccione la opción "Mostrar esta opción como un botón en la parte superior derecha del Action Bar (si hay suficiente espacio).".
  3. Validar.
Caso especial: abrir el menú contextual de un control en el Action Bar
Una pulsación larga realizada sobre una control sirve para abrir el menú contextual de control. Este menú contextual se puede visualizar en el Action Bar directamente.
Para mostrar un menú contextual en el Action Bar directamente:
  1. Editar el menú contextual que se mostrará en el Action Bar: en la pestaña "Ventana", en el grupo "Barras y menús", expanda "Menús contextuales" y seleccione el menú contextual para editar.
  2. Abra la ventana description del menú contextual ("Menú contextual description").
  3. En la pestaña "General", seleccione la opción "Desplazar este menú contextual al Action Bar si existe (se muestra solo durante la ejecución en el dispositivo o en el emulador)".
  4. Validar.
El menú contextual aparecerá en el menú desplegable de Action Bar.
Para visualizar las diferentes opciones del menú contextual en el Action Bar directamente:
  1. Visualizar la ventana description de cada opción en el menú contextual ("Opción description").
  2. En la pestaña "UI", seleccione la opción "Mostrar esta opción como un botón en la parte superior derecha del Action Bar (si hay suficiente espacio).".
  3. Validar.
Observación: Si la opción de menú es associated con un Image, sólo se mostrará el Image en el Action Bar.
iPhone/iPad

En iOS

En una ventana sin Action Bar, el menú principal de la aplicación se muestra en la parte inferior de la ventana..
En una ventana con Action Bar, las opciones de menú pueden ser:
  • que se encuentra en la parte superior derecha de la Action Bar (1).
  • que se encuentra en la parte inferior de la ventana (recomendado) (2).
Ejemplo:
Action Bar en iOS
Para gestionar las opciones de menú que se encuentran en el menú Action Bar:
  • Caso 1: Una ventana con menú se convierte en una ventana con Action Bar: el menú de la ventana se muestra automáticamente en el Action Bar, en la parte inferior de la ventana.
  • Caso 2: Se crea una ventana con Action Bar y se desea crear el menú:
    1. En la pestaña "General" de la ventana description del Action Bar, haga clic en "2" o "3" (opciones de la barra de herramientas).
    2. Se visualizan dos listas.
      • La lista "Arriba a la derecha" permite definir directamente las opciones que aparecen en Action Bar.
      • La lista "En la parte inferior del menú" permite definir las opciones de menú que se muestran en el menú de la parte inferior de la ventana.
    3. Haga clic en "+" para añadir una nueva opción: la opción añadida se puede modificar en la parte inferior de la pantalla.
      Si la opción de menú es associated con un Image, sólo se mostrará el Image en el Action Bar.
Observación: Para editar las opciones en el editor, haga clic en la opción: aparece un menú desplegable con las opciones correspondientes. El menú contextual se utiliza para configurar las opciones (y para editar el código).
Universal Windows 10 App

En Universal Windows 10 App

En una ventana sin Action Bar, el menú principal de la aplicación se muestra en la parte inferior de la ventana..
En una ventana con Action Bar, las opciones de menú pueden ser:
  • que se encuentra en la parte superior derecha de la Action Bar.
  • que se encuentra en la parte inferior de la ventana
La posición de las opciones depende del dispositivo en el que se ejecute la aplicación.
Si la aplicación se ejecuta en PC , todas las opciones se muestran en Action Bar en la parte superior de la pantalla. Si las opciones son associated con Image s, sólo se muestra el Image en el Action Bar. Se muestra un menú desplegable en cuanto no hay espacio suficiente en el Action Bar para mostrar una opción adicional o en cuanto una opción no es associated con un Image. Este menú desplegable puede abrirse mediante un botón "...".
Si la aplicación se ejecuta en Mobile , todas las opciones se muestran en el Action Bar en la parte superior de la pantalla o en una barra de menú en la parte inferior de la pantalla (según la posición elegida en la interfaz). Las reglas de visualización son idénticas en la Action Bar y en la barra de menús.:
  • Si las opciones son associated con Image s, sólo se muestra el Image en el Action Bar o en la barra de menú.
  • Se muestra un menú desplegable en cuanto no hay espacio suficiente en la Action Bar o en la barra de menús para mostrar una opción adicional o en cuanto una opción no es associated con un Image. Este menú desplegable puede abrirse mediante un botón "...".
Para gestionar las opciones de menú que se encuentran en el menú Action Bar:
  • Caso 1: Una ventana con menú se convierte en una ventana con Action Bar: el menú de la ventana se muestra automáticamente en el Action Bar, en la parte inferior de la ventana.
  • Caso 2: Se crea una ventana con Action Bar y se desea crear el menú:
    1. En la pestaña "General" de la ventana description del Action Bar, haga clic en "2" o "3" (opciones de la barra de herramientas).
    2. Se visualizan dos listas.
      • La lista "Arriba a la derecha" permite definir directamente las opciones que aparecen en Action Bar.
      • La lista "En la parte inferior del menú" permite definir las opciones de menú que se muestran en el menú de la parte inferior de la ventana.
        Recordatorio: Si la aplicación se ejecuta en PC, estas opciones aparecen después de las de la lista "Arriba a la derecha" de Action Bar.
    3. Haga clic en "+" para añadir una nueva opción: la opción añadida se puede modificar en la parte inferior de la pantalla.
      Si la opción de menú es associated con un Image, sólo se mostrará el Image en el Action Bar.
Observación: Para editar las opciones en el editor, haga clic en la opción: aparece un menú desplegable con las opciones correspondientes. El menú contextual se utiliza para configurar las opciones (y para editar el código).
Vistas/Barra de navegación
AndroidiPhone/iPad El Action Bar le permite añadir un sistema de navegación por vistas a una ventana.. Esto le permite mostrar sólo algunas secciones de ventana.
Este sistema de vistas (o paneles) funciona como el control Pestaña.
La principal diferencia es la siguiente: los controles incluidos en cada panel se crean cuando el contenido del panel se muestra en la pantalla. Se destruyen en cuanto el contenido del panel deja de ser Visible (cambio de panel, por ejemplo).
Se puede acceder a los controles que aparecen en cada panel mediante programación cuando el panel al que pertenecen se muestra en la pantalla.
Esto le permite construir interfaces ricas en la misma ventana, limitando al mismo tiempo el impacto en el rendimiento de la aplicación.
La navegación entre los diferentes paneles se realiza a través de una barra de pestañas que se encuentra en la parte inferior de la ventana.:
La navegación entre los paneles
iPhone/iPad Observación: Si las opciones de la barra de herramientas están situadas en la parte inferior de la pantalla, no recomendamos que utilice una navegación por vista..
Para agregar vistas a un Action Bar:
  1. Visualizar la ventana description del Action Bar ("description" en el menú contextual).
  2. Pulsa "4"..
  3. Haga clic en el botón "Nueva vista.
    Ver description
  4. Especifique:
    • El título de la vista.
    • La ventana interna que se cargará en la zona (si "Con zona de Action Bar" está marcada).
    • El associated Icon (muy recomendado en iOS).
Opción específica: La opción "Con zona de Action Bar" facilita la gestión de las vistas. Esta opción se utiliza para crear automáticamente una Zona Action Bar control. Esta "Zona Action Bar" corresponde a un control Ventana interna. Por Default, esta zona tiene las dimensiones de la ventana y mostrará la ventana interna especificada.
Es posible:
  • especificar (en la ventana description del Action Bar) la ventana interna que se cargará en la zona.
  • especificar (mediante programación) la ventana interna que se cargará en la zona de acción.
    IF sFilter = "" THEN
    SWITCH ACTB_ActionBar
    CASE 1
    ChangeSourceWindow(ABZ_Dish, IW_ListDishes, "Starters", "")
    CASE 2
    ChangeSourceWindow(ABZ_Dish, IW_ListDishes, "Dishes", "")
    CASE 3
    ChangeSourceWindow(ABZ_Dish, IW_ListDishes, "Desserts", "")
    END
    ELSE
    ChangeSourceWindow(ABZ_Dish, IW_ListDishes, "", sFilter)
    END
Observaciones:
  • El uso de ventanas internas le permite limitar el número de controles cargados por la aplicación en un momento dado.. Sin embargo, también tienes la habilidad de usar el mecanismo de los aviones.
  • Para una aplicación multiplataforma, el uso de ventanas internas permite compartir un contenido con las aplicaciones iOS pero también con las aplicaciones Android que no incluyen ningún Action Bar (dispositivos que ejecutan una versión anterior a Android 3).
Aspecto de la Action Bar (pestaña "Detalles")

Presentación

La apariencia del Action Bar se puede definir en la pestaña "Detalles" de la ventana de descripción. Puede seleccionar:
  • La aparición de Action Bar / NavBar.
  • AndroidiPhone/iPad La animación de la Action Bar.
  • AndroidiPhone/iPad El modo de búsqueda en la pantalla Action Bar.

Apariencia del Action Bar

La apariencia de la Action Bar se puede configurar a través de:
  • la opción "Editar estilo de las barras", que permite configurar el estilo de la barra del sistema y de Action Bar.
  • la altura de la Action Bar (sólo a medida). Esta opción le permite get la misma altura de Action Bar independientemente del sistema utilizado. El alto se expresa en pixeles.
La ventana de configuración del estilo incluye:
  • La configuración de la barra del sistema:
    Se pueden configurar los siguientes elementos:
    • fondo Color utilizado.
    • color del texto.
      iPhone/iPad Observación: Es posible elegir características de la barra del sistema: "Texto oscuro, Transparent Background" o "Texto claro, Transparent Background"..
    • el modo de superposición. La opción "Superposición de la barra" permite set la transparencia de la barra del sistema. Cuando esta opción está marcada, la barra del sistema se convierte en Transparent. A continuación, puede ajustar la opacidad de la barra del sistema mediante la función Opacidad Property. Esta propiedad puede utilizarse en la ventana opcional "Desplazamiento de la barra de desplazamiento" Event, por ejemplo.
      Atención: La opción "Superposición de barras" cambia el origen de los controles. En el editor, los controles situados debajo de la barra del sistema se desplazan automáticamente.
  • La configuración Action Bar:
    Se pueden configurar los siguientes elementos:
    • fondo utilizado Color.
    • la color del tipo de letra utilizado.
      la opción "Aplicar color de la fuente a los íconos activos (Action Bar y barra de navegación)" permite aplicar el tipo de letra Color a los iconos. En este caso, los iconos seleccionados deben ser monocromos.
    • AndroidiPhone/iPad la imagen de fondo del Action Bar. 9-rango de resolución escala está disponible.
    • el modo de superposición. La opción "Superposición de barra" permite set la transparencia de la Action Bar. Cuando se marca esta opción, la Action Bar se convierte en Transparent. A continuación, puede ajustar la opacidad de la Action Bar utilizando el Opacidad Property. Esta propiedad puede utilizarse en la ventana opcional "Desplazamiento de la barra de desplazamiento" Event, por ejemplo. Ejemplo:
      // Used to get up to 30% opacity at 150px in Y
      // The opacity goes from 0 to 30%
      nMaxOpacity is int = 30
      nOpacity is int
      nOpacity = nMaxOpacity * ScrollbarPosition(MyWindow) / CoordinateEditorToScreen(150)
      IF nOpacity > nMaxOpacity THEN
      nOpacity = nMaxOpacity
      END
      ACTB_ActionBar.Opacity = nOpacity

      Atención: La opción "Superposición de barras" cambia el origen de los controles. En el editor, los controles debajo de la Action Bar se desplazan automáticamente.
AndroidiPhone/iPad

Varios

La opción " Ocultar automáticamente el Action Bar durante el desplazamiento " permite ocultar automáticamente el Action Bar al hacer scroll (en una ventana, ventana interna, supercontrol, Tabla o control Looper ). En algunos casos, es posible que no desee ocultar el Action Bar aunque esta opción esté activada. Estos ajustes se pueden definir con el programa AllowActionBarHiding Property. Esta opción se utiliza para get una desaparición progresiva del Action Bar:
Observación: Si se utiliza Visible en el control Action Bar, se realiza automáticamente una animación cuando desaparece el Action Bar.
AndroidiPhone/iPad

Búsqueda en la Action Bar (sólo sistema)

Para permitir realizar una búsqueda en el Action Bar:
  1. Seleccione la opción "Permitir búsqueda en el Action Bar". Un nuevo Event es automáticamente associated con el Action Bar control: "Validar la búsqueda". Esta Event hace posible la búsqueda.
  2. Si se marca la opción "Con historial de búsqueda", se mostrará al usuario el historial de búsqueda.
    iPhone/iPad Observación: La opción "Con botón para borrar el historial" permite borrar automáticamente el historial.
Para implementar la búsqueda , realice las siguientes operaciones, por ejemplo:
  1. Crear un botón de búsqueda en la Action Bar (un botón "Lupa" por ejemplo).
  2. En el código de esta opción, utilice ActionBarSearchVisible para mostrar la búsqueda control Campo de entrada. Por ejemplo:
    ActionBarSearchVisible(True, "Customer to find")
  3. Abrir los eventos de WLanguage associated con el Action Bar control. En la "Validación de la búsqueda" Event, introduzca el código utilizado para realizar la búsqueda y mostrar el resultado. En este código, tiene la capacidad de averiguar el valor introducido por el usuario a través de SearchValue.
    Por ejemplo:
    // Find a product.
    // The result is displayed in a Looper control.
    // The searched value corresponds to a parameter of the base query of the Looper control.
    QRY_Products.ParamName = ACTB_ActionBar.SearchValue
    LooperDisplay(LOOP_QRY_Products, taReExecuteQuery)
Observaciones:
  • Si el historial de búsquedas está habilitado:
    • cuando la control Campo de entrada está vacía, se proponen las 10 últimas búsquedas.
    • al iniciar la edición, se muestran 10 sugerencias en función de lo que ya se ha escrito.
  • Tienes la posibilidad de borrar el historial con ActionBarDeleteSearchHistory.
  • iPhone/iPad Si se selecciona la opción "Con botón para borrar el historial", al final de los resultados de la búsqueda aparecerá una opción para borrar el historial.
  • Cuando se activa la búsqueda en Action Bar se añaden automáticamente dos eventos WLanguage :
    • Validación de la búsqueda.
    • Modificar la búsqueda.
  • Cancelar la búsqueda: Para saber si la búsqueda ha sido cancelada por el usuario, compruebe el valor de SearchValue en la "Validación de la búsqueda" Event. Este valor se set a "" (cadena vacía) en caso de anulación.
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

Última modificación: 23/11/2023

Señalar un error o enviar una sugerencia | Ayuda local