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

Quick Tutorial on Making Interactive Prototype

7

ViVi just finished a quick tutorial on how to make working prototype, the example inside may be too simple to advanced users but really useful to beginners.  So, if you are new user of ForeUI and want to create interactive mockups, please don’t miss this totorial.

It has been mentioned several times that we need to provide the help document, yet we have such a long TODO list at this time, and there are many important features to be implement,  so we can only allocate very limited bandwidth for documentation at this phase.   My friends, before we publish the help document, you can ask for support in our support forum, we will response very quickly (yet please consider the timezone, we are in GMT+8 :D)

In our schedule, the next version of ForeUI (V1.50) will be released on 21st, August.  Again there will be many interesting updates, I think I can disclose something today;)

One interesting new feature is to allow creating your own element library (requested by Ari), that will ease the management of customized element.  We also have a plan to allow sharing libraries via internet.

The Bug_0079 reported by Ulrich Böttger will be fixed, also we will fix another similar bug on Text Edit Box. 

There will be many other updates, but I can not disclose here.  I don’t like to keep you  guessing, but those things are not confirmed yet, so let’s wait and see :).

A~ha~ It seems like my first post without any figure…

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.

    ForeUI V1.37: Display Control for Editing

    1

    ForeUI V1.37 is just released!

    The most interesting update is the “Display Control” new feature, you can see a new button on the top-right corner with text “Display(?/?)”, you can click it to see how it works.   It can exclude some elements for editing, so that you can easily work on the elements overlapped by others.  This feature can partly solve the problem mentioned in the “Easy element select / hide-show elements” topic.

    Please keep in mind that this feature is to ease the editing for complex wireframe, it only affact the display and will not affect the data.  So just feel free to use it and it will NOT really delete your elements 🙂

    Here is a gif animation to show how it works (click to view bigger figure) :

    display_control1

    Another two enhancements in this version are:

    Menu Bar/Tabs/Table can escape the comma in content.

    It is discussed in the “Commas as delimiter for table columns causes problems” topic, thanks Ari and John for the suggestions!

    UI theme switching can take effect without pressing “Apply” button.

    Now we can change the UI theme without the additional clicking on the “Apply” button, so changing the them just need two clicks now 😉

    Also there is a bug fixing:

    Bug_0073: Copy/Paste element does not update its behavior correctly.

    This bug is similar with the one on page copying (Bug_0068, fixed in V1.35), but it is for element copying instead.

    ForeUI V1.35 is Released!

    Hi everyone, I am proud to announce that ForeUI V1.35 is released today!

    This new version is really interesting, you will find that ForeUI can do much more things than before 🙂

    Button Icon Placement

    This new feature is requested by Erik, he also gave us some useful suggestions, thank you Erik!

    Now we can specify how to place the button icon, like this:

    icon_placement1

    Selection Changed Event

    This new event is really useful, it will be triggered when selection within the element is changed, with it we can implement multiple actions for one element, according to its selected item.

    Now this event is available on Menu Bar, Menu, List, Tree, Table and Tabs:

    selection_changed_event1

    Menu Bar/Menu/List/Tree/Table/Tabs Become Interactive

    This enhancement is really big and exciting.  Now these elements are not only images durring the simulation, they are interactive and you can operate on them!

    These elements also support a new property to indicate which item is selected:

    selected_index_property1

    In order to demonstrate how can we do with these new features, I use about 10 minutes to create an interactive wireframe, which is simple but quite interesting.   The simulation effect looks like this:

    selection_demo2

    If you are interested, you can run the DHTML version of this demo in your web browser, via the links below:

    Interactive Selection Demo with Hand Drawing UI Theme

    Interactive Selection Demo with Wireframe UI Theme

    Interactive Selection Demo with Windows XP UI Theme

    Interactive Selection Demo with Mac OS X UI Theme

    The plot file for this demo is also included in the install package, you can open the “interactive_selection.4ui” plot in ForeUI and see what’s inside.

    This new version also fixed two bugs:

    [Bug_0068]  Duplicated pages don’t copy action targets well
    Reported by Cristian Prundeanu, thank you Cristian Prundeanu!

    [Bug_0072]  Hand drawing theme: Image elements are always grayscale.
    Reported by Jeremy, thanks for the reporting!