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 ForeUI

August 15, 2010

ForeUI V2.40: Easier Container Usage & Element Path Links

by
6

Hello everyone, after one month holiday, we release V2.40 today.  This release includes some important new features and enhancements to ease the container usage, 7 bug fixings are also included.

Easier Container Usage

We have implemented some useful new features for Group container, including:

  1. Allow moving member within element group.
  2. Allow adding member to existing element group.
  3. Allow extracting member from existing element group.

Also we have made two related enhancements:

  • Auto grouping multi-selected elements before embedding into non-group container.
  • Can embed element into nested container.

All these together provide a much better experience on container usage.  You can embed multiple elements into container a time; you can embed more element into a container even it has embedded element already; you can extract any embedded element from its container; you can move or resize the embedded element…  The animation below shows the example of container usage, which has become much more flexible.

Element Path Links

If you use container a lot in your plot, sometimes you may feel difficult to select a specific container or embedded element.  From this version you can find the “Element Path Links” in the floating tool pane if you select an embedded element or a non-empty container element.  These links can help you to quickly select the container, the sibling or child element for current selected element.

Fixed Bugs:

  • Bug_0223: “Manage Categories” window (not pinned) will be hidden time by time if floating tool pane is translucent.  (Thank Mark for reporting)
  • Bug_0224: Multiple instances of custom element may have duplicated ids for embedded element.
  • Bug_0225: Element is not valid after being embedded into ScrollableContainer, until moving the container a bit.
  • Bug_0226: Copy a Tabs (or Vertical Tabs) element that contains image elements, then paste it to another plot, the images are not migrated to the plot.
  • Bug_0227: Can not click to switch tab in edit area for Tabs or Vertical Tabs if they are embedded.
  • Bug_0228: Element chooser: select an embedded element, then select a non-embedded element, the embedded element should be unselected.
  • Bug_0229: Newly created, unsaved plot can not use the display controller to show/hide elements.
Feature | ForeUI | Uncategorized | Update
July 15, 2010

ForeUI V2.37: Enhanced Tabs and Embedded Elements Listing

by
8

Dear friends, since we will start our summer holidays from next Monday, we decide to release this version today.  The most interesting feature is to allow using Tabs or Vertical Tabs element as a container, which is reqested many times.

Enhanced Tabs & Vertical Tabs

Prior to this version, we need to define quite complex logic to show / hide content according to the current selected tab.  Now we can use tabs much easier.  Just like other containers, you can press right mouse key to drag an element into the Tabs or Vertical Tabs.  Each tab can accept an element, if you want to embed multiple elements into a tab, just group them together before embedding.  What’s more, you can directly click on the tab to select it.

Also you can specify the padding of the container (supported by Tabs, Vertical Tabs and Scrollable Container):

List Embedded Elements in Selector

If you are working on a complex mockup, you may feel hard to pick an embedded element from nested containers.  From this version, the embedded elements are listed in the Element Selector window.  Thus you can pick any embedded element from the element tree:

As you can see the text color of  embeded elements are blue.  You can click on the item and select/unselect the element.  Some embedded elements are gray and not selectable, that’s because it is hidden by its container.  For example, an element in the non-current tab are hidden by the Tabs container, it will become selectable once its owner tab become the current tab of the Tabs container.

Action to Set Spinner Value

It is a small feature, a new action that can set the value of Spinner element in simulation.

Bug Fixings:

  • Bug_0221: Clicking the “ok” button to close inline editor for any element, hotkeys can not work for this plot. (Thanks Tim, Jason.Gaudette and Craig for reporting)
  • Bug_0222: Copy and paste any element, then right click the empty area of the plot, the context menu for page is now shown.  (Thanks Tim for reporting)
Feature | ForeUI | Uncategorized | Update
| |
June 20, 2010

ForeUI V2.32: Scrollable Container and More

by
7

Hi everyone, new version again 🙂  This release bring us a new “Scrollable Container” element which can make things scrollable.  Also there are more new features and enhancement, please read on.

Scrollable Container

ForeUI provides the scrollbar element from the first version, however the scrollbar is not interactive and you could not really scroll content.  From V1.90 the table element supports content scrolling, and the table can be used as a container from V2.22, thus you can use the table element as a scrollable container, however the table element does not support vertical scrolling yet.  So we implement a new scrollable container element in this version, which allow you to make any element scrollable.

Just like the table element, you can hold the right key and drag element into the scrollable container.  Please remark that only one element can be embedded into the scrollable container, if you want to make complex content scrollable, you can group the content together and then add the group into the container.

Rounded Corners for Rectangle

The rectangle element supports rounded corner from V1.45.  From this new version, you can show/hide each rounded corner of the rectangle, like this:

It seems like a small feature but it is really useful, as you can create more new shapes now:

New Example Plot: Fwitter

From this version we include a new example plot named “Fwitter”.  It is a complex, high-fidelity prototype which simulate the UI and behavior of Twitter.  You can sign up, sign in, browse, search or even “post” new content.  This example is so big that will take some time for loading if you like to preview it online.  So it is recommanded to download and run it locally, you can find it in the community site.  This example is also included in the latest install package.

Other Enhancements:

  • Holding right mouse key to drag elements can ignore the snapping system.
  • Pressing the region out side of the plot can clear the current selection.

Fixed Bugs:

  • Bug_0206: Can not select group member if the position of group is locked.
  • Bug_0207: Select an embedded element and move mouse over its border, the cursor should change to suggest resizing.
  • Bug_0208: Can not select embedded element if the zoom ratio is not 100%.
  • Bug_0209: Dragging embedded element should not move the container element.
  • Bug_0210: Vertical aligned text label element with mutirow content has wrong layout in editing mode.
  • Bug_0211: Pressing the “Auto Sizing” button for text label element, the size should be calculated according to current element width.
  • Bug_0212: Custom element with 45×45 size takes 100×100 space in the element categories.
  • Bug_0213: Set text with contains continuous spaces to Text Label in simulation, only one space will take effect.
Feature | ForeUI | Uncategorized | Update
|
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
| | | |
1…1314151617…30