AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

Ayuda / Desarrollar una aplicación o un sitio web / Controles, ventanas y páginas / Controles: tipos disponibles / Control Editor de diagramas
  • Presentación
  • Principio
  • ¿Cómo proceder?
  • Crear el plano
  • Configurar los asientos
  • Interfaz de usuario: crear el control
  • Interfaz de usuario: inicializar el diagrama
  • Interfaz de usuario: clic
  • Interfaz de usuario: pasar el cursor sobre un elemento (solo en WINDEV)
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
El control Editor de diagramas permite que los usuarios finales creen y editen diagramas.
Por ejemplo, puede utilizar un plano de asientos (de un estadio, salón de eventos, oficinas, etc.) para que los usuarios reserven asientos. En este caso, los usuarios finales deberían poder hacer clic en el plano directamente para seleccionar sus asientos.
Observación: En este ejemplo, los usuarios finales podrán reservar asientos, pero el mismo principio puede utilizarse en otros tipos de aplicaciones.
Principio
Los usuarios podrán manipular el plano a través del control Editor de diagramas. Este plano es de solo lectura. El usuario no debe editar el diagrama, sino interactuar con sus elementos. En este caso, el usuario debe poder seleccionar asientos, sin modificar el plano.
El control Editor de diagramas incluye diferentes eventos para permitir estas interacciones:
  • doble clic en una forma,
  • WINDEV cursor sobre,
  • WINDEV botón izquierdo liberado,
  • selección de una forma,
  • ...
Esto significa que:
  • WINDEV al pasar el cursor sobre de un elemento, se abre un globo de ayuda.
  • los usuarios pueden hacer clic o doble clic en una forma para seleccionarla (seleccionar y reservar asientos en este caso). El color o la imagen del asiento puede cambiar en función de si está disponible o reservado.
¿Cómo proceder?
Las etapas para crear un diagrama interactivo son las siguientes:
  1. Crear el plano.
  2. Configurar los asientos.
  3. Crear la interfaz de usuario:

Crear el plano

El plano de asientos es un diagrama creado con el control Editor de diagramas. Este tipo de plano contiene diferentes formas que representan los asientos disponibles.
Este plan se guarda como un archivo ".wddiag". Los usuarios podrán seleccionar asientos en el plan utilizando un control Editor de diagramas.

Configurar los asientos

Una vez creado el plano, hay que "configurar" cada elemento.
En el caso de una sala de conciertos, por ejemplo, cada asiento tiene un nombre y un estado. El estado se puede guardar fácilmente en la propiedad Note de la variable diagShape.
Esta información se debe configurar en el diagrama (en el archivo ".wddiag" que corresponde al plano).
Consejos:
  • Esto puede hacerse mediante una ventana específica. Esta ventana permitirá al autor del plano nombrar cada asiento y asociar un comentario, si es necesario.
  • Los asientos reservados o disponibles pueden almacenarse en un archivo, array, etc., para verificar fácilmente si los asientos están disponibles o no.

Interfaz de usuario: crear el control

Para reservar asientos correctamente, el usuario no debe poder editar el diagrama en el control Editor de diagramas.
Para crear el control Editor de diagramas:
  • En WINDEV: en la pestaña "Creación", en el grupo "Controles gráficos", despliegue "Ofimática" y seleccione "Editor de diagramas".
  • En WEBDEV: en la pestaña "Creación", en el grupo "Controles gráficos", haga clic en "Diagramas".
Para que el control Editor de diagramas sea de solo lectura:
  1. Abra la ventana de descripción del control.
  2. Para ocultar las barras de herramientas y los paneles: En la pestaña "General", desactive las barras de herramientas y los paneles.
  3. Para que el control sea de "solo lectura", utilice uno de los siguientes métodos:
    • WINDEV Método 1: En la pestaña "UI" de la ventana de descripción del control, seleccione "Solo lectura".
    • Método 2: en el código, utilice la propiedad State para que el control no responda.

Interfaz de usuario: inicializar el diagrama

La inicialización del diagrama consiste en:
  1. Cargar el plano "en blanco" en la interfaz (con la función DiagramLoad): el plano "en blanco" corresponde al archivo ".wddiag" creado anteriormente.
    Ejemplo:
    diagControl is Diagram
    diagControl <- DIAGEDT_Plan
    diagControl.Load("seating_plan.wddiag")
    // Make the diagram unresponsive if necessary
    DIAGEDT_Plan.State = Inactive
  2. Inicializar el plano para ver los asientos que ya están reservados. Para ello, basta con manipular la forma que corresponde al asiento mediante una variable de tipo diagShape. Puede asociar una nota, cambiar el borde, el color de fondo, etc, ...
    Ejemplo:
    ShapeInDiagram is diagShape
    FOR EACH ShapeInDiagram OF diagControl.Shape
    sShapeName = ShapeInDiagram.Name // Gets the name of the shape
    // Compare shape name to the list of reserved seats
    // => Specific process for reserved seats:
    // applies a red color to the seat and associates "Reserved" to the note
    // => Standard process for available seats
    END
Observación: la lista de asientos reservados puede almacenarse en un array, un archivo, etc.

Interfaz de usuario: clic

En este ejemplo, el control Editor de diagramas es de solo lectura: la forma seleccionada no se puede manipular directamente con la propiedad Selection. Para identificar el asiento sobre el que se hizo clic, se debe utilizar la función DiagramInfoXY.
En WINDEV, cuando el usuario final hace clic en un asiento disponible en el plano, es necesario seleccionar el asiento. Para ello, utilice el evento "Botón izquierdo liberado" del control Editor de diagramas. La función DiagramInfoXY permite identificar la forma en la que se hizo clic.
diagControl is Diagram
...
// Gets the index of the shape under the cursor
nIndex is int
nIndex = DiagramInfoXY(DIAGEDT_Plan, MouseXPos(mpControl), MouseYPos(mpControl))
// The selected shape corresponds to diagControl.Shape[nIndex]
Todas las características de la forma seleccionada estarán disponibles.
En WEBDEV, esto funciona de forma ligeramente diferente. Solo el evento "Doble clic en una forma" está disponible en código Navegador. Además, no se puede acceder a las variables de tipo diagShape en código Navegador. Para gestionar los dobles clics, se debe crear un control Botón. El control Botón contiene un código Servidor y Navegador que permiten obtener la posición del ratón y seleccionar asientos:
  • Código Navegador:
    • Inicialización del control Botón (código Servidor):
      GLOBAL
      XPos, YPos are int <browser synchronized>
    • Clic en el control Botón - código Navegador: Obtener la posición:
      (XPos, YPos) = (MouseXPos(mpControl), MouseYPos(mpControl))
    • Clic en el control Botón - código Servidor (AJAX activado): Obtener la forma bajo el cursor:
      diagControl is Diagram
      ...
      // Gets the index of the shape under the cursor
      nIndex is int
      nIndex = DiagramInfoXY(DIAGEDT_Plan, XPos, YPos)
      // The selected shape corresponds to diagControl.Shape[nIndex]
Todas las características de la forma seleccionada estarán disponibles.

Interfaz de usuario: pasar el cursor sobre un elemento (solo en WINDEV)

Cuando el usuario pasa el cursor por encima de un asiento, puede hacer que se aparezca un globo de ayuda (tooltip) utilizando el evento "Cursor sobre" del control Editor de diagramas. Al igual que en el caso de los clics, se puede utilizar la función DiagramInfoXY para determinar sobre qué asiento se está pasando el cursor. Para mostrar la información deseada, utilice la propiedad ToolTip del control del Editor de diagramas.
Versión mínima requerida
  • Versión 27
Esta página también está disponible para…
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 23/05/2023

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