article

Topics

• Why Create GUIs?
• GUI Views
• Designing a GUI
• GUI Building Tips
• Working with the GUI Editor
• Traversing the Tree
• Attribute Lists
• Tree View - Viewing Attributes vs. View Structure
• Linking to the Model
• Copy an Existing GUI

Graphical User Interfaces (GUIs) are accessed from the Toolbox. (View menu > Toolbox > Add > Modeling Logic > Graphical User Interface).

GUIs allow you to create your own window interfaces for your model and its objects. A GUI can communicate with any object in the model, in any way you want.
GUIs are so common that there is a button in the toolbar to open such a window.

In FlexSim, GUIs are stored as a node with sub-nodes in the tree. Each node represents a part of your GUI. The attributes in the object data of each of those nodes represent variables that affect how that part of your GUI works. When a GUI is opened, it creates a new node in VIEW:/active that is a copy.

Why Create GUIs?

• Not everyone knows how to navigate FlexSim. You can give others the ability to manipulate certain parts of your model without having to know FlexSim.
• Save time on extensive testing. GUIs can help you to change parameters quickly in your model during the testing process.
• GUIs look professional.

GUI Views

FlexSim GUIs are made up of building blocks called views. Views are windows that perform specialized roles and can be combined hierarchically. These views will allow you to view and manipulate data in the FlexSim tree structure. Since data takes many forms, there are many types of views.
Below is a list of the View Types available in FlexSim. The number next to each view type is the viewwindowtype. This number is a direct reference to the type of view and will not change in future releases of FlexSim.

For more information on GUI views, see the View Attributes Reference page.

View Types
Windows Common Controls		FlexSim Registered Controls
Static (or label) Button Radiobutton Checkbox Edit Trackbar Combobox Listbox Tabcontrol Scrollbar Statusbar Spinner DateTimePicker Treeview	103 100 106 105 101 122 109 114 115 104 110 123 125 119		Dialog Panel Groupbox Table Graph 3D View Tree IconGrid Script HTML	4 102 107 5 6 2 0 7 8 124

Creating a Modal Window: To create a modal window, use viewwindowtype 4 (Dialog) and add the subnode FS_MODAL into the object's style attribute.

Designing a GUI

There are whole books written about the philosphy of GUI design. The major topic, ease of use. Avoid the temptation of making a GUI window try to do too much. GUIs should be simple to navigate and focused in their function.

It is recommended to sketch out what you want a GUI window to look like before you open the GUI editor.

GUI Building Tips

It is important to have a good Control naming convention. A good short name will make referencing the object in code much easier.

Use Panel controls (invisible and not invisible) to group, move, and copy sections of your GUI.

GUI building essentially consists of adding views to your GUI window and giving those views the appropriate attributes. While the "View Specific" option of the attribute list gives you some good hints of which attributes are appropriate to add, there are also other ways you can become more comfortable and experienced building GUIs.

Another way you can become more familiar with building GUIs is by simple experimentation. Add an attribute that you've never added or seen before and see how it affects the GUI. If there is no change, then either the attribute doesn't do anything for this type of view, or it's somehow not implemented right. Fiddle around with different settings and values for the attribute to see if and how it changes the GUI. If still nothing changes, then just move on and try something else. If it does, great! That's one more tool that you have in your knowledge base.

Practice, practice, practice. As you continue to build more and more GUIs, the speed and efficiency with which you do it will increase significantly, and you will be able to get a feel for what GUI styles are more user friendly.

Working with the GUI Editor

Here are some tips with working with the GUI editor:

• Think about not only how to arrange the controls in the GUI canvas (window editor) but also in the tree. Having familiarity with the Tree is a requirement for good GUI building.
• Moving controls in the tree can be done using the Edit Highlighted Object and Tree Movement fields in the GUI builder window.

  

• The attribute nodes of the GUI controls define how the control will look/behave. Each control has a default set of attribute nodes but others can be added from the Controls palette on the GUI builder window.

Traversing the Tree

@ : This symbol tells the traversal to go to the owner view of the current node. For this coldlink node, it is the main GUI window.

> : This symbol tells the traversal to go into a node's attribute tree.

+ : This symbol tells the traversal to read the current node's text as a path to an object, and go to that object.

/ : This symbol tells the traversal to go into the current node's sub-tree.

.. : This symbol tells the traversal to go to the current node's parent tree, or up one level.

? :This symbol causes a recursive tree search for the subsequent name. For example, node("/?FlowItemBin", model()) will search for a node with the name FlowItemBin in the model tree. This returns the same node reference as an explicit path definition would: node("/Tools/FlowItemBin", model()).

$flexscript$ : This syntax allows you to enter in custom flexscript code when accessing the path. For example, if you had a Global Macro#define MY_NODE_RANK 4 then having a path of >objectfocus+/$MY_NODE_RANK$ would be read as >objectfocus+/4. You can execute any valid flexscript code. Another example, if you have an object in the model with a label called focus that contains "Tool4", then the following path >objectfocus+/$getlabel(node("MyObject", model()), "focus")$ would be read as >objectfocus+/Tool4.

Below is a example table for Tree Referencing (Tree shown below table)

Code:	Returns:
c itemcurrent(c) node(">itemcurrent",c) ownerobject(c) node("..",c) node("../../panel5/ortho12",c) ownerview(c) node("@",c) node("@>toolwindow",c) node("@/tabcontrol2/panel3/1",c) node("../../3/1",c) node("@/button8",c) node("@>objectfocus+",c)	combobox11 itemcurrent itemcurrent panel4 panel4 ortho12 GUI 2 GUI 2 toolwindow edit6 ortho12 button8 model

Attribute Lists

The list of possible attributes to the left of the GUI builder's tree view has three options for viewing attribute lists. They are: all attributes, commonly used attributes and view specific attributes.

All Attributes - If this option is selected, all possible attributes are displayed. Usually you will not need to use this option.

Commonly Used - If this option is selected, a list of commonly used attributes will be shown. These include things like alignment attributes, which allow you to anchor a view's position or size to the right or bottom of its container view.

View Specific - This option is the default option. If it is selected, then the attribute list that is shown will be specific to the type of view, or view, that you are currently editing. If you click on a button view, an attribute list will appear that is specific to a button. This includes an OnPress attribute, which is executed when the button is pressed. A label view will have a different set of attributes that are used for it, etc.

To see a detailed list of attributes and their usage by control type, go to View Attributes Reference.

Tree View - Viewing Attributes vs. View Structure

The GUI builder's tree view also has two options for viewing the tree. They are: view attributes and view structure.

View Attributes - This option will view the attributes of the currently selected view.

View Structure - This option will view the tree structure of the currently selected view. This is useful for rearranging and editing the structure of the GUI's tree.

No Update - This option will cause the GUI builder to not update the tree focus when you click on an control in the gui canvas. Some users prefer this as it doesn't change the view every time you click in the canvas.

Linking to the Model

FlexSim uses two types of linking when tieing a GUI object into the model. Coldlinks, and hotlinks.

coldlinks

A coldlink attribute tells the view's text field to be linked to a certain node in the object's attribute tree. The link is "cold" because it gets the value only once when the window opens, and sets the value only when an apply button is pressed.
Example: On the Processor tab of the Processor, the Max Content field is an example of a coldink.

hotlinks

A "hot" link, on the other hand, would continuously update its text field as the value in the model changes.
Example: On the statistics page of the Processor, the Content statistics are examples of a hotlink.

hotlinkx/coldlinkx

Similar to the above, but rather than using a special string of characters, FlexScript code is allowed to establish the link. The "c" passed in as argument 2 of the below example represents the owner object of the attribute.
Example: return(node("@>objectfocus+",c));

Copy an Existing GUI

If you see a window view or GUI that you want to copy verbatim from an existing window to your GUI there are two ways to copy.

Copy from Tree
Find that view in the tree, right click on it and select "Edit > Copy"

Copy from Window
Open up the window you want to copy. Right click on it, and select "View > Explore Structure" from the popup menu. This will open a tree window that shows the structure of the window. From here you can view the attributes of that window to see which attributes are present, so that you can add those attributes to your own GUI. Right click on the view node and select "Edit > Copy"

Now go to your own GUI's tree structure. In the GUI's tree structure, create a new blank node by right clicking on the container view you want to place it in, and select "Node > Insert Into". Then right-click on the new blank node, and select "Edit > Paste". This will paste the view into your GUI. Press F5 to refresh the view with its added view.