ForeUI Product Blog

Archive for the ‘Update’ Category

Element Tooltip

The newly released V3.2 introduced a very useful feature, which allows you to set the tooltip for any element.  It is a real tooltip: once the it is set, it will take effect automatically in the simulation.  You don’t need to simulate the tooltip by yourself anymore.

Here is how it will look like in the simulation:

If the tooltip is not set (empty), the element will not have tooltip in simulation, just like it did in the previous versions.

Selected/Unselected Event for Checkbox/Radio Button

Since this version, you don’t need to check the checkbox/radio button state in a conditional branching anymore, just handle the “Element Selected” or “Element Unselected” events for checkbox/radio button, and you will get notified when the element selection state is changed.

New Action to Change Button Text

Now you can use the new “Set Button Text” action to change the text on the button.  That means you can have some dynamic button in your prototype.

Change Element Order

If you create some elements with the same Z value, the only thing that decides how to overlap them is the element order.  The element with smaller order index will be rendered earlier.  Now you can change element’s order in the outline view: just select the element and click the “move up” or “move down” button at the bottom, you will see the overlap order is changed accordingly.

Hotkey to Group/Ungroup Elements

Now you can press Ctrl+G to group the selected elements, and press Ctrl+Shift+G to ungroup the group you selected.  If you are using Mac OS X, the hotkey should be Command+G/Command+Shift+G.

There are More

There are more enhancements in this version.  Please read the update history for more details.

ForeUI V3.10 is released on 5th December, 2012.  We have made a lot of optimization in this version and now it becomes much faster and smoother.  What’s more, there are some exciting new features and enhancements.

Import Plot

This feature is designed for team collaboration.  Your team members may work on different parts of the design as different plot files.  Finally you may wish to merge all plots together, and here is the way to go.  You can use the “Import Plot” feature to Import another plot into the current editing plot.  You can decide where to place the new pages (before or after current existing pages), and you can specify how to align the new pages with the old ones (if they have different size).

This feature is available in the “File” menu.  The “Import Plot…” item will be enabled if you have at least one plot opened for editing.

Background Image

From this version, you can specify the background image for the entire plot.  You will be able to find some new options after clicking the “Plot Settings…” button on bottom right corner.  The background image can be tiled horizontally, vertically or in both directions.  You can also configure how to align the background image with the page.

Compatible with Mountain Lion

We have a blog post about the issue when running ForeUI in Mountain Lion (Mac OS X 10.8).  Now the problem is solved.  ForeUI application is signed with Apple Developer ID certificate now, and you will get smooth experience when installing ForeUI into your Mountain Lion system.

What’s more, we have fixed some minor issues and made some improvements for Mac OS system.  We even created a new installer for it:

Input Element Id in Chooser

In previous versions.  When the element chooser is shown up, you will need to select element in the plot editing area.  If the target element is covered by other elements, or it is in another page, it will take you some time to find it out.  Now you have another choice: you can directly input the element’s id in the chooser.  You don’t have to remember all the IDs, just start typing the prefix of the id and you will see all candidates are listed, which is fancy

When the content assistance pops up, you can use the UP and DOWN keys on keyboard to choose the one you want.  Of course you can use mouse to select the element from the list.

Other Changes

There are more content in this update.  You can check out this page to see other new features, enhancements and fixed bugs in this release.

The official release of ForeUI V3.0 is delivered today.  Comparing with the previous releases, this version is more focus on the reliability and usability.  However, there is still an exciting new feature in this version, which is called “integration task” that can easily integrate ForeUI with other tools.

You may already know that you can invoke ForeUI via command line to generate image or HTML5 simulation.  However, have you considered to use other tools to process the file(s) generated by ForeUI?  The integration task is designed for that purpose.  In the settings window, you will see a new tab named “Integration”, which allows you to manage the integration tasks.

You can click the “Add Task…” button to add a new integration task.  Here you can specify the parameters for the task.

If you unselect the “Task is Enabled” option, the new task will be created but not take effect immediately, until you enable it later.

If you select the “Blocking Subsequent Tasks” option, the new task will block the workflow until the command is finished.  This is useful when you want to execute a serial of tasks in order.

You will need to specify the condition that trigger the task.  So far ForeUI supports these conditions:

• Before Saving Plot
• After Saving Plot
• Before Export HTML5
• After Export HTML5

You can input or browse the command to be executed, and you can use the variables below in the command:

• %plot%: the file path of the current editing plot.
• %file%: the path of the output file.  For Before/After Saving Plot task, it will be the path of plot file to save; For Before/After Export HTML5 task, it will be the path of generated HTML file.
• %dir%: the path of the output directory.  For Before/After Saving Plot task, it will be the path of directory to save plot file; For Before/After Export HTML5 task, it will be the path of directory that store the generated HTML files.

By making use of the integration task, you can invoke other tools to process the file generated by ForeUI.

Example:  Auto Commit Plot File to SVN Repository

Some customers have asked for the version control feature.  Now we can have it by integrating ForeUI with SVN.  If you are not familiar with the usage of SVN, you can find some tutorials via google.

Assume that you want to commit the plot file to SVN repository everytime after you save the plot.  First you should add your plot file into a project, and checkout your project to a local directory.  Then please open the plot with ForeUI and go to the “Integration” tab in settings window.  You can create an integration task like this:

That’s all, every time you save your plot, it will be committed to the SVN repository, so you will never lose your work, theoretically

If the plot file is not added into your SVN project, the command above will do nothing.

Remarks: the integration task feature is available for registered user only.

Other Enhancements and Bug Fixings:

Please check out this page to see the complete list of enhancements and fixed bugs in this version.

ForeUI 3.0 RC version is just released.  As the last version before V3.0 official release, this version tend to be stable and offer much better experience.  We don’t plan to add new feature in the official release of 3.0, instead we will include the completed document and have some bugs fixed.

We have made so many improvements in this version that I could not introduce them one by one.  A full list of new features, enhancements and bug fixings can be found here.  In this blog post, I would like to show you the most interesting part of this update.

ForeUI Store

From this version, ForeUI integrates with its new online resource store.  You can download new element, library or plot file from store window, or from the store web site.  You will be able to download new UI theme and ForeUI plugins from the same site in the future.

Clicking the category buttons on top can filter the items to be listed.  You can also search the item by tag via the search box on top right corner.  If you click the “Preview” button, the HTML 5 simulation of the item will be launched in your web browser, and you can see how it works.  Clicking on the “Download” button will download the item and deploy it (if needed).

The store is just online and there is not so much resource inside yet.  We will frequently add new resources into the store site.

Drag and Drop in Outline View

The outline view is significantly improved by supporting drag and drop elements directly.  This is an easy way to embed element into container, or move embedded element from one container to another.

When you drag an element and try to drop it into a container, the tool-tip will tell you if it is allowed.  So you will know what you can do and what you can’t, also you will know why.  This feature is extremely useful when you want to manage a lot of overlapped elements.

Other New Stuffs

There are many other new things in this version.  Don’t be surprised if you find something different than they used to be.  Ususally they are changed in a better way, but if you think they are not, please feel free to tell us.

If you are interested in what we exactly did in this version, please check out the update history page.

ForeUI V3.00 Beta3 (internal version number 3.003) is released. This new version introduces a new “RadioButtonGroup” element, supports Russian language and allow customizing the toolbar in simulation.  There are also some enhancements and 15 bugs are fixed.

The newly added “RadioButtonGroup” can simplify  the way to simulate a group of radio buttons.  In previous versions, we need to define some actions for a group of radio buttons to make sure only one radio button can be selected at a time.  Now things become much easier by using the “RadioButtonGroup” element.

The RadioButtonGroup element works like a List element, except that it renders its items as radio buttons.  You can double click it to edit its content: one line one radio button.  Just like the List element, “Selection Changed” event will be triggered when different radio button is selected in simulation, and you can check which button is selected by checking the “selectIndex” or “selectText” property.

The toolbar in simulation becomes customizable now, you can show/hide any button in the toolbar from the “DHTML” tab in settings window.  This feature is very useful when you want to hide some facilities in the toolbar.  For example, the “Property” view is quite useful for prototype author, but it means nothing to the reviewers.  It will be better to hide the “Properties”  button before delivering the prototype to reviewers.

From this version, ForeUI supports Russian language (Thanks Konstantin for the translation).  The new language option can be found in the settings dialog (under “General” tab).  Remarks: if you are using Windows Vista/7, you will need to run ForeUI as system administrator to change the language, since it needs to change the content in the installation directory.

Some Enhancements

Some enhancements are made in this version:

• Allow showing behavior for current selection only.
• The splash screen is not always on top.
• Do not hide loading text before all scripts are loaded by web browser.
• Set cursor to “wait” during the loading of simulation.
• When drop file into welcome page, have it opened automatically.

Fixed Bugs

15 bugs are fixed in this version:

• Bug_0329: When loading plot created by V2, should not override the line height and pad values for MockText element.
• Bug_0330: In simulation, menu will be hidden by clicking its item or outside area, but the “Element Hidden” event is not triggered.
• Bug_0331: Set custom property value in simulation, should try to make data type casting when value and type are not matched.
• Bug_0332: Switch branching case should be able to use empty string as case expression.
• Bug_0333: Double clicking .4ui file to open ForeUI, the plot is not loaded in edit area.
• Bug_0334: When copy/paste element, the target element ids of its action are not auto updated.
• Bug_0335: Actions belong to elements that embedded in container are not included during copy/paste/pack custom element.
• Bug_0336: After deleting behavior root in behavior editor, the edit/remove button should be disabled.
• Bug_0337: Using backlash to escape brace for object type property definition, the backlash should be removed in simulation.
• Bug_0338: Branch/Loop/Delay that directly followed by an action with error, may cause Javascript error in simulation.
• Bug_0339: When running simulation IE9, GroupFrame element does not show its bottom border.
• Bug_0340: The size of popup list for ComboBox with any empty row is incorrect.
• Bug_0341: List element has mismatch between cell border and background, when running simulation in Chrome/Safari.
• Bug_0342: The newly added tag filter button is not saved for next run.
• Bug_0343: Behavior filter can not highlight keyword with special characters (space, quote mark etc.).

ForeUI V3.00 Beta2 (internal version number 3.002) is released now.  Besides fixing the bugs found in Beta, this version also offer a new “Hyperlink” element, and some other new features and enhancements.  The main reason why we still mark this new version with “bata” label is the lack of documentation and examples, which still need some time to work on.

In previous versions, we have to use the TextBox element to simulate a hyperlink (by adding underline style, handling “Mouse Over”, “Mouse Out” and “Element Clicked” events).  The new Hyperlink element offers a much easier way to simulate the hyperlink, just input the parameters for the link and ForeUI will do the job for us.

Another new feature is to allow setting the page alignment for simulation.  In V2.xx versions, the pages are always aligned left.  While in 3.00 beta, the pages are always aligned center.  Now we can spcify the alignment of  the content, which could be left, center or right.  The new option in settings window allows us to set the default page alignment for DHTML simulation, we can also change this alignment in the toolbar in simulation.

This version improves the diagnose engine of behavior editor, the errors that caused by parameter missing can be detected now.  Also the actions with error will be excluded in the simulation/export, so the chance to meet Javascript error in DHTML simulation will be much lower.

This version also have the bugs below fixed:

• Bug_0321: Memory leak caused by behavior editor.
• Bug_0322: Starting in Mac OS Lion may halt by thrown exception.
• Bug_0323: Clicking memory usage link should go to “misc” panel in settings window.
• Bug_0324: Calendar is not highlighted correctly if the selected day is the first day of the month.
• Bug_0325: Embedded element can not be deleted directly.
• Bug_0326: Changing image reference does not work correctly when image ids are discontinuous.
• Bug_0327: Tool window has incorrect size if its content is too big.
• Bug_0328: Simulation in Firefox or Safari: vertical scrollbar is not shown when page is higher than browser view.

As I remember, ForeUI V2.xx has entered the maintenance phase for about one year, which means we have not added new features into ForeUI for a year.  After so many effects, we finally released the ForeUI V3.0 beta!  Now you can download it here, and feel free to let us know your feedback.

It is recommended to use the new version to create a new project.  If you want to use it on previously created project, please backup your data beforehand.  Remarks: we are still working on the documentation and resource store.

The new version offers many new features and enhancements, my previous posts (this, this, this and this) just introduced a few of them.  So today I will continue my introduction of V3.0.

All tool windows are docked on left, right and bottom side, and you can use hotkey to show/hide them.  If you have ever used previous version of ForeUI, you will find that the GUI of V3.0 becomes even simpler.  For example, the element list on left side is simplified: all elements are listed in one panel and you can use tags to filter them.  There are many enhancements like that, and you will see.

From this version will will see a new element named “Polygon”, which allows you to create special shapes.  When you drag the element into editing area, or click the element and then click in the editing area, you will start drawing the polygon.

You can edit your polygon with “Draw Mode” (click to create new node) or “Edit Mode” (draw to move any node).  After clicking the “Finish” button you can then configure its background color and border color etc.

As you can see, with this flexible polygon element, you can define special shapes on your web/software UI.

Hope you will like V3.0 beta, and I will continue introducing new features next time.  If you are interested, here is a list of new features and enhancements in V3.0 beta.

As for the license, if you purchased your license for less than one year, you will be able to use your license key on V3.0.  Otherwise you will need to re-order the new license key for it (the price is raised now).

It has been 4 months since V2.80 is released.  Since we are working on V3.0, we have not implemented new features during these four months.  However we received some bug reports from our support forum and release minor updates that include the bug fixings.

2011-06-08: Minor update V2.801:

• Bug_0307: The borders of Table element in hidden page are still visible.
• Bug_0308: Could not right drag (or CTRL+drag) Table or Tree from element list to working area.

2011-06-13: Minor update V2.802:

• Localization: German translation update to V2.72.
• Bug_0309: Click image in image dock, the “Use By: ? elements” information in popup menu is not correct (only current page is taken into account).

2011-07-16: Minor update V2.803:

• Bug_0310: Select text element with non-default font, execute the cut and paste commands, the font combo box incorrectly get focus.

2011-08-18: Minor update V2.804:

• Bug_0311: When performing selection, the embedded element should not enlarge the testing area of its container.
• Bug_0312: Single row TextEditBox should not auto wrap its content in editing mode.

2011-09-01: Minor update V2.805:

• Bug_0313: Single row TextEditBox with “center” or “right” alignment does not render the text.

2011-10-03: Minor update V2.806:

• Bug_0314: Apostrophe in ComboBox element will be displayed as “'” in IE.
• Bug_0315: Editing any node in action editor will remove its note.

2011-10-04: Minor update V2.807:

• Bug_0316: Elements that embeded into Table are not rendered correctly since V2.806.

2011-10-27: Minor update V2.808:

• Bug_0317: Mac OS X: double clicking plot file to open ForeUI, the plot may not be loaded correct.
• Bug_0318: Can not use action to append row to Table that does not have any row initially.

2011-12-08: Minor update V2.809:

• Bug_0319: Can not paste image from clipboard under Mac OS X Lion.

2012-02-18: Minor update V2.810:

• Bug_0320: Copy and paste a Window or Tree element in the same plot, its embedded elements will have duplicated IDs.

Thanks for the users that report thoes bugs, it’s you who makes ForeUI better and better!

You are welcome to report bug or share idea with us on the forum, or via email.

Dear friends, it has been a while since last update, and this time it is a big one.  This update includes a new language support and many new features and enhancements, with 5 bugs fixed.  This version should be the last one that provides new features before version 3.0 is released (should be Q4 or year 2011).  We may still release some minor updates before v3.0 for bug fixing purpose.

Brazilian Portuguese Language

Now you can choose “Brazilian Portuguese” from the languages list.  Thank Francis Benito Odisi for the translation!

New System Properties, Enhanced “Go to Page” Action and Page Navigator

The page navigator element has been requested many times.  We have planed to integrate the page navigation into simulation framework in 3.0, meanwhile we provide this temporary solution before 3.0 is out.  We added two system properties (Available_Page_Indices and Available_Page_Titles) and enhanced the “Go to Page” action to adapt the solution.  Now the “Go to Page” action can accept property as its parameter:

Finally we created a very useful custom element: Page Navigator.

We create the Page Navigator element with Rectangle, Button, Text Box and Table elements.  You can place it anywhere in your plot, and it will automatically dock itself to the edge of the page.  It provides the buttons for you to switch to previous/next page, and a pop-up list to choose the target page to go.  You can place Page Navigator element on every page, but it is recommended to place it in a master page, thus other pages can share the same element.

If you want to change the docking location of the Page Navigator, you can change the value of “TextBox_HorDock” or “TextBox_VertDock” element.

The Page Navigator element can be downloaded via the “Resource Sharing” button on left bottom corner, or this URL:  http://www.foreui.net/node/94

More Properties and Actions for Accordion

We added the “Recent Expanded Section” and “Recent Collapsed Section” properties for Accordion element.  It is suggested by pohldoug, thank pohldoug for the great idea!

Also we implemented two new actions for Accordion: “Expand Section” and “Collapse Section”.  Thus we can control the accordion with actions.

Better Behavior of Element Dragging from Category

We enhanced the behavior of element creation (dragging from element category on left).  Now you can directly drag element into container if you have right mouse button or the CTRL key pressed.  Also the grid snap or object snap will take effect when you drag element into page (although those auxiliary lines are not painted, for performance consideration).

“Set Tree Node Value” Action for Tree

This new action for Tree element can dynamically change the content of any tree node.  Both the row index and the value support properties:

Download Printable User Manual

Now the paid user can download the printable PDF user manual from the “Help” menu.

The downloaded manual has the same content with our online document:  http://www.ForeUI.com/doc/

Other Enhancements:

• Moving/resizing elements in scrollable container become easier.
• Auto complete font selector.
• Hold Shift key and start dragging, will force to enter the drag selecting mode.
• Avoid exporting CSS alpha filters in DHTML if element’s opacity is 100%.

Fixed Bugs:

• Bug_0302: Scrollable Container can not accept any element again if all embedded elements are removed or extracted.
• Bug_0303: Define “Set Global Property” action to set an in-existent property, then define that property in “Global Property” window.  The action will not update when externally rename that property.
• Bug_0304: Could not embed element into container that overlaps on a bigger container.
• Bug_0305: The property in “row” or “column” field of “Set Table Cell Value” action is not updated when the property is renamed.
• Bug_0306: Can not drag custom element from category to working area in Mac OS (V2.70+).

Hello everyone, recently we were working on the new documentation of ForeUI, and now it is online!  The new documentation has much more content than then previous document.  It includes about 200 pages and have all features introduced, and you will find the full reference for all elements, events, flow controls, actions and properties.  You could also make good use of the keyword index and full text searching tool.

We will keep improving the documentation.  If you have any comment or suggestion on it, please feel free to contact us.