Max Katz heads Developer Relations for Appery.io, a cloud-based mobile app platform. He loves trying out new and cool REST APIs in mobile apps. Max is the author of two books “Practical RichFaces” (Apress 2008, 2011), and is a frequent speaker at developer conferences. You can find out what Max is up to on his blog: mkblog.exadel.com and Twitter: @maxkatz. Max is a DZone MVB and is not an employee of DZone and has posted 84 posts at DZone. You can read more from them at their website. View Full User Profile

Tiggr interactive HTML prototypes upgrades to use jQuery Mobile version 1.0 Alpha 3.

03.07.2011
| 6934 views |
  • submit to reddit

The state of Mobile Web development today is probably what was traditional Web back in 1996. Many companies is racing to create mobile presence, be it in the form of a native applications or mobile Web applications. To set the native vs Web debate a side for now, there is a tool to help you prototype and test your mobile Web applications. You can even use the resulting HTML as a starting point for the application. The prototyping tool is Tiggr. With Tiggr, you can create, share and preview interactive Web and mobile HTML prototypes in a browser.

Not to reinvent the wheel, and build yet another set of mobile components, the components in Tiggr are based on jQuery Mobile components. Recently Tiggr was upgraded to use jQuery Mobile version 1, alpha 3 (starting with Tiggr version 1.2.6). This is screen shot of jQuery Mobile palette (divided into two images):

When you create a new project, to start creating a mobile prototype, just switch the Screen Type to Mobile:

What’s really cool is that once you created the prototype, you can view it and test it in a mobile browser (regular browser also works of course). The prototype is interactive, you can click on controls, open menus and navigate between pages. Here is one mobile prototype I created:

http://gotiggr.com/preview/5673/

Get your smartphone and enter the above URL (or just email it to yourself). Try it, it’s a (fully) working mobile Web prototype. From here, you can share the URL with other people (make sure you set sharing option to all in Web Preview/Share).

When you open, it will look like this:

The blue border around the prototype is the mobile screen size which you can set when creating the prototype:

If you like, you can use this prototype as a starting point for the application. How to do that? You can export the prototype to HTML (with all JavaScript and CSS). From Projects view, select Options/Export to HTML bundle. You will be prompted to download a zip file containing the entire prototype.

Let us know what you think either at http://getsatisfaction.com/gotiggr or on Twitter @gotiggr.

Published at DZone with permission of Max Katz, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)