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 Uncategorized

June 9, 2010

iPhone App Mockup Library Updated

by
2

I’ve just submitted a new version of iPhone app mockup  library in the community site.  This version contains 28 elements for iPhone app wireframing.

Title bar, search bar, slider, progress bar, tabs… All these new elements are very useful for creating iPhone app mockup.  Some of them are even interactive, which means you can interact with them in the DHTML simulation.

All elements in this library are created with some basic elements in ForeUI.  You can create your own element, even the interactive element can be defined by adding a few event handlers.

Download the Library

You can download the library in ForeUI, just click the “Resource Sharing” button on bottom left corner to open the community window:

Then you can download the library by clicking the “Download ” link, as shown in figure below:

The library will be deployed automatically after the downloading, and you will find a new “iPhone_Widgets” element category on the left of ForeUI window.  Then you can use the new elements inside for iPhone app wireframing.

Also you can download the library from our community website, but you would need to deploy it by yourself, the .fcl is a ZIP file, which contains 28 .fce files inside.

Create Mockup for iPhone App

Using the new iPhone elements is quite easy, just drag the elements from the left list into the editing area.  Nothing different than using other elements.

Actually we can use these iPhone elements to create two kinds of mockups for iPhone app:

  1. iPhone mockup with “app running inside”.  The iPhone shell will be included in the mockup.  The simulation can be run on any device with web browser.
  2. App mockup without iPhone shell.  The mockup can be run in iPhone web browser to simulate a “real” running app.

The difference is whether to include the iPhone shell.  The mockup without iPhone shell allows you to run the 1 : 1 simulation on iPhone, which provides the experience that close to the real app.

Recently I’ve created an interesting mockup for a “Guess the Number” game in iPhone, you can also find it in the community window or here.  If you run its simulation on PC, you will see the simulation like this:

It’s cute since you can really play with it, although it doesn’t look like an iPhone app. But if you launch the simulation in iPhone web browser, things become much more interesting, you can really play the “app” on your iPhone!

Want to try it on your iPhone?  That’s easy, if you are browsing this page with iPhone, just click here to launch the simulation.

Something need to mention:

  • Since the mockup is running in web browser,  it seems not possible to get rid of the navigation bar on top and the status bar on bottom, but scrolling up a little bit can move the navigation bar out of screen.
  • Although the resolution of iPhone is 320 x 480, the navigation bar and status bar take about 120 pixels height, so the actual mockup size is 320 x 360.

Here I am showing an extreme example, not only the GUI but also the logic of the game is simulated in the mockup.  In actual cases, you need to make a compromise between the mockup details and the workload of prototyping.

ForeUI | Uncategorized
| | | |
June 6, 2010

ForeUI V2.30: Enhanced Resource View and New Text Editor

by

Dear friends, today we release ForeUI V2.30 as we scheduled.  This version bring us a better resource view from community site and a new text editor for TextBox editor.  Some useful enhancements and bug fixings are included.

Enhanced Resource View

In previous versions, the resource view in the community window can list only 3 resources a time, that’s far from enough.   Now we have redesigned the resource view and it can list more resources in a page.   What’s more, the new resource view provides more interesting features:

  1. Run Simulation: you can preview the plot or custom element with just a single click.  The simulation will be generated on server side and you can run the simulation in your web browser.
  2. Vote Up Resource: if you like a resource, please vote it up.  It is a new mechanism to encourage people to share their resource.
  3. Leave Comment: it exists in previous versions, but now it is better: you can leave comment without opening browser, all things can be done in ForeUI!
  4. Statistic Numbers: the number of downloads, votes and comments will be shown after the action link.
  5. Sort Resources: you can sort resource by time, downloads, votes or comments.

Also you can launch these features from web browser (visit http://www.ForeUI.net/):

New Editor for TextBox

This feature is suggested by Jeremy Kerr.  The new editor allows you to explicitly change the width of the editor (and the TextBox), the text content will be wrapped automatically.   Comparing with the old editor, this one can handle big paragraphs copy & paste much better.

If you drag the resizer of the right to change editor size, the editing TextBox will also be resized after  the editing.

Embedded Element Selection Arithmetic

Now selecting element in container (group or table) become easier.  We change the arithmetic to make sure every element can be selected even they are overlapped.  The animation is an example for embedded element selection:  The 4 text labels are overlapped and they are packed into a group, clicking the center area can select any one of them.

Other Enhancements:

  • Content editing has higher priority than member selection when double clicking member in group.
  • Allow adding batch of .fce files into “Custom Element” category a time.
  • When export DHTML to non-empty directory, explicitly ask whether to clean up before exporting. Will only clean up the “images”, “scripts” and “styles” folders with confirmation.   (as discussed in forum)

Fixed Bugs:

  • Bug_0142: Table element can not layout “incomplete” row properly in simulation. (Mentioned here and here)
  • Bug_0200: Line element with thickness > 1 will be trimmed in simulation.
  • Bug_0201: The sub menu width of Multilevel Menu is not properly calculated if default font is set to “Verdana”.   (Thank Ulrich for reporting)
  • Bug_0202: When copy and paste nodes in behavior editor, the newly pasted node is collapsed by default. (regression in V2.27, thank Hervé Séger and Ulrich for reporting)
  • Bug_0203: Text editor does not reflect the bold or italic style of the editing text element.
Hervé Séger
Feature | ForeUI | Uncategorized | Update
|
May 23, 2010

ForeUI V2.27: Multilevel Menu Element

by

Hello everyone, today’s new version will include a brand new “Multilevel Menu” element, I bet you will like it 🙂

Multilevel Menu Element

The inspiration to add this element is from Ulrich’s thread about 2 months ago.  I know he is making a lot of clickable wireframes with ForeUI.  He said creating a multilevel menu in (older version of) ForeUI was quite complex, since you have to show/hide the sub menus by yourself, and the simulated menu is not so “real” since you must click the parent menu item to expand its sub menu…  All these are solved with the new “Multilevel Menu” element!  Now creating a multilevel menu is extremely easy: just drag the element into your plot and edit its content in this format:

  • Main Menu Item 1
  • Main Menu Item 2
    • Sub Menu Item 1
    • Sub Menu Item 2
  • Main Menu Item 3

This will generate the two-levels menu automatically, the sub menu will be bound to the second item in the main menu.  What’s more, you can click the menu item to select/unselect it, or expand/collapse the sub menu, or drag an icon from image dock to a menu item…all these can happen in the editing mode!

The more interesting thing happens when you run the simulation: the multilevel menu element will work like a real menu, and the sub menu will be expanded when you move your mouse over its parent menu item.

When you choose an item from the multilevel menu, the “Selection Changed” event will be triggered, you can handle this event can check its selection identification, which will be a string like “a.b.c”.  Here is an example:

In the example above, the case “1” means user selected the first item in the level-1 menu;  Case “4.3.2” means user selected the second item in the level-3 menu, which binds to the third item in a level-2 menu, and that level-2 menu binds to the fourth item in the level-1 menu.  Please pay attention to the quote marks for each case, as the identification is not a number but a string.

Button Margin

This feature is requested by Kenneth Young via email.  In previous versions, all button elements will have a 15 pixels margin, that value kind of big if you want to make a small button.  Now we provide the option to tweak this value for button element.

Other Enhancements:

  • Do not auto expand tree nodes in the pages management window. (Requested by Hervé Séger via email)
  • When manipulating the behavior tree, only expand the nodes that are modified.

Fixed Bugs:

  • Bug_0196: Duplicate page with table that contains multiple embedded elements, some embedded elements may dispear. (Re-fixed, thank Kenneth Young for the reporting)
  • Bug_0197: Table edit: clear content for all cells and press ok, the application may hang.
  • Bug_0198: Can not change the state of TextBox with action during the simulation. (Thank Ulrich for the reporting)
Feature | ForeUI | Uncategorized | Update
| |
May 9, 2010

ForeUI V2.25: Table Editor Improvements and More

by

Hello everyone,  it is another biweekly update today.  The new V2.25 version has some improvements on new table editor, provides smarter zooming and proxy settings and  includes some bug fixings.

Table Editor Improvements

In previous version, the table editor can only insert new row or column before the current one.  Now we’ve made the improvement, you can append new row or column after the current one.  The figure below shows the details:

Also we’ve made an enhancement on table resizing:  only the columns with “auto” width will be scaled during the table resizing.  That means you can fix certain columns’ width during the resizing.  The columns with “auto” width will allocate their actual width from the remained space.  If more than one column has “auto” width, they will allocate their widths according to their content.  So you can add some space characters into table cell to increase its acutal width.

Another enhancement is to auto enlarge table cell (and table) if the table cell is not big enough to hold the newly embedded element.  This feature will be activated after you hold right key to drag an element into the table.  If you want to use this feature, please make sure to turn on the “Auto resize eement after editing its content” option in the settings window.

Smart Focusing after Zoom In/Out

In previous version, after zooming in or out, the view will scroll back to top left corner.  If you are editing something on the bottom right corner, you will have to scroll back after zooming.  Now the zooming become smarter:  it will try to restore the center region you were working at; If you have selected some element, it will try to put them in the center of the view.

Proxy Settings

This feature is requested by Kfir Dadosh.  Sometimes ForeUI needs to get data from internet (update checking, download resource etc), so the proxy settings are needed in some cases.  Now you can find the proxy options via menu “Advanced->Settings->Misc Tab”:

Other Enhancements:

  • When try to export DHTML to existed directory, clean the directory first (requested by Hervé Séger via email).
  • Add “Extract from Container” option in context menu for embedded element (requested by Ulrich).

Fixed Bugs:

  • Bug_0188: Table cell with comma will be splited into two cells.   (Thank Ulrich for reporting)
  • Bug_0189: “Element Clicked” event is not triggered when clicking the table row.   (Regression in V2.22, thank Kenneth Young for reporting)
  • Bug_0190: Do nothing in table editor and press ok button, the table is marked as “modified” (while actually it is not).
  • Bug_0191: Table element may contain broken reference to deleted element, which cause error in DHTML generation.
  • Bug_0192: Rename embedded element will make it dispear from the container.
  • Bug_0193: Hand drawing theme should respect the background color of button element.  (Thank John Giddings for reporting)
  • Bug_0194: The action indicator (red flag) on Table element is not clickable (regression in V2.22)
  • Bug_0195: Should not resize table after editing if “auto resizing option” is off, or preferred size is not bigger than current size.
  • Bug_0196: Duplicate page with table that contains multiple embedded elements, some embedded elements may dispear (Kenneth Young reported via email).
Feature | ForeUI | Uncategorized | Update
| |
April 26, 2010

ForeUI V2.22: Nesting Mechanism and Enhanced Table

by
3

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: http://getsatisfaction.com/easynth/topics/unofficial_release_v2_23_for_bug_fixings

Feature | ForeUI | Uncategorized | Update
| |
1…56789…21