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 tagged table

ForeUI V2.72: New Events, Actions and Properties


Hello everyone, today we just released ForeUI V2.72!  This version provides some new events, actions and properties.

New Actions and Properties for Table

We have implemented 3 new actions to append, insert or delete data row for the Table element, as shown below:

Also there are two new properties available for Table  element:

What’s more, we made an enhancement on the “Table Cell Values” property, thus you can use variable (property) as the row or column index for the array.  With all these new facilities, we could use Table element as data reposition, to read/write real data in the prototype.  Thank Alan Finger’s suggestions on these.

Here is an example to make use of these facilities, you can also review it here:

New Event and Properties for Accordion

We added a new event named “Section Expanded/Collapsed” for the Accordion element.  This event will be triggered when you clicked on the header of section and expand/collapse the section.  Thank Tim’s suggestion on this.

What’s more, 2 new properties are available for Accordion.  They are “Section Count” and “Section Expanded Flags”.

Using these newly added event and properties, you could find out which section is expanded or collapsed.  The animation below is an example and you can also review it here:

“Note” Property for All Elements

Now with this new property, you can access the note for element during the simulation.  This property exists in all elements.  Thank Tim’s suggestion.

“Loaded as Master Page” Event for Pages

Any page can be used as master page.  However the “Page Loaded” event will not be triggered if the page is just loaded as master page.  So we add the “Load as Master Page” event for page.  It will be triggered when the page is loaded as master page.   Thank Tim’s suggestion.

Fixed Bugs:

  • Bug_0295: Reduce the height of a table row and make it smaller than the default value, the change could not take effect in simulation.
  • Bug_0296: When Table has no selected row, its “selectedIndex” property value should be 0 instead of -1 in simulation.

ForeUI V2.70: Accordion Element

Hello everyone, ForeUI V2.70 is now available!  This update brings you a brand new Accordion element and some other enhancements.

Accordion Element

This element is requested by Jeffrey Werner about 1 year ago, Audrey Taylor and Tim have the same suggestion recently.  We are so glad that we finally have this done.

The accordion element is actually a set of partly overlapped panels (sections), each panel has a header on top.  Clicking on the header of panel will expand/collapse the panel thus the content in panel will be show/hide as well.  It is a container element, so you can drag element into it with right mouse button hold.

There are many options for accordion element in the floating tool pane.  The “Multiple Expansions” checkbox can control whether the element support multiple expanded section.  You can specify the border color and the header background color, set the icons for collapsed/expanded sections etc.  Here is a tips: if you like to use different icons on different sections, try dragging icon from image dock and drop to the header for sepcific section.

Here is an example for accordion element usage.  There are two accordion elements in the plot.  The accordion on the left supports multiple expansions, and it is simulating an expandable menu; The accordion on the right only allow single expansion, and it is simulating a set of sliding contact groups.  This example is uploaded to the community site and can be reviewed here.

Enhanced “Set Table Cell Value” Action

From now on you could use properties (variables) in the row/column indices for “Set Table Cell Value” action.   Thus you can use two text input boxes in prototype and accept the row and column indices input by user in the simulation.

Fixed Bugs:

  • Bug_0286: For button with icon only, turn on the ‘underline’ decoration, then error happens and current action will halt.
  • Bug_0287: If table’s actual row height is different than default value, the alternate color filling is incorrect in Hand Drawing, Windows XP and Windows 7 themes.
  • Bug_0288: Hide the default icons for tree element, the icons are still visible in simulation.
  • Bug_0289: Lock the position of the element and unselect it, the element become invisible if you drag it.
  • Bug_0290: Can not directly click specific regions of element to change selection if zoom ratio is not 100%. (Tree, Table, Tabs, VerticalTabs and MultilevelMenu)
  • Bug_0291: Hold SHIFT to resize element with aspect locked, the aspect is not accurate when any snap action is performed.
  • Bug_0292: Select user-defined category in ‘Manage Category’ window, all buttons hover on element in the category are not clickable until restarting ForeUI.
  • Bug_0293: Add custom element with duplicated name, should update its reference in the list instead of adding new reference.
  • Bug_0294: In image dock, if the image ids are not sequential, dragging image to plot may not work correctly.

ForeUI V2.22: Nesting Mechanism and Enhanced Table


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:

Year 2009 Last Update – V1.90: Enhanced Table Element


HAPPY NEW YEAR!  Year 2009 is such an exciting year, we launched ForeUI product and achieved unbelievable success.  Here I must on behalf of our company thank you again for your generous help, it is your ideas and creativity that push ForeUI become better and better.  Can you imagine what will we do today?  Yes we just released ForeUI V1.90!  This version will be our last update in year 2009, and it will also be the last one of the V1.xx serial.  As we’ve mentioned in our newsletter, ForeUI 2.0 is coming soon!  No doubt the 2.0 will be very exciting but today’s leading role is still V1.90 🙂

V1.90 is a big update actually; it contains many things.  Now let me show you the details.

Enhanced Table Element

Table Scrolling

In previous versions the table element is just a static image during the simulation, but now things have been changed.  Table element will be converted to real HTML table and support scrolling (if you enabled it).

The animation below shows how the scrollbar works in the simulation:

Table Cell Alignment

The table cell alignment can be configured independently, with the “<“, “=” and “>” prefix for the text.  The text alignment of the whole table will be the default alignment for each cell.  We can use “<“, “=” or “>” at the beginning of cell text to specify the alignment for the cell.

Set Cell Value Action

The enhanced table element supports the “Set Cell Value” action, this allow you to change the table cell value dynamically.

Input Action Target Element Id

This feature is requested by Ulrich, it can save your time to find element in a big plot.  Thanks for the good idea Ulrich 🙂   Now you can input the target element id for the action.  We also provide an auto-complete assistent when you type the id, it will show all candidates in a popup list and you can pick one with mouse or keyboard.

Post Commands for DHTML Export

This feature is requested by Tim, we find it very useful when you want to do some successor task after the exporting, thanks Tim for the idea!  Now you can input some commands in the “Export” tab of settings window, they will be invoked in turn after the DHTML is generated.  Here is an example, we will run the simulation in FireFox, Opera and Safari when the DHTML is generated.

“Set Selected Index” Action

In order to provide more flexibility for behavior definition, we implemented a new “Set Selected Index” action.  This action is supported by  Table, List, Tree, Tabs and VerticalTabs elements.  So you can change the selection of these elements in the simulation.

Other Enhancements

  • Avoid selecting header of table element in edit mode.
  • Press Backspace to delete element for non-Mac system.

Fixed Bugs

  • Bug_0120: Main window may be hidden when click the action button on page management window.
  • Bug_0122: Calendar element is not displayed correctly in FireFox.
  • Bug_0123: Tabs/VertcialTabs/Tree/List/Table elements should invoke the handler for “Selection Changed” event when default selection is changed.
  • Bug_0124: Sometimes Page Up/Down can not switch page in simulation after clicking some element.
  • Bug_0125: List/Tree element without selected item is not painted correctly in simulation.