Sequence

Namespace: Wisej.Web.Ext.jSequence

Assembly: Wisej.Web.Ext.jSequence (4.1.0.0)

• Control
  • Widget
    • Sequence

Represents a control that turns text into UML sequence diagrams using the js-sequence-diagrams library: https://bramp.github.io/js-sequence-diagrams/.

C#

public class Sequence : Widget

VB.NET

Public Class Sequence
    Inherits Widget

The diagram is defined by the UML text and rendered as SVG on the client using the selected Theme. Clicking a text element of the diagram fires the ElementClick event.

Example:

Creating a simple sequence diagram:

var sequence = new Sequence
{
    Dock = DockStyle.Fill,
    Theme = "Hand",
    UML = "Browser->Server: GET /orders\n" +
          "Server->Database: SELECT * FROM Orders\n" +
          "Database-->Server: rows\n" +
          "Server-->Browser: 200 OK"
};
sequence.ElementClick += (s, e) => AlertBox.Show("Clicked: " + e.Element);
this.Controls.Add(sequence);

Constructors

Sequence()

Initializes a new instance of the Sequence control.

Properties

InitScript

String: Returns the initialization script that renders the diagram on the client.

The script is built from the embedded startup.js resource using the current UML and Theme values. The setter is ignored.

Packages

List<Package>: Returns the list of packages (jQuery, WebFont, Snap.svg, Underscore and js-sequence-diagrams) loaded on the client before the diagram is created.

Theme

String: Returns or sets the name of the theme to use to draw the UML diagram. (Default: "Simple")

The supported values are "Simple" (the default) and "Hand" (hand-drawn look). The name is case insensitive.

UML

String: Returns or sets the UML definition of the diagram using this syntax: grammar. (Default: "")

Each line defines a participant, a message (A->B: text for a solid line, A-->B: text for a dashed line, A->>B: text for an open arrow), a note (Note left of A: text, Note over A,B: text) or a title (Title: text). Setting this property redraws the whole diagram. A null value is converted to an empty string.

Example:

Defining a diagram with a title, participants, messages and a note:

this.sequence1.UML = string.Join("\n",
    "Title: Login",
    "participant User",
    "participant App",
    "User->App: Enter credentials",
    "Note right of App: Validate password",
    "App-->User: Welcome!");

Methods

GetImage(callback)

Retrieves an image of the rendered diagram and passes it to the callback method.

Parameter	Type	Description
callback	Action<Image>	Callback method that receives the Image object, or null if the diagram is empty.

The SVG diagram is rasterized in the browser to a PNG image with the current size of the control, and sent back to the server. The callback is invoked asynchronously when the image is received.

Throws:

• ArgumentNullException callback is null.

Example:

Saving the diagram image to a file:

private void buttonSave_Click(object sender, EventArgs e)
{
    this.sequence1.GetImage(image =>
    {
        if (image != null)
            image.Save(Application.MapPath("Diagrams/login.png"), ImageFormat.Png);
    });
}

GetImageAsync()

Asynchronously returns an image of the rendered diagram.

Returns: Task<Image>. An awaitable Task that contains the Image, or null if the diagram is empty.

The SVG diagram is rasterized in the browser to a PNG image with the current size of the control.

Example:

Displaying the diagram image in a PictureBox:

private async void buttonSnapshot_Click(object sender, EventArgs e)
{
    this.pictureBox1.Image = await this.sequence1.GetImageAsync();
}

OnElementClick(e)

Fires the ElementClick event.

Parameter	Type	Description
e	ElementClickEventArgs

OnWidgetEvent(e)

Handles events fired by the widget.

Parameter	Type	Description
e	WidgetEventArgs

Events

ElementClick

ElementClickEventHandler Triggered when the user clicks an element in the sequence.

Implements

Name	Description
IUserData
IBindableComponent
IDropTarget
IWisejComponent
IWisejControl
IWisejHandler
IWisejSerializable