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 /

All posts by vivi

September 16, 2012

How to Run ForeUI in Mac OS X 10.8 (Mountain Lion)

by
1

We recently received some reports about not able to run ForeUI in Mac OS X 10.8 (Mountain Lion).  When double clicking ForeUI icon, system pop up a message like this:

ForeUI is blocked by Gatekeeper

After checking, we realize the downloaded file was correct, and the reason that ForeUI can not run is the lack of code signing (with Apple developer certificate).  It is a new feature of Mac OS X 10.8 (Mountain Lion), which is called “Gatekeeper”.  You can find more details about Gatekeeper from Apple’s web site.  In short, Gatekeeper just like an application firewall, and it will reject some application according to its security setting.

We believe the Gatekeeper will bring more security to user’s Mac, but it does bring us some trouble, since we don’t have the Apple developer certificate yet.  Before we could release a code signed version of ForeUI, please use the following workaround to run ForeUI: (temporarily) allow applications downloaded from “Anywhere” before running ForeUI.  The configuration can be made in the “Security & Privacy” panel, as shown below:

ForeUI | Uncategorized
| | | |
August 7, 2012

ForeUI V3.0 RC Released!

by
2

ForeUI 3.0 RC version is just released.  As the last version before V3.0 official release, this version tend to be stable and offer much better experience.  We don’t plan to add new feature in the official release of 3.0, instead we will include the completed document and have some bugs fixed.

We have made so many improvements in this version that I could not introduce them one by one.  A full list of new features, enhancements and bug fixings can be found here.  In this blog post, I would like to show you the most interesting part of this update.

ForeUI Store

From this version, ForeUI integrates with its new online resource store.  You can download new element, library or plot file from store window, or from the store web site.  You will be able to download new UI theme and ForeUI plugins from the same site in the future.

Clicking the category buttons on top can filter the items to be listed.  You can also search the item by tag via the search box on top right corner.  If you click the “Preview” button, the HTML 5 simulation of the item will be launched in your web browser, and you can see how it works.  Clicking on the “Download” button will download the item and deploy it (if needed).

The store is just online and there is not so much resource inside yet.  We will frequently add new resources into the store site.

Drag and Drop in Outline View

The outline view is significantly improved by supporting drag and drop elements directly.  This is an easy way to embed element into container, or move embedded element from one container to another.

When you drag an element and try to drop it into a container, the tool-tip will tell you if it is allowed.  So you will know what you can do and what you can’t, also you will know why.  This feature is extremely useful when you want to manage a lot of overlapped elements.

Other New Stuffs

There are many other new things in this version.  Don’t be surprised if you find something different than they used to be.  Ususally they are changed in a better way, but if you think they are not, please feel free to tell us.

If you are interested in what we exactly did in this version, please check out the update history page.

Feature | ForeUI | Update
| | |
July 6, 2012

Add Live Video into ForeUI Plot

by

Did you know that?  ForeUI already supported adding live video (YouTube, Vimeo etc.) into plot from long time ago.  Perhaps more accurately still, it is supported from the ForeUI version released on Sep 28th, 2009: V1.60!  Thanks for the iFrame element available from that version, we can embed a web page into our plot.  Embedding live video is another use case for this element.

What you need to do is to add an iFrame element into your page, adjust its size and location, then specify the correct URL for live video.  How to find out the video URL?  It depends on the video provider.  If you want to add a video from Youtube, you can find the URL by clicking the “Share” button below the video player:

A panel will show up after you click the “Share” button, clicking the “Embed” button on it will show the code to embed video, the exact URL for live video is marked with red underline:

Please copy this URL to clipboard and paste it as the source URL of iFrame element.  A ready-to-go demo is finished now:

Now run the simulation in web browser and you will see how it works:

If you want to embed video from Vimeo, the steps are quite similar, and you just need to find out the correct URL.  You can click the “Share” button on top right corner of Vimeo video:

Then you will see a popup panel that includes the embed code on top right, the video URL is marked with red underline:

You can use this URL as the source URL of iFrame, and then you can see the result in simulation:

If you want to add live video from other providers, please check if they support embedding video as iframe.  If they do, you can use the same way to embed their videos into your ForeUI plot.

 

Feature | ForeUI
| | |
July 5, 2012

Use JSONP API in ForeUI Plot

by
1

Web API, JSON and JSONP

Nowadays many web service providers offer some APIs to access their data, which significantly simplify the development of client application for these web services.  Usually the data format of the API will be XML, JSON or JSONP, which means you can request a URL on the Internet and then get a piece of XML or JSON data in the response, which contains the data you are interested in.

The difference between JSONP and JSON is that, JSONP will wrap the JSON data as a function call, while the function name is passed in from the request URL.  Calling JSONP API is usually used to workaround the “The Same Origin Policy” and get JSON data from different servers.  You can find a lot of information about these via Google.

“Get JSON Object” Action

From version 3.0, ForeUI supports a new action named “Get JSON Object”.  This new action allows the HTML simulation to get JSON object from remote server via JSONP API, and store the JSON data to an Object type property (data types are introduced in previous post).  That means ForeUI simulation can actually integrate with other web service via JSONP APIs, and we can even create some web apps with ForeUI!

When you add this action, you will be asked to provide some parameters, as shown below:

You will need to input the JSONP API here, and specify the name of property that will store the returned JSON data (as an object).  There is an optional parameter that allows you to specify the custom event to trigger, when there is any error happened.

Now I will provide a simple example to show how to use this action.

 Example: Location by IP

This is a simple, and working web app that allows you to get location information by giving the IP address.  This example demostrates the usage of the new “Get JSON Object” action and the object type property.  You will see how powerful ForeUI is 🙂

Since I could not directly query databse in ForeUI, I need to find the JSONP API to the job.  Google always help but my favorite site for searching API is this one.  There are hundreds JSONP APIs listed on the site.  Please keep in mind that JSON API is different than JSONP API, if an API supports JSON format and does not support JSONP format, we just simply not able to use it in ForeUI.

After a few minutes work, I found my desired API: Prototype GeoIP API

I created the UI of web app very quickly with ForeUI.  I set the plot size to 320×356, which can be perfectly viewed on smart mobile phone.

Than I handle the “Element Clicked” event for the “Search” button, and invoke “Get JSON Object” action with the parameters below:

In the URL field, I inserted the value of input text box as the IP address.  The returned JSON data will be stored in property named “info”.  If any error happened, the custom event “IP_Error” will be triggered.  Remarks: do not use any spaces in the custom event’s name, please use underline instead.

The web app can almost work, if you input an IP address and click “Search” button in simulation, you can see the “info” property is filled with data (from properties view on toolbar).

The data stored in “info” property is a JSON object, using a JSON viewer can show its content with better format:

After figuring out how the data is organized, I defined some actions to update the result table, and show a message when error occurs:

That’s all, I exported the plot to HTML and uploaded to our website, you can try it below (an embedded iframe in this post), or you can try it in a separated window.

Feature | ForeUI
| | | |
June 28, 2012

Introduce ForeUI's Data Types

by
1

From V3, ForeUI supports 4 types of data in global properties: number, string, array and object. When you create or edit property in the “Custom Property” view, you will see them in a drop-down list.

You can also see this list when editing the “Set Global Property” action.

Number or Evaluable Data

The property in this type can have a number value like “1”, “2.2” or “2012”, or have an evaluable value that can be evaluated as a number, such as “1+2”, “7*24”, “3-{tmp}” (while {tmp} is a number type property) etc.  So you can do arithmetic within this field actually.

String

The property in this type represents a text string.  You can insert any property within the text string, such as “Hello, {name}!” (while {name} is a string type property).  Please notice that when you input the value of string type property, you don’t need to quote the string with quote marks.  If you do need to place a quote mark in your string, please use an anti-slash () to escape it.

Array

Array type is new from V3, and you can use array type property to store a list of values.  Each member of the array can be any type of property, so defining multi-dimension array will be possible.  The format of the value will be [member1, member2, member3,…memberN].  Remarks: the array is one-based.  Say here is an array property {array}, the first member will be {array}[1].  Here are some array examples:

  • Simple Array:  [1, 2, 3]
  • Two-Dimension Array:  [[1,2,3],[4,5,6],[7,8,9]]
  • String Members:  ["Apple","Orange","Banana"]
  • Object Members:
     [{"name":"John","age":18,"mobile":"+123456789"},{"name":"Rose","age":17,"mobile":"+987654321"}] 
     Since V3.2+: [{"name":"John","age":18,"mobile":"+123456789"},{"name":"Rose","age":17,"mobile":"+987654321"}]

Object

Object type is also available from V3, and you can use object type property to store some key-value pairs.  The key must be a string, while the value could be any type of peroperty.  The format of the value will be {key1:value1,key2:value2,key3:value3…}.  Please pay attention to the ant-slash before the brace, that means to escape the brace, otherwise the value will be regarded as the expression of a global property (e.g. {tmp}).  Here are some object examples:

  • Simple Object:  {"name":"Mike","age":24,"mobile":"+135792468"} 
Since V3.2+: {"name":"Mike","age":24,"mobile":"+135792468"} 
  • Nested Objects:   {"user":{"name":"Tom","age":28,"mobile":"+165832234"},"info":{"lastLogin":1340906019605,"message":"Hello World"}} 
Since V3.2+: {"user":{"name":"Tom","age":28,"mobile":"+165832234"},"info":{"lastLogin":1340906019605,"message":"Hello World"}}

In order to access the value for given key within the object, you can use this:  {object}[key].  Below is an example that will show “Mike” when the page is loaded:

 

Please keep in mind that, the type of property can be changed during the simulation.  If you invoke “Set Global Property” action to set a predefined property, its data type will be overwritten.  For example: {tmp} was a number type property, now you call “Set Global Property” action on it and specify the type to “String”, then {tmp} will become a string time property after the action is executed.

That’s all for the data types.  Next time I will introduce the “Get JSON Object” action, which will make good use of the object type property.

Feature | ForeUI
| | | | |
1234567