ForeUI Product Blog

Author Archive

It has been 4 months since V2.80 is released.  Since we are working on V3.0, we have not implemented new features during these four months.  However we received some bug reports from our support forum and release minor updates that include the bug fixings.

2011-06-08: Minor update V2.801:

• Bug_0307: The borders of Table element in hidden page are still visible.
• Bug_0308: Could not right drag (or CTRL+drag) Table or Tree from element list to working area.

2011-06-13: Minor update V2.802:

• Localization: German translation update to V2.72.
• Bug_0309: Click image in image dock, the “Use By: ? elements” information in popup menu is not correct (only current page is taken into account).

2011-07-16: Minor update V2.803:

• Bug_0310: Select text element with non-default font, execute the cut and paste commands, the font combo box incorrectly get focus.

2011-08-18: Minor update V2.804:

• Bug_0311: When performing selection, the embedded element should not enlarge the testing area of its container.
• Bug_0312: Single row TextEditBox should not auto wrap its content in editing mode.

2011-09-01: Minor update V2.805:

• Bug_0313: Single row TextEditBox with “center” or “right” alignment does not render the text.

2011-10-03: Minor update V2.806:

• Bug_0314: Apostrophe in ComboBox element will be displayed as “'” in IE.
• Bug_0315: Editing any node in action editor will remove its note.

2011-10-04: Minor update V2.807:

• Bug_0316: Elements that embeded into Table are not rendered correctly since V2.806.

2011-10-27: Minor update V2.808:

• Bug_0317: Mac OS X: double clicking plot file to open ForeUI, the plot may not be loaded correct.
• Bug_0318: Can not use action to append row to Table that does not have any row initially.

2011-12-08: Minor update V2.809:

• Bug_0319: Can not paste image from clipboard under Mac OS X Lion.

2012-02-18: Minor update V2.810:

• Bug_0320: Copy and paste a Window or Tree element in the same plot, its embedded elements will have duplicated IDs.

Thanks for the users that report thoes bugs, it’s you who makes ForeUI better and better!

You are welcome to report bug or share idea with us on the forum, or via email.

ForeUI can convert your prototype to HTML+JavaScript simulation, which can be directly reviewed in web browsers.  Since ForeUI is not as smart as people, it could not recognize the incorrect syntax input in any field that supports expression, at least for now.  If your prototype contains incorrect expression, it will be converted to incorrect JavaScript code, which may halt your simulation in browser.

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.

Preparation

Although we don’t need to go deep into JavaScript code to find out what happened, we still need a JavaScript debugger to locate the problem.  Most web browsers have their built-in debuggers or plug-ins for debugging purpose.  You can choose one of the following combinations for debugging:

1. Firefox + Firebug  (plug-in, can be downloaded here)
2. Chrome + JavaScript Console  (built-in, press Ctrl+Shift+J to activate)
3. Safari + Error Console  (built-in, here is how to activate it)
4. Opara + Error Console  (built-in, press Ctrl+Shift+O to activate)
5. 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.

Troubleshooting

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.

With the help from JavaScript debugger, we can quickly narrow the problem and locate the problematic element, and then have it fixed.

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.

The design/development of ForeUI V3.0 is just started, and I have some time to write something.  I plan to write a series of articles to introduce some advanced tricks of ForeUI usage, which will be very useful for all ForeUI users.

Today’s topic is: how to make your ForeUI plot smaller?  The “plot” here means both the saved .4ui file and the exported DHTML simulation files.  The benefits to make plot smaller is obvious:  smaller plot can be loaded/saved faster for editing, and smaller simulation files can be launched quickly in your (and reviewers’) web browser.  Here are some tricks to minimize your plot size:

Use Master Page to Avoid Duplication

Usually there will be some common parts between pages in your plot.  Although you could duplicate elements or even the entire page to make every page have the common parts, you are encouraged to move the common parts to a master page, which can be shared by other pages.

This trick is frequently used for pages that have the same header, footer or side bar.  For example, all pages in your plot has the same header, footer and side bar.  So you can place them in a page, and all other pages use this page as the master page.  Thus you can just manage the center content on other pages, the figure below shows the details.

What if some pages have different side bars, while they have the same header and footer?  In this case you can use this master hierachy:

There are 3 pages are used as master pages.  Master Page 1 is shared by Master Page 2 and 3, while Master Page 2 is shared by two pages (Page 4 and 5) and Master Page 3 is shared by another two pages (Page 6 and Page 7).  This hierarchy should meet the requirements for most web site/app prototyping.

By using master pages, you can avoid duplicating content in the plot, and significantly reduce your plot size.

Optimise Image Usage

Experiments show that using images is the best way to enlarge your plot.  So if you wish your plot become smaller, make sure your plot only includes the images that are necessary.  It seems superfluous words, who would like to include unnecessary images in the plot?  But sometimes you may do this unconsciously, consider this case:  you add an Image Box element and specify an external image file for it, after a while you delete that Image Box and forget it.  But the image is still stay in the Image Dock, and will be saved to plot file even it is not referenced anymore.  If you did this a lot, your plot will be quite big, although most of the images in Image Dock are not used actually.

Shouldn’t ForeUI just take care of this situation and optimize it automatically?  I can’t agree more, so we will have it in V3.0, but we still have to do the optimization manually before 3.0 is out.  How to know if an image is referenced then?  You can click on the image in Image Dock, then you will see a pop-up menu like this:

You can see how many elements are referencing this image.  If an image is not used by any element (used by 0 elements), you can just click the  button to remove it safely.  Remarks: you will need to update to V2.802+ to have the correct image reference number (fixed Bug_0309).

Besides removing the unused images, you can also merge the duplicated images in Image Dock, which will also reduce your plot size.  Again ForeUI V3 will provide this feature, but we need to do it manually for now.  For example, say you have two images (img0 and img1) in Image Dock, they are duplicated and any of them are used by other elements, how could you merge them?

You can choose one image to keep, and click the button for another image to change all references to the one will be kept.  For example, you like to keep img0 (merge img1 to img0), you can click the button for img1, then you will see this window:

After you click the “Ok” button, all references to img1 will be changed to img0.  So nobody is using img1 now, and you can safely remove img1.

By removing unused images and merging duplicated images, your plot will become much smaller.  You don’t have to do this kind of optimization all the time, but you’d better do it once before exporting the plot to DHTML.

Use Text Box to Replace Big Rectangle

Rectangle is a very frequently used element in prototyping.  However when you want to add a big Rectangle into your plot (e.g. make it as background), you can consider using a Text Box (with border shown, background filled) instead.

Why?  Because the Rectangle element will be converted to an image file when you export the plot to DHTML, bigger Rectangle will generate bigger image file.  While the Text Box will be converted to just a snippet of HTML code, its size will not change when you enlarge the element.  So if you need a big rectangle, consider using a Text Box with border and background first, as long as you don’t need the radius corner feature provided by Rectangle element.

If your plot has many big rectangles and you replace them to Text Box elements, your exported DHTML files will become much smaller.

Conclusion

In this article I introduced three approaches to reduce your plot’s size.  It is not just about saving the space in your hard drive, it can also significantly reduce the DHTML files generated by ForeUI.  If you upload the DHTML files to the Internet for people to review, smaller file size is bandwidth and time saver.  I would suggest all ForeUI users to try using this approaches, and create small and powerful prototypes.

Dear friends, it has been a while since last update, and this time it is a big one.  This update includes a new language support and many new features and enhancements, with 5 bugs fixed.  This version should be the last one that provides new features before version 3.0 is released (should be Q4 or year 2011).  We may still release some minor updates before v3.0 for bug fixing purpose.

Brazilian Portuguese Language

Now you can choose “Brazilian Portuguese” from the languages list.  Thank Francis Benito Odisi for the translation!

New System Properties, Enhanced “Go to Page” Action and Page Navigator

The page navigator element has been requested many times.  We have planed to integrate the page navigation into simulation framework in 3.0, meanwhile we provide this temporary solution before 3.0 is out.  We added two system properties (Available_Page_Indices and Available_Page_Titles) and enhanced the “Go to Page” action to adapt the solution.  Now the “Go to Page” action can accept property as its parameter:

Finally we created a very useful custom element: Page Navigator.

We create the Page Navigator element with Rectangle, Button, Text Box and Table elements.  You can place it anywhere in your plot, and it will automatically dock itself to the edge of the page.  It provides the buttons for you to switch to previous/next page, and a pop-up list to choose the target page to go.  You can place Page Navigator element on every page, but it is recommended to place it in a master page, thus other pages can share the same element.

If you want to change the docking location of the Page Navigator, you can change the value of “TextBox_HorDock” or “TextBox_VertDock” element.

The Page Navigator element can be downloaded via the “Resource Sharing” button on left bottom corner, or this URL:  http://www.foreui.net/node/94

More Properties and Actions for Accordion

We added the “Recent Expanded Section” and “Recent Collapsed Section” properties for Accordion element.  It is suggested by pohldoug, thank pohldoug for the great idea!

Also we implemented two new actions for Accordion: “Expand Section” and “Collapse Section”.  Thus we can control the accordion with actions.

Better Behavior of Element Dragging from Category

We enhanced the behavior of element creation (dragging from element category on left).  Now you can directly drag element into container if you have right mouse button or the CTRL key pressed.  Also the grid snap or object snap will take effect when you drag element into page (although those auxiliary lines are not painted, for performance consideration).

“Set Tree Node Value” Action for Tree

This new action for Tree element can dynamically change the content of any tree node.  Both the row index and the value support properties:

Download Printable User Manual

Now the paid user can download the printable PDF user manual from the “Help” menu.

The downloaded manual has the same content with our online document:  http://www.ForeUI.com/doc/

Other Enhancements:

• Moving/resizing elements in scrollable container become easier.
• Auto complete font selector.
• Hold Shift key and start dragging, will force to enter the drag selecting mode.
• Avoid exporting CSS alpha filters in DHTML if element’s opacity is 100%.

Fixed Bugs:

• Bug_0302: Scrollable Container can not accept any element again if all embedded elements are removed or extracted.
• Bug_0303: Define “Set Global Property” action to set an in-existent property, then define that property in “Global Property” window.  The action will not update when externally rename that property.
• Bug_0304: Could not embed element into container that overlaps on a bigger container.
• Bug_0305: The property in “row” or “column” field of “Set Table Cell Value” action is not updated when the property is renamed.
• Bug_0306: Can not drag custom element from category to working area in Mac OS (V2.70+).

Hello everyone, recently we were working on the new documentation of ForeUI, and now it is online!  The new documentation has much more content than then previous document.  It includes about 200 pages and have all features introduced, and you will find the full reference for all elements, events, flow controls, actions and properties.  You could also make good use of the keyword index and full text searching tool.

We will keep improving the documentation.  If you have any comment or suggestion on it, please feel free to contact us.

Dear friends, we just released ForeUI V2.77 this morning.  This version includes the support for two more languages, two enhancements on usability, and two bugs fixings.

French and Spanish Support

In the new version you can select French or Spanish language in the settings window.

The French translation is made by Monaury Cecile, and the Spanish translation is made by Ernesto E. Bravo Cardoso.  They are all volunteer contributors and we really appreciate their great work.  Thank you Monaury Cecile!  Thank you Ernesto E. Bravo Cardoso!

Hold Control Key to Drag

Many Mac users are using one-key magic mouse, so they could not RIGHT drag element into container.  We accept Eric’s suggestion and make this enhancement: you can press the Control key on keyboard to simulate a right drag.

Keep Element’s Position when Newly Embedded

In previous versions, if you embed an element into an empty container, no matter at what position you embed it, the embedded element will be moved to the left-top cornor.  Some may say this annoying behavior should be a bug.  Anyway it is improved (or fixed) now: the newly embedded element will stay where it was.

Fixed Bugs:

• Bug_0300: Table’s initial selection offsets one row in simulation (since V2.72).
• Bug_0301: Image dock’s scrollable area does not match its content.  Thank Mark’s report for this problem.

Hi everyone,  I am glad to announce that ForeUI V2.75 is released today!   This update is focus on enhancing the Accordion element, some enhancements to improve usability is made, and 3 bugs are fixed.

New Action and Properties for Accordion

We took the suggestion from Ben and add a new action named “Set Section Title”, which can change the Accordion’s section title dynamically.  A new array property named “Section Titles” is available and now we can get the title text from certain section.  An “Index of First Expanded Section” property is added to facilitate getting the current section for Accordion in “single expansion” mode.  Below is an example to make use of all these new action and properties, you can also run its DHTML version in browser:

Some Enhancements on Usability

Now the tab for current editing plot will show the “x” button (close button) without mouse hovering, and you can close the current plot from the “File” menu.  Thank David Mabelle’s suggestions for these via email.

We added a new option in the settings window, under the “Edit” tab, to turn on/off the instructional tooltips in ForeUI.  What is instructional tooltip?  It is the floating message as show below, which prompt the possible manipulation.

However it became kind of annoying to experienced users, so we provide the option to turn it off.  Thank David Kjos’s suggestion for this.

Fixed Bugs:

• Bug_0297: When List/Menu/MenuBar/Tabs/VerticalTabs/Tree/ComboBox has no selected row, its “selectedIndex” property value should be 0 instead of -1 in simulation.
• Bug_0298: MenuBar with “Element Clicked” event handler meets error in simulation if “Selection Changed” event is not handled.
• Bug_0299: Embedded ComboBox has no selectedText property value until explicitly select an item.

Hello everyone, today we just released ForeUI V2.72!  This version provides some new events, actions and properties.

New Actions and Properties for Table

We have implemented 3 new actions to append, insert or delete data row for the Table element, as shown below:

Also there are two new properties available for Table  element:

What’s more, we made an enhancement on the “Table Cell Values” property, thus you can use variable (property) as the row or column index for the array.  With all these new facilities, we could use Table element as data reposition, to read/write real data in the prototype.  Thank Alan Finger’s suggestions on these.

Here is an example to make use of these facilities, you can also review it here:

New Event and Properties for Accordion

We added a new event named “Section Expanded/Collapsed” for the Accordion element.  This event will be triggered when you clicked on the header of section and expand/collapse the section.  Thank Tim’s suggestion on this.

What’s more, 2 new properties are available for Accordion.  They are “Section Count” and “Section Expanded Flags”.

Using these newly added event and properties, you could find out which section is expanded or collapsed.  The animation below is an example and you can also review it here:

“Note” Property for All Elements

Now with this new property, you can access the note for element during the simulation.  This property exists in all elements.  Thank Tim’s suggestion.

“Loaded as Master Page” Event for Pages

Any page can be used as master page.  However the “Page Loaded” event will not be triggered if the page is just loaded as master page.  So we add the “Load as Master Page” event for page.  It will be triggered when the page is loaded as master page.   Thank Tim’s suggestion.

Fixed Bugs:

• Bug_0295: Reduce the height of a table row and make it smaller than the default value, the change could not take effect in simulation.
• Bug_0296: When Table has no selected row, its “selectedIndex” property value should be 0 instead of -1 in simulation.

Hello everyone, ForeUI V2.70 is now available!  This update brings you a brand new Accordion element and some other enhancements.

Accordion Element

This element is requested by Jeffrey Werner about 1 year ago, Audrey Taylor and Tim have the same suggestion recently.  We are so glad that we finally have this done.

The accordion element is actually a set of partly overlapped panels (sections), each panel has a header on top.  Clicking on the header of panel will expand/collapse the panel thus the content in panel will be show/hide as well.  It is a container element, so you can drag element into it with right mouse button hold.

There are many options for accordion element in the floating tool pane.  The “Multiple Expansions” checkbox can control whether the element support multiple expanded section.  You can specify the border color and the header background color, set the icons for collapsed/expanded sections etc.  Here is a tips: if you like to use different icons on different sections, try dragging icon from image dock and drop to the header for sepcific section.

Here is an example for accordion element usage.  There are two accordion elements in the plot.  The accordion on the left supports multiple expansions, and it is simulating an expandable menu; The accordion on the right only allow single expansion, and it is simulating a set of sliding contact groups.  This example is uploaded to the community site and can be reviewed here.

Enhanced “Set Table Cell Value” Action

From now on you could use properties (variables) in the row/column indices for “Set Table Cell Value” action.   Thus you can use two text input boxes in prototype and accept the row and column indices input by user in the simulation.

Fixed Bugs:

• Bug_0286: For button with icon only, turn on the ‘underline’ decoration, then error happens and current action will halt.
• Bug_0287: If table’s actual row height is different than default value, the alternate color filling is incorrect in Hand Drawing, Windows XP and Windows 7 themes.
• Bug_0288: Hide the default icons for tree element, the icons are still visible in simulation.
• Bug_0289: Lock the position of the element and unselect it, the element become invisible if you drag it.
• Bug_0290: Can not directly click specific regions of element to change selection if zoom ratio is not 100%. (Tree, Table, Tabs, VerticalTabs and MultilevelMenu)
• Bug_0291: Hold SHIFT to resize element with aspect locked, the aspect is not accurate when any snap action is performed.
• Bug_0292: Select user-defined category in ‘Manage Category’ window, all buttons hover on element in the category are not clickable until restarting ForeUI.
• Bug_0293: Add custom element with duplicated name, should update its reference in the list instead of adding new reference.
• Bug_0294: In image dock, if the image ids are not sequential, dragging image to plot may not work correctly.