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

Archive for March, 2010

Simulate Drag and Drop with ForeUI

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:

Native Mouse Event Global Mouse Event
Mouse Down
Mouse is pressed on the element. Mouse is pressed anywhere.
Mouse Move
Mouse is move on the element. Mouse is moved anywhere.
Mouse Up
Mouse is released on the element. Mouse is released anywhere.

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.

ForeUI V2.17: Drag and Drop Simulation and Enhanced Tabs

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)

ForeUI V2.15: German Language Supported

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.