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

All posts by xavier

July 15, 2010

ForeUI V2.37: Enhanced Tabs and Embedded Elements Listing

by
8

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
| |
June 20, 2010

ForeUI V2.32: Scrollable Container and More

by
7

Hi everyone, new version again 🙂  This release bring us a new “Scrollable Container” element which can make things scrollable.  Also there are more new features and enhancement, please read on.

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.
Feature | ForeUI | Uncategorized | Update
|
June 6, 2010

ForeUI V2.30: Enhanced Resource View and New Text Editor

by

Dear friends, today we release ForeUI V2.30 as we scheduled.  This version bring us a better resource view from community site and a new text editor for TextBox editor.  Some useful enhancements and bug fixings are included.

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.
Hervé Séger
Feature | ForeUI | Uncategorized | Update
|
May 23, 2010

ForeUI V2.27: Multilevel Menu Element

by

Hello everyone, today’s new version will include a brand new “Multilevel Menu” element, I bet you will like it 🙂

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)
Feature | ForeUI | Uncategorized | Update
| |
1…45678…21