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

All posts in Feature

May 8, 2012

ForeUI V3 Forecast 3: Toolbar in Simulation

by
2

My previous two posts (this and this) are about the new features that will be available in V3.0.  Today I will continue the forecast.  I would like to introduce another exciting feature of ForeUI V3.0: toolbar in simulation.

From V3.0, your generated DHTML simulation can have an optional toolbar, which provides the page navigation and property viewing features.  When you launch the simulation in web browser, the toolbar looks like this:

The toolbar can be docked to any side of the screen.  You can choose the dock side on the right of the toolbar.  You can also pin/unpin the toolbar, the unpinned toolbar will be hidden automatically if you don’t manipulate on it for a while.

Clicking the “<” and “>” buttons can navigate to previous or next page in your prototype, you can do so by pressing PageUp and pageDown as well (this has been supported in V2.x).  The “Goto…” button can show you all the pages in your prototype and you can choose one to switch to:

 

When you click the “Properties” button, the property view will be shown on the screen, and you can watch all properties (including system properties and custom properties) in your prototype:

The properties in bold font is the system properties and those with normal font is the custom properties.  This property view is dynamic, the values in the view will be updated as soon as the property value is changed.

This is the toolbar you will see in the V3.0, and it is just a beginning, we will keep adding new features into the toolbar in the subsequent versions.

 

Feature | ForeUI
| | |
May 2, 2012

ForeUI V3 Forecast 2: Gradient Fill

by
1

Last week I wrote a post to forecast the Reference element in V3.0.  Today I will introduce another important feature of coming new version:  gradient fill.  In ForeUI V3.0, gradient fill will be supported by all elements, in both editing and simulation.

When you try to change the background color for element, you will notice there is a new tab named “Linear Gradient”, which allows you to fill the background with gradient color.

In the “Linear Gradient” tab, you can add new color by clicking on the left area, or drag existed color out of the area to remove it.  Dragging the end points of the line can adjust the direction of the gradient fill.

The most interesting part is that you can save your gradient color for future usage: just input the name of the gradient color and click the save button.  The drop-down list on top allows you to load predefined gradient color.  If you don’t want to keep the gradient color, just click the button with trash icon to remove it.

The gradient color can be applied on any element.  Button, rectangle, placeholder, triangle, ellipse, polygon…  The gradient fill effect will be kept when you run the simulation, which is really cool.

That is gradient fill, wish you would like it 🙂

Feature | ForeUI
April 24, 2012

ForeUI V3 Forecast 1: Reference Element

by
3

First of all we have to say sorry to whom are waiting for V3.0.  We are still working hard as we were, the new version is delayed because of some technical problems and force majeure.  We appreciate your patience and understanding.  Today the new version is not available yet, but we are entering the last phase before the delivery, the 3.0 beta should be delivered in May.  I will write some blog posts to introduce the new, exciting features in coming V3.0.

PS: recently we were frequently asked if newly bought license can be used in 3.0, our answers are “Yes”, since the paid user will have one year free upgrade period, including major updates.  So if you buy ForeUI license now, your license key can be used in V3.0 when it is released.

There are many new features in 3.0, today we will introduce one of them: Reference Element.  This is a actually killer feature, it is not just cool, it is a real time saver for creating big prototype project.  The new element, just as its name implies, can “point to” another element and emulate its appearance and behavior, i.e. work as a reference of that element.

When you drag the Reference element from element list into the editing area, its default look may like this:

Default look for Reference Element

The big question marks in the center implies that it does not point to any element yet, you can specify the target element from the tool pane:

Sepcify Reference Target

After selecting the target element, it will simulate the original (target) element’s look.  For example, you select a TextBox as the original element, then you will see:

They look totally the same.  But wait, it is not a static clone, when you modify the content of the original element, the reference element will change its content accordingly.  What’s more, you can move or resize the reference element as you need, without affecting the original element!

As you can see, the reference element can override the location, size and visibility properties of the original element.  This will be extremely useful when you need to create a set of elements with same content but with different layout parameters.

Reference element is not just a rendering trick, it actually emulate the behavior of the original element in the simulation, and keep synchronizing their state on the fly.  Please take a look at the example below:

Although the reference element can be interactive, you don’t need to define any event handler for it, since it will trigger event on the original element.  For example, when you click a reference button, it will trigger the “Element Clicked” event on the original button, thus the corresponding event handler will be invoked.

Reference element is also a good idea to share element between multiple pages.  Comparing with using master page, Reference element is much more flexible and will be suitable for more actual cases.  The Reference element can partially cover the requirements of “multi master page”, which are discussed here.

That’s Reference element, hope you will like it 🙂

 

 

Feature | ForeUI
June 7, 2011

ForeUI V2.80: Many Useful Updates

by

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+).
Feature | ForeUI | Update
| | | |
May 8, 2011

ForeUI V2.77: French and Spanish Language Support

by

Dear friends, we just released ForeUI V2.77 this morning.  This version includes the support for two more languages, two enhancements on usability, and two bugs fixings.

French and Spanish Support

In the new version you can select French or Spanish language in the settings window.

The French translation is made by Monaury Cecile, and the Spanish translation is made by Ernesto E. Bravo Cardoso.  They are all volunteer contributors and we really appreciate their great work.  Thank you Monaury Cecile!  Thank you Ernesto E. Bravo Cardoso!

Hold Control Key to Drag

Many Mac users are using one-key magic mouse, so they could not RIGHT drag element into container.  We accept Eric’s suggestion and make this enhancement: you can press the Control key on keyboard to simulate a right drag.

Keep Element’s Position when Newly Embedded

In previous versions, if you embed an element into an empty container, no matter at what position you embed it, the embedded element will be moved to the left-top cornor.  Some may say this annoying behavior should be a bug.  Anyway it is improved (or fixed) now: the newly embedded element will stay where it was.

Fixed Bugs:

  • Bug_0300: Table’s initial selection offsets one row in simulation (since V2.72).
  • Bug_0301: Image dock’s scrollable area does not match its content.  Thank Mark’s report for this problem.
Feature | ForeUI | Update
| |
1…678910…23