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

ForeUI V1.65: Line Chart Element Available

2

I am proud to announce that ForeUI V1.65 is released today!   We are planning to provide more and more web stuff in ForeUI, this new version contains a new line chart element that is useful for web app prototyping.  Here’s the overview of this update:

Line Chart Element

The new Line Chart element provides a intuitive view of data.   It can render multiple lines in a chart.  You can double-click the element to edit the data, the chart data looks like this:

chart_data

Each row is for a single line, it is formated as “Color: x1,y1; x2,y2; x3,y3; ……“.  We know specifying the chart data is not so interesting if you just need a chart to show, so we provide the Shuffle command to generate random data for the chart, just input the line number and press “Shuffle” button, all data is regenerated randomly, that’s fancy 😉

 line_chart

New Hotkeys

We implemented some new hotkeys in this version:

  • PageUp or PageDown (Fn + Up or Down in Mac) to switch page in edit mode.
  • CTRL + Left or Right (CMD + Left or Right in Mac) to switch selection in edit mode.
  • DELETE (BACKSPACE in Mac) to delete entity in behavior dialog.
  • ESC to close popup window.
  • CTRL + D (CMD + D in Mac) to open behavior dialog.
  • Options for Exported Image File Name

    In this version, we provide new options to specify the export image file name.  This feature is requested by Michael Matti, by using the title of the page in the file name, we can easily find out the image we want.  The options are available in the file chooser dialog when trying to export image files:

    export_image_names

    If you choose the second option, the image file name will include the title of the page (all non-alphanumeric characters are replaced with “_”).

    Scroll Options for IFrame

    In V1.60 we introduced the IFrame element, now we provide the scroll options for it.  These options allow you to define the scrolling strategy of iframe:

    iframe_scrolling

    Show Page Title

     This feature is requested by Ulrich Bottger,  now the page title will be displayed on the bottom-left corner of the tool, and you don’t have to open the page management window to get this information.

    page_title

    Folders Moved

    When running ForeUI in VISTA with non-administrator account, you may meet the privilege problem when trying to output something.  In this version, we moved the output folders (workspace, plot and customize folders) to the system preferred user directory, it will avoid that problem.

    Other Enhancements:

    • Text edit box has no text content by default.
    • Change the minimum size of image element to 5×5.

    Fixed Bugs:

    • Bug_0099: TextEditBox element lists some actions that are not implemented yet.
    • Bug_0100: IFrame element should have thicker border in hand drawing theme.

    ForeUI V1.60: New Elements, Events, Actions and More

    1

    Hello everyone, here’s a good news: ForeUI V1.60 is just released!  This version is relatively big update, we’ve added more elements, events and actions, and some important enhancements are included.

    iFrame and Web Browser Elements

    Now we’ve provided the iFrame element to ease the web prototyping.  After you drag iFrame to the plot, you can double-click it to change its default URL.

    iframe_plot

    And the figure below shows the  simulation:

    iframe_simulate

    What’s more, you can change the URL of the iFrame during the simulation, via the “Set iFrame Source URL” action:

    iframe_url

    We also provide a new customized element to simulate the web browser, it allow you to input any url in the address bar and show the web content in it:

    web_browser

    Add Note on Pages

    From now on ForeUI allow you to add note on page, the note for the page can briefly introduce the page, which is very useful.

    page_note

    And the page note will be converted to footnote when exporting the pages to PDF:

    pdf_footnote

    New “Element Hidden” and “Window Closed” Events

    These two new events actually work in the same way, yet the “Window Closed” event is for Window element only and the “Element Hidden” event is available for all other elements.  The event will be fired when element is  hidden (by the action).

    hidden_event

    More Actions to Control Text Box Element

    In V1.60 we added 4 new actions for controling the text box in simulation, they are “Change Size”, “Change Opacity”, “Change Background Color” and “Change Text Color”.  These new actions provide more flexibility to implement many many special effect, that depends on your imagination 🙂

    text_box_actions

    Improved Master Page

    The old implementation of master page has a limitation, but now this limitation is eliminated.  The diagrame below shows the difference:

    master_page

    Other Enhancements:

    • TextEditBox element does not paint the caret by default.
    • Smarter id allocation.
    • Show page title in the browser status bar.
    • Allow turn on/off the z value auto adjustment when overlapping elements.

    Fixed Bugs:

    • Bug_0093: The actions on page level is not updated when involved element id is changed.
    • Bug_0094: The element id “A_B_C” is regarded as “A_B” when trying to edit the id.
    • Bug_0095: Javascript exception when click on Table, List, Tree, Menu or Tabs element that has no “Selection Changed” event handler.
    • Bug_0096: Copy & paste multiple elements, the element id in actions are not mapped correctly.
    • Bug_0097: “Page Loaded” event handler is invoked twice.
    • Bug_0098: The master page background is not updated immediately when switching the UI theme.

    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.