Building mobile UI

Mobile UI components

Tiggzi comes with the following components:

• jQuery Mobile,
• HTML5 components such as Audio and Video, and Panel
• Google Map component

jQuery Mobile components

Tiggzi includes most of the jQuery Mobile components (see palette below). In order for use not to duplicate already excellent jQuery Mobile docs, the best place to learn about these components is to visit jQuery Mobile documentation site.

HTML5 components

Audio

Audio component is the standard HTML5 <audio> element.

Adding to a screen

1. Open Mobile palette
2. Drag and drop Audio component into the screen

Properties

• Auto Play - specifies whether to start play the audio once the screen loads
• src - specifies the location of the audio file
  • MIME type - specifies the type of the audio file
• Loop - specifies whether to continue playing from the beginning once the audio is done
• Preload - specifies whether the audio should be preloaded. Possible values are: none, metadata, auto.

The reason there are 3 src/type input fields is because different browsers support different audio formats. It’s important to understand that the audio is playing in the browser, not in Tiggzi.

Example

1. Drag and drop a Audio component into the screen
2. Set the following three src/MIME Type pairs:
   • src=http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3, type=audio/mpeg
   • src=http://www.html5rocks.com/en/tutorials/audio/quick/test.ogg, type=audio/ogg
3. Save and run the app

Video

Adding to a screen

1. Open Mobile palette
2. Drag and drop Video component into the screen

Properties

• Auto Play - specifies whether to start play the video once the screen loads
• src - specifies the location of the video file
  • MIME type - specifies the type of the video file
• Show Controls - specifies weather to show play/stop/pause controls (these will be different based on the browser)
• Loop - specifies whether to continue playing from the beginning once the video is done
• Poster - specifies the image to load when the video just loads (but not playing yet). Also used if the video is not available.
• Preload - specifies whether the video should be preloaded. Possible values are: none, meta, auto.

The reason there are 3 src/type input fields is because different browsers support different video formats. You can learn more about what format is supported by what browser here.

Example

1. Drag and drop a video component into the screen
2. Set the following three src/MIME Type pairs:
   • src=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4, type=video/mp4
   • src=http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm, type=video/webm
   • src=http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv, type=video/ogg
3. Click Show Controls
4. For Poster, enter: http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg

Panel

The Panel component allows to insert any custom HTML code or <div>, or <span> tags.

Adding to a screen

1. Open Mobile palette
2. Drag and drop Panel component into the screen

Properties

• Type - can be set to either div, span or html.
• When set to html, Edit HTML button becomes enabled where any custom HTML, JavaScript or CSS code can be entered.

Google Map component

Tiggzi also includes a Google Map component

Component properties

Components available in Tiggzi are the standard jQuery Mobile components plus HTML5 components such as Audio/Video, Panel (custom code) and Google Map. Every component can be configured via its properties. To see what properties are available, simply select the component and look in Properties view:

For some UI components, not all available properties are available in Properties view. For such cases, Tiggzi comes with a More Properties button:

Via More Properties, you can add any attributes supported by the selected component. In fact, you are not limited to just setting properties which are not exposed in Properties view, you can set any properties. For example, adding these two properties:

will result in mini style button with a star icon:

Creating new pages

To create a new page, Project View > Create New > Page

Selecting components on the page

To select a component on a page you can simply click it. To make it even simpler and faster to select the right component, use the breadcrumbs above the phone frame to select the component:

Deleting components on a page

To delete the component, select the component to delete. A small delete icon will appear in the upper right corner:

Creating flexible layout

When you add components to a page, the components will be automatically added to the top of the page and will take out the entire phone frame width:

 

To create a more flexible layout, the Grid component should be used:

When the grid component is added to a page, it has two rows and two columns by default. However, you can easily change the number of rows and columns in Properties:

To resize the grid, select it and then use the mouse to resize (use breadcrumbs to select the grid):

By adding a third row, we can now create a layout that looks like this:

Another component that can be used for layout is Collapsible Set:

Mobile page design - How-to

Showing page header/footer

To show (or hide) the page header or footer, select the page (use breadcrumbs - select the first element). Then in Properties, you will see Show Header/Show Footer properties

Creating tabbed pages

To create a tabbed layout, drag and drop NavBar component. Mark the first tab as active. The NavBar component may only go inside the header (or footer) sections on the page.

To define the second tab, simply create a new page and add the NavBar component to it, but now making the second tab as active:

To navigate between the pages (tabs), add Click event to each tab item, and then use Navigate to Page action.

Centering a component (for device rotation)

How to center a component

Setting custom background or splash screen

How to set a custom background or a splash screen

Embedding a YouTube video

YouTube doesn’t give you a URL that can be played via HTML5 video element. Thus the only option is to embed the video. Here is one example:

Run the following code on page load:

$('<iframe />', {
    name: 'myFrame',
    id:   'myFrame',
    class: 'youtube-player" type="text/html',
    width: '300',
    height: '250',
    src: 'http://www.youtube.com/embed/TIA6KNfpRqs'
}).appendTo('body');

Setting a background image

Setting a background image (can also be used as splash screen)

Navigating to a page after x-seconds

This is useful if you want to create a splash-like first page and then navigate to the first page. Create a page and place an image on it. Add a page load event and run this JavaScript:

setTimeout("Tiggzi.navigateTo('page_name',{})" , 1000);

page_name would be the page name to which you navigate. 1000 means the navigation will happen after 1 second.

Using a custom image for Ajax status

Create a CSS file with the following code:

#ajaxBusy {
 display:none;
 position: fixed;
 z-index:999999;
 height:99%;
 width:99%;
 background: url("image_url") no-repeat 50% 50%;
 }
#ajaxBusy p {
 display: none !important;
}