Using Diagrams in Websydian

• An Example Web Application Flow
• Page Structure
• Model Structure
• Call Structure
• The Resulting Diagram
• Using the Diagram Editor in Development
• The Triples

The model structure required by Websydian leads to useful diagrams.  Below is outlined a simple example Web Application to illustrate how the corresponding AllFusion Plex Diagram provides a good overview of the application.

An Example Web Application Flow

The example used to illustrate this point allows the user to list some items from a database, add new items to the list and delete items from the list.  To keep the example simple, an item cannot be changed once it has been added.

Page Structure

The application consists of three pages:

• MainPage - This page shows items in a list, and it allows the user to indicate that a new item is to be added.  From the list, it is also possible to select an item and specify that it is to be deleted.
• AddPage - The page contains some fields which the user is supposed to fill out about the item to be added, and allows the user to confirm that the item is to be added, or cancel the add operation.
• DeletePage - This page displays information about the item to be deleted, and allows the user to confirm that the item is to be deleted, or cancel the delete operation.

Model Structure

Conforming to the function structure required by Websydian, the following functions are defined:

• Three Page Generator functions (MainPage, DeletePage, and AddPage), one for each Web Page in the example.
• Under each Page Generator Function, the Event Handler functions are placed:
  
  • MainPage - (1) The Event Handler (called Add in the model) is responsible for calling the Page Generator that lets the user enter data about an item, and (2) the one (called Delete in the model) responsible for getting the information about the item and calling the Page Generator which lists that information.
  • AddPage - The Event Handler handling the Add operation - in case it is confirmed - is placed by using an includes triple.  The Event Handler handling the Cancel operation is placed by using a comprises triple.
  • DeletePage -  The Event Handler handling the Delete operation - in case it is confirmed - is placed by using an includes triple. The Event Handler handling the Cancel operation is placed by using a comprises triple.
    

  The Event Handler function responsible for cancelling is refered by using comprises because it is shared between the Add page and Delete page.

Call Structure

The call structure of the example is straightforward:

• The two Event Handler functions on the MainPage call the Page Generator functions of the web page to be shown after the web event has been handled.
• The Cancel and two Confirm Event Handlers simply call the Page Generator of the MainPage function, because this has to be shown after the cancellation or confirmation, respectively.

The Resulting Diagram

The example application described above yields the following AllFusion Plex diagram:

The point here is that the diagram tells quite a bit of the story described so laboriously above:

• It shows the Page Generator function for each HTML page in the Websydian application.
• It shows the Event Handlers within each Page Generator function.
• It shows the Page Generator functions that the Event Handler functions may call.  In the application used as an example here, the Event Handlers always call the same Page Generator function, but that is only rarely the case in real applications.
• It shows the Event Handler functions referenced using comprises triples, and what Page Generators they may call.

Basically, all of the fundamental structure of the application can be shown using the AllFusion Plex Diagram Editor.

Using the Diagram Editor in Development

Just like any other AllFusion Plex application, it is sometimes advantageous to do parts of the development of a Websydian application by using the Diagram Editor.  In the initial stages of the development, not least because you tend to structure the application by using the web pages as the organizing principle anyway, this approach lets the developers maintain a high-level view on the entire application.

The Triples

For reference, the figure below shows a Model Editor listing the triples corresponding to the diagram above:

The triple declarations of the example application defined above.