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 Editor de diagramas
  • Presentación
  • Manipular el control Editor de diagramas mediante programación
  • Presentación
  • Exportar un diagrama como imagen
  • Gestionar bibliotecas de formas
  • Consejos de programación
  • Obtener las características de una selección en un control Editor de diagramas
  • Utilizar la propiedad Note de las diferentes formas
  • Determinar el tipo de una forma
  • Características específicas de WEBDEV
  • Programación del control Editor de diagramas en WEBDEV
  • Ejemplo: Obtener y modificar la forma seleccionada
  • Ejemplo: Obtener el índice de la forma agregada en un control Editor de diagramas
  • Propiedades WLanguage asociadas
  • Diagram Editor control propiedades
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
WINDEV y WEBDEV permiten manipular controles Editor de diagramas mediante programación. Para ello, utilice directamente la variable del control en el código.
Los controles Editor de diagramas también se pueden manipular mediante programación utilizando Funciones de diagrama.
Esta página de ayuda explica cómo manipular controles Editor de diagramas mediante programación.
Manipular el control Editor de diagramas mediante programación

Presentación

Los controles Editor de diagramas permiten crear y mostrar diagramas mediante programación. Para ello, WLanguage incluye:

Exportar un diagrama como imagen

Para exportar un diagrama como imagen, utilice la función DiagramToImage. Esta función exporta el diagrama como una variable de tipo Image. A continuación, llame a una de las siguientes funciones para obtener la imagen del diagrama en el formato deseado:
dSaveImageBMPGuarda una imagen:
  • en un archivo en formato BMP.
  • en la memoria.
dSaveImageGIFGuarda una imagen:
  • en un archivo en formato GIF.
  • en la memoria.
dSaveImageICOGuarda una imagen en formato de ícono en un archivo o en la memoria.
dSaveImageJPEGGuarda una imagen:
  • en un archivo JPEG.
  • en la memoria.
dSaveImagePNGGuarda una imagen:
  • en un archivo PNG.
  • en la memoria.
dSaveImageTIFFGuarda una imagen en formato TIFF en un archivo o en la memoria.

Gestionar bibliotecas de formas

El control Editor de diagramas incluye varias bibliotecas de formas.
Sin embargo, puede crear una biblioteca de formas personalizada. Una biblioteca de formas es un diagrama cargado como biblioteca. Este diagrama se puede crear:
  • mediante el control Editor de diagramas:
    1. Cree un diagrama.
    2. Importe las imágenes que corresponden a las formas deseadas.
    3. Guarde el diagrama como un archivo ".wddiag"..
  • mediante programación:
    1. Cree una variable de tipo Diagram. Esta variable contendrá la biblioteca de formas.
    2. Cree las diferentes formas personalizadas.
    3. Agregue las formas al diagrama "Biblioteca".
    4. Guarde el diagrama "Biblioteca" como un archivo ".wddiag".
Una vez creado el diagrama "Biblioteca":
  1. Cargue el diagrama como una biblioteca (con la función DiagramLoadLibrary).
  2. Agregue la biblioteca al array de bibliotecas del diagrama final.
Ejemplo de una biblioteca creada mediante programación:
sFile is string = fTempDir() + [ fSep ] + "custom_library.wddiag"
 
// Creates a library entirely through programming
TempLibrary is Diagram
 
D1 is diagOval
D1.Width = 50
D1.Height = 50
D1.Background.Color = DarkRed
Add(TempLibrary.Shape, D1)
 
D2 is diagOval
D2.Width = 50
D2.Height = 70
D2.Background.Color = DarkGreen
Add(TempLibrary.Shape, D2)
 
// Use the shapes of the temporary diagram to create the library
// Saves the diagram to the disk
DiagramSave(TempLibrary, sFile)
 
// Load the diagram as a library
MyLibrary is diagLibrary
DiagramLoadLibrary(MyLibrary, sFile)
MyLibrary.Name = "Custom"
 
// Adds the library to the Diagram Editor control
Add(DIAGEDT_Diagram.Library, MyLibrary)
 
ToastDisplay("The custom library has been added to the list.")
Observación: Para utilizar solo las bibliotecas personalizadas, elimine las bibliotecas predeterminadas. Para ello, utilice la función ArrayDeleteAll en el array de bibliotecas del diagrama.
Consejos de programación

Obtener las características de una selección en un control Editor de diagramas

Puede obtener las características de los elementos seleccionados en un control Editor de diagramas utilizando la propiedad Selection. Si la selección incluye más de una forma, puede recorrer el array de formas.
Ejemplo:
// Retrieve the selected elements in a Diagram Editor control
MySelection is diagSelection <- DIAGEDT_MyDiagram.Selection
IF MySelection.Shape.Count > 0 THEN
// Get the shapes
FOR EACH stShape OF MySelection.Shape
STC_SELECTION_INFO = stShape.Name + "has been selected." +
" [ " + stShape.X + ", " + stShape.Y + " - " + stShape.Width +
"x" + stShape.Height + " ]"
END
ELSE
STC_SELECTION_INFO = "Click a shape in the diagram to get the selection"
END

Utilizar la propiedad Note de las diferentes formas

Las variables de tipo diagShape (diagOval, diagRectangle, etc.) tienen una propiedad Note. Esta propiedad puede utilizarse para guardar información adicional: número de la forma, tipo de forma, información de lógica de negocio, etc, ... Si el diagrama se guarda como un archivo "wddiag", la información especificada con la propiedad Note también se guarda. Esta información puede ser leída y procesada al recorrer las diferentes formas del diagrama.
Para ver un ejemplo de esta solución, consulte crear un diagrama interactivo.

Determinar el tipo de una forma

Para determinar el tipo de forma, asigne la forma a las variables disponibles.
Ejemplo:
FOR EACH shape OF DIAGEDT_MyDiagram.Shape
ImageShape is diagImage <- shape
IF ImageShape <> Null THEN
  // The shape is an image
END
END
WEBDEV - Código ServidorWEBDEV - Código Navegador
Características específicas de WEBDEV

Programación del control Editor de diagramas en WEBDEV

El control Editor de diagramas puede manipularse en código Servidor utilizando las diferentes funciones y tipos de variables disponibles en WLanguage.
En código Navegador, estas funciones y variables no están disponibles. La solución es utilizar un control Botón invisible que contenga el código Servidor a ejecutar. El código Clic del control Botón puede ejecutarse desde el código Navegador utilizando la función ExecuteProcess con la constante trtClick.
Observaciones:
  • Le recomendamos utilizar el código Clic (servidor) de tipo "AJAX".
  • La función AJAXExecute no puede utilizarse en código Navegador.
Por ejemplo, el código Navegador de doble clic de un formulario puede ejecutar el código del control BTN_DoubleClick:
// Double click on a shape in the Diagram Editor control
ExecuteProcess(BTN_DoubleClick, trtClick)

Ejemplo: Obtener y modificar la forma seleccionada

Puede utilizar la propiedad Selection para obtener y establecer las características de la forma seleccionada en un control Editor de diagramas en un sitio WEBDEV.
Para ello:
  • Cree un control Botón para obtener la nueva forma.
  • Ejecute el código del botón desde el código "Selección de una forma" (navegador) del control Editor de diagramas.
El código Clic (servidor) del control Botón es el siguiente (opción "Ajax" activada):
// Get the selection
MySelection is diagSélection <- DIAGEDT_MyDiagram.Sélection
// Checks if the selection contains only one shape
IF MySelection.Shape.Count = 1 THEN
// changes the colors
MySelection.Shape[1].Border.Color = LightGreen
MySelection.Shape[1].Background.Color = LightRed
ELSE
Info("Click on a shape in the diagram to see the selection")
END
El código "Selección de una forma" (navegador) del control Editor de diagramas que ejecuta el código Clic del botón es el siguiente:
ExecuteProcess(BTN_Select, trtClick)
RETURN True

Ejemplo: Obtener el índice de la forma agregada en un control Editor de diagramas

Puede utilizar el evento "Adición de una forma" (navegador) de un control Editor de diagramas en un sitio WEBDEV para obtener el índice de la forma agregada en el control.
Para ello:
  • Cree un control Botón para:
    • obtener la posición del cursor.
    • obtener la forma creada.
  • Ejecute el código del botón desde el código "Adición de una forma" (navegador) del control Editor de diagramas.
El código del botón es el siguiente:
  • Código de inicialización de BTN_Add (servidor):
    GLOBAL
    XPos, YPos are int <browser synchronized>
  • Código Clic de BTN_Add (navegador):
    (XPos, YPos) = (MouseXPos(mpControl), MouseYPos(mpControl))
  • Código Clic (servidor) de BTN_Add (opción "Ajax" activada):
    MyDiagram is Diagram
    nIndex is int

    MyDiagram <- DIAGEDT_NoName1

    nIndex = DiagramInfoXY(DIAGEDT_NoName1, XPos, YPos)

    IF nIndex = Null = THEN
    RESULT False
    END

    MyShape is diagShape <- diagram.Shape[nIndex]
  • Código "Adición de una forma" (navegador) del control Editor de diagramas:
    ExecuteProcess(BTN_Add, trtClick)
    RETURN True
Propiedades WLanguage asociadas

Diagram Editor control propiedades

Las siguientes propiedades permiten gestionar las características de un control Editor de diagramas mediante programación:
EditModeLa propiedad EditMode obtiene y establece el modo de edición del control Editor de diagramas: selección o dibujo a mano alzada.
GridlinesVisibleEl GridlinesVisible Property se utiliza para:
  • Determina si las líneas de la cuadrícula son o no Visible en un control.
  • Mostrar u ocultar las líneas de la cuadrícula en un control.
LibraryLa propiedad Library permite manipular las diferentes bibliotecas predefinidas asociadas a un control Editor de diagramas. Esta propiedad accede al array de bibliotecas del control Editor de diagramas.
LibraryPanelVisibleLa propiedad LibrayPanelVisible permite:
  • determinar si el panel "Biblioteca" se muestra en un control Editor de diagramas.
  • mostrar u ocultar el panel "Biblioteca" en un control Editor de diagramas.
ModifierPanelVisibleLa propiedad ModifierPanelVisible permite:
  • determinar si el panel "Modificador" se muestra en un control Editor de diagramas.
  • mostrar u ocultar el panel "Modificador" en un control Editor de diagramas.
PageBorderVisibleLa propiedad PageBorderVisible permite:
  • determinar si los bordes de página se muestran en un control Editor de diagramas.
  • mostrar u ocultar los bordes de página en un control Editor de diagramas.
SelectionLa selección Property se utiliza para get las características de la selección (o cursor):
  • en un control Procesador de texto.
    Observación: Esta selección se encuentra en la sección que se está editando en la control (cuerpo, cabecera o pie de página).
  • de un control Hoja de cálculo.
  • en un editor HTML control.
  • en un control Editor de diagramas.
Para obtener la lista completa de las propiedades WLanguage que pueden utilizarse con los controles Editor de diagramas, consulte Diagram Editor control propiedades.
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: 24/10/2023

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