Archive for July, 2011
If you find your simulation does not work as your expected, especially some elements do not respond your input, you will need to troubleshoot your simulation and fix the expression in your plot. The primary problem is to find out which element has incorrectly defined actions. The troubleshooting is not difficult at all, you don’t have to be a programmer to understand the process.
- Firefox + Firebug (plug-in, can be downloaded here)
- Safari + Error Console (built-in, here is how to activate it)
- Opara + Error Console (built-in, press Ctrl+Shift+O to activate)
- IE + Script Editor (component from Office, here is the How-To)
The Firefox + Firebug combination is my favorite, and I will use it as example. If you use other debuggers, the GUI of debugger may vary but the main idea is still the same.
Example Plot Creation
I create a simple plot to demonstrate the troubleshooting. The plot has only one page and there are three buttons inside. As shown below:
Every button has almost the same behavior: when it is clicked, it shows a message “I am button N” (N=1,2,3). I intended to insert an error in the second button:
As you can see, I inserted an additional double quotation marks at the end of the message to show. Since the double quotation marks is not escaped and it can not find the pairing in the message, it will be kept in the message and break the syntax of the script and halt the simulation.
When we run the simulation in Firefox (with Firebug installed and activated), Firebug immediately detect the syntax error and show it in Firebug console.
Clicking into the green link and the source code that has syntax error will be highlighted in a pop up window:
Here we don’t need to understand what’s wrong with the code, just find out where the problem is. As highlighted above, the error is in a function started with “Button_2″, which means the error happens in Button_2.
For such a simple plot, we can definitely find out where the Button_2 is. If the plot is big and complex, we will need to search Button_2 in the plot. Just press Ctrl+F to open the search window and input the keyword “Button_2″ to search:
Clicking on the search result will bring us to the page and select the target element. We can press Ctrl+D to review its action definition.
Supporting custom element is one of the killer features of ForeUI. This article will introduce the basic knowledge and advanced tricks of custom element creation.
Custom Element Creation
When you are editing your plot, you can always select some elements on the page and pack them as your custom element for future usage, by clicking the button in floating tool pane (as shown below):
You will be asked to input some information of the custom element. File name may not be so important if you are just saving a custom element for your own usage. You will be able to find the saved custom element file (.fce) in the “<UserDir>/.foreui/customize” directory, where the <UserDir> is your user directory in your system. It will be good practise to input a meaningful element title and description.
After clicking the “Ok” button, your custom element will be listed in the “Custom Elements” category (you can find it in the “All Elements” category as well). Then you can use it like standard elements.
Functional Custom Element
When you select some elements to create custom element, if the selected elements have behavior defined, the behavior will be packed into custom element as well. That means the custom element can have its own function.
A good example is the “Hyperlink” custom element, which is included in ForeUI installation. You can find it in the “Custom Elements” category, if it is not there, try to load the “Hyperlink.fce” file in the “Custom Elements” category. This custom element is based on the Text Box standard element, and it is functional since it has defined some event handlers:
As shown in figure above, it handles the “Mouse Over” and “Mouse Out” events to change its text color and the cursor shape (to simulate a hyperlink). “Element Clicked” event handler is created but it is still empty, you can add some actions that need to be executed when hyperlink is clicked.
The behavior definition is quite “smart”, if you add several instances of Hyperlink custom element into page, each one will have its own behavior, and the corresponding content will be updated as well. For example, you added two instances of Hyperlink custom element:
The first instance of Hyperlink will have the id “TextBox_Hyperlink”, and the second instance of Hyperlink will be renamed to “TextBox_Hyperlink_1″. If you check out the behavior of the second instance, you will find its content has be updated to:
As you can see, the behavior definition of each instance is separated, and they will not interfere each other.
Use Separated User Defined Property and Custom Event
You may already know that, the user defined property and custom event are all in global scope. If you like to define them in your custom element, you will have to consider what will happen if multiple instances are created.
For example, you defined the behavior of a button like this:
It maintains a user defined property named “count”, so a message box will be shown when you click the button 3 times. If you pack this button as custom element, you will find it works well when it has only one instance in your plot, while it doesn’t work correctly if multiple instances are created, since all instances are using the same global property “count”.
ForeUI does not support user defined property with element scope. Fortunately we have workaround for this case: use the element id as the prefix of global property, thus it become unique for the current element.
Let’s pack the button as a custom element, and see what happen if multiple instances are added.
If you check out the second instance of the custom element, you will see its behavior has been changed to:
As you can see, the user defined property name has been updated, thus it is still unique for the new instance. By using this trick, the custom element can also work well with multiple instances.
This trick is also applicable for custom event. If you have a custom event defined in a custom element, and wish it become unique for every instance of the element, you can use the element id as the prefix of the custom event name.