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 in Uncategorized

Use Master Page to Ease Prototyping

What is Master Page?

The master page feature is available since ForeUI V1.55, this is a very useful feature since it can simplify your prototype / wireframe a lot. Let me give a brief introduction for master page. Please take a look the the figure below, the master page works like a “background” layer, once you assign a master page to a normal page, the content on master page will be merged into the normal page. What’s more, a master page can be shared by multiple normal pages. That means you can put the common part of the prototype into the master page, thus it can be shared by several pages without copy and paste.

master_page_theory

Although I used “Normal Page” and “Master Page” concepts to identify these two pages, they have no actual difference in ForeUI, they are just pages. In ForeUI, each page can be used as a master page, you can assign any page as the master page for your editing page. So you can assign page B as the master page for page A, and assign page C as the master page for page B, that will form a hierarchy structure like this:

hierarchy_masters

When we export page A or run the simulation of page A, we will see the final result: the contents in both page B and page C are all merged into page A. So you can imagine how helpful will this feature be.

Assign Master Page in ForeUI

Now let’s see how to assign master page in ForeUI. First of all we need to create three pages, to make things simple I will use the page A, B, C mentioned above for demonstration. Here are the pages I created:

page_abc

We can click the page_mgr_button button on the bottom left corner to open the page manage window, which looks like this:

page_abc_mgr

I will do it step by step, first I will select page A and click the master_page_button button to choose a master page for page A:

page_a_master

You can see the Page A item in popup menu is gray since you can not assign the page itself as its master page. I choose Page B, so page B becomes the master page of page A, you will see the page list is updated accordingly:

page_a_master_b

I will do the similar things for page B, assign the page C as the master page for page B, so finally we get:

page_b_master_c

That’s it, we’ve created the hierarchy structure. We can switch pages to see what’s happen. The figure below shows the effect:

page_abc_masters

The content from master page will be displayed in a semitransparent channel, it is just a mechanism for reminding. When export the page to image or html, all elements will be treated in the same way. The figure below shows the html simulation for page A:

page_a_html

Make Good Use of Master Page

Although these three elements are on different pages, they can interact with each other via predefined actions, so there is no drawback to move the common part of multiple pages to a shared master page, this will significantly simplify your prototype / wireframe.

A very typical use case for master page is the header and footer of web site, each page of the web site has the same header and footer. You don’t have to copy header and footer then paste them here and there, you can just put the footer and header content on a single page, then assign this page as the master page for all other pages, that’s it.

ForeUI V1.75: Handy Element Selector

Hello everyone, today we just released ForeUI V1.75!   This update includes some small enhancements, and a very useful tool: Element Selector.

Handy Element Selector

When we are prototyping a very big design, we may meet difficulty when trying to pick a small element that covered by a lot of elements.  In V1.37 we provided a slider for hiding some elements that on top of the target elements, but when you are facing a huge number of elements on the plot, the slider may not be sufficient since you don’t know where to stop dragging the slider.  In this new version, we provide a very useful tool to help picking elements in plot.

You can open this tool by clicking the select_element button above of the plot editing are.  It will list all elements of the current page and group them by their types, like this:

selector_all

Each item has a check box so that you can check / uncheck it to select / deselect element.  What’s more, you can filter the content of the tree structure by inputing a keyword at the bottom, the elements will be listed only when their ids or notes content the keyword (case insensitive), thus you can find your desired element very quickly.  The animation below shows the way to work with the new element selector:

element_selector

This feature is requested by Ulrich, thanks for suggesting this useful feature!

Change Image More Easily

The image (or say image box) element is very frequently used, yet changing the image is not so easy in previous versions:  you need to click the browse_image button on the “Image” row in floating tool pane.  Now we’ve made an improvement: just double-click the image element and the popup menu will show up and allow you to select the image from image dock, existed icon library or external files.

The animation below shows the details:

image_editor

Some Enhancements:

  • Save image export settings in configure file.
  • Avoid launching multiple instances of application (Windows).

Fixed Bug:

  •  Bug_0110: Can not turn off Auto Resizing behavior for elements in group.

Use Hotkeys to Accelerate Your Work

1

ForeUI is designed to be a desktop application and we can manipulate it with mouse only, however someone (including me) would like to make use of the keyboard with another hand, so I decide to make a table of all available hotkeys in ForeUI.

It took me about 20 minutes to create the first draft, here it is:

Hotkey Effective Region Description Comment
Ctrl + N Main Window Create a new ForeUI plot file and open it. CMD + N in Mac
Ctrl + O Main Window Browse an existed ForeUI plot file to open. CMD + O in Mac
Ctrl + S Main Window Save the current editing plot file. CMD + S in Mac
Ctrl + W Main Window Launch slide show. CMD + W in Mac
Ctrl + R Main Window Run simulation in your default web browser. CMD + R in Mac
Ctrl + Z Main Window Undo the last editing action. CMD + Z in Mac
Ctrl + Y Main Window Redo the last undo action. CMD + Y in Mac
Ctrl + X Main Window, Text Editor, Behavior Editor Cut the selected content. CMD + X in Mac
Ctrl + C Main Window, Text Editor, Behavior Editor Copy the selected content. CMD + C in Mac
Ctrl + V Main Window, Text Editor, Behavior Editor Paste the selected content. CMD + V in Mac
Delete Main Window, Text Editor, Behavior Editor Remove the selected content. Backspace in Mac
Ctrl + D Main Window Open behavior editor for selected element or current page. CMD + D in Mac
Ctrl + Right Main Window Select next element in plot. CMD + Right in Mac
Ctrl + Left Main Window Select previous element in plot. CMD + Left in Mac
Ctrl + A Main Window Select all elements in plot. CMD + A in Mac
Page Down Main Window, Simulation in Browser Switch to next page. Fn + Down in Mac
Page Up Main Window, Simulation in Browser Switch to previous page. Fn + Up in Mac
Left, Right, Up, Down Plot Editing Area Move the selected elements in plot.  
Hold Shift + Single Click Plot Editing Area Add element to current selection.  
Hold Ctrl + Single Click Plot Editing Area Remove element from current selection.  
Hold Shift + Drag & Drop Selection Border Resize selected elements, with aspect ratio locked.  
Right Click Plot Editing Area, Behavior Editor Show context menu.  
Enter All windows that have “ok” button Emulate pressing the ok button.  
Escape All windows that have “cancel” button Emulate pressing the cancel button.  

I think I haven’t miss anthing but I may be wrong, so please help me to double check it, thanks in advance 😉

ForeUI V1.72: Pie Chart and Some Enhancements

2

Hi everybody, today I am grad to announce that ForeUI V1.72 is released!  In this update we bring you:

Pie Chart

We’ve provided Line Chart in V1.65 and Bar Chart in V1.70, and we’ve got some great feedback.  In V1.72 we add one more chart element: Pie Chart.  Pie chart is very useful to represent the ratio data.  As usual, you can click the “Shuffle” button to generate the random data for  Pie Chart element:

PieChartRandom

Specify Default Font

The default font of text element (text box, button, list, table, tree etc.) is displayed as “<default>”, its actual font name will be “Arial” in most cases, but if you are using the hand drawing UI theme, the default font name will be “Comic Sans MS” instead.

Now you can specify the default font for all text elements, you can find the new option here:

ElementDefaultFont

In the majority of cases, you don’t need to change the default font.  You may need this feature if you want to display Asian fonts (Chinese, Japanese etc), since the “Arial” and “Comic Sans MS” fonts can not display correctly in these languages.

Set Exact Opacity Value

This enhancement is requested by Michael Matti, now we have two controls to change the opacity of element, and they are linked together, you can use the slider to choose the approximate value, and use the stepper to set the exact value.  This will be helpful if you want to make two or more elements have the same opacity value.

Fill_Opacity

Auto Resizing On/Off

The “Auto Resizing” feature existed from the first version of ForeUI, it will be activated once you finish editing the text content of element.   More specifically, it will enlarge the element to make sure the element can contain the new text content.  It makes the tool more smart but in some cases it may be annoying, so here we have the option to turn on/off this feature:

AutoResizeAfterEditing

Post-It Text Default Alignment

Different than the Balloon element, Post-It element is more likely to be used to contain a paragraph of text, so it is better to be left-aligned by default.  This enhancement is suggested by Michael Matti

Fixed Bugs:

Bug_0106: Post-It element has no content margins.
Bug_0107: Switch branching with numeric cases does not work in FF/Chrome.
Bug_0108: The default font of text element changed in simulation.
Bug_0109: Once select the font for element, can not change it back to <default> font.

ForeUI V1.70: Bar Chart, Switch Branching and Enhanced Behavior Editor

3

After two weeks development, we can proudly deliver ForeUI V1.70 today!  As I mentioned, we will provide more and more web stuffs in ForeUI, so this time we bring a new Bar Chart element.  We’ve planed improving the behavior editor for a long time, and we’ve made it in this update.

Bar Chart Element

It is a new chart element that similar with the line chart, but it render the data with multiple bars.  You can edit its data by double-clicking the chart, each row of the data represent a bar, it is formated as “Color: value”.  You can specify the chart direction freely. Like the line chart, you can also generate random data for it with just one click away, the GIF animation below shows the details:

barchart_shuffle

Switch Branching

Before V1.70, you may have to use several nested conditional branchings to check a value, but now with the switch branching, you can make your flow chart much more simpler.  Switch branching allow you to specify an expression and you can define as many cases as you need.

new_switch

switch_editing

switch_cases

Enhanced Behavior Editor

Now the behavior editor is much more easier to use, you can drag and drop nodes within the behavior tree.   The GIF animation below  shows the details:

behavior_tree_dnd

What’s more, we’ve implemented the context menu for behavior editor,  the cut/copy/paste commands are available in the context menu:

behavior_tree_context_menu

Avoid Moving Element by Mistake

This enhancement is requested by Ulrich, if your machine is fast enough, you may move the element by mistake when you just want to select it.  We make a simple machanism to avoid this: just ignore the mouse dragging for a while after performing the selection.  The element will “stick” on its location for a short while, thus you will not move it by mistake, the two videos below shows the difference:

 

Before V1.70

Before V1.70

 

 

V1.70 and above

V1.70 and above

 

Other Enhancements:

  • Press Shift to lock aspect ratio when resizing
  • Some new hotkeys:
    • ESC to close the text editor
    • ESC to close page manage window
    • Ctrl+X (CMD+X in Mac) to cut node in behavior editor
    • Ctrl+C (CMD+C in Mac) to copy node in behavior editor
    • Ctrl+V (CMD+V in Mac) to paste node in behavior editor

Fixed Bugs:

Bug_0101: The background of element chooser should be fully filled with plot’s background color
Bug_0102: Some buttons in text editor are hidden when using Windows’ native look and feel.
Bug_0103: Item with spaces in MenuBar element is not highlighted correctly.
Bug_0104: Element default font should be the same with the tool’s default font.
Bug_0105: Group members’ z values are ignored in simulation.