Tizen for Dummies

8/9/2019 Tizen for Dummies

1/213


2/213


3/213


4/213

Tizen™ For Dummies®, Tizen Developer Conference Edition

Published byJohn Wiley & Sons, LtdThe AtriumSouthern GateChichesterWest SussexPO19 8SQEngland

For details on how to create a custom For Dummies book for your business or organisation, [email protected] . For information about licensing the For Dummies brand forproducts or services, contact BrandedRights&[email protected] .

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 ortransmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanningor otherwise, except under the terms of the Copyright, Designs and Patents Act 1988 or under theterms 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 forpermission 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 Restof Us!, The Dummies Way, Dummies Daily, The Fun and Easy Way, Dummies.com and related tradedress 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 atrademark of the Linux Foundation. All other trademarks are the property of their respectiveowners. John Wiley & Sons, Inc., is not associated with any product or vendor mentioned in thisbook.

LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER, THE AUTHOR, ANDANYONE ELSE INVOLVED IN PREPARING THIS WORK MAKE NO REPRESENTATIONS ORWARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OFTHIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUTLIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAYBE CREATED OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE ANDSTRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORKIS SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERINGLEGAL, 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 ARISINGHEREFROM. THE FACT THAT AN ORGANIZATION OR WEBSITE IS REFERRED TO IN THIS WORKAS A CITATION AND/OR A POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEANTHAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFORMATION THE ORGANIZATIONOR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. FURTHER, READERSSHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE CHANGEDOR 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 printmay 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

mailto:[email protected]:[email protected]:BrandedRights&[email protected]:BrandedRights&[email protected]:BrandedRights&[email protected]://www.customdummies.com/mailto:[email protected]:[email protected]:[email protected]:[email protected]://localhost/var/www/apps/conversion/tmp/scratch_1/Dummies.comhttp://localhost/var/www/apps/conversion/tmp/scratch_1/Dummies.comhttp://localhost/var/www/apps/conversion/tmp/scratch_1/Dummies.commailto:[email protected]:[email protected]://www.customdummies.com/mailto:BrandedRights&[email protected]:[email protected]


5/213

Contents at a Glance Introduction ...................................................... 1

Part I : Introducing Tizen .................................... 5 Chapter 1: Getting an Inside Look at Tizen ............................................ 7

Chapter 2: Exploring the Tizen Architecture ....................................... 17

Part II : Getting Practical ................................. 29Chapter 3: Getting Started ..................................................................... 31Chapter 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 .................................................. 129Chapter 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 ................................ 189Chapter 14: Ten Really Useful Resources........................................... 191

Chapter 15: Ten Reasons You Should Develop for Tizen ................. 195

Acknowledgments ......................................... 199


6/213


7/213

Table of Contents 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 ................................................. 3Part 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 . . . . . . . . . . . .7Discovering 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 .......................................... 12Comparing 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


8/213

Exploring the Tizen Device APIs ............................................ 22

Tizen ................................................................................ 23

Alarm ............................................................................... 24Application ..................................................................... 24

Bookmark ........................................................................ 24

Bluetooth ........................................................................ 24

Calendar .......................................................................... 24

CallHistory ...................................................................... 24

Contacts .......................................................................... 25

Content ............................................................................ 25

DataControl .................................................................... 25

DataSynchronization ..................................................... 25Download ........................................................................ 25

Filesystem ....................................................................... 25

MessagePort ................................................................... 26

Messaging ....................................................................... 26

NetworkBearerSelection ............................................... 26

NFC .................................................................................. 26

Notification ..................................................................... 26

Package ........................................................................... 27

Power .............................................................................. 27Push ................................................................................. 27

SecureElement ............................................................... 27

SystemInfo ...................................................................... 27

SystemSetting ................................................................. 27

Time ................................................................................. 28

Part II : Getting Practical ................................. 29

Chapter 3: Getting Started . . . . . . . . . . . . . . . . . . . . . . . . .31Installing 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 ...................................................................... 39HTML Web Page Editor ................................................. 39

HTML Preview ................................................................ 41

CSS Preview .................................................................... 41

Minifying CSS and JavaScript ................................................. 42

CSS ................................................................................... 42

JavaScript ....................................................................... 43

Tizen For Dummies, Developer Conference Editionvi


9/213

Table of Contents vii

Building Your Project .............................................................. 43

Running Your Project .............................................................. 43

Help Is on the Way ................................................................... 44Help 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 ............................ 50config.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 .......................... 61Adding 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 ..................................... 65Example 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


10/213


11/213


12/213

Tizen For Dummies, Developer Conference Edition x

Chapter 11: Messaging . . . . . . . . . . . . . . . . . . . . . . . . . . .159

Introducing the Messaging API ............................................ 160Message 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 ......................................................... 163Filling 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


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


Creating a Task ....................................................................... 184

Retrieving Tasks ..................................................................... 185Setting an Alarm ..................................................................... 187


13/213

Table of Contents xi

Part IV : The Part of Tens ................................ 189

Chapter 14: Ten Really Useful Resources . . . . . . . . . . .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................................................................ 194The Linux Foundation on YouTube ..................................... 194

And . . . You ............................................................................. 194

Chapter 15: Ten Reasons You ShouldDevelop for Tizen . . . . . . . . . . . . . . . . . . . . . . . . . . . . .195

Tizen Is Easy to Learn ........................................................... 195

Tizen Doesn’t Reinvent the Wheel ....................................... 196

Tizen Supports the Latest Standards .................................. 196Tizen 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


14/213

Tizen For Dummies, Developer Conference Edition xii


15/213

IntroductionW

elcome to Tizen For Dummies. This book will be yourbest friend to help you understand the technologies

and story behind the Tizen platform.

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

About This BookThe 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 conceptsare the heart of this book.

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

Conventions Used in This BookWhen this book was printed, some code or web addressesmay 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 usingthis code or one of these web addresses, just type exactly

what you see in this book, pretending as though the line breakdoesn’t exist.

When you’re choosing a series of menu commands, we use ➪ to indicate the different commands you’re choosing. So whenyou see choose File➪New➪Tizen Web Project, you shouldsimply click the File menu, click New from the menu thatappears, and then click Tizen Web Project.

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


16/213

Tizen For Dummies, 2nd Edition2

In addition, we often refer you to the Tizen website or the SDKHelp file. You can open the Help file from within the Tizen

IDE by choosing Help➪Help Contents. You can also find helponline at the Tizen website at https://developer.tizen.org/documention.

Who Should Read This BookWhen writing this book, we made a few assumptions aboutyou, the reader. You’re either:

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

✓ A technical manager, evaluating the opportunities Tizenoffers for your next project on mobile.

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

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

If any of the preceding applies to you, or you just stumbledupon this book and found your curiosity piqued, the infor-

mation presented here will give you a good idea of what theTizen 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 isdivided into four parts.

https://developer.tizen.org/documentionhttps://developer.tizen.org/documentionhttps://developer.tizen.org/documentionhttps://developer.tizen.org/documention


17/213


18/213

Tizen For Dummies, 2nd Edition4

Icons Used in This BookThroughout 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 saveyou time or make a task easier.

This icon marks information you won’t want to forget.

Be careful when you see this icon!

This icon highlights information that is nice to know but notcrucial to the discussion. Feel free to skip this information ifyou’re not interested in it.

Where to Go from HereThe content in this book is designed to be easy to navigate.Dip in and dip out of each chapter as the mood takes you. Wedon’t expect you to read the book cover to cover, but if youdo make it to the end before your friends do, please don’tspoil 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 ownexperience to help kick-start your Tizen development efforts.

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

If you’re new to web development, it may feel at times as ifyou’re navigating uncharted waters. Think of this book asyour 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, allmixed together to create powerful apps.


19/213

Part IIntroducing Tizen


20/213

In this part . . .

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

pack as you start to explore this new platform. You learnabout Tizen’s place in the mobile landscape and what

makes this mobile platform different from the rest. Youexplore the structure of a typical open source platform,see where Tizen fits in and find out how you can getinvolved in the Tizen community.

In Chapter 2 you learn how Tizen is organized and dis-cover how Tizen web applications look and behave likenative 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.


21/213


22/213

Part I: Introducing Tizen8

Tizen has solid open source foundations, and it makes useof established open source components, such as WebKit,

GStreamer, Xorg, and Connman. If you want to know howTizen compares to other open source mobile platforms, seethe section ‘Tizen’s place in the mobile world,’ later in thischapter.

You can find out more about Tizen and the Tizen Associationat 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 HTML5is extensive and powerful. It includes support for most of themajor W3C APIs included under the banner of HTML5, as wellas many supplementary web APIs.

The first prerelease version of Tizen emerged blinking intothe spotlight of the developer community in January 2012.The final 1.0 version, code named Larkspur and includingLinux and Windows versions of the SDK and the Tizen WebUI framework, was released in May, just before the first TizenDeveloper’s Conference in San Francisco. At this event, theattendees 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, whichwas released in May 2013, and introduced many new webAPIs. The Tizen 2.0 SDK was the first to include C++ APIswhich you can use to create native apps. However, web appsare still the main way of developing for Tizen and that’s thefocus of this book.

Tizen’s place in the mobile world Our years of mobile development has taught us one simplefact – creating a mobile platform is hard. The average smartdevice includes a dazzling range of technologies that putdesktop computers to shame. We expect our smart devicesto entertain us, help us find our way home, run our schedulesand just occasionally make phone calls. No one person can be

http://www.tizen.org/http://www.tizenassociation.org/http://www.tizenassociation.org/http://www.tizenassociation.org/http://www.tizen.org/


23/213

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 differentperspective that users, application developers and platformdevelopers have on the way a typical open source platform isorganised. Put yourself in the shoes of each of these peopleas we show you how Tizen fits in to the mobile open sourcelandscape.

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

platform

The way platforms are organized is often described in termsof an onion. You gradually peel away the layers until youreach the core.

At the top layer, we have applications and services. It’s what’scontained here that helps end users make their decisionabout 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’llfind the APIs and SDKs that allow developers to create appli-cations. It’s where you’ll find Tizen and the APIs discussed inthis book. Tizen has many similarities to other platforms, butyou discover the differences too.


24/213


Delving deeper we come to the middleware. Many middle-ware components will come from conventional desktop open

source projects. Different platforms will pick and choosewhich open source components to include. The great thingabout open source software is the range of componentsavailable.

The lowest layer is the kernel. For open source mobile plat-forms, this layer will generally be a Linux kernel. The kernelinteracts 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 bemost interested in.

Figuring Out What MakesTizen Different

When Tizen was announced, some of the most commonquestions asked by developers, analysts and users includedwhether a new platform was needed at all and what makesTizen 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 differentfrom the rest.

Tizen is based on standards HTML5 is a set of standards that enjoys support from acrossthe industry, and it’s a standard that Tizen supports verywell. HTML5 supports multiple browsers, operating systems,and devices. In its latest incarnation, HTML5 provides greateraccess 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 thecode once and running it on multiple platforms. The extent towhich a platform supports the HTML5 specification is vital fordevelopers who want to make the most of the latest features.


25/213


Tizen supports most of the official HTML5 standards, alongwith some supplementary and legacy standards. Designed to

get the most out of HTML, JavaScript, and CSS, Tizen’s webengine is tuned to within an inch of its life to squeeze bestperformance out of these technologies.

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

Tizen is openAs an open source software platform, Tizen provides manyopportunities for both individuals and Original EquipmentManufacturers (OEMs) – the people that make the phones.Anyone can grab the source code and customize it to meettheir 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. Softwareengineering is changing, and it’s a challenge for an individualor even an organization to build something without usingopen 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 openAt any gathering of open sourcedevelopers, the one subjectguaranteed to cause an argument –aside from which pizza restaurant toorder from – is ‘What is the definition

of open source?’In this book, we describe Tizen asopen source because the source

code to the platform is freelyavailable, anyone can download it,and you can use it for any purpose inany project. We accept that this maynot meet everyone’s definition of

open source software, but this is ourdefinition, and we’re sticking to it.

http://html5test.com/http://html5test.com/http://html5test.com/


26/213


Tizen is innovativeInnovation can come from many sources. It may be an ideafrom an individual or an organisation’s R&D projects, butmost innovation comes from collaboration.

The Tizen Project brings these different resources and knowl-edge together. Everyone can contribute ideas and innovationsto 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 isthat being open source doesn’t necessarily guarantee successor innovation. A project must have strong industry support.

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

At the time of writing, the board members of the TizenAssociation are Intel, Samsung, Fujitsu, Huawei, KT, NEC

Casio Mobile Communications, NTT docomo, Orange,Panasonic Mobile Communications, SK Telecom, Sprint andVodafone.

Comparing Tizen toOther Platforms

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


27/213


Of the open source alternatives, WebOS and Firefox OS areboth 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 AssociationThe Tizen Association and the Tizen Project, under the LinuxFoundation, are complementary to each other. The industryand market-facing aspects of Tizen are driven by the TizenAssociation, while the engineering of the Tizen software plat-form takes place within the Tizen open source project hostedby 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 ofthe Tizen Association. The board decides on the platformrequirements, 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 TizenProject. Intel and Samsung, as the two primary platform con-tributors, chair the TSGs, and other interested parties canparticipate.

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

http://www.tizenassociation.org/http://www.tizenassociation.org/http://www.tizenassociation.org/http://www.tizenassociation.org/


28/213


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 Tizenplatform, you can submit your changes to the Gerrit systemfor code review. The maintainer, release engineers, and theQA team will review your patches and decide whether they

will be accepted based on the quality of your code. Once thechanges are approved, you can submit them to the Gerritsystem and Gerrit will merge the changes into the Tizen codebase. You can find a guide to submitting changes at:

https://source.tizen.org/documentation/

developer-guide/submitting-patches

The Tizen wiki is available for collaborating on documentation

related to the Tizen project:

https://wiki.tizen.org/wiki/Main_Page

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

Mailing list and IRC Several mailing lists and an IRC channel enable communitymembers to share information and ask questions about theTizen platform.

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

www.tizen.org/community/mailing-lists

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

www.tizen.org/irclogs

https://source.tizen.org/documentation/developer-guide/submitting-patcheshttps://source.tizen.org/documentation/developer-guide/submitting-patcheshttps://wiki.tizen.org/wiki/Main_Pagehttp://www.tizen.org/community/mailing-listshttp://www.tizen.org/irclogshttp://www.tizen.org/irclogshttp://www.tizen.org/community/mailing-listshttps://wiki.tizen.org/wiki/Main_Pagehttps://source.tizen.org/documentation/developer-guide/submitting-patcheshttps://source.tizen.org/documentation/developer-guide/submitting-patches


29/213


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

https://developer.tizen.org/forums

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

Bug tracker Tizen uses JIRA to track bugs and gather requests for newfeatures:

https://bugs.tizen.org/jira

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

https://developer.tizen.org/forumshttps://bugs.tizen.org/jirahttps://bugs.tizen.org/jirahttps://developer.tizen.org/forums


30/213


31/213

Chapter 2

Exploring the TizenArchitecture

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

T izen isn’t just for smartphones and tablets; it’s designedto 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-vehicleinfotainment 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 indevices far beyond what’s available today. Maybe you’ll findTizen in your fridge or alarm clock or in a home automationsystem. The possibilities are endless.

It’s the incarnation of Tizen defined for smartphones andtablets that we concentrate on in this book. Web developers

don’t have to know the inner workings of Tizen in order tocreate apps, but the more you know about the platform, themore informed your development choices can be.


32/213


33/213

Chapter 2: Exploring the Tizen Architecture 19

The web runtimeEach web app runs in its own process. In the task manager ofa Tizen device, you can see a Tizen web app just like a nativeapp. You can utilise process scheduling and management, andplatform security features also apply.

The web runtime provides a framework for installable webapplications. The role of the web runtime is to install andlaunch 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 taskmanager and package manager, and it can also receive someof 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 particularfeature, returning an error if access is denied. This processprovides a high level of runtime security.

Figure 2-1 shows the components of the web runtime. As youcan see from Figure 2-1, the web application talks to the webruntime, which then communicates with the layer below toaccess the features of the device. The web runtime consistsof 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.


34/213


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

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

Runtime coreThe runtime core is responsible for managing the lifecycle ofan application, including startup, suspend and resume, and

terminate.

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

If the app provides a service – for example, getting an imagefrom a web service – then this feature will be registered asa service, using the Image MIME type. When another apprequests the image service, the app will receive the requestand handle it.

The Tizen web runtime rendering engine is based on WebKit2.This is the same WebKit used in the Tizen browser. As aresult, web apps can take advantage of the same HTML5 APIs

and the same 2D and 3D optimisations and CSS3 optimisationsthat the built-in browser uses.


35/213


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

Using Tizen Web APIs You create Tizen web apps using a combination of W3C/HTML5 specifications, supplementary web specifications, andTizen-specific device APIs. Tizen provides support for manyHTML5 features, such as audio and video, offline web storage,web workers, and 3D transform and transition effects. You canuse these standard technologies in a web application. Tizen

also includes support for some APIs not specified in W3Cbut that are part of supplementary common web standards.Included in this list are typed arrays and the viewport metatagdefinition.

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 variousJavaScript utility libraries, such as jQuery and jQueryMobile.

With so many libraries available for you to use, you don’tneed to re-invent the wheel.

Checking the specsYou can find the current status ofTizen’s support for particular W3C

APIs in the online help in the TizenW3C API Specifications section.HTML5 is a moving target, andTizen’s API support is evolving. By the time you read this book, theHTML5 support will be even better.

In fact, because Tizen provides suchgood HTML5 support, you can create

many web apps without using anyTizen-specific APIs at all. You can stillaccess some device features, suchas geolocation, and some sensorfeatures all from within a portablecompletely standard web app.


36/213


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 providea lot of features, some gaps exist. Tizen device APIs werecreated to fill these gaps. For example, you can find Tizen

APIs for manipulating contacts and calendars in Chapters 12and 13. These Tizen APIs are all contained within the Tizennamespace. You also discover how to give your apps a con-sistent look and feel in Chapter 7, which introduces the TizenWeb UI Framework.

The idea behind these APIs isn’t to compete with the W3CAPIs. 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 thatthey’ll become standards.

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


37/213


that new W3C standards are introduced that provide the samefunctionality as some of the Tizen device APIs discussed in

this book. In this case, you should update your application touse these APIs and help to make your apps more portable andfuture proof.

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

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

TizenThe Tizen JavaScript object is used to access device APIssuch as Contact, Calendar and NFC.

For example, to access the default address book, you use thefollowing 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.

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

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


38/213


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

ApplicationThe Application API allows you to retrieve a list of runningapplications and launch other apps by using an applicationcontrol. 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 coverslaunching an application using an application control.

BookmarkThe 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.

BluetoothThe Bluetooth API provides access to the Bluetooth protocol,which can be used for transmitting files over short distancesbetween devices.

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

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


39/213


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

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 toaccess data exported by other applications, for examplenative applications. You can use the functionality providedby the DataControl API to operate on both SQL and key-value

databases.

DataSynchronizationThe DataSynchronization API, supported from Tizen 2.1,allows you to synchronize device data with a server using theOMA 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.

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


40/213


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

MessagingThe Messaging service allows you to send SMS, MMS, and

Email messages and search messages on the device. Chapter 11explains this API in more detail and provides source code forsearching SMS messages on your device.

NetworkBearerSelectionThe NetworkBearerSelection API, new to Tizen 2.1, allows youto 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 formobile payments and in a range of other applications. Weexplain Near Field Communication (NFC) in detail in Chapter 10.

You discover the different applications of NFC technology andhow to use NFC in your Tizen web apps.

NotificationThe Notification API, introduced in Tizen 2.0, provides a wayof alerting the user to events happening in your app. You canfind details of how to create and manage notifications in the

SDK help.


41/213


PackageThe Package API, new to Tizen 2.1, allows you to install anduninstall packages, retrieve information about the packagesinstalled on the device, and monitor any changes to installedpackages.

Power Another new API introduced in Tizen 2.0, this provides access

to a device’s power state and allows you to control displaydimming and brightness, for example. More information,including a tutorial are included in the SDK.

PushThe Push API, new in Tizen 2.1, allows web applications toreceive push notifications from the push server.

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

SystemInfoProvides access to device specific information, such as localstorage, battery levels, cellular network, and so on. Moreinformation and a tutorial are included in the SDK.

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


42/213


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


43/213

Part IIGetting Practical


44/213

In this part . . .

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

tools, and build your first Tizen app. In Chapter 3 youlearn 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 howthere’s a world of third-party JavaScript libraries ready foryou to use in your apps. Chapter 5 tidies up the messybusiness of testing and debugging.

You might have an existing web app that you want to portto Tizen, in which case you will find some useful tips inChapter 6. We also explain how you can design your Tizen

web app to make it more portable.


45/213

Chapter 3

Getting Started In This Chapter ▶ Installing the Tizen SDK

▶ Building your first web app

▶ Getting Help

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 inadvance, with a well-planned itinerary, phrase book, and a listof the local hotspots. Or, like some authors we could mention,you may prefer to run to catch your flight, carrying only apair of sunglasses and a smile. Both travellers will get to theirdestination, both will probably have a good time, but for alltheir spontaneity, the less prepared traveller may be left witha nagging feeling that he may have missed out on something.

In this chapter, you find everything you need to build yourfirst Tizen app. If you’re feeling adventurous or just can’t waitto get coding, this chapter will be all you need to get started.But if you’re new to web development or the Eclipse IDE oryou just want to make sure that you get the most out of thedevelopment environment before diving in head first, thenthink 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 anadventure, but you’ll be well prepared for the trip.


46/213

Part II: Getting Practical32

Installing the IDE The Tizen SDK provides a set of tools for developing Tizenweb applications. The IDE is based on Eclipse, which will befamiliar to you if you’ve done any Symbian, Android, or badadevelopment. The SDK also includes a tool chain to build appsfor 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 needto 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 installationmanager is responsible for installing the SDK, and you canuse it in one of two ways. You can download the SDK from theserver during the installation process, or you can download

Getting perspectiveA perspective describes the layoutof views to help you achieve aparticular task. In the case of thedefault Tizen Web Perspective, that task is web development, so you’llsee views including the Connection

Explorer, and HTML Web Page Editor.Chapter 5 introduces the ConnectionExplorer, while the HTML Web Page

Editor is covered in its own sectionlater in this chapter.

You can also open up other usefulviews not shown in the currentperspective by choosing Window➪Show View. There’s much more

detail about perspectives, views, and the workbench in the Tizen SDK help.

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


47/213

Chapter 3: Getting Started 33

a separate SDK image file and choose to install the SDK fromthis 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 IDEyou’re asked to select a workspace. On the Welcome screenthat appears, choose the Workbench option. The Tizen WebPerspective appears, as shown in Figure 3-1.

Figure 3-1: The Tizen Web Perspective

Now you’re ready to start developing apps.

If you install the SDK on Mac OS X 10.7.5 or later and an errordialog appears when you launch the Install Manager, then youmay need to change your security settings temporarilyto prevent the OS X Gatekeeper feature from blocking the

installation.

Choose Apple Menu➪System Preferences, open the Securitypreference pane and click on the General tab. Under theheading ‘Allow applications downloaded from’, choose the‘Anywhere’ radio button. You should now be able to launchthe Install Manager.


48/213


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

Creating Your FirstTizen Web App

The easiest way to create a new Tizen project is by using theNew 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 useuser-defined templates, which we explain in more detail in the‘User-defined templates’ section.

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

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

1. In the IDE, choose File➪New ➪Tizen Web Project.

The New Project wizard appears. You see a selectionof 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 templateswith all the necessary files for creating a webapplication using the Tizen web UI framework.

• jQuery Mobile: A set of templates containing allthe 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 applicationusing the Tizen Builder.

3. Name your project.

4. Click Finish.


49/213


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 theselected UI framework. All you need to do is add your applica-tion specific code.

Using a sample appIf you want to create a slightly more complicated application,

you can use one of the sample applications provided in theSDK as a starting point. Walking through the sample code isalso a great way to become familiar with particular features.

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

The Tizen developer website also provides other samplesthat 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 templateIf you have an existing template from another web-basedplatform or you’re developing several applications based on


50/213


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 ownapplication project template. You can create a user templatebased on any project, using the Export wizard. To use theExport wizard, follow these steps:

1. Right-click the project in the Project Explorer viewand 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 TizenUser Template, as shown in Figure 3-3.

Figure 3-3: The Tizen user template.

3. Click Next.

The User Template Export wizard appears.

4. Enter the name and export location.


51/213


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

6. Click Next.

The icon selection screen of the User Template Exportwizard appears.

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

8. Click Next.

The images and descriptions screen appears.

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

10. Click Finish to complete the export of your usertemplate.

Importing an existing project Using the New Project wizard isn’t the only way to create anapplication; you can also import existing applications intothe IDE.

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

1. Choose File➪Import.

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

2. From the Select an Import Source list, double-clickTizen 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 buttonto select the projects you want to copy into the

workspace.

5. Click Finish.

The project is imported into the workspace.


52/213


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 oranother mobile platform, you can import it into the IDE byfollowing these steps:

1. Choose File➪New ➪Project.

2. In the wizard’s drop-down list, double-click theGeneral 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 onhow to edit these files on the Tizen developer website:

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

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


53/213


Figure 3-5: Import other web apps.

Writing the CodeThe SDK provides many useful tools to help you write andedit your app’s code. These tools are designed to help youthroughout your development process, helping you previewyour HTML code as you create it, crafting the look of yourpages with CSS Preview, and making the JavaScript codingprocess 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 codeand preview the HTML as you’re developing your application(see Figure 3-6).

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


54/213


Table 3-1 Web Page Editor View Modes

HTML View Modes Description

Show Design Page & Source Page as Verticalpanes

Show Design Page & Source Page asHorizontal panes

Show Design Page only

Show Source Page only

You could choose to handcraft your HTML, but you canalso use the palette feature provided in the IDE. HTML4 andHTML5 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 locationon either the Design or Source page.

Figure 3-6: The Web Page Editor.


55/213


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

Figure 3-7: The HTML Preview.

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

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

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


56/213


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 yourCSS code.

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

Figure 3-9: Minify CSS.


57/213


JavaScript The JavaScript tool removes comments and extra whitespace, replaces identifiers, and performs micro-optimisationsin your JavaScript code.

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

Figure 3-10: Minify JavaScript.

Building Your Project A Tizen application is packaged in a

.wgt file that can bedownloaded and installed on a device or Emulator. You can

find out more information about an application package andits content in Chapter 4.

When you’re developing your application, if the BuildAutomatically option is enabled, then the application packagewill be rebuilt every time you save any changes. Any errors orwarnings 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 inthe Simulator or Emulator environment or on a Tizen device.For more information about how to test your project, seeChapter 5.

If you want to, you can select one of the sample applicationsintroduced in the ‘Using a sample app’ section, earlier in thischapter, and try building and running the app for yourself.


58/213


Help Is on the WayThe 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. Blogsand forums created by community members are also just aquick Internet search away, and these resources will onlyincrease as the community grows.

You can access Help documentation and get informationabout any APIs by hovering over the function names. The IDEalso provides an Auto completion feature to avoid making anytyping errors when using the Tizen APIs.

Help documentationYou can find the most up-to-date information about Tizen in

the SDK Help documentation. You can open the Help fromwithin the IDE, by choosing Help➪Help Contents. You canalso access Help on the Tizen website:

https://developer.tizen.org/documentation

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

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

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

✓ Tizen Web App Programming/API References/DeviceAPI Reference provides detailed information about the

Tizen device APIs and how to use them within your webapplication. This specification uses Interface DefinitionLanguage (IDL), which is used to describe APIs in a lan-guage independent way.


59/213


60/213


61/213


62/213


Examining the Pieces The way you work through this chapter is up to you. You canuse it as a reference that you dip in and out of as you writeyour app or follow along with the Tizen IDE in front of you.

If you want to follow along, then why not build one of thesample apps as described in Chapter 3? This section isn’tbased around one app, but if you have one of the Tizensamples loaded into the IDE, you’ll be able to find the main

components as they’re explained.

The Application PackageWhen you build a Tizen app for the Simulator, Emulator,or device, the app is packaged in the W3C standard widgetformat, a zip format compressed archive that has a file typeof .wgt. This package contains all your JavaScript, HTML,

and CSS files, together with the images, configuration file, andother 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 revealedand look something like the app package shown in Figure 4-1.

You can find the specification of the W3C widget format at www.w3.org/TR/widgets.

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

structure.

http://www.w3.org/TR/widgetshttp://www.w3.org/TR/widgets


63/213


64/213


For each locale, you can localize as much application contentas is appropriate. For example, in Figure 4-2, the Spanish ( es )

locale, unlike the French ( fr ) locale, only has localizedcontent for the index.html file and will fall back to use thedefault version of the icon.png file.

You can create all the necessary files and folders for localizingyour app using the Tizen Localization wizard. To launch thewizard, right-click your project in the Project Explorer paneland choose the Localization➪Localization Wizard menu item.This wizard allows you to choose which files to localize, as

well as the locales you want to support.

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

The configuration fileThe configuration file is an XML file that contains informa-

tion about the features of the application. The Tizen platformsupports the configuration file as defined in the W3C widgetspecification and adds some Tizen-specific extensions.

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

Breaking down the config fileListing 4-1 shows an example of a config.xml file used for asimple Tizen web application:

Listing 4-1 Example config.xml file

http://www.w3.org/TR/widgetshttp://www.w3.org/TR/widgets


65/213

Chapter 4: Piecing Together the Application Jigsaw 51

SysteminfoSample

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

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

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

The id attribute is mandatory and uniquely identifies yourwidget – in this case, the Systeminfo sample. If you have your

own domain name, then use it in place of yourdomain inListing 4-1. The id doesn’t have to be a valid URL and is justused 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 optionalchild elements, representing additional information about

your application. We explain what these elements are used forin the next section.


66/213


67/213


Figure 4-3: The Configuration Editor.

The items shown in Table 4-1 are the attributes that you canset 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 aboutyour application.

The items shown in Table 4-2 and Table 4-3 are the attributesthat you can set through the Widget tab in the ConfigurationEditor.


68/213


Table 4-2 Specific Information in the Widget Tab

Type Description

Author People or an organization associated with thecreation of the widget

E-mail Email address associated with the author Web

Web Site IRI associated with the widget – for example, yourwebsite, Facebook id, and so on

License Software license, including copyright and

redistribution termsLicense 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 instantiatedcustomstart file

View Modes Author’s preferred view mode (full screen, andmaximized)

Features

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

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


69/213


70/213


To allow access to a network URL, select the Access taband click the Add button. Enter the network URL and select

whether the application should be able to access the URL’ssubdomains.

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

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

Localization

The Tizen platform supports localization of selected elementsin the config.xml file, including the application name anddescription.

Any elements that you can localize will be displayed in theLocalization 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.

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

http://m.foodnetwork.com/http://m.foodnetwork.com/


71/213


2. To do so, choose the required locales from theAvailable 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.

Figure 4-6: Localizing the application name.

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

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

Figure 4-6 shows the application name expanded toshow 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 boxlabeled Selected Element:Name.

5. Choose a locale from the list and type the localizedtext in the Selected Element box at the bottom of thewindow.

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

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

Preferences

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


72/213


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

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

Tizen

In the Tizen tab, you can enter any Tizen-specific informationabout your application. This information includes the applica-

tion’s id, the minimum version of the APIs that the applicationsupports, the location of the start file if hosted on an externalserver, settings such as screen orientation, support for con-text menus, background support, encryption and installationlocation, and any app control information.

Table 4-4 shows the attributes that you can set in the Tizentab if your application provides an application control forother applications to use.

Table 4-4 Tizen Information

Type Description

src Page that provides the functionality described byoperation, scheme, and mime

operation Action to be performed by the application

scheme URI scheme to describe what type of URI can behandled

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 upusing the other configuration tabs. You can also manually editthe file.

The config.xml file must conform to the XML formattingrules and the W3C specification requirements, so be carefulwhen manually editing this file.


73/213


Start fileThe start file is the file that is loaded by the web runtime onapplication startup. The New Project wizard provided in theIDE creates a default application start-up file for you calledindex.html.

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

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

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

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

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

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


74/213


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

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

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

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

example:

Application iconThe icon.png file is the application’s default icon file andshould contain a logo or some other graphical representation

of the application.

The use of this icon file depends on the Tizen device you’redeveloping for, but it generally appears in the applicationmenu screen.

Author signat

Tizen for Dummies

Documents

Transcript of Tizen for Dummies