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 in Uncategorized

Selecting Elements in ForeUI

Today’s topic is… selecting elements in ForeUI.  Seems I have nothing to write so I pick such an easy thing to introduce? Maybe and maybe not.  Have you noticed the “leading selected element”?  Do you know what is it for?  If your answers are “yes” for both, you can just ignore the content below 🙂

When we are creating mockups for our software or website,  we need to select elements very frequently.  Most people know that single clicking on the element can perform the selection, draging a rectangular bounds that contains multiple elements will select those elements at a time.  Did you know that we can press SHIFT key to select in “plus” mode? When you do this the cursor will be changed to arrow_plus1 and you can single click elements to add them into the selection.  Also you can press CTRL key to select in “minus” mode, the cursor will look like arrow_minus and you can single click elements that already within the selection to exclude them.

What’s more, there is a “leading selected element” concept in ForeUI. When you select several elements at a time, there will be an element that marked as “leading selected element”, which will have a dash line border with darker  color around it.  Take a look at the animation below, then you will know what I mean.  We can change the leading selected element by clicking another element within the selection.

lead_sel

What is the leading selected element for?  First of all, it allow you to edit single element when you are selecting multiple elements.  You don’t have to cancel the big selection and select a single element for editing, you can just set it as the leading selected element, then work on it in the floating tool pane.  Secondly the leading selected element can work as the “reference substance” of some actions, it will be very easy to understand if you take a look at the animations below:

lead_align1

 lead_align2

ForeUI V1.05 Released!

Hello all, today we released the V1.05 of ForeUI!   This version bring us two new features:  multiple pages support and version checking.  Four bugs are also fixed in this version.

Multiple Pages

Now we can create several pages mockup within a plot.  You can click the pages button at the bottom to launch the pages management:

page_button

After clicking this button, the pages management window will popup:

pages_dialog

We can add, duplicate, rename, move and delete the page here.  The pages can be organized with flat or hierachical structure.  The hierachical structure is very suitable for website mockups, since it looks like a site map.  This version also enclosed a new sample mockup: multipage.4ui.  It is a website mockup and contains 6 pages:

 

multipage_thumb

Update Checking

Now we can check the update from menu “About->Check Update…”.  Hope people check it frequently 🙂

Fixed Bugs

Bug_0030: The text editor may be trimmed.

Bug_0037: Floating tool pane may cover the selected elements.

Bug_0038: Image id display incorrect in floating tool pane.

Bug_0040: Elements should be aligned to the lead selection.

ForeUI is on GOTD Today

ForeUI is on Giveawayoftheday today!  That means you can download and install full-featured, never expired ForeUI from there.  The version on GAOTD is V1.00 and can not be updated, if you like this tool, you can consider buying a license OR applying for a free license, which can be used on any 1.xx version.

Ashraf also give a review of ForeUI today, which I think is fair and decent.  He listed some shortages of ForeUI, which we think are very important, we will try to solve them ASAP.  Of course he also listed some advantages of ForeUI, we are so happy to hear that :-), but we do know the criticism is more useful to us at this phase.

Most criticisms are focus on the lack of some important features, we agree that ForeUI need them, actually we have a long TODO list of ForeUI.  I’d like to expose part of our delivery planning today:

  1. V1.05 will be released next week, which contains a new feature:  multiple pages within a plot.
  2. V1.10 will provide a new feature: slide show, which allow showing and exporting pages as slides.
  3. V1.20 will provide interactive simulation feature, the simulation will base on HTML+Javascript.

We think the UI prototyping include three levels:  Rough Design -> Mockup Rendering -> Interactive Simulation.  The rough design will not contain many details, wireframes are very suitable for it.  Mockup rendering provides the visual effect that close to the final result, it is good for documentation.  Interactive simulation provides the “real” user experience,  it is a “running” prototype of the final result.  ForeUI will provide tools to cover all these three levels, so far we have wireframe UI theme for rough design, native OS style for mockup rendering.  In the future version, ForeUI will provide slide show and Ajax like demo for interactive simulation.  It is an exciting plan, isn’t it 😉

Minor Version Update: V1.02

Today we released a minor version of ForeUI: V1.02, it is a bug fixing version.  One of the bugs is reported by Henry Stevens, thank you so much Henry 🙂

The bugs fixed in this version are:

Bug_0033: List, Menu, Table and Tree change text with the copied object together.

Bug_0034: Specify an image to a button, undo the action, then button text contains “[img-1]”.

Bug_0035: Copy and paste actions may not be undo/redo in some cases.

Bug_0036: Edit text of element within a group, click empty area to stop, some error messages in log file.

Dear friends, you are welcome to report bugs or share great idea with us 🙂

Batch Changing Image Reference

Today I’d like to introduce an interesting feature in ForeUI: batch changing image reference.  Sometimes we have used an image a lot in a plot, but want to change it to another image.  How can we achieve that?  Changing the image reference one by one?  It works but very time consuming.  In this case we need to use the batch changing image reference feature in ForeUI.

Let’s expand the image dock by clicking the  button, then click the image that we want to change, a popup menu will be shown and we can find a  button on it, then we click it and choose the target file we want to change to, that’s all.  The GIF animation below shows the details:   change_img_link