User Interface of the Webflow Prototype

Description of Frames

When you start the WebFlow, you are going to see three windows on your screen. These are:

Figure 1

How can you select a module?

  1. Goto WebFlow Modules window.

  2. Left part of the window gives you the module hierarchy.
    White buttons tells you that it is a package and it has some sub components. Yellow buttons represents the modules.
    Plus sign(+) in front of the button names tells you that you can go down in the hierarchy. Minus sign(-) in front of the button names tells you that you can go up in the hierarchy.

  3. After you find the appropriate yellow button, you have to click on it with your mouse. Now you selected the module.

How can you place a module?

  1. Select the module.

  2. Drag your mouse to the WebFlow Graph Editor window. You will see the Visual Representation of the module.

  3. When you click again while you are in the WebFlow Graph Editor window, you will drop the module into the editor. Now you place the module.

How can you delete a module?

  1. If you did not place the module yet, then goto Edit menu on the WebFlow Graph Editor window, and select Delete.

  2. If you placed the module before, then place your mouse on the module in WebFlow Graph Editor window and click so that you select the module. After you select the module, goto Edit menu on the WebFlow Graph Editor window, and select Delete.

How can you connect two modules?

After you place the module, you see the Visual Representation of the Module in the WebFlow Graph Editor window. In this representation, you see the name of the module and some colorfull small circles around this representation. These small circles are the input/output ports of the modules. To connect an output of one module to an input of another module,

  1. Place your mouse an output port representation of the module.

  2. Press your mouse but do not release the button.

  3. Place your mouse an input port representation of the another module by dragging your mouse.

  4. Release the button.

  5. If ports are compatible, then two ports are going to be connect with blue lines.

How can you run connected modules?

After you placed and connected modules,

  1. Goto WebFlow Control window with your mouse.

  2. Click on the checkbox left hand side of the run label.

How can you delete the connected modules?

This operation clears all the running modules.

  1. Goto WebFlow Control window with your mouse.

  2. Click on the checkbox left hand side of the delete label.