FLIQ - Fast, Light, Interactive and Quick
 Introduction FLIQ is a simple toolkit that allows you to rapidly prototype UI designs from images without learning a lot of JavaScript or HTML. The basic idea is that an application is represented by a series of pages. Each page has a background image that defines most of the content of your user interface. The idea that you are creating sketches either with pencil, PowerPoint or some other drawing tool and then putting limited interaction over the top of those sketches so that you can try out your ideas. The goal is not quality implementations but quick conversion of design ideas into something someone can play with a give a response.

Once one has a set of page images, FLIQ will allow you to place various controls over the tops of these images. Each type of control has a mechanism for calling JavaScript functions to perform operations. In many prototyping cases the JavaScript will simply flip to another page.

Warning: FLIQ is only known to work with Firefox browsers. Everything except "draggable" works on Android. It is known not to work with Internet Explorer.
FLIQ page template A FLIQ application is just a web page that you put on your web site. The following is the basic template from which a FLIQ application is built. 
<!DOCTYPE html>
<html>
<head>
  <script src="http://icie.cs.byu.edu/Fliq/Fliq.js"></script>
  <script>
         your code goes here
  </script>
</head>
<body>
</body>
</html>
Copy the code from this template and put it in an HTML file. Remove the text that says "your code goes here". That is where you will add JavaScript function calls that will set up your pages and the controls on those pages.
Function summary FLIQ provides several functions to create pages and to set up controls within those pages. These functions are described in detail farther on in this document.

makePage( pageName, imageURL )

gotoPage( pageName )

clickRegion( pageName, clickId, left, top, right, bottom, clickAction )

button( pageName, buttonId, left, top, right, bottom, label, clickAction, properties )

draggable( pageName, draggableId, left, top, right, bottom, label, clickAction, properties )

textField( pageName, fieldId, left, top, right, bottom, hint, changeAction, properties )

textArea( pageName, areaId, left, top, right, bottom, hint, changeAction, properties )

getText(textId)

setText(textId, newText)

getLeft(controlId) getRight(controlId)

setLeft(controlId,newLeft) setRight(controlId, newRight)
makePage makePage( pageName, imageURL )

This will create a new page that is known to FLIQ. You need to create a page before you can add controlls to that page.

  • pageName This is the name of the page that you want to create. The name is any string that you want provided it does not contain quotation marks. For simplicity you will probably want it to be just one word such as "homePage". Single word names are easier to select in most text editor. Page names are case sensitive.
  • imageURL This is a fully qualified URL for the image that you want to use for the background of your page. This might be a photo of a sketch or a screen clipping of a PowerPoint slide. It can be anything. This image is the foundation on which you will place your other controls. If this image is available on the web you could navigate to that image and then copy the full URL from the address line of your web browser.

Examples:

makePage("homePage","http://mysite.myu.edu/myProject/homePageImage.jpg");

makePage("secondPage","anotherPage.png");

This will work if "anotherPage.png" is in the same folder as your web page.
gotoPage gotoPage( pageName )

This instructs FLIQ to present a particular page and all of its controls. The page must have previously been created using makePage() and must already have all of its controls before gotoPage(). In your main script area (where the "your code goes here" was removed) the last thing after setting up pages and their controls should be a call to gotoPage() to tell FLIQ the first page to be displayed to the user.

In simple prototypes, the only actions that controls perform is to go to other pages that display different sketches of what will happen when some item is selected.

  • pageName This is the name of the page that is to be displayed.

Example:

makePage("homePage","homePageImage.png");
gotoPage("homePage");
 clickRegion clickRegion( pageName, clickId, left, top, right, bottom, clickAction )

Click regions are the simplest form of control in FLIQ. A click region simply defines a rectangular area on a page image and associates a clickAction with that area. Whenever a user clicks or touches within that rectangular area, the clickAction is performed.

  • pageName This is the name of the page on which the click region is to be placed. This page must have been created before clickRegion is called.
  • clickId This is a text identifier for this click region. This is any name, although one word names work best. This should be unique for this region across all of your pages in this particular web page.
  • left, top, right, bottom together these define the rectangular area where the clickAction can be activated. These are defined in pixels relative to your background image with the origin in the upper left corner of your background image.
  • clickAction this is a JavaScript function that will be called without parameters whenever the user clicks in the rectangular region

Example 1:

makePage("homePage","HomePage.png");
makePage("page1","FirstPage.png");
makePage("page2", "SecondPage.png");
clickRegion("homePage","gotoPage1",10,10,100,100,
          function()
          { gotoPage('page1'); }
          );
clickRegion("homePage","gotoPage2",10,110,100,210,
          function()
          { gotoPage('page2'); }
          );

This example will jump from the home page to "page1" when the first region is touched or clicked or to "page2" when the second region is touched or clicked. This approach uses JavaScript anonymous functions for the clickActions. These work well because they can be constructed in just the place they are needed without a declaration.

 

Example 2: 
makePage("homePage","HomePage.png");
makePage("page1","FirstPage.png");
makePage("page2", "SecondPage.png");

function gotoPage1() { gotoPage("page1"); }
function gotoPage2() { gotoPage("page2"); }
clickRegion("homePage","gotoPage1",10,10,100,100, gotoPage1);

clickRegion("homePage","gotoPage2",10,110,100,210, gotoPage2);

This example does the same thing as Example 1 except that this time two functions are declared "gotoPage1()" and "gotoPage2()". The names of these functions are used for the click region's clickActions.

Note that we do not use "gotoPage1()" as the action. This would call gotoPage1 immediately. We don't want it called until a user actually clicks in the region.
 
 Region editor Click regions and all of the other controls are placed by their left,top,right, and bottom coordinates. Getting these coordinates correct for a particular background image can be a problem. For this region we created the FLIQClickableEditor. This web page will allow you to load a page image and give the page name. It will then allow you to draw rectangular areas on top of that image and will generate the JavaScript code for the various controls with the page name and rectangle bounds already filled in. The instructions are on the editor's web page. This will greatly simplify your construction of page controls.

FLIQClickableEditor
Button button( pageName, buttonId, left, top, right, bottom, label, clickAction )
button( pageName, buttonId, left, top, right, bottom, label, clickAction, properties )

A button provides a more active object to click on than a passive click region. A button can change its shape, color or other appearance when the mouse passes over it and when it is clicked. This makes it appear much more interactive. A button can also have a label.

A button is defined by three images: idleImage, rolloverImage and the activeImage. Defining these three images is how the button shows an active appearance. When there is no mouse activity on the button the idleImage is displayed. When the mouse is over the button, the rolloverImage is displayed. When the mouse button is pressed on the button then the activeImage is displayed. Each of these images is scaled to fit inside of the rectangle defined for your button.

Buttons are not only defined by the parameters of the call, but there are also some properties that control the display of buttons. Putting all of the properties as parameters would make the button() function very unwieldly.

  • pageName This is the name of the page on which the button is to be placed. This page must have been created before button is called.
  • buttonId This is the name used for the button in JavaScript. It should be unique across all of your pages.
  • left, top, right, bottom together these define the rectangular area where the clickAction can be activated. These are defined in pixels relative to your background image with the origin in the upper left corner of your background image.
  • label this is a text label that is placed over the button. The placement of the label and its various font characteristics are described in the properties below. The defaults work well for many cases. Many buttons might share the same images and each have different labels. This makes them all appear and act the same while the label distinguishes them.
  • clickAction this is a JavaScript function that will be called without parameters whenever the user releases the mouse over the button.

Button properties

As described above, much of the description of a button are in the properties. There is a global JavaScript variable called "buttonDefaults". Its declaration is shown below.

var buttonDefaults = 
	{	idleImage:"DefaultIdle.png",
		rolloverImage:"DefaultRoll.png",
		activeImage:"DefaultActive.png",
		labelLeft:"10px",
		labelTop:"5px",
		textFont:"verdana",
		textColor:"black",
		textSize:"medium",
		textStyle:"normal",
		textWeight:"normal"
	};

One way to set properties for buttons is to change the values in "buttonDefaults". For example "buttonDefaults.textColor=red;" would change the color of the label to red. It would be common to change the idleImage, rolloverImage and activeImage to your own images to style buttons in your unique way. When button() is called it uses the values in "buttonDefaults" to set up the button. You can then change the defaults before the next button() call.

A common thing to do is to set all of your style information into buttonDefaults and then repeatedly call button() at different locations with different labels and clickActions. This would give you a uniform styling throughout.

Another way to set button properties is to provide your own properties object and pass it to button() as the last parameter. A properties object is declared exactly like you see for buttonDefaults. Suppose you have two styles for buttons: a normalButton, and a hotButton. These can be defined in two different variables and then when a button is created you pass the correct styling for that button. When you provide your own properties you don't need to define all of them. The button() function will use the buttonDefaults values for any properties that you don't define.

  • idleImage This is the URL for the image that defines your button's look when there is no mouse activity. If this image is in the same folder as your web page, you can just give its name. Otherwise, a fully defined URL is recommended.
  • rolloverImage This is the URL for the image that defines your button's look when the mouse hovers over your button.
  • activeImage This is the URL for the image that defines your button's look when the mouse is pressed over your button.
  • labelLeft This is the distance in pixels from the left edge of your button to the left edge of the label. When button images have various sizes the placement of the label becomes important. Adjusting this property will make your label fit better with your button images.
  • labelTop This is the distance in pixels from the top edge of your button to the top of the label text.
  • textFont This is a font specification for the family of font to be used. It uses the standard HTML font specifications.
  • textColor This specifies the color of the button's label. It uses the standard HTML color specifications. Colors can be specified as hex color values or as color names.
  • textSize This specifies the size of the text label. This can be specified as a number of pixels (10px, 20px, etc) or with a relative size name .
  • textStyle This controls the italic or oblique stylings of the label. This value is defined by HTML font style value.
  • textStyle This controls the boldness of the label. These values are defined by HTML font weight values.

draggable draggable( pageName, draggableId, left, top, right, bottom, label, dropAction )
draggable( pageName, draggableId, left, top, right, bottom, label, dropAction, dragAction, properties )

The draggable control behaves very much like a button and uses all of the same properties. The big different is that the user can drag this button around the screen. This can be used to simulate a variety of interactive techniques to convey a feel of the user interface.

  • dragAction(id, mx, my) If this parameter is present (null is acceptable), it should be a function that will be called every time the draggable object is moved. The id parameter is the draggableId used when the control was created. The mx and my parameters are the mouse coordinates in pixels. These are relative to the page image. The dropAction is called on mouseup as with button.

Examples:

	draggable("myPage","drag",10,10,100,40,"drag me", function() { alert("dragged"); }
This example will create a button-like object called "drag" and will allow the user to drag it anywhere on the page. When the mouse goes up, the messages "dragged" will pop up as an alert. 
    draggable("myPage","slider",10,10,40,40,"",
        function() 
        {    sliderStopped(getTop("slider")); 
        },
        function(id,mx,my)
        {   setLeft("slider",10); // prevents the slider from moving horizontally
            if (getTop("slider")<10)
                setTop("slider",10); // prevents the slider from moving above 10
            if (getTop("slider")>300)
                setTop("slider",300); // prevents the slider from moving below 300
        },
        { idleImage:"sliderIdle.jpg", rolloverImage:"sliderRoll.jpg", activeImage:"sliderActive.jpg" }
        );
This example is more complex. When the draggable is dropped the function sliderStopped will be called. It is assumed that you have defined sliderStopped somewhere else in your javaScript code. Every time the object is moved the dragAction is called. In this example the dragAction function is using the location control functions to keep the slider on the same axis and withing bounds. This would be useful when using a draggable to simulate some kind of slider.
textField textField( pageName, fieldId, left, top, right, bottom, hint, changeAction )
textField( pageName, fieldId, left, top, right, bottom, hint, changeAction, properties )

A textField control allows users to type a single line of text. This is useful for various type-in boxes or other forms kinds of interactions. The labels for your forms go in the page's background image, but this control allows you to perform actual interaction with the text.

  • pageName This is the name of the page on which the text field is to be placed. This page must have been created before textField is called.
  • fieldId This is the name used for the text field in JavaScript. It should be unique across all of your pages.
  • left, top, right, bottom together these define the rectangular area where the text field will be located. These are defined in pixels relative to your background image with the origin in the upper left corner of your background image.
  • hint this is a piece of text that will initially be placed in the field to tell users what should go here.
  • changeAction this is a JavaScript function that will be called with a single parameter whenever the text in the field is changed. The parameter that is passed is the string contents of the field. In working with the text contents the JavaScript function parseInt() and parseFloat() can be useful to convert strings into numbers. JavaScript automatically converts numbers to strings.

The text field uses slightly different properties from button and draggable. The defaults for thes properties are defined in the textDefaults variable and are declared as follows:

var textDefaults = 
	{	
		textFont:"verdana",
		textColor:"black",
		textSize:"medium",
		textStyle:"normal",
		textWeight:"normal"
	};

As with buttons and draggables these properties can be set before the call to textField(). These properties can also be declared in variables and supplied in the properties parameter.

  • textFont This is a font specification for the family of font to be used. It uses the standard HTML font specifications.
  • textColor This specifies the color of the field's text. It uses the standard HTML color specifications. Colors can be specified as hex color values or as color names.
  • textSize This specifies the size of the text in the field. This can be specified as a number of pixels (10px, 20px, etc) or with a relative size name .
  • textStyle This controls the italic or oblique stylings of the text in the field. This value is defined by HTML font style value.
  • textStyle This controls the boldness of the text in the field. These values are defined by HTML font weight values.

There are two helper functions that can provide access to text field contents from outside of the field's change action. For example a page might provide two number fields and a destination field. When a button is pressed the button will get a number from each of the two number fields, convert them to floats using parseFloat(), add them together and then put them into the destination field. The two helper functions are:

  • getText(textId) This will use the identifier of the text box to get the value out of that text box.
  • setText(textId, newText) This will set the contents of the text box specified by textId to be newText.
textArea textArea( pageName, areaId, left, top, right, bottom, hint, changeAction )
textArea( pageName, areaId, left, top, right, bottom, hint, changeAction, properties )

This functions exactly like textField() except that it allows multiple lines of text. This is for bigger comment and other large content text boxes. This automatically handles word wrapping and scrolling to handle any amount of text. The setText and getText functions operate on textAreas as well as textFields.
Control Location

getLeft(controlId) - This will return the left edge of the control with the specified id. This is in pixels.

getTop(controlId) - This will return the top edge of the control with the specified id. This is in pixels.

setLeft(controlId, newLeft) - This will change the left edge of the control with the specified id. newLeft is in pixels. The width of the control is unchanged.

setTop(controlId, newTop) - This will change the top edge of the control with the specified id. newTopis in pixels. The height of the control is unchanged.