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:
- WebFlow Graph Editor
This window is where you are going to create, delete, and
connect the Modules.
- WebFlow Control
This window allows you to switch between create, delete, and run
modes.
- WebFlow Modules
This window gives you the available modules that you can use.
Figure 1
How can you select a module?
- Goto WebFlow Modules window.
- 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.
- 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?
- Select the module.
- Drag your mouse to the WebFlow Graph Editor window.
You will see the Visual Representation of the module.
- 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?
- If you did not place the module yet, then goto Edit
menu on the WebFlow Graph Editor window, and select
Delete.
- 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,
- Place your mouse an output port representation of the module.
- Press your mouse but do not release the button.
- Place your mouse an input port representation of the
another module by dragging your mouse.
- Release the button.
- 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,
- Goto WebFlow Control window with your mouse.
- 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.
- Goto WebFlow Control window with your mouse.
- Click on the checkbox left hand side of the
delete label.