Вы находитесь на странице: 1из 213
Tizen ™
Tizen ™

Tizen Developer Conference Edition

by Jon Lansdell, Cheng Luo, and Michelle Somerville

Tizen ™ Tizen Developer Conference Edition by Jon Lansdell, Cheng Luo, and Michelle Somerville

Tizen For Dummies ® , Tizen Developer Conference Edition

Published by John Wiley & Sons, Ltd The Atrium Southern Gate Chichester West Sussex PO19 8SQ England

For details on how to create a custom For Dummies book for your business or organisation, contact CorporateDevelopment@wiley.com. For information about licensing the For Dummies brand for products or services, contact BrandedRights&Licenses@Wiley.com.

Visit our Home Page on www.customdummies.com

Copyright © 2013 by John Wiley & Sons Ltd, Chichester, West Sussex, England

All Rights Reserved. No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except under the terms of the Copyright, Designs and Patents Act 1988 or under the terms of a licence issued by the Copyright Licensing Agency Ltd, 90 Tottenham Court Road, London, W1T 4LP, UK, without the permission in writing of the Publisher. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Ltd, The Atrium, Southern Gate, Chichester, West Sussex, PO19 8SQ, England, or emailed to permreq@ wiley.com, or faxed to (44) 1243 770620.

Trademarks: Wiley, the Wiley logo, For Dummies, the Dummies Man logo, A Reference for the Rest of Us!, The Dummies Way, Dummies Daily, The Fun and Easy Way, Dummies.com and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates in the United States and other countries, and may not be used without written permission. Tizen is a trademark of the Linux Foundation. All other trademarks are the property of their respective owners. John Wiley & Sons, Inc., is not associated with any product or vendor mentioned in this book.

LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER, THE AUTHOR, AND ANYONE ELSE INVOLVED IN PREPARING THIS WORK MAKE NO REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORK IS SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL, ACCOUNTING, OR OTHER PROFESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF A COMPETENT PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE AUTHOR SHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION OR WEBSITE IS REFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFORMATION THE ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. FURTHER, READERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ.

Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books.

ISBN: 978-1-118-73606-7

Printed and bound in the United States

10

9

8

7

6

5

4

3

2

1

Contents at a Glance

Introduction Part I: Introducing Tizen 1 5 Chapter 1: Getting an Inside Look at Tizen
Introduction
Part I: Introducing Tizen
1
5
Chapter 1: Getting an Inside Look at Tizen
Chapter 2: Exploring the Tizen Architecture
7
17

Part II: Getting Practical

29

Chapter 3: Getting Started

31

Chapter 4: Piecing Together the Application Jigsaw

47

Chapter 5: Testing and Debugging

73

Chapter 6: Porting Your Web App to Tizen

91

Part III: Tizen in Detail

107

Chapter 7: Building Your UI

109

Chapter 8: Taking Advantage of Location-Based Services

121

Chapter 9: Working with Multimedia

129

Chapter 10: Using Hardware in Tizen

145

Chapter 11: Messaging

159

Chapter 12: Working with Contacts

171

Chapter 13: Getting Organized with Calendars

181

Part IV: The Part of Tens

189

Chapter 14: Ten Really Useful Resources

191

Chapter 15: Ten Reasons You Should Develop for Tizen

195

Acknowledgments

199

Table of Contents

Table of Contents Introduction 1 About This Book 1 Conventions Used in This Book 1 Who

Introduction

1

About This Book

1

Conventions Used in This Book

1

Who Should Read This Book

2

How This Book Is Organized

2

Part I: Introducing Tizen

3

Part II: Getting Practical

3

Part III: Tizen in Detail

3

Part IV: The Part of Tens

3

Icons Used in This Book

4

Where to Go from Here

4

Part I: Introducing Tizen

5

Chapter 1: Getting an Inside Look at Tizen

7

Discovering Tizen

7

Focusing on HTML5

8

Tizen’s place in the mobile world

8

Figuring Out What Makes Tizen Different

10

Tizen is based on standards

10

Tizen is open

11

Tizen is innovative

12

Tizen has industry support

12

Comparing Tizen to Other Platforms

12

Getting Familiar with the Tizen Association

13

Getting Involved

13

Submitting patches

14

Mailing list and IRC

14

Forums

15

Bug tracker

15

Chapter 2: Exploring the Tizen Architecture

17

Introducing Web Apps

18

The web runtime

19

Installer

20

Runtime core

20

Plugin core

21

Using Tizen Web APIs

21

vi Tizen For Dummies, Developer Conference Edition

Exploring the Tizen Device APIs

22

Tizen

23

Alarm

24

Application

24

Bookmark

24

Bluetooth

24

Calendar

24

CallHistory

24

Contacts

25

Content

25

DataControl

25

DataSynchronization

25

Download

25

Filesystem

25

MessagePort

26

Messaging

26

NetworkBearerSelection

26

NFC

26

Notification

26

Package

27

Power

27

Push

27

SecureElement

27

SystemInfo

27

SystemSetting

27

Time

28

Part II: Getting Practical

Chapter 3: Getting Started

29

31

Installing the IDE

32

Creating Your First Tizen Web App

34

Using a sample app

35

Using your own template

35

Importing an existing project

37

Tizen web application

37

Other web applications

38

Writing the Code

39

HTML Web Page Editor

39

HTML Preview

41

CSS Preview

41

Minifying CSS and JavaScript

42

CSS

42

JavaScript

43

Table of Contents

vii

Building Your Project

43

Running Your Project

43

Help Is on the Way

44

Help documentation

44

Sample applications

45

Chapter 4: Piecing Together the Application Jigsaw

47

Examining the Pieces

48

The Application Package

48

Localized content

49

The configuration file

50

Breaking down the config file

50

config.xml the easy way: the Configuration Editor

52

Start file

59

JavaScript

59

Style sheet

60

Application icon

60

Author signature

60

Distributor signature

61

Third-party source code or libraries

61

Adding source code or libraries to a project

62

Adding source code or libraries in index.html

62

Putting the Pieces Together

63

Example 1: A 5-minute application

63

Creating the application project

64

Editing the icon file

64

Editing the configuration document

64

Editing the start file

65

Running the application

65

Example 2: Something a bit more complicated

66

Using the Tizen APIs

68

Looking at index.html

68

Figuring out what is in main.js

70

Defining style attributes in style.css

71

Chapter 5: Testing and Debugging

73

Testing Your App

74

Running in the Simulator

74

Testing with the Emulator

75

Using the Emulator Manager to create an image

76

Launching an Emulator instance

78

Using the Connection Explorer

79

viii Tizen For Dummies, Developer Conference Edition

Running your application in the Emulator

80

Using the Event Injector

80

Testing your app on a device

82

Connecting the device

83

Running your app on the device

83

Tracking Down the Bugs

83

Debugging in the Simulator

84

Debugging in the Emulator

85

Debugging on the device

86

Debugging JavaScript

86

Using the Smart Development Bridge

88

Using SDB commands

88

Discovering the connected devices

89

Chapter 6: Porting Your Web App to Tizen

91

Everything You Wanted to Know about Web Apps (But Were Afraid to Ask)

92

Web apps on different platforms

93

Tools and frameworks

94

Standards

94

Distribution

95

Porting Problems Solved

95

Handling different package formats

96

Making your layout flexible

98

Fixing inconsistent behavior

101

Porting device specific libraries

103

Making your app more portable

104

Part III: Tizen in Detail

Chapter 7: Building Your UI

107

109

Delving into the Nuts, Bolts, and jQuery Mobile

110

Embedded custom data attributes

110

Page structure

110

Events

111

Exploring the Tizen UI Widgets

112

The UI Builder: Just Drag and Drop

113

Choosing your widgets

114

Implementing events in the UI builder

116

Adding Some Flourish to Your UI

117

Chapter 8: Taking Advantage of Location-Based Services

Table of Contents

121

ix

Finding Your Way

122

Displaying a Map

122

Finding an Address

125

Google Geocoder API

125

X Marks the Spot

126

Chapter 9: Working with Multimedia

129

Introducing the Multimedia APIs

130

Discovering Content

130

Content

131

Getting permission

132

Example: Creating a playlist

132

Capturing Images and Video

134

Using the Application Manager

134

Application Control object

134

Launching an application

135

Example: Taking a photo

136

Playing Audio and Video

138

Example: Playing local audio files

138

Example: Playing local video files

140

Multimedia Streaming

141

webkitGetUserMedia

141

Example: Streaming video from your device’s camera

142

Chapter 10: Using Hardware in Tizen

145

Introducing NFC

146

Using NFC in your Tizen Apps

147

Setting up NFC

149

Setting up the listeners

149

Reading a tag

150

Writing a tag

152

Using NFC in peer-to-peer mode

153

Detecting Device Orientation

154

Detecting Device Motion

157

Using the Vibration API

158

x Tizen For Dummies, Developer Conference Edition

Chapter 11: Messaging

159

Introducing the Messaging API

160

Message service

160

Message structure

160

Message

161

MessageBody

161

MessageAttachment

161

Message storage

162

Getting Permission

162

Getting Practical: Searching for Messages

162

Creating the page

163

Filling the message list

165

Initialisation

165

Searching for messages

165

Drawing the list

166

Searching the message list

168

Processing user input

168

Searching for messages

169

Chapter 12: Working with Contacts

171

Meeting the Key Personnel

171

Address books

172

Contacts

173

Getting Permission

174

Managing Your Contacts

174

Adding a contact

174

Retrieving a contact

176

Deleting contacts

177

Exporting a contact

178

Chapter 13: Getting Organized with Calendars

181

Introducing the Calendar API

181

CalendarManager

182

Calendar

182

CalendarItem

182

Getting Permission

183

Creating a Task

184

Retrieving Tasks

185

Setting an Alarm

187

Part IV: The Part of Tens

Table of Contents

Chapter 14: Ten Really Useful Resources

xi

189

191

JavaScript: The Definitive Guide

191

Douglas Crockford’s JavaScript Lectures

192

JavaScript: The Good Parts

192

JavaScript Patterns

192

Browser Developer Tools

192

JavaScript Libraries

193

Keeping up with HTML5

193

Smashing Magazine

194

The Linux Foundation on YouTube

194

And

You

194

Chapter 15: Ten Reasons You Should Develop for Tizen

195

Tizen Is Easy to Learn

195

Tizen Doesn’t Reinvent the Wheel

196

Tizen Supports the Latest Standards

196

Tizen Supports These Standards Very Well

196

Tizen Fills in the Gaps

196

Tizen Is Consistent

197

You Can Easily Get Help

197

You Can Give Back

197

Tizen Isn’t Just for Mobile

197

Tizen Isn’t Just for Web Developers

197

Acknowledgments

199

xii Tizen For Dummies, Developer Conference Edition

Introduction

Introduction W elcome to Tizen For Dummies . This book will be your best friend to

W elcome to Tizen For Dummies. This book will be your best friend to help you understand the technologies and story behind the Tizen platform.

If you already know about web technologies, such as HTML and JavaScript, you can use the information in these pages to give you a head start in developing Tizen apps.

About This Book

The information in this book is based on the Tizen 2.1 release. Tizen is a fast-moving, evolving project, and you may be run- ning a later version. Changes happen, bugs are fixed, behav- iors change, but the key concepts don’t. These key concepts are the heart of this book.

The Tizen SDK Help will always provide the most up-to-date reference information. Check out https://developer. tizen.org and the resources listed throughout this book to ensure that you stay up to date.

Conventions Used in This Book

When this book was printed, some code or web addresses may have needed to break across two lines of text. If that hap- pened, rest assured that we haven’t put in any extra charac- ters (such as hyphens) to indicate the break. So, when using this code or one of these web addresses, just type exactly what you see in this book, pretending as though the line break doesn’t exist.

When you’re choosing a series of menu commands, we use to indicate the different commands you’re choosing. So when you see choose FileNewTizen Web Project, you should simply click the File menu, click New from the menu that appears, and then click Tizen Web Project.

2 Tizen For Dummies, 2nd Edition

In addition, we often refer you to the Tizen website or the SDK Help file. You can open the Help file from within the Tizen IDE by choosing HelpHelp Contents. You can also find help online at the Tizen website at https://developer.tizen. org/documention.

Who Should Read This Book

When writing this book, we made a few assumptions about you, the reader. You’re either:

A software engineer with experience developing for the desktop, but no experience developing mobile apps. You’re keen to start developing mobile apps and want to know what Tizen offers.

A technical manager, evaluating the opportunities Tizen offers for your next project on mobile.

A developer with a good grasp of web technologies, such as HTML, JavaScript, and CSS, who is curious about Tizen. (Don’t worry if you’re not a web guru; we don’t expect you to be.)

A parent with small children, looking for something to read during the precious hours while the kids sleep.

If any of the preceding applies to you, or you just stumbled upon this book and found your curiosity piqued, the infor- mation presented here will give you a good idea of what the Tizen platform is and how you can start developing for it.

How This Book Is Organized

To help you find the information you need, this book is divided into four parts.

Introduction

3

Part I: Introducing Tizen

If you want to know what makes Tizen different and discover

Tizen’s place in the mobile landscape, you can find the answers in this part. We examine how Tizen compares to other platforms and explain the importance of the Tizen community.

We also give you a tour of the components of the Tizen plat- form, explain how web applications fit in and provide you with a quick summary of the Tizen Device APIs.

Part II: Getting Practical

Part II encourages you to fire up the Tizen IDE and start devel- oping apps. Think of the first three chapters of this part as

a Tizen orientation trilogy, where you discover everything

you need to know to build your first Tizen app. In addition, if you’ve built a web app for another platform and want to move

it to Tizen, we explain many of the issues you’ll encounter

when porting.

Part III: Tizen in Detail

Part III explains the Tizen Device APIs in more detail. We don’t include all the APIs or try to replace the information you can find in the Tizen SDK Help. Instead, we focus on what you need to know to build a fully featured Tizen web app.

Part IV: The Part of Tens

No For Dummies book would be complete without a part of tens. In this part, you discover ten really useful resources and ten reasons why you should develop for Tizen.

4 Tizen For Dummies, 2nd Edition

Icons Used in This Book

Throughout this book, you can see small pictures in the mar- gins. These icons have special meanings:

The Tip icon points out important information that can save you time or make a task easier.in the mar- gins. These icons have special meanings: This icon marks information you won’t want

This icon marks information you won’t want to forget.information that can save you time or make a task easier. Be careful when you see

Be careful when you see this icon!This icon marks information you won’t want to forget. This icon highlights information that is nice

This icon highlights information that is nice to know but not crucial to the discussion. Feel free to skip this information if you’re not interested in it.won’t want to forget. Be careful when you see this icon! Where to Go from Here

Where to Go from Here

The content in this book is designed to be easy to navigate. Dip in and dip out of each chapter as the mood takes you. We don’t expect you to read the book cover to cover, but if you do make it to the end before your friends do, please don’t spoil the ending.

Think of this book as your first stop on your Tizen develop- ment journey. We explain the concepts, identify gotchas, pro- vide hints, tips, and handy sample code, and draw on our own experience to help kick-start your Tizen development efforts.

If you’re an experienced web developer, you may want to focus on the chapters that explain Tizen device APIs and show you how to apply your existing knowledge of HTML and JavaScript to create Tizen web apps.

If you’re new to web development, it may feel at times as if you’re navigating uncharted waters. Think of this book as your map. You discover how Tizen web applications are cre- ated using a mixture of technologies, including W3C APIs, third-party Javascript libraries, and Tizen-specific APIs, all mixed together to create powerful apps.

Part I

Introducing Tizen

In this part

T his part is your Tizen orientation session, where we issue you with your virtual map, compass and back-

pack as you start to explore this new platform. You learn about Tizen’s place in the mobile landscape and what makes this mobile platform different from the rest. You explore the structure of a typical open source platform, see where Tizen fits in and find out how you can get involved in the Tizen community.

In Chapter 2 you learn how Tizen is organized and dis- cover how Tizen web applications look and behave like native ones. We also explore Tizen’s support for web stan- dards and introduce the Tizen device APIs which allow you to create powerful and feature-rich apps.

Chapter 1

Getting an Inside Look at Tizen

Chapter 1 Getting an Inside Look at Tizen In This Chapter ▶ Discovering what makes Tizen

In This Chapter

Discovering what makes Tizen unique

Becoming part of the Tizen community

makes Tizen unique ▶ Becoming part of the Tizen community Y ou may have heard of

Y ou may have heard of Tizen, but not know what it is. No worries! In this chapter, you discover Tizen’s place

in the mobile world and some of the many reasons why this open source software platform is one of a kind. You also find out how Tizen compares to other mobile platforms and how to become involved in the Tizen community.

Discovering Tizen

Tizen is an open source, standards-based, cross-architecture device software platform designed to find a place in everything from smartphones to smart TVs and beyond.

The Linux Foundation announced the Tizen project in September 2011 and the Tizen Association was formed in 2012 to drive industry engagement and support for the project. Currently, the main contributors to Tizen are Samsung and Intel, but with increasing industry support, you can expect more organizations to become active contributors. Currently, the Tizen Association board has 12 members from different industry sectors, including many mobile operators.

8 Part I: Introducing Tizen

Tizen has solid open source foundations, and it makes use of established open source components, such as WebKit, GStreamer, Xorg, and Connman. If you want to know how Tizen compares to other open source mobile platforms, see the section ‘Tizen’s place in the mobile world,’ later in this chapter.

place in the mobile world,’ later in this chapter. You can find out more about Tizen

You can find out more about Tizen and the Tizen Association at www.tizen.org and www.tizenassociation.org.

Focusing on HTML5

Tizen’s primary focus for application development is HTML5, which is rapidly emerging as the preferred development envi- ronment for mobile applications. Tizen support for HTML5 is extensive and powerful. It includes support for most of the major W3C APIs included under the banner of HTML5, as well as many supplementary web APIs.

The first prerelease version of Tizen emerged blinking into the spotlight of the developer community in January 2012. The final 1.0 version, code named Larkspur and including Linux and Windows versions of the SDK and the Tizen Web UI framework, was released in May, just before the first Tizen Developer’s Conference in San Francisco. At this event, the attendees were given a reference device, known as the soft- ware development platform (SDP), or lunchbox, as it is nick- named due to its less than svelte appearance.

The version of Tizen we used to create this book is 2.1, which was released in May 2013, and introduced many new web APIs. The Tizen 2.0 SDK was the first to include C++ APIs which you can use to create native apps. However, web apps are still the main way of developing for Tizen and that’s the focus of this book.

Tizen’s place in the mobile world

Our years of mobile development has taught us one simple fact – creating a mobile platform is hard. The average smart device includes a dazzling range of technologies that put desktop computers to shame. We expect our smart devices to entertain us, help us find our way home, run our schedules and just occasionally make phone calls. No one person can be

Chapter 1: Getting an Inside Look at Tizen

9

expected to be an expert in everything from application devel- opment to the low-level technologies that enable your phone to talk to the cellphone towers. Figure 1-1 shows the different perspective that users, application developers and platform developers have on the way a typical open source platform is organised. Put yourself in the shoes of each of these people as we show you how Tizen fits in to the mobile open source landscape.

you how Tizen fits in to the mobile open source landscape. Figure 1-1: Different perspectives on

Figure 1-1: Different perspectives on the layers of a mobile open source platform

The way platforms are organized is often described in terms of an onion. You gradually peel away the layers until you reach the core.

At the top layer, we have applications and services. It’s what’s contained here that helps end users make their decision about which device to buy. They choose their devices accord- ing to what apps and services are available for them to use.

Next we come to the platform level. This layer is where you’ll find the APIs and SDKs that allow developers to create appli- cations. It’s where you’ll find Tizen and the APIs discussed in this book. Tizen has many similarities to other platforms, but you discover the differences too.

10 Part I: Introducing Tizen

Delving deeper we come to the middleware. Many middle- ware components will come from conventional desktop open source projects. Different platforms will pick and choose which open source components to include. The great thing about open source software is the range of components available.

The lowest layer is the kernel. For open source mobile plat- forms, this layer will generally be a Linux kernel. The kernel interacts with middleware components to talk to the hard- ware. It’s the middleware layer that the platform developers, who contribute to the components of the platform, will be most interested in.

Figuring Out What Makes Tizen Different

When Tizen was announced, some of the most common questions asked by developers, analysts and users included whether a new platform was needed at all and what makes Tizen stand out from the crowd.

In this book, we attempt to answer some of these questions, but for now, here are four ways in which Tizen is different from the rest.

Tizen is based on standards

HTML5 is a set of standards that enjoys support from across the industry, and it’s a standard that Tizen supports very well. HTML5 supports multiple browsers, operating systems, and devices. In its latest incarnation, HTML5 provides greater access to device hardware, advanced audio and video capabil- ities, and more flexibility for design and layout. Using HTML5, developers can create cross-platform applications, writing the code once and running it on multiple platforms. The extent to which a platform supports the HTML5 specification is vital for developers who want to make the most of the latest features.

Chapter 1: Getting an Inside Look at Tizen

11

Tizen supports most of the official HTML5 standards, along with some supplementary and legacy standards. Designed to get the most out of HTML, JavaScript, and CSS, Tizen’s web engine is tuned to within an inch of its life to squeeze best performance out of these technologies.

Not only does the Tizen web engine (based on WekKit2 since Tizen 2.0) perform well, its web browser also scores highly in web standards compliance tests, finishing first according to the scores from http://html5test.com, which test how well a browser supports HTML5 specifications.

Tizen is open

As an open source software platform, Tizen provides many opportunities for both individuals and Original Equipment Manufacturers (OEMs) – the people that make the phones. Anyone can grab the source code and customize it to meet their own needs. Any OEM can ship Tizen devices with a cus- tomized user interface, app store, or set of services.

Open source projects also encourage collaboration. Software engineering is changing, and it’s a challenge for an individual or even an organization to build something without using open source code. Collaborating with the open source com- munity is a more efficient and cost-effective way of develop- ment, and it generally avoids re-inventing the wheel.

Defining open

At any gathering of open source developers, the one subject guaranteed to cause an argument – aside from which pizza restaurant to order from – is ‘What is the definition of open source?’

In this book, we describe Tizen as open source because the source

code to the platform is freely available, anyone can download it, and you can use it for any purpose in any project. We accept that this may not meet everyone’s definition of open source software, but this is our definition, and we’re sticking to it.

12 Part I: Introducing Tizen

Tizen is innovative

Innovation can come from many sources. It may be an idea from an individual or an organisation’s R&D projects, but most innovation comes from collaboration.

The Tizen Project brings these different resources and knowl- edge together. Everyone can contribute ideas and innovations to the platform, and everyone can benefit.

Innovation doesn’t stop at collaboration; it also brings differ- entiation to a product and leads to more choice for end users.

Tizen has industry support

One lesson learned from previous open source platforms is that being open source doesn’t necessarily guarantee success or innovation. A project must have strong industry support.

The Tizen Association board includes many operators and device manufacturers, and a strong ecosystem built around Tizen offers opportunities far beyond smartphones. You can look forward to your applications running not only on mobile phones, but also on in-vehicle infotainment systems, note- books, tablets, and Smart TVs.

infotainment systems, note- books, tablets, and Smart TVs. At the time of writing, the board members

At the time of writing, the board members of the Tizen Association are Intel, Samsung, Fujitsu, Huawei, KT, NEC Casio Mobile Communications, NTT docomo, Orange, Panasonic Mobile Communications, SK Telecom, Sprint and Vodafone.

Comparing Tizen to Other Platforms

Tizen’s openness contrasts with closed, proprietary plat- forms, such as iOS, Blackberry 10 and Windows Phone, for which the source code is not available. The choice for users of these platforms is also limited, with only Windows Phone licensed to other manufacturers and the rest available only on the vendor’s devices.

Chapter 1: Getting an Inside Look at Tizen

13

Of the open source alternatives, WebOS and Firefox OS are both platforms with potential, but they don’t have the same level of industry support as Tizen.

Android is the best known open source platform, but the gov- ernance of the platform is arguably not as open, and its stan- dards support isn’t as comprehensive as Tizen.

Getting Familiar with the Tizen Association

The Tizen Association and the Tizen Project, under the Linux Foundation, are complementary to each other. The industry and market-facing aspects of Tizen are driven by the Tizen Association, while the engineering of the Tizen software plat- form takes place within the Tizen open source project hosted by the Linux Foundation. The Linux Foundation runs the Tizen Project, with a focus on platform development and delivery. You can find out more at www.tizenassociation.org.

The board of directors decides the commercial direction of the Tizen Association. The board decides on the platform requirements, business strategy, application store require- ments, and industry partnerships. It aims to evolve the eco- system of the Tizen platform.

Several technical steering groups (TSGs) govern the Tizen Project. Intel and Samsung, as the two primary platform con- tributors, chair the TSGs, and other interested parties can participate.

Getting Involved

You can participate and contribute to the Tizen Project at dif- ferent levels. As described on the Tizen website (www.tizen. org), you can be a platform contributor, an application devel- oper, a user, or a Tizen product vendor.

At the platform level, the membership for the TSG (for exam- ple, groups responsible for areas such as Release Engineering, Quality Assurance, and Program Management) is invitation

14 Part I: Introducing Tizen

only and will mainly be open to the Tizen vendors. However, the Community Office, Localization, and some Middleware groups will be open to participation on a merit basis.

Submitting patches

If you think you can improve the existing code of the Tizen platform, you can submit your changes to the Gerrit system for code review. The maintainer, release engineers, and the QA team will review your patches and decide whether they will be accepted based on the quality of your code. Once the changes are approved, you can submit them to the Gerrit system and Gerrit will merge the changes into the Tizen code base. You can find a guide to submitting changes at:

The Tizen wiki is available for collaborating on documentation related to the Tizen project:

If you have any information or tutorials you want to share with the community, you’re free to add them to the wiki. However, before contributing, you should check the User Guide and style guides.

Mailing list and IRC

Several mailing lists and an IRC channel enable community members to share information and ask questions about the Tizen platform.

Details of these mailing lists and how to join them are pro- vided on the Tizen community website:

The IRC channel is #tizen at: irc.freenode.net, and the channel’s logs are available to view:

Chapter 1: Getting an Inside Look at Tizen

15

Forums

Another source of help and information are the forums avail- able on the Tizen developer site:

The forums are available to any developer with an account to ask questions, contribute to discussions, and share information.

Bug tracker

Tizen uses JIRA to track bugs and gather requests for new features:

Anyone with a tizen.org account can add a new bug, comment on an existing bug, or even submit a patch to fix a bug.

16 Part I: Introducing Tizen

Chapter 2

ExploringtheTizen

Architecture

Chapter 2 ExploringtheTizen Architecture In This Chapter ▶ Looking at Tizen’s organisation ▶ Exploring the role

In This Chapter

Looking at Tizen’s organisation

Exploring the role of the web runtime

Getting an inside look at the web APIs

Listing the Tizen device APIs

look at the web APIs ▶ Listing the Tizen device APIs T izen isn’t just for

T izen isn’t just for smartphones and tablets; it’s designed to drive a wide range of device categories from smart TVs

to netbooks and beyond. For example, the IVI project is set- ting standards to allow Tizen to be used as part of in-vehicle infotainment systems in cars, planes, and buses. In the future, you may find Tizen on Blu-ray players and digital TVs or pow- ering a new generation of netbooks.

Because Tizen is open source and standards based, develop- ers in the open source community can find uses for Tizen in devices far beyond what’s available today. Maybe you’ll find Tizen in your fridge or alarm clock or in a home automation system. The possibilities are endless.

It’s the incarnation of Tizen defined for smartphones and tablets that we concentrate on in this book. Web developers don’t have to know the inner workings of Tizen in order to create apps, but the more you know about the platform, the more informed your development choices can be.

18 Part I: Introducing Tizen

Introducing Web Apps

The term web app is actually quite broad. Our definition is apps based on web technologies that can access system resources and that you can install on a device – although they don’t have to be.

Is a website a web app? Yes, it is. Websites are built with standard web technologies and can use W3C APIs to access some device features. They don’t have to be installed because everything happens in the browser.

Tizen web apps are created using a combination of W3C/ HTML5 specifications, supplementary web specifications, and Tizen web app device APIs. The important thing to know for this section is that Tizen web apps are just like traditional apps:

They can access system resources.

They can launch other apps.

They provide services.

They generally behave like traditional native apps do.

✓ They generally behave like traditional native apps do. Going native The 2.1 release of the

Going native

The 2.1 release of the Tizen SDK includes a set of C++ APIs which you can use to create native apps. Depending on your requirements, you can choose whether to create a web app or take the native approach.

Developing a native app is a good choice if your app is performance intensive or you need access to

device functionality not supported by the web APIs. However, web apps are more portable, support all the HTML5 standards and still have most of the features of native apps.

This book concentrates on web apps, but you can find full details of the C++ APIs, as well as examples and tutorials, in the SDK help.

Chapter 2: Exploring the Tizen Architecture

The web runtime

19

Each web app runs in its own process. In the task manager of a Tizen device, you can see a Tizen web app just like a native app. You can utilise process scheduling and management, and platform security features also apply.

The web runtime provides a framework for installable web applications. The role of the web runtime is to install and launch apps and provide integration with the native platform, exposing Tizen APIs so that web apps can access device fea- tures. The web application can be integrated with the task manager and package manager, and it can also receive some of the system events, such as out of memory, screen orienta- tion, and system locale change.

The web runtime is also responsible for access control check- ing. Whenever a web app calls a JavaScript API, the web run- time checks that the app is allowed to access that particular feature, returning an error if access is denied. This process provides a high level of runtime security.

Figure 2-1 shows the components of the web runtime. As you can see from Figure 2-1, the web application talks to the web runtime, which then communicates with the layer below to access the features of the device. The web runtime consists of an installer, runtime core, plugin core, and security compo- nents. The following sections look at these areas in more detail.

Figure 2-1: The Tizen web runtime.
Figure 2-1: The Tizen web runtime.

20 Part I: Introducing Tizen

Installer

When an application is installed, the Tizen package manager is called to install the web application. The package man- ager invokes the web runtime’s app installer program, which checks that the app is properly signed and then starts the installation. Once installed, the app is registered with the web runtime database using the information supplied in the app’s configuration file, including the app ID, name of the app, and icon. The app’s icon then appears in the menu screen.

When the user uninstalls an app, the app is unregistered from the web runtime database, and all app resources are removed from the client.

Runtime core

The runtime core is responsible for managing the lifecycle of an application, including startup, suspend and resume, and terminate.

When an app launches, the Tizen launchpad executes the web app process. This creates a new process for the web app and initialises some of the callbacks that will be invoked for certain system events. When an app is initially launched, the runtime will retrieve the web app’s start file, usually called index.html, initialise the web view and load this .html file.

If the app provides a service – for example, getting an image

from a web service – then this feature will be registered as

a service, using the Image MIME type. When another app

requests the image service, the app will receive the request and handle it.

service, the app will receive the request and handle it. The Tizen web runtime rendering engine

The Tizen web runtime rendering engine is based on WebKit2. This is the same WebKit used in the Tizen browser. As a result, web apps can take advantage of the same HTML5 APIs and the same 2D and 3D optimisations and CSS3 optimisations that the built-in browser uses.

Chapter 2: Exploring the Tizen Architecture

Plugin core

21

The plugin core is what enables the web app to talk to the device/platform via JavaScript APIs. It communicates with the JSCore module in the platform layer (refer to Figure 2-1) and implements on-demand loading of plugins at runtime. The advantage of on-demand loading of plugins is that the web app starts faster because plugins are loaded only when the JavaScript needs them.

Using Tizen Web APIs

You create Tizen web apps using a combination of W3C/ HTML5 specifications, supplementary web specifications, and Tizen-specific device APIs. Tizen provides support for many HTML5 features, such as audio and video, offline web storage, web workers, and 3D transform and transition effects. You can use these standard technologies in a web application. Tizen also includes support for some APIs not specified in W3C but that are part of supplementary common web standards. Included in this list are typed arrays and the viewport metatag definition.

Figure 2-2 shows the relationship between W3C APIs, supple- mentary APIs, and Tizen-specific device APIs. Of course, when you build web apps, you’re also likely to use various JavaScript utility libraries, such as jQuery and jQueryMobile. With so many libraries available for you to use, you don’t need to re-invent the wheel.

Checking the specs

You can find the current status of Tizen’s support for particular W3C APIs in the online help in the Tizen W3C API Specifications section. HTML5 is a moving target, and Tizen’s API support is evolving. By the time you read this book, the HTML5 support will be even better.

In fact, because Tizen provides such good HTML5 support, you can create many web apps without using any Tizen-specific APIs at all. You can still access some device features, such as geolocation, and some sensor features all from within a portable completely standard web app.

22 Part I: Introducing Tizen

22 Part I: Introducing Tizen Figure 2-2: The APIs available to a Tizen web application. Exploring

Figure 2-2: The APIs available to a Tizen web application.

Exploring the Tizen Device APIs

So why does Tizen need its own JavaScript device APIs? Well,

it turns out that while the W3C specifications do provide

a lot of features, some gaps exist. Tizen device APIs were

created to fill these gaps. For example, you can find Tizen APIs for manipulating contacts and calendars in Chapters 12 and 13. These Tizen APIs are all contained within the Tizen namespace. You also discover how to give your apps a con- sistent look and feel in Chapter 7, which introduces the Tizen Web UI Framework.

The idea behind these APIs isn’t to compete with the W3C APIs. In fact, Samsung and Intel participate on various stan- dards committees that define W3C APIs. The aim is that the Tizen device APIs will one day be absorbed into W3C so that they’ll become standards.

day be absorbed into W3C so that they’ll become standards. Tizen is still an evolving platform

Tizen is still an evolving platform and Tizen device APIs are designed to supplement, not replace, the functionality of the W3C APIs. However, the device features provided by the W3C APIs are also becoming more comprehensive. You might find

Chapter 2: Exploring the Tizen Architecture

23

that new W3C standards are introduced that provide the same functionality as some of the Tizen device APIs discussed in this book. In this case, you should update your application to use these APIs and help to make your apps more portable and future proof.

You can find a complete specification of the device APIs in the SDK help, but the following sections provide a quick over- view and point you to the more detailed information and code samples in later chapters.

The SDK also includes code samples covering most of the device APIs; see Chapter 3 for more information on using the samples included with the SDK.

Tizen

The Tizen JavaScript object is used to access device APIs such as Contact, Calendar and NFC.

For example, to access the default address book, you use the following code:

var addressBook = tizen.contact. getDefaultAddressBook();

The contact object is a property of the tizen object and con- tains a ContactManager object, which provides access to the Contacts API, including the getDefaultAddressBook() function. The same pattern is used with the other device APIs.

The same pattern is used with the other device APIs. Throughout this book and in the

Throughout this book and in the Tizen SDK, the web Interface Definition Language (IDL) is used to describe APIs in a lan- guage independent way. This allows the APIs to be described using terms familiar to those of you with a background in strongly typed object oriented languages, such as C++, even though the APIs are accessed through JavaScript.

Apart from being the base object used to access the other device APIs, the tizen object also provides access to a set of generic functions, including error handling and filters. Chapter 9 demonstrates how to use filters.

24 Part I: Introducing Tizen

Alarm

The Alarm API allows you to set an alarm to run an application at a specified time and launch it if it’s not already running.

Application

The Application API allows you to retrieve a list of running applications and launch other apps by using an application control. So, you might launch the camera app to take a picture or record video or use the media player to play music files. You can also provide services to other apps. Chapter 9 covers launching an application using an application control.

Bookmark

The Bookmark API provides access to the device’s book- marks. You can use it to retrieve bookmarks, as well as add and remove both bookmarks and bookmark folders.

Bluetooth

The Bluetooth API provides access to the Bluetooth protocol, which can be used for transmitting files over short distances between devices.

Calendar

The Calendar API allows you to manage events and tasks so that it can handle your schedule or to-do list. Chapter 13 explains the Calendar API in detail.

CallHistory

The CallHistory API provides access to the call history func- tionality, such as finding and removing call history entries.

Chapter 2: Exploring the Tizen Architecture

Contacts

25

You use the Contacts API to manage contacts and handle mul- tiple address books. Chapter 12 explains the Contacts API in detail.

Content

The Content API lets you search for content on the device, either stored locally or on a memory card. Chapter 9 shows you how to use these features.

DataControl

The DataControl API, introduced in Tizen 2.1, is used to access data exported by other applications, for example native applications. You can use the functionality provided by the DataControl API to operate on both SQL and key-value databases.

DataSynchronization

The DataSynchronization API, supported from Tizen 2.1, allows you to synchronize device data with a server using the OMA Data Synchronization 1.2 protocol.

Download

The Download API, introduced in Tizen 2.0, is used to down- load files from the Internet and monitor the download status.

Filesystem

The Filesystem API provides access to the device’s file system. The SDK includes more information, including tutorials.

26 Part I: Introducing Tizen

MessagePort

The MessagePort API allows you to exchange data with another web application, or with a native application. Data is sent using the RemoteMessagePort, and data is received from the LocalMessagePort.

Messaging

The Messaging service allows you to send SMS, MMS, and Email messages and search messages on the device. Chapter 11 explains this API in more detail and provides source code for searching SMS messages on your device.

NetworkBearerSelection

The NetworkBearerSelection API, new to Tizen 2.1, allows you to specify a particular network connection to be used from your web applications to connect a given domain or host.

NFC

Near Field Communication (NFC) is used for short range wire- less communication. NFC enabled devices can be used for mobile payments and in a range of other applications. We explain Near Field Communication (NFC) in detail in Chapter 10. You discover the different applications of NFC technology and how to use NFC in your Tizen web apps.

Notification

The Notification API, introduced in Tizen 2.0, provides a way of alerting the user to events happening in your app. You can find details of how to create and manage notifications in the SDK help.

Chapter 2: Exploring the Tizen Architecture

27

Package

The Package API, new to Tizen 2.1, allows you to install and uninstall packages, retrieve information about the packages installed on the device, and monitor any changes to installed packages.

Power

Another new API introduced in Tizen 2.0, this provides access to a device’s power state and allows you to control display dimming and brightness, for example. More information, including a tutorial are included in the SDK.

Push

The Push API, new in Tizen 2.1, allows web applications to receive push notifications from the push server.

SecureElement

The SecureElement API, introduced in Tizen 2.1, provides access to secured elements on the device, such as a UICC/SIM, embedded security element or secure SD card.

SystemInfo

Provides access to device specific information, such as local storage, battery levels, cellular network, and so on. More information and a tutorial are included in the SDK.

SystemSetting

The SystemSetting API, introduced in Tizen 2.0, lets you get and set various device properties. At the time of writing you can get and set the following device properties: the device and lock screen wallpaper, the ringtone for incoming calls and the email message notification sound.

28 Part I: Introducing Tizen

Time

Provides date and time functions, including working with the current date and time and locale specific date and time han- dling. Chapter 13 uses the Time APIs to set the date and time of calendar tasks.

Part II

Getting Practical

In this part

I n this part we start to get practical. You download and install the Tizen SDK, start to find your way round the

tools, and build your first Tizen app. In Chapter 3 you learn enough to get up and running, while Chapter 4 takes you through each component of a Tizen app in detail. You’ll explore some of the sample apps and discover how there’s a world of third-party JavaScript libraries ready for you to use in your apps. Chapter 5 tidies up the messy business of testing and debugging.

You might have an existing web app that you want to port to Tizen, in which case you will find some useful tips in Chapter 6. We also explain how you can design your Tizen web app to make it more portable.

Chapter 3

GettingStarted

Chapter 3 GettingStarted In This Chapter ▶ Installing the Tizen SDK ▶ Building your first web

In This Chapter

Installing the Tizen SDK

Building your first web app

Getting Help

Tizen SDK ▶ Building your first web app ▶ Getting Help G etting to grips with

G etting to grips with a new platform can feel like trav- elling to a country for the first time. You may be the

kind of traveller who likes to turn up at the airport hours in advance, with a well-planned itinerary, phrase book, and a list of the local hotspots. Or, like some authors we could mention, you may prefer to run to catch your flight, carrying only a pair of sunglasses and a smile. Both travellers will get to their destination, both will probably have a good time, but for all their spontaneity, the less prepared traveller may be left with a nagging feeling that he may have missed out on something.

In this chapter, you find everything you need to build your first Tizen app. If you’re feeling adventurous or just can’t wait to get coding, this chapter will be all you need to get started. But if you’re new to web development or the Eclipse IDE or you just want to make sure that you get the most out of the development environment before diving in head first, then think of this chapter as the first part of a trilogy.

Chapter 4 looks at each component of a Tizen app in detail, while Chapter 5 uncovers the secrets of testing and debug- ging. Tizen development may not be everyone’s idea of an adventure, but you’ll be well prepared for the trip.

32 Part II: Getting Practical

32 Part II: Getting Practical Getting perspective A perspective describes the layout of views to help

Getting perspective

A perspective describes the layout of views to help you achieve a particular task. In the case of the default Tizen Web Perspective, that task is web development, so you’ll see views including the Connection Explorer, and HTML Web Page Editor. Chapter 5 introduces the Connection Explorer, while the HTML Web Page

Editor is covered in its own section later in this chapter.

You can also open up other useful views not shown in the current perspective by choosing WindowShow View. There’s much more detail about perspectives, views, and the workbench in the Tizen SDK help.

Installing the IDE

and the workbench in the Tizen SDK help. Installing the IDE The Tizen SDK provides a

The Tizen SDK provides a set of tools for developing Tizen web applications. The IDE is based on Eclipse, which will be familiar to you if you’ve done any Symbian, Android, or bada development. The SDK also includes a tool chain to build apps for your chosen hardware platform and lots of sample code, tutorials, and documentation to help you get started.

This chapter refers to the 2.1 Magnolia version of the Tizen SDK.

To begin your journey into Tizen development, you first need to download the SDK from the Tizen website at https:// developer.tizen.org/downloads/sdk.

The currently supported platforms are:

Ubuntu (11.10/12.04) 32-bit & 64-bit

Windows XP 32-bit

Windows 7 32-bit & 64-bit

Mac OS X (Intel) 64-bit

You can download two files for Windows, Ubuntu or Mac OS X:

the installation manager and the SDK Image. The installation manager is responsible for installing the SDK, and you can use it in one of two ways. You can download the SDK from the server during the installation process, or you can download

Chapter 3: Getting Started

33

a separate SDK image file and choose to install the SDK from this package.

This latter approach allows you to complete the SDK installa- tion when you’re not connected to the Internet.

After you install the SDK, the first time you launch the IDE you’re asked to select a workspace. On the Welcome screen that appears, choose the Workbench option. The Tizen Web Perspective appears, as shown in Figure 3-1.

The Tizen Web Perspective appears, as shown in Figure 3-1. Figure 3-1: The Tizen Web Perspective

Figure 3-1: The Tizen Web Perspective

Now you’re ready to start developing apps.

Web Perspective Now you’re ready to start developing apps. If you install the SDK on Mac

If you install the SDK on Mac OS X 10.7.5 or later and an error

dialog appears when you launch the Install Manager, then you may need to change your security settings temporarily to prevent the OS X Gatekeeper feature from blocking the

installation.

Choose Apple MenuSystem Preferences, open the Security preference pane and click on the General tab. Under the heading ‘Allow applications downloaded from’, choose the ‘Anywhere’ radio button. You should now be able to launch the Install Manager.

34 Part II: Getting Practical

Once you’ve finished installing the Tizen SDK, restore your settings to the previous state.

Creating Your First Tizen Web App

The easiest way to create a new Tizen project is by using the New Project wizard. The wizard allows you to create your application using some predefined templates or create a proj- ect from one of the built-in sample apps. You can also use user-defined templates, which we explain in more detail in the ‘User-defined templates’ section.

in more detail in the ‘User-defined templates’ section. It’s well worth taking a look at all

It’s well worth taking a look at all the templates and sample code provided in the IDE, to give you a head start creating your app.

To launch the New Project wizard and choose a template, follow these steps:

1. In the IDE, choose FileNewTizen Web Project.

The New Project wizard appears. You see a selection of templates and sample applications to choose from (see Figure 3-2).

2. Choose the template or sample you want to use.

Tizen offers several predefined template types:

Basic: A blank application template.

Tizen WebUI Framework: A set of templates with all the necessary files for creating a web application using the Tizen web UI framework.

jQuery Mobile: A set of templates containing all the files to create a web application using the jQuery Mobile framework.

Tizen Web UI Builder: A set of templates con- taining all the files to create a web application using the Tizen Builder.

3. Name your project.

4. Click Finish.

Chapter 3: Getting Started

35

Chapter 3: Getting Started 3 5 Figure 3-2: The New Project Wizard. These templates include the

Figure 3-2: The New Project Wizard.

These templates include the basic structure for an applica- tion and all the relevant JavaScript libraries required for the selected UI framework. All you need to do is add your applica- tion specific code.

Using a sample app

If you want to create a slightly more complicated application, you can use one of the sample applications provided in the SDK as a starting point. Walking through the sample code is also a great way to become familiar with particular features.

The New Project wizard provides many sample applications to demonstrate the use of Web technologies and the Tizen APIs.

The Tizen developer website also provides other samples that you can use to start developing an application. (See the ‘Importing an existing project’ section, later in this chapter, for more details on how you can use these samples.)

Using your own template

If you have an existing template from another web-based platform or you’re developing several applications based on

36 Part II: Getting Practical

a common structure, you may want to define your own tem- plate. The New Project wizard provides an option for creating an application based on your own user-defined templates.

Before you can use this option, you need to create your own application project template. You can create a user template based on any project, using the Export wizard. To use the Export wizard, follow these steps:

1. Right-click the project in the Project Explorer view and choose Export.

The Export dialog box appears.

2. From the Select an Export Destination list, double- click the Tizen folder icon and then select the Tizen User Template, as shown in Figure 3-3.

then select the Tizen User Template, as shown in Figure 3-3. Figure 3-3: The Tizen user

Figure 3-3: The Tizen user template.

3. Click Next.

The User Template Export wizard appears.

4. Enter the name and export location.

Chapter 3: Getting Started

37

5. Select the Import a Template check box so that your template will appear in the New Project wizard.

6. Click Next.

The icon selection screen of the User Template Export wizard appears.

7. Add any icons that you want to be shown in the new wizard.

8. Click Next.

The images and descriptions screen appears.

9. Add any images or descriptions that you want displayed in the new wizard.

10. Click Finish to complete the export of your user template.

Importing an existing project

Using the New Project wizard isn’t the only way to create an application; you can also import existing applications into the IDE.

Tizen web application

To import an existing Tizen web app, follow these steps:

1. Choose FileImport.

The Import dialog box, shown in Figure 3-4, appears.

2. From the Select an Import Source list, double-click Tizen and then select Web Projects and Widget file.

3. Click Next.

The Import Widget screen appears.

4. Enter the root directory or click the Browse button to select the projects you want to copy into the workspace.

5. Click Finish.

The project is imported into the workspace.

38 Part II: Getting Practical

38 Part II: Getting Practical Figure 3-4: The Import dialog box of the New Project Wizard.

Figure 3-4: The Import dialog box of the New Project Wizard.

Other web applications

If you have a web application developed for the desktop or another mobile platform, you can import it into the IDE by following these steps:

1. Choose FileNewProject.

2. In the wizard’s drop-down list, double-click the General folder and then click Project (see Figure 3-5).

3. Click Next.

4. Uncheck the use default location check box and enter the name and location of your project.

5. Click Finish.

Your project is now created and loaded into the workspace.

After you create the project, you need to edit two files:

.project and config.xml. You can find full instructions on how to edit these files on the Tizen developer website:

https://developer.tizen.org/downloads/sample-

web-applications/load-web-app-tizen-sdk

Chapter 3: Getting Started

Chapter 3: Getting Started Figure 3-5: Import other web apps. 3 9 Writing the Code The

Figure 3-5: Import other web apps.

39

Writing the Code

The SDK provides many useful tools to help you write and edit your app’s code. These tools are designed to help you throughout your development process, helping you preview your HTML code as you create it, crafting the look of your pages with CSS Preview, and making the JavaScript coding process easier and more efficient.

HTML Web Page Editor

The IDE provides a WYSIWYG editor for editing HTML files. The Web Page Editor allows you to view both the source code and preview the HTML as you’re developing your application (see Figure 3-6).

The IDE offers several options, shown in Table 3-1, for viewing your HTML content.

40

Part II: Getting Practical

Table 3-1

Web Page Editor View Modes

HTML View Modes

Description

Show Design Page & Source Page as Vertical panes

Show Design Page & Source Page as Vertical panes

Show Design Page & Source Page as Horizontal panes

Show Design Page & Source Page as Horizontal panes

Show Design Page only

Show Design Page only

Show Source Page only

Show Source Page only

You could choose to handcraft your HTML, but you can also use the palette feature provided in the IDE. HTML4 and HTML5 palettes are provided for you in all views except the Source Page Only mode. To use an object from the palette, just select a component and drag it to the required location on either the Design or Source page.

a component and drag it to the required location on either the Design or Source page.

Figure 3-6: The Web Page Editor.

HTML Preview

Chapter 3: Getting Started

41

You can instantly preview a HTML file using the HTML Preview tool (see Figure 3-7). Google Chrome is used to dis- play the Preview, so the appearance will be more accurate than the preview in the Web Page Editor, which uses your sys- tem’s default browser.

Page Editor, which uses your sys- tem’s default browser. Figure 3-7: The HTML Preview. To view

Figure 3-7: The HTML Preview.

To view your HTML file in the HTML Preview tool, select the Preview button from the IDE’s toolbar.

CSS Preview

You can instantly preview the look and feel of any CSS file using the CSS Preview tool, shown in Figure 3-8. Google Chrome is used to display the content in the Preview, and any changes you make will be reflected immediately.

To view your CSS file in the CSS Preview tool, select the Preview button from the IDE’s toolbar.

42 Part II: Getting Practical

42 Part II: Getting Practical Figure 3-8: The CSS Preview. Minifying CSS and JavaScript The IDE

Figure 3-8: The CSS Preview.

Minifying CSS and JavaScript

The IDE provides tools to minify your CSS and JavaScript files if you need to reduce the size of your code.

CSS

The CSS tool removes comments, white space, extra semico- lons, empty declarations, zero values, and so on from your CSS code.

To minify your CSS file, right-click the file in the Project Explorer, and the options in Figure 3-9 appear at the bottom of the list. Choose the Minify CSS option, and the file is minified with a new version of the file (.min.css) created.

Minify CSS option, and the file is minified with a new version of the file (

Figure 3-9: Minify CSS.

JavaScript

Chapter 3: Getting Started

43

The JavaScript tool removes comments and extra white

space, replaces identifiers, and performs micro-optimisations

in your JavaScript code.

To minify your JavaScript file, right-click the file in the Project Explorer, and the options in Figure 3-10 appear at the bottom of the list. Choose the Minify JS option, and the file is minified with a new version of the file (.min.js) created.

minified with a new version of the file (. min.js ) created. Figure 3-10: Minify JavaScript.

Figure 3-10: Minify JavaScript.

Building Your Project

A Tizen application is packaged in a .wgt file that can be

downloaded and installed on a device or Emulator. You can find out more information about an application package and its content in Chapter 4.

When you’re developing your application, if the Build Automatically option is enabled, then the application package will be rebuilt every time you save any changes. Any errors or warnings found in your JavaScript code will be shown in the Problems View at the bottom of the IDE.

Running Your Project

You can test whether your application works by running it in the Simulator or Emulator environment or on a Tizen device. For more information about how to test your project, see Chapter 5.

If you want to, you can select one of the sample applications

introduced in the ‘Using a sample app’ section, earlier in this chapter, and try building and running the app for yourself.

44 Part II: Getting Practical

Help Is on the Way

The Tizen SDK provides a comprehensive set of Help docu- mentation, tutorials, and sample code to help you get started. You can find lots of other resources, too, including the devel- oper site, wiki, forums, mailing lists, and a bug tracker. Blogs and forums created by community members are also just a quick Internet search away, and these resources will only increase as the community grows.

these resources will only increase as the community grows. You can access Help documentation and get

You can access Help documentation and get information about any APIs by hovering over the function names. The IDE also provides an Auto completion feature to avoid making any typing errors when using the Tizen APIs.

Help documentation

You can find the most up-to-date information about Tizen in the SDK Help documentation. You can open the Help from within the IDE, by choosing HelpHelp Contents. You can also access Help on the Tizen website:

https://developer.tizen.org/documentation

Here are some of the most useful Help sections to consult to find out more about the platform and creating apps:

Getting Started with Tizen/Overview/Architecture describes the platform architecture and introduces the components that make the platform.

Getting Started with Tizen/Development Environment/ Tizen SDK describes the tools available in the SDK and tips on how to use them.

Tizen Web App Programming/API References/Device API Reference provides detailed information about the Tizen device APIs and how to use them within your web application. This specification uses Interface Definition Language (IDL), which is used to describe APIs in a lan- guage independent way.

Chapter 3: Getting Started

45

Tizen Web App Programming/Programming Guide includes the Device Guides, which explain the functional- ity of each device API and provides code examples for the main features.

Tizen Web App Programming/Tutorials includes tutorials that take you step by step through some more detailed examples for the main APIs.

Tizen Web App Programming/API References/UI Framework Reference is a guide to all the Tizen Web UI Framework widgets and offers examples of how to use them in your web application.

Sample applications

In addition to the tutorials and the sample applications pro- vided in the SDK, several sample web applications are avail- able for download from the Tizen developer site:

https://developer.tizen.org/downloads/sample-

web-applications

These applications use a variety of standard HTML5, JavaScript, and CSS3 techniques and can be run either on the desktop or a mobile device. Each application has a tutorial describing the main features of the application and how they were implemented.

You can use the instructions described in the ‘Other web applications’ section, earlier in this chapter, to import these projects into the IDE.

See Chapter 1 for more details about the Tizen wiki, mailing list, IRC channel, and forums.

46 Part II: Getting Practical

Chapter 4

PiecingTogether the ApplicationJigsaw

Chapter 4 PiecingTogether the ApplicationJigsaw In This Chapter ▶ Introducing the application package ▶ Getting

In This Chapter

Introducing the application package

Getting inside the configuration file

Seeing how a Tizen app fits together

configuration file ▶ Seeing how a Tizen app fits together A s a web developer, you

A s a web developer, you can count on standards, such as the W3C APIs that form part of HTML5, but the apps

that use these APIs aren’t so much developed from scratch as assembled from a jigsaw puzzle of pieces. You may have an app that uses W3C APIs, makes use of a library (such as jQuery), and even includes JavaScript, HTML, and CSS files generated by a tool like Dreamweaver. The possibilities are endless, but knowing how to piece all these parts together and add your own code to the mix can be a challenge.

In this chapter, we examine the components of the application package, including the configuration file that contains the app settings. We show you how to put the pieces of the puzzle together to create a Tizen web app, from the simplest possible app to a more advanced app that makes use of the Tizen device APIs. Armed with this information, you’ll understand how a Tizen app is put together and have a solid foundation for creating your own apps.

For full details about downloading, installing, and taking your first steps with the Tizen SDK, go to Chapter 3. Chapter 5 covers testing and debugging.

48 Part II: Getting Practical

Examining the Pieces

The way you work through this chapter is up to you. You can use it as a reference that you dip in and out of as you write your app or follow along with the Tizen IDE in front of you.

If you want to follow along, then why not build one of the sample apps as described in Chapter 3? This section isn’t based around one app, but if you have one of the Tizen samples loaded into the IDE, you’ll be able to find the main components as they’re explained.your app or follow along with the Tizen IDE in front of you. The Application Package

The Application Package

When you build a Tizen app for the Simulator, Emulator, or device, the app is packaged in the W3C standard widget format, a zip format compressed archive that has a file type of .wgt. This package contains all your JavaScript, HTML, and CSS files, together with the images, configuration file, and other resources that your app uses.

To take a closer look at the package, double-click the .wgt file in the Project Explorer. The package contents are revealed and look something like the app package shown in Figure 4-1.

and look something like the app package shown in Figure 4-1. You can find the specification

You can find the specification of the W3C widget format at

of the W3C widget format at www.w3.org/TR/widgets. Figure 4-1: Systeminfo example application – package

Figure 4-1: Systeminfo example application – package content and structure.

Chapter 4: Piecing Together the Application Jigsaw

49

Chapter 4: Piecing Together the Application Jigsaw 4 9 If you’ve minified any JavaScript or CSS

If you’ve minified any JavaScript or CSS files to reduce the size of your code, by default both the original and the minified version will be included in the package. You must remember to manually remove the original version either from the final package or from your project and update your project files to use the minified version of the file.

Localized content

The example shown in Figure 4-1 is missing one key ingredient of a well-designed web app, and that’s localized content.

One of the ways to ensure that your web app displays content appropriate to the current locale is to use folder-based local- isation. With this approach, you create a folder for each locale for which you’re creating localized content. For example, for the French locale, put localized HTML files, images, and other resources into the /locales/fr folder at the root level of the application package. If the current locale is set to French, then the platform will first look inside this folder for French localized resources.

Figure 4-2 shows the package for an app using folder-based localization.

the package for an app using folder-based localization. Figure 4-2: Example application with localized

Figure 4-2: Example application with localized content-package content and structure.

50 Part II: Getting Practical

For each locale, you can localize as much application content as is appropriate. For example, in Figure 4-2, the Spanish (es) locale, unlike the French (fr) locale, only has localized content for the index.html file and will fall back to use the default version of the icon.png file.

You can create all the necessary files and folders for localizing your app using the Tizen Localization wizard. To launch the wizard, right-click your project in the Project Explorer panel and choose the LocalizationLocalization Wizard menu item. This wizard allows you to choose which files to localize, as well as the locales you want to support.

to localize, as well as the locales you want to support. You can find the folder

You can find the folder naming standards as part of the widget specification at www.w3.org/TR/widgets.

The configuration file

The configuration file is an XML file that contains informa- tion about the features of the application. The Tizen platform supports the configuration file as defined in the W3C widget specification and adds some Tizen-specific extensions.

You can create or edit this XML file either by hand or by using the Configuration Editor provided in the IDE. You must include this configuration file in your application package.

Breaking down the config file

Listing 4-1 shows an example of a config.xml file used for a simple Tizen web application:

Listing 4-1

Example config.xml file

<?xml version=”1.0” encoding=”UTF-8”?> <widget xmlns=”http://www.w3.org/ns/widgets” xmlns:tizen=”http://tizen.org/ns/widgets” id=”http:// yourdomain/SysteminfoSample” version=”0.1.7” viewmodes=”maximized”> <tizen:application id=”LCj1zMvDil.SysteminfoSample” package=”LCj1zMvDil” required_version=”2.1”/>

Chapter 4: Piecing Together the Application Jigsaw

51

<content src=”index.html”/> <icon src=”icon.png”/> <name>SysteminfoSample</name> <tizen:privilege name=”http://tizen.org/privilege/application.read”/> <tizen:privilege name=”http://tizen.org/privilege/systeminfo”/>

</widget>

The first line of the config.xml file is the declaration identi- fying the XML version and encoding used:

<?xml version=”1.0” encoding=”UTF-8”?>

The next part of the config.xml file defines the widget ele- ment and its attributes:

<widget xmlns=”http://www.w3.org/ns/widgets” xmlns:tizen=”http://tizen.org/ns/widgets” id=”http:// yourdomain/SysteminfoSample” version=”0.1.7” viewmodes=”maximized”>

</widget>

The namespace declaration will be the same for all Tizen web apps. It just specifies that the app is a W3C format widget that uses the Tizen-specific extensions.

The id attribute is mandatory and uniquely identifies your widget – in this case, the Systeminfo sample. If you have your own domain name, then use it in place of yourdomain in Listing 4-1. The id doesn’t have to be a valid URL and is just used for identification.

You can also set other optional attributes, including version, height, width, viewmodes, and defaultlocale.

The widget element can also contain a number of optional child elements, representing additional information about your application. We explain what these elements are used for in the next section.

52 Part II: Getting Practical

<content src=”index.html”/> <icon src=”icon.png”/> <name>SysteminfoSample</name> <tizen:privilege name=”http://tizen.org/privilege/application.read”/> <tizen:privilege name=”http://tizen.org/privilege/systeminfo”/>

Finally, the Tizen application id, package and minimum API version attributes are defined. The Tizen application id and package attributes are Tizen specific extensions which are used to identify a Tizen application. The package attribute is mandatory, and is represented with a randomly generated 10-character alphanumeric value. The application id is also mandatory, and is represented by the package id and the application’s project name:

<tizen:application id=”LCj1zMvDil.SysteminfoSample” package=”LCj1zMvDil” required_version=”2.1”/>

config.xml the easy way: the Configuration Editor

Rather than creating the config.xml file by hand, the Tizen IDE makes things easier by including a Configuration Editor.

This tool automatically adds all the mandatory elements and helps you generate a valid config.xml file.

To open your config.xml file for editing in the Configuration Editor, right-click the file in the Project Explorer panel and choose Open WithWidget Configuration Editor. Figure 4-3 shows the Configuration Editor open at the Overview window. (You may recognize some of the information in Figure 4-3 if you read the last section.)

The Configuration Editor displays the contents of the config.xml file in nine separate tabs: Overview, Widget, Features, Privileges, Access, Localization, Preferences, Tizen, and Source. The following sections describe the content of each tab.

Overview

In the Overview tab, you can enter general information about your application.

Chapter 4: Piecing Together the Application Jigsaw

53

Chapter 4: Piecing Together the Application Jigsaw 5 3 Figure 4-3: The Configuration Editor. The items

Figure 4-3: The Configuration Editor.

The items shown in Table 4-1 are the attributes that you can set through the Overview tab in the Configuration Editor.

Table 4-1

Attributes in the Overview Tab

Type

Description

Identifier

IRI identifier for the widget

Version

The current version of the widget

Name

Full human-readable name for a widget (for example, for use in an application menu)

Content

Custom start file that the user agent is expected to use when it instantiates the widget

Icon

Custom icon for the widget

Widget

In the Widget tab, you can enter specific information about your application.

The items shown in Table 4-2 and Table 4-3 are the attributes that you can set through the Widget tab in the Configuration Editor.

54

Part II: Getting Practical

Table 4-2

Specific Information in the Widget Tab

Type

Description

Author

People or an organization associated with the creation of the widget

E-mail

Email address associated with the author Web

Web Site

IRI associated with the widget – for example, your website, Facebook id, and so on

License

Software license, including copyright and redistribution terms

License URL

Valid IRI or a valid path that points to the detailed license information

Description

Human-readable description of the widget

Table 4-3

Attribute Information in the Widget Tab

Type

Description

Width

Preferred viewport width of the instantiated custom start file

Height

Preferred viewport height of the instantiatedcustom start file

View Modes

Author’s preferred view mode (full screen, and maximized)

Features

In the Features tab, you can declare all the mandatory hard- ware and software components that are required by your application. This information will be used by the Tizen appli- cation store to filter applications, ensuring that only those applications which are compatible with a user’s device are shown.

To add a feature to your application’s config.xml file, select the Features tab and click the Add button. A new row is added to the Features table, and you can add the feature string.

Chapter 4: Piecing Together the Application Jigsaw

Privileges

55

A privilege is a URI-identifiable runtime component – for

example, an API such as http://tizen.org/privilege/ systeminfo. In order to access an API at runtime, your application must register it in the config.xml file. To add a new privilege to your application’s config.xml file, select the Privileges tab and click the Add button, as shown in Figure 4-4.

If you select the Internal radio button, you’ll be able to select

from a list of Tizen’s built-in privileges. Optionally, using the other radio buttons and text boxes, you can enter a URL or the name of a file that contains a privilege definition.

or the name of a file that contains a privilege definition. Figure 4-4: Add a new

Figure 4-4: Add a new privilege.

After you select the new privileges, click the Finish button. After you finish making changes to the configuration file, choose FileSave or close the config.xml window and click Yes when you’re prompted to save your changes.

Access

The Tizen platform supports WARP, the W3C Access Request Policy. So by default, applications are restricted from access- ing network resources. If your application needs to access any network resources, you must add them in the config.xml file.

56 Part II: Getting Practical

To allow access to a network URL, select the Access tab and click the Add button. Enter the network URL and select whether the application should be able to access the URL’s subdomains.

In the ‘Example 1: A 5-Minute Application’ section, later in this chapter, we show you how to create a simple app that displays content from the Food Network’s website, as shown in Figure 4-7. We’ll leave it to you to decide if we’re partial to cakes.

You’ll notice that http://m.foodnetwork.com was added to the access origin section of the config.xml file. The app needs to access this external resource in order to retrieve the data to display.

Localization

The Tizen platform supports localization of selected elements in the config.xml file, including the application name and description.

Any elements that you can localize will be displayed in the Localization tab. To localize a config.xml element:

1. Right-click the element and choose Select Languages.

The Select the Locales dialog box, shown in Figure 4-5, appears.

Select the Locales dialog box, shown in Figure 4-5, appears. Figure 4-5: Locales. Add any new

Figure 4-5: Locales. Add any new locales you want to support.

Chapter 4: Piecing Together the Application Jigsaw

57

2. To do so, choose the required locales from the Available locales list and click the Add button to add them to the Selected locales list.

3. Click OK to return to the Localization window, shown in Figure 4-6.

to return to the Localization window, shown in Figure 4-6. Figure 4-6: Localizing the application name.

Figure 4-6: Localizing the application name.

Elements that can be localized appear with a triangle icon on the left side.

4. To add the required localized strings for each lan- guage, start by clicking the triangle icon to reveal a list of the locales selected in Step 2.

Figure 4-6 shows the application name expanded to show the Italian and Korean locales. In this example, you can provide a localized version of the applica- tion name for these locales by entering text in the box labeled Selected Element:Name.

5. Choose a locale from the list and type the localized text in the Selected Element box at the bottom of the window.

6. Repeat Step 5 for all the elements and locales for which you want to provide localized content.

7. Choose Save or close the config.xml window when you’re done.

Preferences

A preference is a persistently stored name-value pair that is associated with the application. You usually use a preference

58 Part II: Getting Practical

to store application settings, such as whether a calendar app was last opened in month or day view, for example.

To add a preference name-value pair to your application’s config.xml file, select the Preferences tab and click the Add button. A new row is added to the Preferences table, and you can add the name, value, and whether the preference is read-only.

Tizen

In the Tizen tab, you can enter any Tizen-specific information about your application. This information includes the applica- tion’s id, the minimum version of the APIs that the application supports, the location of the start file if hosted on an external server, settings such as screen orientation, support for con- text menus, background support, encryption and installation location, and any app control information.

Table 4-4 shows the attributes that you can set in the Tizen tab if your application provides an application control for other applications to use.

Table 4-4

Tizen Information

Type

Description

src

Page that provides the functionality described by operation, scheme, and mime

operation

Action to be performed by the application

scheme

URI scheme to describe what type of URI can be handled

mime

mime type that can be handled

Source

The Source tab shows the XML content of the config.xml file. You can use this tab to view the values you’ve set up using the other configuration tabs. You can also manually edit the file.

configuration tabs. You can also manually edit the file. The config.xml file must conform to the

The config.xml file must conform to the XML formatting rules and the W3C specification requirements, so be careful when manually editing this file.

Chapter 4: Piecing Together the Application Jigsaw

59

Start file

The start file is the file that is loaded by the web runtime on application startup. The New Project wizard provided in the IDE creates a default application start-up file for you called index.html.

Your start file doesn’t have to be named index.html. You can give it any name you like, but you must define the name of the start file in the content element’s src attribute in the config.xml file. For example:

<content src=”my-app.html”/>

The start file is where you create your web application’s visual content, structure, and controls. You can edit this file using the HTML Web Page Editor tools provided in the IDE, as described in Chapter 3.

JavaScript

If your application requires any interactive elements, you can program them using JavaScript code. You can include this code directly in your index.html file within a <script> element, or you can load it from an external JavaScript file. The New Project wizard provided in the IDE creates a default external script file called main.js for you to add to your JavaScript code.

In order to load your external JavaScript code, you must include your script in the header section of the index.html file using the following code:

<script src=”js/main.js”></script>

If you’re using multiple JavaScript files, don’t forget to load them all in the header section of the index.html file. index.html file.

If you’ve minified your JavaScript files, don’t forget to include this version in the index.html file instead of the original – for example: index.html file instead of the original – for example:

<script src=”js/main.js.min”></script>

60 Part II: Getting Practical

Style sheet

Generally, your index.html file should contain only the basic content and structure of your application, with any style and presentation information contained within style sheets. The New Project wizard provided in the IDE creates a default style sheet called style.css, which you can use to apply styles and presentation information to the elements used in your application.

To load a style sheet, include the following link in the header section of the index.html file:

<link rel=”stylesheet” href=”css/style.css” />

You can preview the look and feel of any style elements using the CSS Preview tool, as described in Chapter 3.

using the CSS Preview tool, as described in Chapter 3. If you’ve minified your CSS files,

If you’ve minified your CSS files, don’t forget to load this version in the index.html file instead of the original – for example:

<link rel=”stylesheet” href=”css/style.css.min” />

Application icon

The icon.png file is the application’s default icon file and should contain a logo or some other graphical representation of the application.

The use of this icon file depends on the Tizen device you’re developing for, but it generally appears in the application menu screen.

Author signature

An author can digitally sign any application to ensure its integrity. This signature file, which cryptographically covers all nonsignature files within the application package, is the author signature.

Chapter 4: Piecing Together the Application Jigsaw

61

This file isn’t mandatory in the package, but if the application

is signed by the author, only one author-signature.xml

file can exist.

Check out the SDK Help for more details about creating an author signature.the author, only one author-signature.xml file can exist. Distributor signature A distributor can also sign an

Distributor signature

A distributor can also sign an application to ensure its integ-

rity. This signature file, which cryptographically covers all nonsignature files and the author signature, if it exists, is the distributor signature.

This file isn’t mandatory in the package. The package can con- tain more than one distributor signature, so the naming con- vention is signature1.xml, signature2.xml, and so on.

Check out the SDK Help for more details about creating a dis- tributor signature.vention is signature1.xml , signature2.xml , and so on. You can find additional information about author

You can find additional information about author and dis- tributor signatures in the XML Digital Signatures for Widgets specification at www.w3.org/TR/widgets-digsig.

Third-party source code or libraries

Sometimes you may want or need to use external libraries to implement UI controls or functionality that isn’t a standard part of the Tizen platform. Using third-party libraries is a really simple way to reuse existing technology and implement advanced features in your application.

After you add the libraries to the project and load them in the start file, you can use them in your application code.

the start file, you can use them in your application code. Before making use of any

Before making use of any third-party source code or libraries

in your application, please ensure that you check the license

thoroughly and comply with the terms and conditions of use.

62 Part II: Getting Practical

Adding source code or libraries to a project

You can add source code or libraries to your application proj- ect in several ways:

You can add a new file by right-clicking your project in the Project Explorer panel and choosing New from the menu. You can then choose to add a new folder or source file (html, css, and so on) to the project.

You can add existing files to your project by right-clicking the required project folder in the Project Explorer panel and choosing ImportGeneralFile System. Then choose the files you want to import. Alternatively, you can add files by dragging and dropping them into the project via the Project Explorer panel.

Adding source code or libraries in index.html

In order to use any external source code or libraries in an application, you need to load them in the application’s start file, index.html. In this example, all the external source code and libraries shown in Listing 4-2 are loaded in the head section of the index.html document.

Listing 4-2

Loading External Source in index.html

<link href=”css/wijmo/jquery.wijmo.wijprogressbar.css” rel=”stylesheet” type=”text/css” /> <link href=”css/wijmo/jquery.wijmo.wijutil.css” rel=”stylesheet” type=”text/css” /> <link href=”css/wijmo/jquery.wijmo.wijexpander.css” rel=”stylesheet” type=”text/css” /> <link href=”css/wijmo/jquery-wijmo.css” rel=”stylesheet” type=”text/css” /> <link href=”css/style.css” rel=”stylesheet” type=”text/css” />

<script src=”js/jquery-1.7.min.js”></script> <script src=”js/jquery-ui-1.8.12.custom.min.js”></script> <script src=”js/wijmo/jquery.wijmo.wijutil.min.js” type=”text/ javascript”></script> <script src=”js/wijmo/jquery.wijmo.wijtooltip.min.js” type=”text/javascript”></script>

Chapter 4: Piecing Together the Application Jigsaw

63

<script src=”js/wijmo/jquery.wijmo.wijprogressbar.min.js” type=”text/javascript”></script> <script src=”js/wijmo/jquery.wijmo.wijexpander.min.js” type=”text/javascript”></script> <script src=”js/main.js”></script>

Make sure that you load your JavaScript files in the order dictated by any dependencies. For example, in this code, the main.js file is loaded last because it’s dependent on features provided in the wijmo libraries. main.js file is loaded last because it’s dependent on features provided in the wijmo libraries.

Putting the Pieces Together

In the previous section, we identify the role of each piece of

the Tizen application jigsaw. In this section, we explain how you can slot together this mix of your own JavaScript code, third-party JavaScript libraries, and services provided by websites and even other applications to create your own Tizen web app.

We introduce two sample apps to demonstrate what you can do with Tizen. The first is one of the simplest possible web apps, while the other is a more complex example. These examples should give you a good idea of how different types of Tizen applications are put together so that you’re ready to create your own.

Example 1: A 5-minute application

A simple Tizen web application is a package that contains

only a start file and a configuration file. In this example, we show you how to quickly create a simple web application to run on your mobile device.

The most simple web application you can create is a hosted- web application. Basically, it’s an application that launches a mobile web-page into your web-runtime.file. In this example, we show you how to quickly create a simple web application to

64 Part II: Getting Practical

Creating the application project

Create an application using the Basic Template as described in Chapter 3. Because this template contains more parts than you actually need, you can delete the css, js, and images folders in the project from the Project Explorer panel.

Editing the icon file

You should create an icon file with an image or logo repre- senting your application so that it can be displayed in the menu.

your application so that it can be displayed in the menu. The size and format of

The size and format of this icon depends on the platform you’re developing for.

Replace the default icon.png file in your project with the new icon.

Editing the configuration document

Open the Configuration Editor and modify the default config.xml file.

Add the application identifier, name, version, and any other information you want to include. On the Access tab, add any relevant network resource URLs for ensuring that your application has access to the website.

When complete, your config.xml should look similar to the one shown in Listing 4-3.

Listing 4-3

config.xml

<?xml version=”1.0” encoding=”UTF-8”?> <widget xmlns=”http://www.w3.org/ns/widgets” xmlns:tizen=”http://tizen.org/ns/widgets” id=”http:// yourdomain/My-App” version=”1.0” viewmodes=”fullscreen”> <icon src=”icon.png”/> <content src=”index.html”/> <name>My-App</name> <description>Hosted web application example</description> <access origin=”http://m.foodnetwork.com” subdomains=”true”/>

Chapter 4: Piecing Together the Application Jigsaw

65

<tizen:application id=”NylyS9tSdz.My-App” package=”NylyS9tSdz” required_version=”1.0”/> </widget>

When you save your changes, the IDE will verify that the

config.xml file is valid. If any errors occur, the IDE displays

a warning dialog box.

Editing the start file

Open the index.html and replace the content with the code shown in Listing 4-4, substituting the URL for your required website in the script to set the window.location.

Listing 4-4

index.html

<!DOCTYPE html> <html> <head> <meta charset=”utf-8” />

<meta name=”viewport” content=”width=device-width,

initialscale=1.0,

maximum-scale=1.0”>

<meta name=”description” content=”5-minute application”/>

<title></title> <script type=”text/javascript”> window.location=”http://m.foodnetwork.com”; </script> </head> <body></body> </html>

Running the application

After you make these changes, you can build the application and run it on your device, the Emulator (see Figure 4-7), or the Simulator. For instructions on running the application, see Chapter 5.

For instructions on running the application, see Chapter 5. If you haven’t set the network URL(s)

If you haven’t set the network URL(s) correctly in the

config.xml file, the application won’t be able to display the web page, and the system will launch the device’s browser and display it there instead.

66 Part II: Getting Practical

66 Part II: Getting Practical Figure 4-7: Simple app running in the Emulator. Example 2: Something

Figure 4-7: Simple app running in the Emulator.

Example 2: Something a bit more complicated

In this example, we introduce the use of JavaScript, CSS, and Tizen APIs in a web application. Rather than showing you a step-by-step guide to creating this more complicated app, we look at the default Systeminfo sample application provided in the SDK.

First, you need to build and run the Systeminfo app from the Tizen SDK. You can find detailed instructions in the Chapter 3.

Chapter 4: Piecing Together the Application Jigsaw

67

If you already know your way around, just choose FileNew

Tizen Web Project from the menu. Then choose Systeminfo from the list of samples and build and run the app in the Simulator or Emulator. The opening screen is shown in Figure 4-8.

This sample application uses the Tizen Web UI Framework

and demonstrates how to use the System Info Tizen APIs. It’s

a good starting point to understand how to include JavaScript

and CSS functionality in a web application and also to see how to use the Tizen APIs.

functionality in a web application and also to see how to use the Tizen APIs. Figure

Figure 4-8: Systeminfo sample application.

68 Part II: Getting Practical

Using the Tizen APIs

Because this application is using Tizen APIs to get information from the device, the following privileges are registered in the config.xml file:

<tizen:privilege

name=”http://tizen.org/privilege/application.read”/>

<tizen:privilege

name=”http://tizen.org/privilege/systeminfo”/>

When these features are registered, the application can immediately access the functionality provided by the Application and Systeminfo objects. So for example, to retrieve the current battery level on the device, the following code is used:

tizen.systeminfo.getPropertyValue(“BATTERY”, onBatterySucess, onError);

The getPropertyValue() method is an asynchronous method, which returns immediately. The platform attempts to retrieve the battery level and either returns the value in the onBatterySuccess() callback function, or an error is returned in the onError() callback function. Many of the device APIs provided in the Tizen platform use this common technique.

Looking at index.html

At the beginning of the index.html file is the head section of the document. This section contains elements for defining the character set and an application description. This section is also where any JavaScript files and style sheets are loaded.

In this index.html, we load a single style sheet and JavaScript files for jQuery, the Web UI Framework, and our app:

<head> <meta charset=”utf-8”/> <meta name=”description” content=”Systeminfo API Tutorial”/> <title>Systeminfo</title> <script src=”tizen-web-ui-fw/latest/js/jquery.js”></script> <script src=”./js/config.js”></script>

Chapter 4: Piecing Together the Application Jigsaw

69

<script src=”tizen-web-ui-fw/latest/js/tizen-webui-fw-libs. js”></script> <script src=”tizen-web-ui-fw/latest/js/tizen-web-ui-fw. js” data-framework-viewportscale=”false”></script> <script type=”text/javascript” src=”./js/main.js”></script>

<link rel=”stylesheet” type=”text/css” href=”./css/style. css”/>

</head>

This index.html file is a little more complicated than the one in Example 1 because it also contains some elements in the document body. The application contains two pages: one for the list of System Info items and the other for displaying the data.

The first page, with the id main, contains text in the header area, a list element in the content area, and control bar ele- ment in the footer area:

<div data-role=”page” id=”main” data-add-back-btn=”true”> <div data-role=”header” data-position=”fixed”> <h1>System Information</h1> </div> <div data-role=”content”> <ul data-role=”listview”> <li id=”storage-info”>Storage</li> <li id=”battery-info”>Battery</li> <li id=”cpu-info”>CPU</li> <li id=”display-info”>Display</li> <li id=”orientation-info”>Device orientation</li> </ul> </div> <div data-role=”footer” data-position=”fixed”> <div data-role=”tabbar” data-style=”toolbar”> </div> </div> </div>

The second page, with the id info, contains text in the header area and a list element in the content area:

<div data-role=”page” id=”info” data-add-back-btn=”true”> <div data-role=”header” data-position=”fixed”> <h1 id=”info-title”></h1> </div>

70 Part II: Getting Practical

<div data-role=”content”> <ul data-role=”listview” id=”info-list”> </ul> </div> <div data-role=”footer” data-position=”fixed”> </div> </div>

Figuring out what is in main.js

JavaScript code is event driven, triggered by a user action or an external event, so JavaScript files mainly contain a collec- tion of related functions. Any variables that are defined in a JavaScript file will get initialised when the JavaScript file is loaded from the index.html file.

If your application needs to perform any initialisation actions on startup, you can do this when the page is loaded. Because this example uses the Tizen Web UI Framework, which is based on jQueryMobile, initialisation occurs when the page- init event is fired. So, for example, to handle the back button being pressed, you add the following code in your main.js file:

$(document).delegate(“#main”, “pageinit”, function() { $(“#main .ui-btn-back”).bind(“vclick”, function() { tizen.application.getCurrentApplication().exit(); return false;

});

});

You can also bind any other actions to events during initiali- sation in the same way. In this sample application, all the click events for the items in the list elements are implemented in this way:

$(“#display-info”).bind(“vclick”, getSystemProperty(“DISPLAY”, return false;

});

function()

{

onDisplaySuccess);

The remainder of the main.js file contains the functions for retrieving system information and formatting it for display on the page. These functions are all invoked by the actions that were bound to the user events during initialisation. This is how the appropriate piece of system information is displayed when the user clicks an item in the list.

Chapter 4: Piecing Together the Application Jigsaw

71

Defining style attributes in style.css

In a Tizen Web UI Framework application, the style attributes are defined in theme files – for example, in the tizen-web- ui-fw-theme.css file. If you want to override any of these style or layout attributes or add any custom ones, you can do so in the style.css file.

For example, in this application, the following colour attribute is set for the list label element:

li>label {

color:#646464;

}

You can modify style and layout attributes and preview them immediately using the CSS Preview feature provided by the IDE, as shown in Chapter 3.

Preview feature provided by the IDE, as shown in Chapter 3. Multiple style sheets can be

Multiple style sheets can be used in your application to style your elements, but due to the way that cascading style sheets are merged, you must be careful about the order they are linked to in the index.html document head.

Looking at other options

Performing the initialization while handling the pageinit event is just one way to write your initialisation code. You can also take several other approaches. If you’re using jQuery, then you usually perform your initialisation when the document- ready event is triggered, which is when all the HTML elements in the page have finished loading.

Alternatively, you may decide to do your initialisation when the standard window onload event is triggered. The drawback of the onload event

is that it’s generated only when all the content of a page, including images, has loaded. This situation may be a problem if your page contains images and other content stored on remote servers, which may take a while to load.

Ultimately, you should choose whichever method is suitable for your application, based on the application type, the quantity of content that it displays, and the type of initialisation actions you need to perform.

72 Part II: Getting Practical

Chapter 5

TestingandDebugging

Chapter 5 TestingandDebugging In This Chapter ▶ Testing your app on the Simulator, Emulator, and a

In This Chapter

Testing your app on the Simulator, Emulator, and a device

Debugging your application

Emulator, and a device ▶ Debugging your application I n an ideal world, your application will

I n an ideal world, your application will emerge fully formed, free from bugs and working smoothly on all released

devices – some of which may not have even been thought of yet. But because you probably don’t live in an ideal world, it’s vital to test your app at all stages of the development process. From adding the first few elements of functionality and user interface ideas right through to the final finishing touches before release, you need to ensure that your app is tested on as many devices and in as many situations as possible.

The Tizen SDK includes a set of tools to help you with testing and debugging throughout your development process. The Simulator and Emulator let you test your application before you run it on a device, while the Remote Web Inspector helps you track down the bugs that creep into even the most carefully written project.

In this chapter, we give you a tour of these tools and explain how you can use them to make sure that your app is a well prepared as possible when you, as its proud parent, send it out into the wide world.

This chapter refers to the tools included with the 2.1 Magnolia release of the Tizen SDK.

74 Part II: Getting Practical

Testing Your App

The quickest way for you to test and debug your applications without having to package and install them on the Emulator or a device is to use the Simulator.74 Part II: Getting Practical Testing Your App The Simulator is based on the Ripple UI

The Simulator is based on the Ripple UI framework and runs in the Google Chrome browser, so you must have Chrome installed on your development machine. The Simulator uses the Chrome/WebKit backend to render your application’s layout, and you can debug your app using all the standard Chrome development features, including the Web Inspector.

In the Simulator, the Tizen device APIs are implemented using JavaScript, so you may see differences between running your app in the Simulator and running on the Emulator or a real device.

In the Simulator shipped with the Tizen 2.1 release, the imple- mentation of some of the APIs may be incomplete, check the Tizen 2.1 Release Notes for more information.the Simulator and running on the Emulator or a real device. Running in the Simulator To

Running in the Simulator

To run your application in the Simulator, right-click your project in the Project Explorer window and choose Run As Tizen Web Simulator Application or click the Run icon at the top of the IDE window and choose Simulator from the Run As dialog box, shown in Figure 5-1.

of the IDE window and choose Simulator from the Run As dialog box, shown in Figure

Figure 5-1: Run As dialog box.

Chapter 5: Testing and Debugging

75

Figure 5-2 shows the Simulator running in a Google Chrome browser window.

The Simulator lets you control device settings so that the simulated environment is closer to the one you’re develop- ing for. You can also inject events, such as incoming calls, location information, and sensor values, to check that your app responds to these events correctly. The Tizen Emulator’s Event Injector is even more powerful; we discuss it in more detail in the ‘Using the Event Injector’ section, later in this chapter.

the Event Injector’ section, later in this chapter. Press F12 to launch the Web Inspector to

Press F12 to launch the Web Inspector to debug your code and view console log messages.

Inspector to debug your code and view console log messages. Figure 5-2: The Simulator. Testing with

Figure 5-2: The Simulator.

Testing with the Emulator

The Simulator is best used for perfecting the look and feel of your app and testing functionality that isn’t Tizen specific. For testing device specific functions, you’ll want to turn to the Emulator.

76 Part II: Getting Practical

The Emulator in the Tizen SDK is based on the open source QEMU project. You can think of the Emulator as a strict imple- mentation of a device specification, matching the device much more closely than the Simulator. It emulates the entire plat- form, including built-in applications, user settings, and access to the file system, including movies and images, just like a real device.

You can also control the screen size and pixel density of the Emulator image, inject events into your application, and create multiple Emulator images, all of which help ensure your app is running smoothly before you run it on a real device.

Of course, you still encounter differences when testing on the Emulator versus a device – for example, Bluetooth and Wi-Fi aren’t supported in the current version. However, if you don’t have access to a device, the Emulator is the next best thing.

In version 2.1 of the Tizen SDK, the Emulator supports only images that use the x86 architecture, but later versions will support ARM.

You can enhance the performance of x86 Emulator images on the host machine using hardware virtualization support built into Intel processors that support Virtualization Technology (VT). If you’re running on Windows or Mac OS X, you’ll need to install the HAXM (Intel Hardware Accelerated Executed Manager) soft- ware to enable this feature, while on Linux, you need to use a Kernel Based Virtual Machine (KVM). This feature really makes a big difference to the performance of the Emulator.

makes a big difference to the performance of the Emulator. You can find the system requirements

You can find the system requirements and instructions for installing the Intel HAXM on Windows or Mac OS X on the developer website at:

https://developer.tizen.org/downloads/

sdk/installing-sdk/hardware-accelerated-

execution-manager

Using the Emulator Manager to create an image

Before you can launch your application in the Emulator, you need to use the Emulator Manager to create an Emulator

Chapter 5: Testing and Debugging

77

image. To launch the Emulator Manager, click the Emulator Manager icon in the Connection Explorer panel. The Emulator Manager window appears, as shown in Figure 5-3.

You can also launch the Emulator Manager from the command line or from the application menu.The Emulator Manager window appears, as shown in Figure 5-3. Figure 5-3: The Emulator Manager. To

Manager from the command line or from the application menu. Figure 5-3: The Emulator Manager. To

Figure 5-3: The Emulator Manager.

To create a new Emulator image:

1. In the Emulator Manager, click the Create New option for the version of the platform you’re targeting.

The detail panel on the right of the window now includes a Create button.

2. Click the Create button and give the Emulator a name.

Confirm and Cancel buttons now appear at the bottom of the window.

You can configure several options for the Emulator, including the display resolution and density.

If your system supports hardware acceleration through KVM or HAXM, make sure that the HW Virtualization option is marked as Enabled.the Emulator, including the display resolution and density. 3. Click Confirm. Your new Emulator appears in

3. Click Confirm.

Your new Emulator appears in the Emulator Manager list.

78 Part II: Getting Practical

Launching an Emulator instance

To launch an Emulator instance, select the required Emulator image in the Emulator Manager list and click the Launch button. The Emulator launches. After the Emulator is con- nected, it appears in the Connection Explorer panel.

You can configure several options of the running Emulator. Simply right-click the Emulator and choose items from the menu shown in Figure 5-4. You can set the device rota- tion and the scale, take screenshots, and set the USB key- board options. You can also launch an sdb shell command window by clicking the shell option. For more about the Smart Development Bridge (SDB), see the section ‘The Smart Development Bridge’, later in this chapter.

see the section ‘The Smart Development Bridge’, later in this chapter. Figure 5-4: The Emulator configuration

Figure 5-4: The Emulator configuration menu.

Chapter 5: Testing and Debugging

79

Using the Connection Explorer

The Connection Explorer is used to view and manage con- nected devices – both Emulator instances and actual devices. You can also use the Connection Explorer to view and modify the contents of the device or Emulator’s file system. Figure 5-5 shows the file system of a connected device.

Figure 5-5 shows the file system of a connected device. Figure 5-5: Viewing and modifying the

Figure 5-5: Viewing and modifying the Emulator file system.

A great feature of the SDK is that it allows you to test your application on multiple Emulators and devices simultane- ously. This ability is really useful when you want to com- pare your UI design running on multiple different screen resolutions. When you use this feature, the currently active device or Emulator instance is highlighted in the Connection Explorer, as shown in Figure 5-6.

Emulator instance is highlighted in the Connection Explorer, as shown in Figure 5-6. Figure 5-6: The

Figure 5-6: The Connection Explorer.

80 Part II: Getting Practical

This highlighting is important because it helps you ensure that you’re launching your application or injecting events into the correct Emulator instance.

Running your application in the Emulator

To run your application in the Emulator, right-click your proj- ect in the Project Explorer window and choose Run AsTizen Web Application or click the Run icon at the top of the IDE window and choose web application from the Run As dialog box, shown in Figure 5-7.

application from the Run As dialog box, shown in Figure 5-7. Figure 5-7: The Run As

Figure 5-7: The Run As dialog box.

Your application is then copied, installed, and run on the currently active running Emulator. Figure 5-8 shows the Systeminfo sample application launched in the Emulator.