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.

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.

Easier Container Usage

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

1. Allow moving member within element group.
2. Allow adding member to existing element group.
3. 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.

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)

We will release ForeUI V2.37 today, and skip an update after two weeks, so the V2.40 will be most probably released after one month.

Interactive Spinner (Stepper)

This element existed from the first version of ForeUI, but it was not interactive until now.  You can enter all allowed values of the spinner (one row one value), and specify the current value in editing mode.  Then you can really interact with the spinner in simulation, you can click the small up and down buttons to change its value, you can also retrieve its current value via the “value” property of the element.

You will find a new property for the current value of the spinner:

New Hotkeys

From this version ForeUI supports the hotkeys below:

• Ctrl+W (Command+W in Mac OS): Close the current editing plot.
• Ctrl+I (Command+I in Mac OS): Show/hide image dock.
• Ctrl+L (Command+L in Mac OS): Show/hide display controller.
• Ctrl+E (Command+E in Mac OS): Show/hide element selector.
• Ctrl+G (Command+G in Mac OS): Show/hide global property manager.
• Enter or F2:  Start editing the selected element.

New ComboBox Property

Like the spinner, the ComboBox element supports the “selectedText” property now.

Fixed Bugs:

• Bug_0214: Some hotkeys (PageUp, PageDown, Left/Right/Up/Down etc.) do not work if any element editor is opened in another plot tab. (Thank Tim for the reporting)
• Bug_0215: Table Editor: the highlighted table cell should not accept newly input content without double clicking the cell (JRE 6 only).
• Bug_0216: Dragging LineChart, BarChart or PieChart element to the editing area, no semi-transparent preview is displayed.
• Bug_0217: Table element is not using “Comic Sans MS” as the default font in “Hand Drawing” UI theme.  (Reported by Jota Eme)
• Bug_0218: Wrong page titles in Slid Show when using excluded folders. (Thank Jota Eme for the reporting)
• Bug_0219: Error happens when selecting the last item and then remove the item. (exist in list, tree, menu, menu bar and tabs)
• Bug_0220: Should allow specifying icon of Vertical Tabs in the floating tool pane.

Scrollable Container

ForeUI provides the scrollbar element from the first version, however the scrollbar is not interactive and you could not really scroll content.  From V1.90 the table element supports content scrolling, and the table can be used as a container from V2.22, thus you can use the table element as a scrollable container, however the table element does not support vertical scrolling yet.  So we implement a new scrollable container element in this version, which allow you to make any element scrollable.

Just like the table element, you can hold the right key and drag element into the scrollable container.  Please remark that only one element can be embedded into the scrollable container, if you want to make complex content scrollable, you can group the content together and then add the group into the container.

Rounded Corners for Rectangle

The rectangle element supports rounded corner from V1.45.  From this new version, you can show/hide each rounded corner of the rectangle, like this:

It seems like a small feature but it is really useful, as you can create more new shapes now:

New Example Plot: Fwitter

From this version we include a new example plot named “Fwitter”.  It is a complex, high-fidelity prototype which simulate the UI and behavior of Twitter.  You can sign up, sign in, browse, search or even “post” new content.  This example is so big that will take some time for loading if you like to preview it online.  So it is recommanded to download and run it locally, you can find it in the community site.  This example is also included in the latest install package.

Other Enhancements:

• Holding right mouse key to drag elements can ignore the snapping system.
• Pressing the region out side of the plot can clear the current selection.

Fixed Bugs:

• Bug_0206: Can not select group member if the position of group is locked.
• Bug_0207: Select an embedded element and move mouse over its border, the cursor should change to suggest resizing.
• Bug_0208: Can not select embedded element if the zoom ratio is not 100%.
• Bug_0209: Dragging embedded element should not move the container element.
• Bug_0210: Vertical aligned text label element with mutirow content has wrong layout in editing mode.
• Bug_0211: Pressing the “Auto Sizing” button for text label element, the size should be calculated according to current element width.
• Bug_0212: Custom element with 45×45 size takes 100×100 space in the element categories.
• Bug_0213: Set text with contains continuous spaces to Text Label in simulation, only one space will take effect.

Title bar, search bar, slider, progress bar, tabs… All these new elements are very useful for creating iPhone app mockup.  Some of them are even interactive, which means you can interact with them in the DHTML simulation.

All elements in this library are created with some basic elements in ForeUI.  You can create your own element, even the interactive element can be defined by adding a few event handlers.

Download the Library

You can download the library in ForeUI, just click the “Resource Sharing” button on bottom left corner to open the community window:

Then you can download the library by clicking the “Download ” link, as shown in figure below:

The library will be deployed automatically after the downloading, and you will find a new “iPhone_Widgets” element category on the left of ForeUI window.  Then you can use the new elements inside for iPhone app wireframing.

Also you can download the library from our community website, but you would need to deploy it by yourself, the .fcl is a ZIP file, which contains 28 .fce files inside.

Create Mockup for iPhone App

Using the new iPhone elements is quite easy, just drag the elements from the left list into the editing area.  Nothing different than using other elements.

Actually we can use these iPhone elements to create two kinds of mockups for iPhone app:

1. iPhone mockup with “app running inside”.  The iPhone shell will be included in the mockup.  The simulation can be run on any device with web browser.
2. App mockup without iPhone shell.  The mockup can be run in iPhone web browser to simulate a “real” running app.

The difference is whether to include the iPhone shell.  The mockup without iPhone shell allows you to run the 1 : 1 simulation on iPhone, which provides the experience that close to the real app.

Recently I’ve created an interesting mockup for a “Guess the Number” game in iPhone, you can also find it in the community window or here.  If you run its simulation on PC, you will see the simulation like this:

It’s cute since you can really play with it, although it doesn’t look like an iPhone app. But if you launch the simulation in iPhone web browser, things become much more interesting, you can really play the “app” on your iPhone!

Want to try it on your iPhone?  That’s easy, if you are browsing this page with iPhone, just click here to launch the simulation.

Something need to mention:

• Since the mockup is running in web browser,  it seems not possible to get rid of the navigation bar on top and the status bar on bottom, but scrolling up a little bit can move the navigation bar out of screen.
• Although the resolution of iPhone is 320 x 480, the navigation bar and status bar take about 120 pixels height, so the actual mockup size is 320 x 360.

Here I am showing an extreme example, not only the GUI but also the logic of the game is simulated in the mockup.  In actual cases, you need to make a compromise between the mockup details and the workload of prototyping.

Enhanced Resource View

In previous versions, the resource view in the community window can list only 3 resources a time, that’s far from enough.   Now we have redesigned the resource view and it can list more resources in a page.   What’s more, the new resource view provides more interesting features:

1. Run Simulation: you can preview the plot or custom element with just a single click.  The simulation will be generated on server side and you can run the simulation in your web browser.
2. Vote Up Resource: if you like a resource, please vote it up.  It is a new mechanism to encourage people to share their resource.
3. Leave Comment: it exists in previous versions, but now it is better: you can leave comment without opening browser, all things can be done in ForeUI!
4. Statistic Numbers: the number of downloads, votes and comments will be shown after the action link.
5. Sort Resources: you can sort resource by time, downloads, votes or comments.

Also you can launch these features from web browser (visit http://www.ForeUI.net/):

New Editor for TextBox

This feature is suggested by Jeremy Kerr.  The new editor allows you to explicitly change the width of the editor (and the TextBox), the text content will be wrapped automatically.   Comparing with the old editor, this one can handle big paragraphs copy & paste much better.

If you drag the resizer of the right to change editor size, the editing TextBox will also be resized after  the editing.

Embedded Element Selection Arithmetic

Now selecting element in container (group or table) become easier.  We change the arithmetic to make sure every element can be selected even they are overlapped.  The animation is an example for embedded element selection:  The 4 text labels are overlapped and they are packed into a group, clicking the center area can select any one of them.

Other Enhancements:

• Content editing has higher priority than member selection when double clicking member in group.
• Allow adding batch of .fce files into “Custom Element” category a time.
• When export DHTML to non-empty directory, explicitly ask whether to clean up before exporting. Will only clean up the “images”, “scripts” and “styles” folders with confirmation.   (as discussed in forum)

Fixed Bugs:

• Bug_0142: Table element can not layout “incomplete” row properly in simulation. (Mentioned here and here)
• Bug_0200: Line element with thickness > 1 will be trimmed in simulation.
• Bug_0201: The sub menu width of Multilevel Menu is not properly calculated if default font is set to “Verdana”.   (Thank Ulrich for reporting)
• Bug_0202: When copy and paste nodes in behavior editor, the newly pasted node is collapsed by default. (regression in V2.27, thank Hervé Séger and Ulrich for reporting)
• Bug_0203: Text editor does not reflect the bold or italic style of the editing text element.

Multilevel Menu Element

The inspiration to add this element is from Ulrich’s thread about 2 months ago.  I know he is making a lot of clickable wireframes with ForeUI.  He said creating a multilevel menu in (older version of) ForeUI was quite complex, since you have to show/hide the sub menus by yourself, and the simulated menu is not so “real” since you must click the parent menu item to expand its sub menu…  All these are solved with the new “Multilevel Menu” element!  Now creating a multilevel menu is extremely easy: just drag the element into your plot and edit its content in this format:

Main Menu Item 1

Main Menu Item 2

• Sub Menu Item 1
• Sub Menu Item 2

Main Menu Item 3

This will generate the two-levels menu automatically, the sub menu will be bound to the second item in the main menu.  What’s more, you can click the menu item to select/unselect it, or expand/collapse the sub menu, or drag an icon from image dock to a menu item…all these can happen in the editing mode!

The more interesting thing happens when you run the simulation: the multilevel menu element will work like a real menu, and the sub menu will be expanded when you move your mouse over its parent menu item.

When you choose an item from the multilevel menu, the “Selection Changed” event will be triggered, you can handle this event can check its selection identification, which will be a string like “a.b.c”.  Here is an example:

In the example above, the case “1″ means user selected the first item in the level-1 menu;  Case “4.3.2″ means user selected the second item in the level-3 menu, which binds to the third item in a level-2 menu, and that level-2 menu binds to the fourth item in the level-1 menu.  Please pay attention to the quote marks for each case, as the identification is not a number but a string.

Button Margin

This feature is requested by Kenneth Young via email.  In previous versions, all button elements will have a 15 pixels margin, that value kind of big if you want to make a small button.  Now we provide the option to tweak this value for button element.

Other Enhancements:

• Do not auto expand tree nodes in the pages management window. (Requested by Hervé Séger via email)
• When manipulating the behavior tree, only expand the nodes that are modified.

Fixed Bugs:

• Bug_0196: Duplicate page with table that contains multiple embedded elements, some embedded elements may dispear. (Re-fixed, thank Kenneth Young for the reporting)
• Bug_0197: Table edit: clear content for all cells and press ok, the application may hang.
• Bug_0198: Can not change the state of TextBox with action during the simulation. (Thank Ulrich for the reporting)