Question

What is the purpose of the div ‘data-role’ option seen in the TriggerIO template files? Am I to assume that I can ignore this and build my app as if I would build a normal website in HTML5? Or do I need to use different tag options in order to initiate CSS selectors and such? There doesn’t seem to be much information about the real differences between your TriggerIO apps and how you would write a normal HTML5 app.

I’m creating a children’s story app whereby you can view an image and some text, and swipe for the next page). Should I be using canvas to load the images and text or is it best to use the older school img tags and other markup?

Answer 1

The example app that you get when you create a new app using the TriggerToolkit uses jQuery mobile. The data-role attributes are used by jQuery mobile:

In the body, a div with a data-role of page is the wrapper used to delineate a page, and the header bar (data-role=”header”) and content region (data-role=”content”) are added inside to create a basic page (these are both optional). These data- attributes are HTML5 attributes used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget.

From: http://jquerymobile.com/demos/1.2.0/docs/about/getting-started.html

You can delete all this and use whatever markup, stylesheets and JavaScript you would usually when making a website. I’d definitely recommend using <img> and regular text rather than doing everything in a <canvas>. My advice would be to “try it and see”, treating the development as you would a mobile website, but with assets stored locally and the ability to leverage forge APIs.