ForeUI Product Blog

Archive for the ‘Feature’ Category

Element Tooltip

The newly released V3.2 introduced a very useful feature, which allows you to set the tooltip for any element.  It is a real tooltip: once the it is set, it will take effect automatically in the simulation.  You don’t need to simulate the tooltip by yourself anymore.

Here is how it will look like in the simulation:

If the tooltip is not set (empty), the element will not have tooltip in simulation, just like it did in the previous versions.

Selected/Unselected Event for Checkbox/Radio Button

Since this version, you don’t need to check the checkbox/radio button state in a conditional branching anymore, just handle the “Element Selected” or “Element Unselected” events for checkbox/radio button, and you will get notified when the element selection state is changed.

New Action to Change Button Text

Now you can use the new “Set Button Text” action to change the text on the button.  That means you can have some dynamic button in your prototype.

Change Element Order

If you create some elements with the same Z value, the only thing that decides how to overlap them is the element order.  The element with smaller order index will be rendered earlier.  Now you can change element’s order in the outline view: just select the element and click the “move up” or “move down” button at the bottom, you will see the overlap order is changed accordingly.

Hotkey to Group/Ungroup Elements

Now you can press Ctrl+G to group the selected elements, and press Ctrl+Shift+G to ungroup the group you selected.  If you are using Mac OS X, the hotkey should be Command+G/Command+Shift+G.

There are More

There are more enhancements in this version.  Please read the update history for more details.

Since ForeUI V3.0, there is an “HTML5″ tab in the settings window, and we can make some configurations for the HTML5 generation.  As shown in the figure below, there are two columns of configurations, and they have the same content.  The difference is that, the left column is for running HTML5 simulation (clicking the “Run Simulation” button in ForeUI), while the right column is for exporting HTML5 (clicking “Export HTML5″ button in ForeUI). Most of the settings in this window explain themselves, except the “Lazy Loading”.  This option is turned off by default, which means all contents in the simulation have to be loaded by the web browser before showing the first page.  You will see the loading page before the entire loading process is done.  If the simulation is big and complex, you may have to wait for a long time, which is bad.  In this case, you can consider turning this “Lazy Loading” option on.  It will try to display the first page as soon as possible, and keep loading the rest part of simulation in the background.  If you load the simulation with a web browser that has status bar shown, you will see the loading progress like this: The first page of simulation will appear when all its content are loaded.  You can review and interact with the page and wait for the loading of other pages.  If reviewing the first page takes some time, the next page may have been loaded in the background before you switch to that page.  Thus we reduce the actual loading time for the simulation.

The figure below explains how the “lazy loading” option works:

What if the target page is not completely loaded when we try to show it?  This can happen if “Lazy Loading” option is turned on.  In this case we will see the loading page appears again and we have to wait for the loading of that page.

If the loading time of your simulation is acceptable, you don’t need to turn on the lazy loading.  If you want to shorten the loading time, you can try to turn the “Lazy Loading” option on.

I should mention that using a faster web browser (e.g. Chrome) will be a good solution to accelerate the simulation loading.  However it may not be acceptable in some cases.

ForeUI V3.10 is released on 5th December, 2012.  We have made a lot of optimization in this version and now it becomes much faster and smoother.  What’s more, there are some exciting new features and enhancements.

Import Plot

This feature is designed for team collaboration.  Your team members may work on different parts of the design as different plot files.  Finally you may wish to merge all plots together, and here is the way to go.  You can use the “Import Plot” feature to Import another plot into the current editing plot.  You can decide where to place the new pages (before or after current existing pages), and you can specify how to align the new pages with the old ones (if they have different size).

This feature is available in the “File” menu.  The “Import Plot…” item will be enabled if you have at least one plot opened for editing.

Background Image

From this version, you can specify the background image for the entire plot.  You will be able to find some new options after clicking the “Plot Settings…” button on bottom right corner.  The background image can be tiled horizontally, vertically or in both directions.  You can also configure how to align the background image with the page.

Compatible with Mountain Lion

We have a blog post about the issue when running ForeUI in Mountain Lion (Mac OS X 10.8).  Now the problem is solved.  ForeUI application is signed with Apple Developer ID certificate now, and you will get smooth experience when installing ForeUI into your Mountain Lion system.

What’s more, we have fixed some minor issues and made some improvements for Mac OS system.  We even created a new installer for it:

Input Element Id in Chooser

In previous versions.  When the element chooser is shown up, you will need to select element in the plot editing area.  If the target element is covered by other elements, or it is in another page, it will take you some time to find it out.  Now you have another choice: you can directly input the element’s id in the chooser.  You don’t have to remember all the IDs, just start typing the prefix of the id and you will see all candidates are listed, which is fancy

When the content assistance pops up, you can use the UP and DOWN keys on keyboard to choose the one you want.  Of course you can use mouse to select the element from the list.

Other Changes

There are more content in this update.  You can check out this page to see other new features, enhancements and fixed bugs in this release.

ForeUI offers a powerful behavior engine, which allows you to define complex interaction in an elegant way for any GUI element on the screen.  Sometimes you may want to run multiple tasks parallelly, which is also called “multi-threading” in the software industry.  For example, assume we have a button, and we want to move it on right-down direction and enlarge it at the same time.  Is it possible to do so in ForeUI?  The answer is positive, that’s why I write this post

First let’s create a single-thread version for the example, so you can later compare it with the multi-threading version.  The example only contains one button element (Button_1) and its behavior is defined as below:

There are two loops in the event handler for “Element Clicked” event: one for moving and one for resizing the button.  I designedly use different looping parameters for them, so we have good reason that not to merge them into one loop.  Since it is a single-thread version, it can only do the moving and resizing in sequence, like this:

You can download the plot file for single thread example, or view its simulation here.

Now lets try to make the multi-threading.  The basic of the trick is that, the event triggering is not a blocking call.  That means, when you trigger two events in order, the second event will not wait for the execution of event handler for the first event.  As a non-blocking call, triggering an event takes almost no time, so the two events seems to be triggered at the same time, and their event handlers seems to be launched together.

So I changed the behavior for Button_1 as below.  I added two “Element_Clicked” events to Button_1 and they will do moving and resizing accordingly.  There are two warnings (highlighted with yellow) since we place the same event twice in one element.  We know what we are doing, so just ignore these warnings.

Since the two loops are placed in different event handlers, they will be launched at (almost) the same time, thus you will see they are executed parallelly:

You can download the plot file for multi-threading example, or view its simulation here.

If you’d like to place the behavior definition in custom event handler, you can modify the example like this:  (download this plot file)

If you don’t want to use global custom event, you can define it as the private event for Button_1, like this: (download this plot file)

The three examples above will work in the same way, you can choose the one you like when you want to do multi-threading in ForeUI.

Maybe you already know that ForeUI will convert the behavior to Javascript when exporting plot to HTML5.  If you search “Javascript Multithreading” on the Internet, you will learn that Javascript does not actually support multi-threading (at least for now).  So all multithreading in Javascript are tricks, they are just simulating the concurrent execution.  However, if you have ever tried to manually write some Javascript code to simulate the multi-threading, you will see how difficult it will be and how easy to make mistake somewhere.  You will realize that ForeUI saves you a lot of time on achieving this

The official release of ForeUI V3.0 is delivered today.  Comparing with the previous releases, this version is more focus on the reliability and usability.  However, there is still an exciting new feature in this version, which is called “integration task” that can easily integrate ForeUI with other tools.

You may already know that you can invoke ForeUI via command line to generate image or HTML5 simulation.  However, have you considered to use other tools to process the file(s) generated by ForeUI?  The integration task is designed for that purpose.  In the settings window, you will see a new tab named “Integration”, which allows you to manage the integration tasks.

You can click the “Add Task…” button to add a new integration task.  Here you can specify the parameters for the task.

If you unselect the “Task is Enabled” option, the new task will be created but not take effect immediately, until you enable it later.

If you select the “Blocking Subsequent Tasks” option, the new task will block the workflow until the command is finished.  This is useful when you want to execute a serial of tasks in order.

You will need to specify the condition that trigger the task.  So far ForeUI supports these conditions:

• Before Saving Plot
• After Saving Plot
• Before Export HTML5
• After Export HTML5

You can input or browse the command to be executed, and you can use the variables below in the command:

• %plot%: the file path of the current editing plot.
• %file%: the path of the output file.  For Before/After Saving Plot task, it will be the path of plot file to save; For Before/After Export HTML5 task, it will be the path of generated HTML file.
• %dir%: the path of the output directory.  For Before/After Saving Plot task, it will be the path of directory to save plot file; For Before/After Export HTML5 task, it will be the path of directory that store the generated HTML files.

By making use of the integration task, you can invoke other tools to process the file generated by ForeUI.

Example:  Auto Commit Plot File to SVN Repository

Some customers have asked for the version control feature.  Now we can have it by integrating ForeUI with SVN.  If you are not familiar with the usage of SVN, you can find some tutorials via google.

Assume that you want to commit the plot file to SVN repository everytime after you save the plot.  First you should add your plot file into a project, and checkout your project to a local directory.  Then please open the plot with ForeUI and go to the “Integration” tab in settings window.  You can create an integration task like this:

That’s all, every time you save your plot, it will be committed to the SVN repository, so you will never lose your work, theoretically

If the plot file is not added into your SVN project, the command above will do nothing.

Remarks: the integration task feature is available for registered user only.

Other Enhancements and Bug Fixings:

Please check out this page to see the complete list of enhancements and fixed bugs in this version.

ForeUI 3.0 RC version is just released.  As the last version before V3.0 official release, this version tend to be stable and offer much better experience.  We don’t plan to add new feature in the official release of 3.0, instead we will include the completed document and have some bugs fixed.

We have made so many improvements in this version that I could not introduce them one by one.  A full list of new features, enhancements and bug fixings can be found here.  In this blog post, I would like to show you the most interesting part of this update.

ForeUI Store

From this version, ForeUI integrates with its new online resource store.  You can download new element, library or plot file from store window, or from the store web site.  You will be able to download new UI theme and ForeUI plugins from the same site in the future.

Clicking the category buttons on top can filter the items to be listed.  You can also search the item by tag via the search box on top right corner.  If you click the “Preview” button, the HTML 5 simulation of the item will be launched in your web browser, and you can see how it works.  Clicking on the “Download” button will download the item and deploy it (if needed).

The store is just online and there is not so much resource inside yet.  We will frequently add new resources into the store site.

Drag and Drop in Outline View

The outline view is significantly improved by supporting drag and drop elements directly.  This is an easy way to embed element into container, or move embedded element from one container to another.

When you drag an element and try to drop it into a container, the tool-tip will tell you if it is allowed.  So you will know what you can do and what you can’t, also you will know why.  This feature is extremely useful when you want to manage a lot of overlapped elements.

Other New Stuffs

There are many other new things in this version.  Don’t be surprised if you find something different than they used to be.  Ususally they are changed in a better way, but if you think they are not, please feel free to tell us.

If you are interested in what we exactly did in this version, please check out the update history page.

Did you know that?  ForeUI already supported adding live video (YouTube, Vimeo etc.) into plot from long time ago.  Perhaps more accurately still, it is supported from the ForeUI version released on Sep 28th, 2009: V1.60!  Thanks for the iFrame element available from that version, we can embed a web page into our plot.  Embedding live video is another use case for this element.

What you need to do is to add an iFrame element into your page, adjust its size and location, then specify the correct URL for live video.  How to find out the video URL?  It depends on the video provider.  If you want to add a video from Youtube, you can find the URL by clicking the “Share” button below the video player:

A panel will show up after you click the “Share” button, clicking the “Embed” button on it will show the code to embed video, the exact URL for live video is marked with red underline:

Please copy this URL to clipboard and paste it as the source URL of iFrame element.  A ready-to-go demo is finished now:

Now run the simulation in web browser and you will see how it works:

If you want to embed video from Vimeo, the steps are quite similar, and you just need to find out the correct URL.  You can click the “Share” button on top right corner of Vimeo video:

Then you will see a popup panel that includes the embed code on top right, the video URL is marked with red underline:

You can use this URL as the source URL of iFrame, and then you can see the result in simulation:

If you want to add live video from other providers, please check if they support embedding video as iframe.  If they do, you can use the same way to embed their videos into your ForeUI plot.

Web API, JSON and JSONP

Nowadays many web service providers offer some APIs to access their data, which significantly simplify the development of client application for these web services.  Usually the data format of the API will be XML, JSON or JSONP, which means you can request a URL on the Internet and then get a piece of XML or JSON data in the response, which contains the data you are interested in.

The difference between JSONP and JSON is that, JSONP will wrap the JSON data as a function call, while the function name is passed in from the request URL.  Calling JSONP API is usually used to workaround the “The Same Origin Policy” and get JSON data from different servers.  You can find a lot of information about these via Google.

“Get JSON Object” Action

From version 3.0, ForeUI supports a new action named “Get JSON Object”.  This new action allows the HTML simulation to get JSON object from remote server via JSONP API, and store the JSON data to an Object type property (data types are introduced in previous post).  That means ForeUI simulation can actually integrate with other web service via JSONP APIs, and we can even create some web apps with ForeUI!

When you add this action, you will be asked to provide some parameters, as shown below:

You will need to input the JSONP API here, and specify the name of property that will store the returned JSON data (as an object).  There is an optional parameter that allows you to specify the custom event to trigger, when there is any error happened.

Now I will provide a simple example to show how to use this action.

 Example: Location by IP

This is a simple, and working web app that allows you to get location information by giving the IP address.  This example demostrates the usage of the new “Get JSON Object” action and the object type property.  You will see how powerful ForeUI is

Since I could not directly query databse in ForeUI, I need to find the JSONP API to the job.  Google always help but my favorite site for searching API is this one.  There are hundreds JSONP APIs listed on the site.  Please keep in mind that JSON API is different than JSONP API, if an API supports JSON format and does not support JSONP format, we just simply not able to use it in ForeUI.

After a few minutes work, I found my desired API: Prototype GeoIP API

I created the UI of web app very quickly with ForeUI.  I set the plot size to 320×356, which can be perfectly viewed on smart mobile phone.

Than I handle the “Element Clicked” event for the “Search” button, and invoke “Get JSON Object” action with the parameters below:

In the URL field, I inserted the value of input text box as the IP address.  The returned JSON data will be stored in property named “info”.  If any error happened, the custom event “IP_Error” will be triggered.  Remarks: do not use any spaces in the custom event’s name, please use underline instead.

The web app can almost work, if you input an IP address and click “Search” button in simulation, you can see the “info” property is filled with data (from properties view on toolbar).

The data stored in “info” property is a JSON object, using a JSON viewer can show its content with better format:

After figuring out how the data is organized, I defined some actions to update the result table, and show a message when error occurs:

That’s all, I exported the plot to HTML and uploaded to our website, you can try it below (an embedded iframe in this post), or you can try it in a separated window.

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.

String

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

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:

   [\{"name":"John","age":18,"mobile":"+123456789"\},\{"name":"Rose","age":17,"mobile":"+987654321"\}]

Object

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"\}

• Nested Objects:   \{"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 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.).