HTML5 Developer's Guide

[Pages:68]QNX? SDK for Apps and Media 1.0

QNX? SDK for Apps and Media 1.0

HTML5 Developer's Guide

?2012?2014, QNX Software Systems Limited, a subsidiary of BlackBerry Limited. All rights reserved.

QNX Software Systems Limited 1001 Farrar Road Ottawa, Ontario K2K 0B3 Canada

Voice: +1 613 591-0931 Fax: +1 613 591-3579 Email: info@ Web:

QNX, QNX CAR, Momentics, Neutrino, and Aviage are trademarks of BlackBerry Limited, which are registered and/or used in certain jurisdictions, and used under license by QNX Software Systems Limited. All other trademarks belong to their respective owners.

Electronic edition published: Tuesday, August 5, 2014

HTML5 Developer's Guide

Table of Contents

About This Guide .......................................................................................................................5 Typographical conventions .................................................................................................6 Technical support .............................................................................................................8

Chapter 1: SDK Overview ............................................................................................................9

Chapter 2: Browser Engine ........................................................................................................11 CSS3 support .................................................................................................................14 HTML5 elements ............................................................................................................15 HTML5 offline web applications .......................................................................................16 Browser API support .......................................................................................................17

Chapter 3: Web Sandbox Model .................................................................................................19

Chapter 4: Developing HTML5 Apps ..........................................................................................21 The HTML5 development environment ..............................................................................22 Creating an HTML5 app ..................................................................................................24

Chapter 5: Creating Your Own Cordova Plugin .............................................................................25 The cordova.exec() function .............................................................................................27 Example: Using the PPS interface ....................................................................................28

Chapter 6: Enhancing Performance ............................................................................................33

Chapter 7: WebLauncher's JavaScript APIs .................................................................................35 WebLauncher application APIs .........................................................................................36 WebLauncher webinspector APIs ......................................................................................37 WebLauncher webview APIs .............................................................................................38

Chapter 8: Debugging Web Apps ...............................................................................................47 Enabling Web Inspector ...................................................................................................48 Launching Web Inspector ................................................................................................49 Debugging and profiling using Web Inspector ....................................................................50 Optimizing layout and style ..............................................................................................51 Inspect and modify element styles ..........................................................................52 Inspect and modify the DOM ..................................................................................52 Modify the box model for an element .......................................................................53 Analyzing page resources .................................................................................................54

Table of Contents

View resource content ............................................................................................55 View resource network information ..........................................................................55 Analyzing network usage ..................................................................................................56 Apply a filter to display a specific resource type .......................................................57 Change which time measure is displayed .................................................................57 Reorder the list of resources ...................................................................................57 Debugging scripts ...........................................................................................................58 Set and use breakpoints .........................................................................................58 Pause script execution ...........................................................................................59 Pause script execution on exceptions ......................................................................59 Analyzing loading, script execution, and rendering times ....................................................60 Record browser engine activity ................................................................................61 Constrain the display to a specific time span ............................................................61 Filter which events are displayed ............................................................................61 Analyzing memory usage and processing demands .............................................................62 Profile the memory usage of your scripts ..................................................................62 Profile the performance of your CSS selectors ..........................................................63 Auditing your webpage ....................................................................................................65

About This Guide

This guide explains how to develop optimal user interfaces for applications created with the QNX SDK for Apps and Media.

This table may help you find what you need in this guide:

To find out about:

Go to:

The QNX SDK for HTML5 and where to SDK Overview (p. 9) download it

The WebKit-based browser engine

Browser Engine (p. 11)

HTML5 elements (audio, video, etc.) you HTML5 elements (p. 15) can use in your apps

Using "sandboxing" so that applications Web Sandbox Model (p. 19) can run in complete isolation from each other

The process for creating an HTML5 app Developing HTML5 Apps (p. 21)

The HTML5 development environment The HTML5 development environment (p.

and tools

22)

Creating a basic application

Creating an HTML5 app (p. 24)

Creating plugins to extend your app's functionality

Creating Your Own Cordova Plugin (p. 25)

Best practices for optimal performance Enhancing Performance (p. 33)

Weblauncher APIs (webview.create, WebLauncher's JavaScript APIs (p. 35) webview.status, etc.)

Using Web Inspector to debug your apps Debugging Web Apps (p. 50)

? 2014, QNX Software Systems Limited

5

About This Guide

Typographical conventions

Throughout this manual, we use certain typographical conventions to distinguish technical terms. In general, the conventions we use conform to those found in IEEE POSIX publications.

The following table summarizes our conventions:

Reference Code examples Command options Commands Constants Data types Environment variables File and pathnames Function names Keyboard chords Keyboard input Keyboard keys Program output Variable names Parameters User-interface components Window title

Example if( stream == NULL) -lR make NULL unsigned short PATH /dev/null exit() Ctrl?Alt?Delete Username Enter login: stdin parm1 Navigator Options

We use an arrow in directions for accessing menu items, like this: You'll find the Other... menu item under Perspective Show View. We use notes, cautions, and warnings to highlight important messages:

Notes point out something important or useful.

Cautions tell you about commands or procedures that may have unwanted or undesirable side effects.

6

? 2014, QNX Software Systems Limited

Typographical conventions

Warnings tell you about commands or procedures that could be dangerous to your files, your hardware, or even yourself.

Note to Windows users In our documentation, we typically use a forward slash (/) as a delimiter in pathnames, including those pointing to Windows files. We also generally follow POSIX/UNIX filesystem conventions.

? 2014, QNX Software Systems Limited

7

About This Guide

Technical support

Technical assistance is available for all supported products.

To obtain technical support for any QNX product, visit the Support area on our website (). You'll find a wide range of support options, including community forums.

To obtain technical support for this product, visit the BlackBerry Support Forum.

8

? 2014, QNX Software Systems Limited

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download