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 /

Archive for July, 2012

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