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

All posts tagged document

New Documentation Online!

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.

Use Looksie to Make Reports for ForeUI Plot


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:

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.

Discovered Templates

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.

Looksie Report Preview

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.

Report Designer in Looksie

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.

Report Structure

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 “#”.

Insert Band into Report

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.

Property Grid in Looksie

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:

ForeUI Plot Data Structure

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.

Field List in Looksie

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.

ForeUI Action Report


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.

ForeUI V2.12: New Document and Bug Fixings


As the first update after the long leave, this version includes 14 bug fixings.  Although no new feature is provided, the following news is still exciting: A brand new ForeUI document is available!

New Online Document

As usual you can launch the document via the menu “Help->Online Help Content”, that will bring you to the ForeUI document page.  But you will see the content of the page has been changed completely.  The new document introduce all things about ForeUI systematically.  No matter you are beginner or advanced user, you will find the document very helpful.

ForeUI Online Document

Bug Fixings

14 bugs have been fixed in this update.

  • Bug_0146: If a folder is nested under a page, it can not be removed. (Thank r10k for the reporting)
  • Bug_0147: There is a delay when start drag selecting. (Thank r10k for the reporting)
  • Bug_0148: The height of Calendar header is significantly reduced in simulation if the calendar is big.  (Thank Remco Douma for the reporting)
  • Bug_0149: Double-click the image in group can not change its image source.
  • Bug_0150: Group member A covers B, B may be hidden if A is set to invisible in simulation.
  • Bug_0151: Can not get the specific cell value of table in simulation.  (Thank Justin for the reporting)
  • Bug_0152: Empty table body can not be painted in simulation.  (Thank Abhishek Misra for the reporting via email)
  • Bug_0153: When dragging window element that contains element group, the group members can not be moved correctly.
  • Bug_0154: The entired Window element are draggable in simulation, it should be limited to header only.
  • Bug_0155: Select a group and press Ctrl+D, that allows adding behavior to group (which should be disabled).
  • Bug_0156: Should not allow deleting the page if all other pages are nested under it.
  • Bug_0157: If page B is nested under page A, remove page A, then undo will meet error.
  • Bug_0158: “Change State” action is not listed for TextEditBox element.
  • Bug_0159: Invisible element in group should be painted semi-transparently in design phase.

Slight Enhancement

 This version also include a slight enhancement: move the “From Image File…” menu item to top when choosing image.  This is requested by Ulrich and we think it is reasonable: moving cursor to the bottom may trigger the icon libraries dispaly one by one, which is annoying.