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 Feature

ForeUI V1.57 is Released!

3

Today ForeUI V1.57 is released!  This version mainly focus on the bug fixings, yet a few new features and enhancements are also included.

Enhancements for Mac OS X

From this version we associate .4ui file with ForeUI in Mac OS X, that means you can double click any .4ui file and open it in ForeUI.  We also make so GUI tuning for Mac OS X in this version, such as hiding the black border when dragging element to the plot area, changing some buttons’ size etc.

filetype

Display Settings Tab

Now the settings window contains one more tab: Display.  It allow you to specify the way to paint the invisible elements and the master pages in the editing area.

displaysettings

Window Draggable On/Off

In V1.55 we implemented the dragging simultion for window element, however we realize that the window dragging is not always required, so we make it configurable.  The default value is off, thus the old sample plot will work as they were.

draggable

Get Text Value During the Simulation

Now we can get the value of Text element during the simulation.  This feature existed in Text Edit Box for a long time, now the Text element finally have this.

gettextvalue

Fixed Bugs:

Bug_0088: Duplicated page may have repeated element ids for same kind of elements.
Bug_0089: Tabs element has no default selected index value in simulation.
Bug_0090: Progress bar freezes when trying to save customized element.
Bug_0091: After dragging image from image dock to replace the image on element, the cursor can not restore.
Bug_0092: Invisible element on window element is shown when window is close.

ForeUI V1.55: Master Page and More!

1

It tooks a little long for this update but we believe it is just worth it.  So let’s see what’s new in this version.

Master Page

From now on, ForeUI supports master pages.  What is master page?  Well you can regard it as a “background” page which can be referenced by other pages.  All pages that use master page will inherit the content of it (including the behavior).  ForeUI makes things much simpler:  any page can be used as a master page; the master page can have its own master page too.

master_page

In the editing area, the content of master page will be painted in 40% transparent channel.  The cotent within master page can not be selected or edited directly, you need to switch to the master page for editing.

We’ve refactorred the “multipage.4ui” and “website_simulation.4ui” examples and use the master pages to simplify the design.

Element ID Editing

Now ForeUI allows you to change the id of the element.  It seems to be a simple feature yet we did a lot of work on it.  We’ve changed the machanism to generate the element id, and make the id format more simple.

id_editing

Improved Window Element

Window elements become interactive for simulation now.  You can drag the window and place it on different location, and you can click its “x” button to close (hide) it.  We’ve made an example named “drag_window.4ui” to demonstrate this, you can also run its simulation in web browser.

Also the window element can have icon on its title bar now.window

Smaller Calendar Element

Previously the calendar element can not be smaller than 200×200, but now you can resize it to 120×120.  You can see its text content also changed since the space is not sufficient.calendar

Other Enhancements

  • Remember the behavior editor window size.
  • Allow changing the group’s z-index.
  • Move configure date to the preference folder.
  • Change GroupFrame minimun size to 20×20.

Fixed Bugs

  • Bug_0085: “Selected & Disabled” radio button or checkbox gets enabled on hover.
  • Bug_0086: Should ignore elements with lower z-index when move or show/hide element with “Include elements within the area” option.
  • Bug_0087: Go to page action on first page loaded does not work.

ForeUI V1.50 is Released!

3

Hello everyone, today I’d be happy to announce that ForeUI V1.50 is released!

From V1.50, ForeUI provides the settings dialog, which allow you to specify its look and feel, some parameters for editing and the preferenced parameter for new created plot.  You can open the settings dialog via menu “Advanced->Settings”:

ForeUI_Settings

In the “General” section of the settings, you can change the look and feel of  ForeUI.  We use EaSynth look and feel (the bronze-coloured style) as the default look and feel,  someone like it, and some one hate it.  The reason that we don’t use the native look and feel is to avoid mixing up the editing content (with high fidelity) and the tool itself.  Now we provide the options to switch the look and feel so users can pick the one they like. 

The “System Look And Feel” option means using the native look and feel provided by the system,  so the final result varies depending on your operating system.  If you choose this option, your ForeUI will look like this in Windows XP:

ForeUI_Win_System_Lnf_Thumb

And if you are using Mac OS X, your ForeUI will look like this:

ForeUI_Mac_System_Lnf_Thumb

There is an option that allow you to input the class name of the look and feel, it is not so useful to most users.  If you want to use the Java metal look and feel, you can input the “javax.swing.plaf.metal.MetalLookAndFeel” here to see the result.

Another interesting update is the element library supporting (requested by Ari).  Now you can define your own library for customized elements.  This can help you to manage large number of customized elements.  In the future, we will also allow upload/download/share the libraries via internet.

library_management         library_list

You can switch the current library from the drop-down list, you can also regard it as a filter – only list the elements with the current library.  If you choose the “All” library, all elements will be listed no matter which library it belongs to; If you choose the “Default” library, all elements that are not assigned to a library will be listed.  You can click the button with move_lib icon on the customized element to move it to a library.

From V1.50, the border of Text Edit Box element can be hidden, this feature is requested by Ulrich Böttger.  With this new feature, you can make your own customized text input field (with special border).

TextEditBox_Border_Toggle

Another basic event “Right Clicked” is supported in V1.50,  thus you can handle the mouse right click on any element.  For example, you can handle this event and show the context menu on a window element.

Right_Click_Event

We also implemented some enhancements in V1.50:

  • Add cut/copy/paste/delete items to edit menu.
  • The plot property bar on bottom will become scrollable when window isn’t wide enough.
  • Behavior editor toolbar will become scrollable when dialog isn’t wide enough.

And some bugs are fixed:

  • Bug_0074: The thumbnail of customized element with single component will be too tall.
  • Bug_0079: Text label has extra margin in simulation.
  • Bug_0080: Incorrect text margin of Text Edit Box in simulation.
  • Bug_0081: PDF export: Generate 2 pages PDF for single page plot.
  • Bug_0082: Change the state of non-selectable element will cause JS exception during simulation.

ForeUI V1.45: Many Interesting Updates

Hi everyone!  It has been a while since my last post.   These days we are so happy to get a lot of suggestions from Ari Feldman, these suggestions are really useful to us, thank you Ari 🙂

Today we have good news: ForeUI V1.45 is released!  It is kind of big update so the V1.42 is skipped.  There are many interesting updates within this version and I will introduce them one by one.

Brand-new Calendar Element

This element is required for a while, we understand it is very useful for prototyping so it is the first heavy-weight element to be implemented.   It provides the possibility to mockup a calendar with any look and feel, and the calendar is fully functional during simulation, and we can handle its event and read/write its value.

Skinnable Calendar

All colors are configurable.

New Event For Calendar

New Event For Calendar

As you can see in the figure above, all colors of the calendar are configurable.  You can also double-click the calendar to change its current date.

The calendar element will fire a “Calendar Date Changed” event when its current date is changed during the simulation, we can handle this event to do many interesting things.

There are two new actions designed for calendar element, one is to set the current date of calendar (format: yyyy-MM-dd); the other one is to triger the “Calendar Date Changed” event, thus it can invoke the event handler.  The first action can change the date of calendar but it will not fire the “Calendar Date Changed” event.

calendar_actions1

Eye Dropper in Color Pickereye_dropper

This feature is required bNow we can pick color from screen pixels with the new eye dropper tool, it will be activated when we click the color picker button.

action_indicatorAction Indicator

Now elements that has action defined will show an indicator (small red flag) on its top right corner.  If you click the indicator, the behavior editor will popup and you can edit the actions immediately.

More Options for Basic Elementsrect_options

We’ve added border color and border thickness options for rectangle, ellipse and triangle elements.  We also added arc radius parameter to customize rounded corners.

Events Handling on Page Level

Previously we handled event on element level, now we have one more option: handle event on page level.  We can define the event handler for the whole page, although we only provide a “Page Loaded” event at this time.

page_event_handler1

We can edit the action for page from the page management window (see figure above).  The button with red flag icon can bring up the action editor.  The page with action defined will also have a small indicator on its icon.

New Customized Element: Date Picker

It can be used to collect date during simulation, it use calendar element inside.

New Sample Plots

This version encluded two new sample plots:

calendar.4ui: A three page demo, demonstrate the way to use calendar and date picker. You can click here  to run its DHTML version.

page_actions.4ui: It demonstrate the usage of “Page Loaded” event.  You can click here to run its DHTML version.

Other Updates:

There are many updates in this version, I can’t write them all since I don’t want this post to be too long, so I will just list them here. 

Enhancement: Go to Page action can find correct target when pages are re-ordered.
Enhancement: The minimal height of Tabs element is the same with its title height.

Fixed Bug_0075: Need to re-license the tool after update.
Fixed Bug_0076: Icons in List, Menu and Tree element can not be saved in customized element.
Fixed Bug_0077: Element chooser for action creation should select the current page by default.
Fixed Bug_0078: Pause action in loop does not work.

ForeUI V1.40: Improve the Experience in Mac OS

ForeUI V1.40 is available now!   This update is the one we scheduled for a long time.  The key enhancement is to give Mac users a better experience.

Download & Installation

Before ForeUI V1.40, Mac users can only use the .tar.gz package, extract it and launch the application via launch.jar or the launch.sh shell script.   It works but the experience is bad, Mac users never install software like that 🙂

Now we have made the enhancement, you can download the “ForeUI.dmg” disk image file.  Double clicking the file in Mac OS will mount the disk and you can find the “EaSynth ForeUI” application inside, you can copy it to any place you want, or drag it to the dock for future usage.

dmg_disk

Adjustments for Mac OS

When running in Mac, ForeUI will have some different behaviors then before, including:

  • Put menus into the desktop menu bar.
  • Replace CTRL to CMD in hotkeys.
  • Use BackSpace key to delete element in plot.
  • foreui_mac

    Other Enhancements  (for All Platforms):

    Directly access web browser in JRE5

    If run older version under JRE5, ForeUI can not popup web browser window when it need to visit a URL.  Now it is improved and ForeUI always able to access web browser.

    Auto unify the format of boolean value in expression.

    When editing expression for condition checking, we may need to use boolean value for comparation.  Actually one the lower-case true/false values are acceptable, in order to avoid the confusion, the expression editor will auto-correct the boolean value to lower-case form.