ForeUI Blog | ForeUI

September 12, 2010

ForeUI V2.45: Optimize DHTML Generating and More

Hello everyone, ForeUI V2.45 is out today as scheduled. This version is focusing quality and performance. Enhancements cover DHTML generating optimization, new id allocate algorithm, popup tool windows management and much more.

DHTML Generating Optimization

This is an exciting enhancement as it decrease the file number and total file size, thus reduce the time for simulation loading. How did we do achieve this? It’s simple and straightforward: we merged the script files and images files for each elements, thus the file number can be decreased and the space for image file headers can be saved. The effect of this kind of optimization will be quite significant when plot become big and complex.

Here are some testing results against V2.45 and V2.42, which use the “Fwitter.4ui” plot as testing sample. We exported the plot to DHTML simulation using V2.42 and V2.45 respectively. The file number and total file size are measured. We open the native simulation in different web browsers to measure the local loading time, and then upload the DHTML simulations to web server and open the remote simulation in different web browsers to measure the remote loading time.

		V2.42	V2.45
Number of DHTML files		676	308
Total size of DHTML files (bytes)		1293111	1095213
		V2.42	V2.45
Time to load simulation locally (seconds)	IE 6.0	16	3
	Firefox 3.6	~2	<1
	Chrome 6.0	~2	<1
	Safari 5.0	~2	<1
	Opera 6.2	~2	<1
		V2.42	V2.45
Time to load simulation from web server (seconds)	IE 6.0	252	43
	Firefox 3.6	61	33
	Chrome 6.0	59	30
	Safari 5.0	60	32
	Opera 6.2	180	31

It is not a strict testing, however the result can still give us a rough idea of the effect. The good news is that the effect will be enlarged as the plot become bigger and more complex. You may notice that the loading time on IE (and Opera for remote loading) is much longer than that on other browsers. After optimize the loading performance on IE is improved a lot and the difference is much smaller now.

New Algorithm for Id Allocation

In this version we introduce a new new algorithm for id allocation, I bet you will like it 🙂

Before V2.45, if you copy an element with id “Button_1”, and paste into the same plot, the newly pasted element will have an id like “Button_1_1”. If you repeat the steps several times, you may get an element with a very long id like “Button_1_1_1_1_1_1_1_1_1_1”. That’s very bad thing as you can not count out how many “1” in the id by first glance, the ids are long and not readable.

Now in V2.45, if you copy and paste an element with id “Button_1”, the newly pasted element will have an id like “Button_2”. After several repeats, you will get an element with id like “Button_18”, this is much better, isn’t it?

What’s more, the new algorithm will try to keep the additional info in ids. e.g. if you copy and paste an element with id “CheckBox_Option_1”, you can get the new element with id “CheckBox_Option_2”. That can help you to understand the new element is similar with the source element.

We are quite excited about the new algorithm as it can significantly reduce the average length of element ids, and make ids more readable. We should really make it earlier 😛

Tool Windows Management

There are some tool windows in ForeUI, such as element selector, page manage window, category manage window etc. Usually these window will be closed when focus is lost, however you can pin the window to keep it in the screen. Before V2.45, if a tool window is pinned on screen, it will be placed at top and all popup stuffs like message box, popup menu, element editor etc. will be covered by the tool window. Now we have enhanced this situation, see comparison below:

Another enhancement is that when minimizing the window of ForeUI, all opened tool windows will be hidden as well, thus you can work on other applications without interference. When you restore ForeUI window, these tool windows will be restored too.

Avoid Negative Z Value

It is recommended not to use negative Z value, because in web browsers other than IE, the element with negative Z value can not receive any mouse event. So we make some enhancements to avoid the negative Z value being used.

Now the and buttons on floating tool pane can only reduce the Z value down to zero. If you are sure you need a negative Z value, you can input it directly, like this

Also the Auto Adjust Z Value feature will not set a negative Z value anymore.

Other Enhancements:

Validate path before saving the plot file.
Highlight the editable part of id when element id editor window shown up.
Allow setting z value for embedded element.

Fixed Bugs:

Bug_0236: Double clicking embedded element can not open its editor.
Bug_0237: Disabled Spinner element should not be able to spin.
Bug_0238: Can not disable Tabs/Vertical Tabs element in simulation.
Bug_0239: Button text is not correctly align with icon when icon is on top/bottom of text, and text width is less than icon, and using center alignment.

id allocation | optimize | performance | z value

September 5, 2010

Use Looksie to Make Reports for ForeUI Plot

by Xavier

Looksie is a desktop tool that focuses on improving the entire prototyping process from design through to test. XemWare Limited, the developer of Looksie contacted us about eight months ago and we were all excited about the future of prototyping technology, then we setup a firm cooperative relationship. Looksie V1.00 is launched on September 1st and I am happy to introduce this promising product to you. Below is the main GUI of Looksie:

Looksie is integrated with ForeUI and help you to do some interesting things on your prototype, including:

Generate configurable report for given prototype
Generate configurable Word/Excel document for prototype
Find/Replace text strings in ForeUI plot
Generate ForeUI plot from database

There are more exciting features under development, such as generating plot for existing web site and testing system for prototype etc. In this article I will mainly focus on the report generation and report design features of Looksie.

Report Generation

This feature will be quite useful if you have a complex prototype and need to review its details. Looksie already provides some finished report templates; you can use them to generate the report for your ForeUI plots on hand. To generate the report, just click the “Run Report” item in the “Report/Document” list in the Navigator, then a new “Reports” page will be opened and you can see two lists on it. The upper list is for the loaded plot files, you can open as many plots as you need and generate the report for all of them. The lower list is the report templates discovered by Looksie, you can choose a template and click the “Run Report” button below to generate and view the report.

The report preview window will shows up once you click the “Run Report” button. In this window you can review the content report page by page (just like browsing a World document). You can save the report to .prnx file so that you can open and review it with Looksie. You can also print the report to papers or export the report to many formats, such as PDF, HTML, RTF, XLS etc.

Here is a step-by-step tutorial of report generation on Looksie official web site, which is really helpful.

Report Design

The most exciting thing is that you can create your own report template! You can design how your report will look like, from content to layout, to coloring etc. To define a new report template, just click the “New Report…” item in the main GUI, then choose the “ForeUI Report Provider” to continue, the report designer will be opened.

The report designer is very powerful. It allows you to create the report structure from scratch. However you need to know more about the report structure and ForeUI plot data structure to use the report designer.

In the report designer, a report consists of multiple bands, and all bands have the same width (equals to the page width). For example, a report can have a header band, a detail band and a footer band, and each band can have multiple child bands below it. Here is a figure that showcases how a report is generated with given report template and plot. As you can see the report detail band will be repeated automatically if it is bound to a collection of details. Since the report detail band can be nested, it can represent really complex data structure. You can always browse the band hierarchy in the Report Explorer on the right in GUI.

The gray region in the center is the report editing area. We can right click this area and trigger the context menu, then select the band to insert. When inserting report detail band, you can also specify the detail collection to bind, the collections has a name that starts with “#”.

Tweaking the band is very easy, you can drag the bottom of a band to adjust its height, and you can also change its properties in the Property Grid on the bottom right corner.

Before using the report designer to create your own report template, you should also know some details about the data within a ForeUI plot. A plot contains some simple attributes like width, height, background color etc; also it contains some collections for complex data. Such as the collection of all pages in the plot, the collection of all elements, the collection of all events etc. The figure below shows the basic hierarchy structure of plot data:

In the report designer, the data of plot is mapped into fields, which can be reviewed in the Field List on the right. In the list, a collection will have a name starts with “#”. For instance, the #AllElements is the collection for all elements in the plot. As you can see, there are many collections fields available in the list, so that you can bind them with detail report bands as you need. You can even drag the field into the report area directly, the report design will smartly create suitable component and bind with the field.

Creating new design template is kind of complex but also interesting. Here is a detailed tutorial on Looksie web site, which helps you to create a new report template step by step. After finishing a template with the guidance from tutorial, I think I could really create something I need. In the ForeUI support forum, the ability to print out all behavior definitions is required here and here. It is a shame that after so long time we haven’t provide this feature yet. However it seems that we could do this with Looksie now. I worked on it for one hour or two and created a report template for behavior printing. Below is the preview of the action report for “Timer.4ui” example plot.

Summary

The report generation and report design feature is quite useful for ForeUI plot reviewing. Although the report designer is kind of complex for the beginners, it could be improved by providing more detailed documents and tutorials in the future. As a newly launched product, Looksie is good enough and worth trying out.

Uncategorized

document | Looksie | Report

August 29, 2010

ForeUI V2.42: Export/Import Element Library File

by Xavier

Hello dear friends, ForeUI V2.42 is out today! This version focus on simplifying the way to share custom element library internally, and has 6 bugs fixed.

Export/Import the .fcl File

Actually the .fcl file is a ZIP archives that contains one or more custom elements (.fce files). When you submit your custom element library into our community site, your library will be packed into an .fcl file, which can be downloaded and extracted into a new category. However we realize some companies need to share their libraries internally, so we accept the suggestion from Ari and Mark, and provide some facilities for this. As you can see we have added some new items in the popup menu for the button in “Custom Elements” category. They are:

Load Elements from .fcl file…: Pick an .fcl file and then load all its elements into the “Custom Elements” category.
Load Elements from Directory…: Specify a directory and then load all elements inside into the “Custom Elements” category.
Clear Listed Elements: Remove all elements that listed in the “Custom Elements” category, will not delete the .fce files for them.
Export Listed Elements as .fcl File…: Export all elements that are currently listed in the “Custom Elements” category.

So the .fcl file becomes the reuseable file for internal library sharing, you can share it with your colleagues or friends via email, USB Disk etc. Also the .fcl file can be loaded to any element category you created, the figure below shows how:

Resize Scrollable Container in Simulation

This is a small feature requested by purplebluegreen. Now you can change the size of scrollable container during the simulation. This may be quite useful when creating interactive prototype.

Fixed Bugs:

6 bugs are fixed in this version.

Bug_0230: Can not export plot to images with command line if the plot contains element group. (V2.40 only) (Tim reported via email, Thanks)
Bug_0231: Use arrow keys to move embedded element, the wrapper group is not updated as well.
Bug_0232: Copy element and paste into different pages in the same plot, the location of element should not be changed. (Thank Ari for reporting)
Bug_0233: Embedded element may be positioned incorrectly at the first time that launch the simulation.
Bug_0234: Embed two or more ComboBox elements into Tabs container and then run simulation, only the first ComboBox has correct position. (Thank Ed for reporting via email)
Bug_0235: Embed ComboBox element into Scrollable Container, the ComboBox’s popup should be displayed over the container.

Feature | ForeUI | Uncategorized | Update

export | fcl | import | library

August 15, 2010

ForeUI V2.40: Easier Container Usage & Element Path Links

by Xavier

Hello everyone, after one month holiday, we release V2.40 today. This release includes some important new features and enhancements to ease the container usage, 7 bug fixings are also included.

Easier Container Usage

We have implemented some useful new features for Group container, including:

Allow moving member within element group.
Allow adding member to existing element group.
Allow extracting member from existing element group.

Also we have made two related enhancements:

Auto grouping multi-selected elements before embedding into non-group container.
Can embed element into nested container.

All these together provide a much better experience on container usage. You can embed multiple elements into container a time; you can embed more element into a container even it has embedded element already; you can extract any embedded element from its container; you can move or resize the embedded element… The animation below shows the example of container usage, which has become much more flexible.

Element Path Links

If you use container a lot in your plot, sometimes you may feel difficult to select a specific container or embedded element. From this version you can find the “Element Path Links” in the floating tool pane if you select an embedded element or a non-empty container element. These links can help you to quickly select the container, the sibling or child element for current selected element.

Fixed Bugs:

Bug_0223: “Manage Categories” window (not pinned) will be hidden time by time if floating tool pane is translucent. (Thank Mark for reporting)
Bug_0224: Multiple instances of custom element may have duplicated ids for embedded element.
Bug_0225: Element is not valid after being embedded into ScrollableContainer, until moving the container a bit.
Bug_0226: Copy a Tabs (or Vertical Tabs) element that contains image elements, then paste it to another plot, the images are not migrated to the plot.
Bug_0227: Can not click to switch tab in edit area for Tabs or Vertical Tabs if they are embedded.
Bug_0228: Element chooser: select an embedded element, then select a non-embedded element, the embedded element should be unselected.
Bug_0229: Newly created, unsaved plot can not use the display controller to show/hide elements.

Feature | ForeUI | Uncategorized | Update

July 15, 2010

ForeUI V2.37: Enhanced Tabs and Embedded Elements Listing

by Xavier

Dear friends, since we will start our summer holidays from next Monday, we decide to release this version today. The most interesting feature is to allow using Tabs or Vertical Tabs element as a container, which is reqested many times.

Enhanced Tabs & Vertical Tabs

Prior to this version, we need to define quite complex logic to show / hide content according to the current selected tab. Now we can use tabs much easier. Just like other containers, you can press right mouse key to drag an element into the Tabs or Vertical Tabs. Each tab can accept an element, if you want to embed multiple elements into a tab, just group them together before embedding. What’s more, you can directly click on the tab to select it.

Also you can specify the padding of the container (supported by Tabs, Vertical Tabs and Scrollable Container):

List Embedded Elements in Selector

If you are working on a complex mockup, you may feel hard to pick an embedded element from nested containers. From this version, the embedded elements are listed in the Element Selector window. Thus you can pick any embedded element from the element tree:

As you can see the text color of embeded elements are blue. You can click on the item and select/unselect the element. Some embedded elements are gray and not selectable, that’s because it is hidden by its container. For example, an element in the non-current tab are hidden by the Tabs container, it will become selectable once its owner tab become the current tab of the Tabs container.

Action to Set Spinner Value

It is a small feature, a new action that can set the value of Spinner element in simulation.

Bug Fixings:

Bug_0221: Clicking the “ok” button to close inline editor for any element, hotkeys can not work for this plot. (Thanks Tim, Jason.Gaudette and Craig for reporting)
Bug_0222: Copy and paste any element, then right click the empty area of the plot, the context menu for page is now shown. (Thanks Tim for reporting)

Feature | ForeUI | Uncategorized | Update

Embedded Element | Padding | Tabs