ForeUI Product Blog

Hello everyone,  it is another biweekly update today.  The new V2.25 version has some improvements on new table editor, provides smarter zooming and proxy settings and  includes some bug fixings.

Table Editor Improvements

In previous version, the table editor can only insert new row or column before the current one.  Now we’ve made the improvement, you can append new row or column after the current one.  The figure below shows the details:

Also we’ve made an enhancement on table resizing:  only the columns with “auto” width will be scaled during the table resizing.  That means you can fix certain columns’ width during the resizing.  The columns with “auto” width will allocate their actual width from the remained space.  If more than one column has “auto” width, they will allocate their widths according to their content.  So you can add some space characters into table cell to increase its acutal width.

Another enhancement is to auto enlarge table cell (and table) if the table cell is not big enough to hold the newly embedded element.  This feature will be activated after you hold right key to drag an element into the table.  If you want to use this feature, please make sure to turn on the “Auto resize eement after editing its content” option in the settings window.

Smart Focusing after Zoom In/Out

In previous version, after zooming in or out, the view will scroll back to top left corner.  If you are editing something on the bottom right corner, you will have to scroll back after zooming.  Now the zooming become smarter:  it will try to restore the center region you were working at; If you have selected some element, it will try to put them in the center of the view.

Proxy Settings

This feature is requested by Kfir Dadosh.  Sometimes ForeUI needs to get data from internet (update checking, download resource etc), so the proxy settings are needed in some cases.  Now you can find the proxy options via menu “Advanced->Settings->Misc Tab”:

Other Enhancements:

• When try to export DHTML to existed directory, clean the directory first (requested by Hervé Séger via email).
• Add “Extract from Container” option in context menu for embedded element (requested by Ulrich).

Fixed Bugs:

• Bug_0188: Table cell with comma will be splited into two cells.   (Thank Ulrich for reporting)
• Bug_0189: “Element Clicked” event is not triggered when clicking the table row.   (Regression in V2.22, thank Kenneth Young for reporting)
• Bug_0190: Do nothing in table editor and press ok button, the table is marked as “modified” (while actually it is not).
• Bug_0191: Table element may contain broken reference to deleted element, which cause error in DHTML generation.
• Bug_0192: Rename embedded element will make it dispear from the container.
• Bug_0193: Hand drawing theme should respect the background color of button element.  (Thank John Giddings for reporting)
• Bug_0194: The action indicator (red flag) on Table element is not clickable (regression in V2.22)
• Bug_0195: Should not resize table after editing if “auto resizing option” is off, or preferred size is not bigger than current size.
• Bug_0196: Duplicate page with table that contains multiple embedded elements, some embedded elements may dispear (Kenneth Young reported via email).

Hello everyone, tomorrow is the one-year birthday of ForeUI!  So today’s release (V2.22) must be a big one

Although the version number is not increased so much, this version is really a major milestone.  From this version, a brand new “Container” concept is introduced into ForeUI, that means we can embed element into another one.  

Container for Nesting

Table Element becomes container now, you can press right key to drag another element into the table cell.

The embedded elements really belong to the container table, if you set the table scrollable and run the simulation, the embedded elements will be scrolled together:

The embedded elements are still selectable, so you can still tweak the elements even if they are embedded into the table cell. 

You can also extract the embedded element from the container by clicking the  button in the floating tool pane. 

Element Group can also work as a container, you can select the member in group and adjust its properties without ungrouping the Group.  That’s really convenient

Brand New Table Editor

This version also bring us a brand new table editor, which allows you to specify the table row height and column width.

You can drag the header to resize the column or row, you can also double click the header to toggle the sizing policy.  The default sizing policy of column width is “auto”, which means allocate the size according to the content.  The default sizing policy of row height is ”fixed”, which will use the default table row height.

In the editor you can also add/remove any row or column.  You can hold the Ctrl key to select multiple cells and manipulate them.

What’s more, you can also specify the cell alignment respectively.  If no cell alignment is specified here, the default table alignment will be used.

Fixed Bugs:

• Bug_0185: Line element can not be rendered correctly in IE if the element width or height less than 20.  (Thank pohldoug for reporting)
• Bug_0186: Should not hide the text editor when clicking its semitransparent border.
• Bug_0187: In Mac OS, press CMD+R to launch simulation. When return to the application, the element selecting is not working properly.

Edit on 2010-04-28:

We have released an unoffical update V2.23 for bug fixing purpose.  Details here: http://getsatisfaction.com/easynth/topics/unofficial_release_v2_23_for_bug_fixings

Hi everybody, it is Monday again    This time we bring you the zoom in/out feature, which will help you a lot when you want to tweak the details of the wireframe or preview the whole design.   The V2.20 also contains some enhancements and bug fixings (see below).

Zoom In / Out

This feature is requested by Jeffrey Werner about 6 month ago, and we also received similar requests from other channels (email, twitter etc.).  Now you can choose the zooming scale from the list at the bottom right corner, you can also input any percentage value for zooming:

 It is also possible to change the current zooming scale from the menu:

As you can see in the popup menu, you can use hotkeys to change the scale as well:

• Ctrl =: Zoom In (Cmd = in Mac OS)
• Ctrl -: Zoom Out (Cmd – in Mac OS)
• Ctrl 1: Zoom to 100% (Cmd 1 in Mac OS)
• Ctrl 2: Zoom to 200% (Cmd 2 in Mac OS)
• Ctrl 3: Zoom to 300% (Cmd 3 in Mac OS)
• Ctrl 4: Zoom to 400% (Cmd 4 in Mac OS)
• Ctrl 5: Zoom to 50% (Cmd 5 in Mac OS)

Smartly Update Custom Event Name

This is quite useful enhancement.  When you duplicate an element with some custom event handlers defined, if the custom event name contains the id of the element, the id part will be replaced with new id automatically.

This is quite useful if you need an element has its exclusive custom event:  just use the element id as prefix of the custom event name.  You can pack such an element into custom element, thus it can always handle its own event, no matter how many instances are created.

Here is an example.  It is an interactive slider element (you can download it from the community).  It has its exclusive custom event “TextBox_Slider_AdjustPos”, which starts with the element id “TextBox_Slider”.  So you can create as many instances of it as you want and they will not interfere each other.

Text Editor Placement

In previous versions, the text editor for editing text element is not allowed to exceed the bounds of the plot.  That’s not reasonable and inconvenient.  Now we improve it a little bit and don’t restrict the text editor placement so tough:

Other Enhancements:

• Ajust the text positioning for all text elements.
• Do not bring the progress window to top when exporting in progress.  (Thank Remco Douma’s suggestion)
• Show warning message when trying to load a plot created by higher version.  (Thank Tim’s suggestion)

Fixed Bugs:

• Bug_0180: Set the date of Calendar element to the last day of the month, all buttons after the date will be filled incorrectly.
• Bug_0181: Arrow Line element is not rendered properly in simulation.  (Thank Jeremy Kerr for reporting)
• Bug_0182: TextBox with initial invisible state can not really become visible via “Change Visibility” action.
• Bug_0183: Add custom element to user-defined element category and restart the software, the category will be lost.  (Thank pohldoug for reporting)
• Bug_0184: “Set Global Cursor” action does not work for Rectangle and some other elements since V2.17.   (Thank Jeremy Kerr for reporting)

From V2.17 ForeUI supports the drag and drop simulation.  This post will introduce how to make element draggable.  Just remind that if you want to simulate a draggable window, that will be quite easy: just check the “Draggable” option for the Window element.

From V2.17 all elements can become draggable.  What you need to do is to handle the mouse events properly.

Before going deep into the details, lets take a look at the analysis of drag and drop behavior (drag from P1 and drop to P2):

During this process, there will be three mouse event triggered orderly: Mouse Down, Mouse Move and Mouse Up. To simulate the drag and drop behavior, we need to handle these mouse events in this way:

• Mouse Down:
  • Mark the current status as “dragging”.
  • Cache the current location P1 as the dragging start point
  • Cache the current location of the element that being dragged as the element origin
• Mouse Move:
  • Calculate the current offset against the dragging start point (P1), and move the element base on its origin and the offset.
• Mouse Up:
  • Mark the current status as “not dragging”.

In the community you can find a Draggable Container custom element. If you place it in your plot, it will become draggable in simulation. Here is an example.

Actually it is a TextBox element. It becomes draggable because it handle mouse events as above. Here is its behavior definition:

As you can see, the dragging status, dragging start point and element origin are stored in global properties. The most important action is the “Move Element” action, it move the TextBox to this new location:

NewX = ElementOriginX + CurrentCursorX – DraggingStartX

NewY = ElementOriginY + CurrentCursorY – DraggingStartY

One thing should be noticed is the three mouse events are not fully the same than those we mentioned before. The “Mouse Move” is replaced by “Global Mouse Move”, and the “Mouse Up” is replaced by “Global Mouse Up”. Let’s make a comparation for these events:

From the table above you can see the “Mouse Move” and “Global Mouse Move” is quite similar, but the global event will be triggered no matter where the mouse cursor is. Here is an example to show the reason to use “Global Mouse Move” and “Global Mouse Up” instead of “Mouse Move” and “Mouse Up”:

Let’s say we have two elements: A and B. B has a higher z value. When we drag element A towards B, B will cover A since B has higher z value. When this situation happens, element A can not receive the “Mouse Move” and “Mouse Up” events since element B intercept them. To avoid this situation, we should use “Global Mouse Move” and “Global Mouse Up” events.

Once you understand the mechanism to simulate drag and drop, you will find that all elements can be dragged if you’d like to. Here is an example for drag and drop simulation, you can download its .4ui file from the community.

This biweekly release bring us the ability to simulate drag and drop in prototype.  Also it provides the enhanced Tabs and Vertical Tabs elements.  There are other new features, enhancements and lot of bug fixings, please read on.

Drag and Drop Simulation

Now with ForeUI you can simulate the drag and drop behavior in your prototype:

This powerful feature is suggested by snortch.  Since drag and drop can be described as a procedure like this: Mouse Down->Mouse Move->Mouse Up, we need to handle these three mouse events.  Each mouse event can have “Native” and “Global” versions:  The (native) Mouse Down event will trigger only when the mouse is pressed on the element;  The Global Mouse Down event will trigger no matter where you press the mouse.  The situation exists for other mouse events as well.  So we have 6 new mouse events:

• Mouse Down:  Mouse pressed on the element.
• Mouse Move:  Mouse moved over the element.
• Mouse Up:  Mouse released on the element.
• Global Mouse Down:  Mouse pressed at any place.
• Global Mouse Move:  Mouse moved anywhere.
• Global Mouse Up:  Mouse released at any place.

For simulating a drag and drop, we just need to pick 3 of them to handle.  A typical case for dragging an element to move is: Mouse Down->Global Mouse Move->Global Mouse Up.

In the mouse event handler we need to access the current cursor position, so the {Current_Cursor_X} and {Current_Cursor_Y} global properties are provided. 

We understand that simulating drag and drop is not very easy, so we submit a Draggable Container custom element and a Drag and Drop Example plot in ForeUI user community.  You can use the Draggable Container directly when you need to simulate a single draggable object, or you can reference the example if you need to simulate more complex cases.

Enhanced Tabs / Vertical Tabs Element

From this version, the Tabs and Vertical Tabs elements support icon in each tab, and you can also specify the height of the tab.

Re-Edit Custom Element Content

In previous versions, once you create the custom element, you can change its information later, but no easy way to edit its content.  Now things become easier:  just click the “Edit Element” button in the custom element information window, you will open the custom element in a new tab.  After that you can edit the custom element like a single-page plot.

New “Key Up” Event

This event will be triggered when any key on keyboard is released.  It will be useful if you want to catch the inputing text in edit box, the Key Down event can not do the job as the value of edit box will be updated after the Key Down event (and before the Key Up event).

Other Enhancements:

• Support copying/pasting hex color value in color picker. (Suggested by Ulrich)
• Commit data when page title and page note edit field lose its focus. (Suggested by Tim, Remco and Ulrich)
• Show error message when pressing Ctrl+D to call action editor for a selected group.  (Suggested by Ulrich)
• List recent plot files in “File” menu.  (Suggested by Remco and Tim)
• Can configure the maximum number of recent file records.
• Change the menu structure for Mac OS.  (Suggested by Remco)
• Change some menu hotkeys for Mac OS. (Suggested by Remco)
  • SHIFT+CMD+Y: Slide Show
  •  SHIFT+CMD+Z: Redo
  •  SHIFT+CMD+S: Save As
  •  CMD+Q: Quit ForeUI

Fixed Bugs:

• Bug_0166: TextBox element can not restore visibility after hidden by its container. (Thank Ulrich for reporting)
• Bug_0167: Press ENTER after changing plot size in plot configure window, the window is closed but the changed is discarded. (Mac OS only.  Thank Remco for reporting)
• Bug_0168: Can not add image that smaller than 10×10 into image dock (while the minimum image size should be 5×5). (Thank Andre for reporting)
• Bug_0169: Modification will be lost if saving on a read-only plot file, no message is shown. (Thank Steffen Neumann’s report via email)
• Bug_0170: Use ComboBox to switch page, the popup list will not be hidden automatically in IE.  (Thank Herve.Seger’s report via email)
• Bug_0171: The selection of popup list in ComboBox should be cleared after hiding the popup list. (Thank Herve.Seger’s report via email)
• Bug_0172: In Mac OS X, after closing the about dialog in ForeUI menu, another “V1.00″ about dialog will pop up. (Thank Remco for reporting)
• Bug_0173: Saved .fce file contains inconsistent page id.
• Bug_0174: Element categories with small button will not update its style when UI theme is changed.
• Bug_0175: Input file name without “.4ui” suffix for new plot file, the recent file history will save an incomplete record.
• Bug_0176: After clicking the “Ok” button in settings window, it always ask for restarting ForeUI, even there is nothing changed.
• Bug_0177: The thumbnail for newly added or loaded custom element can not be updated when UI theme is changed.
• Bug_0178: The scrollable range in element category is too big when displaying small element buttons.  (Thank Ulrich for reporting)
• Bug_0179: The scrollable range in element category is not updated after a filter keyword is entered.  (Thank Ulrich for reporting)

Hello friends, there are two weeks elapsed since the V2.12 relased.  So it is time to rollout a new version   We will try to release new version for every two weeks.  I think two weeks is a suitable duration as the update will not be too small or too big, also users don’t have to update the software too frequently.  The update today includes German language support, new event,  new property and some enhancements and bug fixings.

German Language Support

Here we must thank Marcus Barkhahn for the translation.  He contacted us about two months ago and asked for this task, and finished translating the 1400+ sentences himself.  Thank you Marcus Barkhahn, with your help ForeUI supports Germany language now!

 To change the current language, just go to the settings window (menu “Advanced->Settings”), and choose language in the drop-down list under “General” tab:

Press Shift + Arrow Key to Nudge Element

This feature is requested by Danm.  Now you can hold the Shift key to accelerate the moving of element with keyboard.

If you need to change the step length of movement when Shift is pressed, you can go to menu “Advance->Settings” and change the value under the “Edit” tab:

Icon in Menu Bar

This feature is requested by Ari and daniel.goertzen.  Usually the menu bar has no icon but Mac OS is an exception, also we need icon in menu bar when creating wireframe for website.

Auto-Fit the Screen of Mobile Web Browser

We take the inspiration from Tobias Severin’s question.  By adding the meta declaration in the exported DHTML, the mobile web browser will zoom the page properly after the loading.  So if you design a 320×480 wireframe, you will get the 1:1 simulation in iPhone Safari.

This enhancement is not only for iPhone, Android system can also take the benefit.  The two pictures below shows the effects on Google Nexus One.

DHTML Exported with ForeUI V2.12 or Lower

DHTML Exported with ForeUI V2.15 or Higher

Changing Workspace Location

This feature is requested by pgbw.  This feature is useful when you don’t have enough space in your user folder.  Also it may solve the issues caused by non-native workspace.

Other New Features:

• New “Element Initialized” event.  The event is triggered when the element is initialized.  It is similar with the “Page Loaded” event for page.
• New “Current_Page_Title” global property.   The global property to represent the title of current page. (Requested by Tim)

Other Enhancements:

• Right-clicking item in action editor will select the item before showing context menu.  (Requested by Tim)
• Remember the recently used case type in Switch Branching editing.
• Set property action supports setting numeric value.
• Add a button for custom element creation in floating tool pane.

Bug Fixings:

• Bug_0160: Temporary folders for elements in user defined category is not removed from workspace after closing ForeUI.
• Bug_0161: Modify the action for group member, the modification will be discarded after moving the group.
• Bug_0162: Renaming the custom global property should also update them in expression.
• Bug_0163: The properties in the message of User Decision Branching are not updated when properties are renamed.
• Bug_0164: Select an element that supports image, drag an image from image dock to the element, the floating tool pane should be restored after releasing the mouse.
• Bug_0165: Change icon command for Tree/List/Menu can not undo correctly.

As the first update after the long leave, this version includes 14 bug fixings.  Although no new feature is provided, the following news is still exciting: A brand new ForeUI document is available!

New Online Document

As usual you can launch the document via the menu “Help->Online Help Content”, that will bring you to the ForeUI document page.  But you will see the content of the page has been changed completely.  The new document introduce all things about ForeUI systematically.  No matter you are beginner or advanced user, you will find the document very helpful.

Bug Fixings

14 bugs have been fixed in this update.

• Bug_0146: If a folder is nested under a page, it can not be removed. (Thank r10k for the reporting)
• Bug_0147: There is a delay when start drag selecting. (Thank r10k for the reporting)
• Bug_0148: The height of Calendar header is significantly reduced in simulation if the calendar is big.  (Thank Remco Douma for the reporting)
• Bug_0149: Double-click the image in group can not change its image source.
• Bug_0150: Group member A covers B, B may be hidden if A is set to invisible in simulation.
• Bug_0151: Can not get the specific cell value of table in simulation.  (Thank Justin for the reporting)
• Bug_0152: Empty table body can not be painted in simulation.  (Thank Abhishek Misra for the reporting via email)
• Bug_0153: When dragging window element that contains element group, the group members can not be moved correctly.
• Bug_0154: The entired Window element are draggable in simulation, it should be limited to header only.
• Bug_0155: Select a group and press Ctrl+D, that allows adding behavior to group (which should be disabled).
• Bug_0156: Should not allow deleting the page if all other pages are nested under it.
• Bug_0157: If page B is nested under page A, remove page A, then undo will meet error.
• Bug_0158: “Change State” action is not listed for TextEditBox element.
• Bug_0159: Invisible element in group should be painted semi-transparently in design phase.

Slight Enhancement

 This version also include a slight enhancement: move the “From Image File…” menu item to top when choosing image.  This is requested by Ulrich and we think it is reasonable: moving cursor to the bottom may trigger the icon libraries dispaly one by one, which is annoying.

ForeUI V2.10 is released today!  From this version ForeUI supports keyboard event handling, it is very useful feature when making prototype for game or other applications that need to manipulate with keyboard.  This version also provides enhanced Text element and more (details below).

Keyboard Event Handling

In order to support keyboard event handling, we implemented a new “Key Down” event.  It is a basic event and can be handled in any element or page.  Usually we need to check the state of certan keys in the “Key Down” event handler, so the new system global properties are provided:

• Current_Key_Code: The key code of current pressed key.  Here’s a key code table.
• Ctrl_Key_State: Value will be 1 if the CTRL key is currently pressed, otherwise 0.
• Alt_Key_State: Value will be 1 if the ALT key is currently pressed, otherwise 0.
• Shift_Key_State: Value will be 1 if the SHIFT key is currently pressed, otherwise 0.
• Focused_Element_Id: The id of element that currently has input focus.

Also we can retrive the Id of the element as an element property, thus we can detect if the element has focus by comparing its id and the Focused_Element_Id system global property.

Here is a simple example, a message box will popup when we press the ENTER key within the text edit box.  It can be  used when we need to simulate the data submit process.

Enhanced Text Element

Text element is very frequently used in creating mockup / prototype.   In this version we enhance the Text element so that it can have a border and can align text vertically.  The animation below shows the details:

Export Image / DHTML via Command Line

This is a very exciting feature!  It makes things easy if we want to integrate ForeUI with other tools.  From now on, you can invoke ForeUI to export image or DHTML with a single command.  Here is the how-to:

Export Images:

executable plotFilePath -Export:Image -Format:JPG -Pages:1,3,5 -FileNamePrefix:Img -NamingWith:Index targetDirectoryPath

The executable will be “launch.bat” in Windows, “sh launch.sh” in other platforms.

The parameters in red are required, parameters in green are optional.

ForeUI will use the value below if the optional parameters are omitted:

• -Format: PNG
• -Pages: <all pages that are not excluded>
• -FileNamePrefix: <same with the plot file name>
• -NamingWith: Index

Export DHTML:

executable plotFilePath -Export:DHTML targetDirectoryPath

All parameters are required.

Other Enhancements:

• Switch page in simulation, do not hide current page if the target page does not exist.
• Shows multiple menu items to launch action editor if right click on multiple elements.
• Make text content in Table element unselectable for FF, Chrome and Opera.
• Tool windows can be resized.
• Allow reseting all parameters in settings window.
• Allow renaming custom event.

Bug Fixings:

• Bug_0139: Single row Table with header cause error in simulation.
• Bug_0140: The “Auto resize element after editing its content” option does not take effect when adding image into button.
• Bug_0141: Copying page allocates duplicated element ids.
• Bug_0143: Copy element that contains “Switch Page” action and paste it to new plot, the new plot will contain the old plot data.
• Bug_0144: Mutirow, encrypt text edit box can not be properly auto resized.
• Bug_0145: The tree view in page management window may become too narrow if any page has a long title.

This is a minor update that aim to fix some bugs in V2.00, and support multiple selection in action editor.

Multiple Selection in Action Editor

Action editor allows us to drag and drop, copy/cut/paste item in the behavior tree.  In previous versions we can manipulate one item a time, which is not convenient enough.  Now we implement the multiple selection support in action editor, thus we can manipulate a batch of items a time.

We can press the SHIFT key on keyboard to perform the multiple selection, the animation below shows the new way to move or copy items in action editor:

Also we can press the right key to bring out the context menu for manipulating the multiple selected items.

Fixed Bugs:

• Bug_0133: V1.xx plot that contains conditional branchings may not be loaded in V2.0.  Thanks Wolfgang for reporting this bug.
• Bug_0134: Loading rectangle element with width=20 or height=20 in V1.xx plot file, the rectangle will be resized.  Thanks Tim for reporting this bug.
• Bug_0135: Create several instances of same custom element, move the newly created element, its action will be messed up.
• Bug_0136: Single row table (without header) shows nothing in simulation.
• Bug_0138: Custom event (and its child nodes) can not be pasted.

2010-02-03 Update:

Some bugs are found today and one of them is quite serious, so we provide a non-offical update for bug fixings.  Please read this thread for details: http://tinyurl.com/yzwxkcu

Yesterday I’ve submitted a brand new “iPhone Widgets” library in the ForeUI community site.  Now it is very easy to create prototype for iPhone App in ForeUI.

You can download the library from ForeUI directly.  Just click the “Resource Sharing” button on the bottom left corner:

Then in the popup window, click the download link under the “Library: iPhone Widgets V1.00″ item, ForeUI will download and deploy the library automatically.

After the download you can find a new element category named “iPhone”, so you can use the now elements now:

You can also download the library from web browser, just go to the URL http://www.foreui.net/node/16 and then click the download link for the .fcl file.  The .fcl file is a ZIP file actually, you can extract all its content to a directory, you will see some .fce files (element files) inside, you need to import them one by one (not so convinient yet, we need a library import feature).

The iPhone elements are real scaled, the screen in iPhone element is 320×480 pixels, which is the same with the real iPhone screen,  thus we can make iPhone app mockup in 1 : 1 scale.

So far there are 14 elements in the library, I will add more convenient elements in the future.  Thanks Natasha Nayberg for the good suggestions in this thread.

I’ve just create a simple prototype with this elements, it just take me two minutes:

I will keep improving this library, so if you have any suggestion, please feel free to let us know, thanks.