ForeUI is an easy-to-use UI prototyping tool, designed to create mockup / wireframe / prototypes for any application or website you have in mind.

Archive for June, 2012

Introduce ForeUI's Data Types


From V3, ForeUI supports 4 types of data in global properties: number, string, array and object. When you create or edit property in the “Custom Property” view, you will see them in a drop-down list.

You can also see this list when editing the “Set Global Property” action.

Number or Evaluable Data

The property in this type can have a number value like “1”, “2.2” or “2012”, or have an evaluable value that can be evaluated as a number, such as “1+2”, “7*24”, “3-{tmp}” (while {tmp} is a number type property) etc.  So you can do arithmetic within this field actually.


The property in this type represents a text string.  You can insert any property within the text string, such as “Hello, {name}!” (while {name} is a string type property).  Please notice that when you input the value of string type property, you don’t need to quote the string with quote marks.  If you do need to place a quote mark in your string, please use an anti-slash () to escape it.


Array type is new from V3, and you can use array type property to store a list of values.  Each member of the array can be any type of property, so defining multi-dimension array will be possible.  The format of the value will be [member1, member2, member3,…memberN].  Remarks: the array is one-based.  Say here is an array property {array}, the first member will be {array}[1].  Here are some array examples:

  • Simple Array:  [1, 2, 3]
  • Two-Dimension Array:  [[1,2,3],[4,5,6],[7,8,9]]
  • String Members:  ["Apple","Orange","Banana"]
  • Object Members:
     Since V3.2+: [{"name":"John","age":18,"mobile":"+123456789"},{"name":"Rose","age":17,"mobile":"+987654321"}]


Object type is also available from V3, and you can use object type property to store some key-value pairs.  The key must be a string, while the value could be any type of peroperty.  The format of the value will be {key1:value1,key2:value2,key3:value3…}.  Please pay attention to the ant-slash before the brace, that means to escape the brace, otherwise the value will be regarded as the expression of a global property (e.g. {tmp}).  Here are some object examples:

  • Simple Object:  {"name":"Mike","age":24,"mobile":"+135792468"} 
    Since V3.2+: {"name":"Mike","age":24,"mobile":"+135792468"} 
  • Nested Objects:   {"user":{"name":"Tom","age":28,"mobile":"+165832234"},"info":{"lastLogin":1340906019605,"message":"Hello World"}} 
    Since V3.2+: {"user":{"name":"Tom","age":28,"mobile":"+165832234"},"info":{"lastLogin":1340906019605,"message":"Hello World"}} 

In order to access the value for given key within the object, you can use this:  {object}[key].  Below is an example that will show “Mike” when the page is loaded:


Please keep in mind that, the type of property can be changed during the simulation.  If you invoke “Set Global Property” action to set a predefined property, its data type will be overwritten.  For example: {tmp} was a number type property, now you call “Set Global Property” action on it and specify the type to “String”, then {tmp} will become a string time property after the action is executed.

That’s all for the data types.  Next time I will introduce the “Get JSON Object” action, which will make good use of the object type property.

ForeUI Beta3: New RadioButtonGroup Element

ForeUI V3.00 Beta3 (internal version number 3.003) is released. This new version introduces a new “RadioButtonGroup” element, supports Russian language and allow customizing the toolbar in simulation.  There are also some enhancements and 15 bugs are fixed.

The newly added “RadioButtonGroup” can simplify  the way to simulate a group of radio buttons.  In previous versions, we need to define some actions for a group of radio buttons to make sure only one radio button can be selected at a time.  Now things become much easier by using the “RadioButtonGroup” element.

The RadioButtonGroup element works like a List element, except that it renders its items as radio buttons.  You can double click it to edit its content: one line one radio button.  Just like the List element, “Selection Changed” event will be triggered when different radio button is selected in simulation, and you can check which button is selected by checking the “selectIndex” or “selectText” property.

The toolbar in simulation becomes customizable now, you can show/hide any button in the toolbar from the “DHTML” tab in settings window.  This feature is very useful when you want to hide some facilities in the toolbar.  For example, the “Property” view is quite useful for prototype author, but it means nothing to the reviewers.  It will be better to hide the “Properties”  button before delivering the prototype to reviewers.

From this version, ForeUI supports Russian language (Thanks Konstantin for the translation).  The new language option can be found in the settings dialog (under “General” tab).  Remarks: if you are using Windows Vista/7, you will need to run ForeUI as system administrator to change the language, since it needs to change the content in the installation directory.

Some Enhancements

Some enhancements are made in this version:

  • Allow showing behavior for current selection only.
  • The splash screen is not always on top.
  • Do not hide loading text before all scripts are loaded by web browser.
  • Set cursor to “wait” during the loading of simulation.
  • When drop file into welcome page, have it opened automatically.

Fixed Bugs

15 bugs are fixed in this version:

  • Bug_0329: When loading plot created by V2, should not override the line height and pad values for MockText element.
  • Bug_0330: In simulation, menu will be hidden by clicking its item or outside area, but the “Element Hidden” event is not triggered.
  • Bug_0331: Set custom property value in simulation, should try to make data type casting when value and type are not matched.
  • Bug_0332: Switch branching case should be able to use empty string as case expression.
  • Bug_0333: Double clicking .4ui file to open ForeUI, the plot is not loaded in edit area.
  • Bug_0334: When copy/paste element, the target element ids of its action are not auto updated.
  • Bug_0335: Actions belong to elements that embedded in container are not included during copy/paste/pack custom element.
  • Bug_0336: After deleting behavior root in behavior editor, the edit/remove button should be disabled.
  • Bug_0337: Using backlash to escape brace for object type property definition, the backlash should be removed in simulation.
  • Bug_0338: Branch/Loop/Delay that directly followed by an action with error, may cause Javascript error in simulation.
  • Bug_0339: When running simulation IE9, GroupFrame element does not show its bottom border.
  • Bug_0340: The size of popup list for ComboBox with any empty row is incorrect.
  • Bug_0341: List element has mismatch between cell border and background, when running simulation in Chrome/Safari.
  • Bug_0342: The newly added tag filter button is not saved for next run.
  • Bug_0343: Behavior filter can not highlight keyword with special characters (space, quote mark etc.).

ForeUI Beta2: New Hyperlink Element

ForeUI V3.00 Beta2 (internal version number 3.002) is released now.  Besides fixing the bugs found in Beta, this version also offer a new “Hyperlink” element, and some other new features and enhancements.  The main reason why we still mark this new version with “bata” label is the lack of documentation and examples, which still need some time to work on.

In previous versions, we have to use the TextBox element to simulate a hyperlink (by adding underline style, handling “Mouse Over”, “Mouse Out” and “Element Clicked” events).  The new Hyperlink element offers a much easier way to simulate the hyperlink, just input the parameters for the link and ForeUI will do the job for us.

New Hyperlink Element

Another new feature is to allow setting the page alignment for simulation.  In V2.xx versions, the pages are always aligned left.  While in 3.00 beta, the pages are always aligned center.  Now we can spcify the alignment of  the content, which could be left, center or right.  The new option in settings window allows us to set the default page alignment for DHTML simulation, we can also change this alignment in the toolbar in simulation.

Specify Page Alignment for Simulation

Page Alignment

This version improves the diagnose engine of behavior editor, the errors that caused by parameter missing can be detected now.  Also the actions with error will be excluded in the simulation/export, so the chance to meet Javascript error in DHTML simulation will be much lower.

This version also have the bugs below fixed:

  • Bug_0321: Memory leak caused by behavior editor.
  • Bug_0322: Starting in Mac OS Lion may halt by thrown exception.
  • Bug_0323: Clicking memory usage link should go to “misc” panel in settings window.
  • Bug_0324: Calendar is not highlighted correctly if the selected day is the first day of the month.
  • Bug_0325: Embedded element can not be deleted directly.
  • Bug_0326: Changing image reference does not work correctly when image ids are discontinuous.
  • Bug_0327: Tool window has incorrect size if its content is too big.
  • Bug_0328: Simulation in Firefox or Safari: vertical scrollbar is not shown when page is higher than browser view.