Creating Your First Tizen Application
Before you get started with developing Tizen applications, you must download and install the Tizen SDK (software development kit). For more information about the installation process, see the Tizen developer site.
Creating Your First Mobile Web App
This tutorial demonstrates how you can create a simple HelloWorld application. Study this tutorial to help familiarize yourself with the Tizen Web application development process as well as using the Tizen SDK and installing the created application on the Emulator or target device.
When you are developing a more complex application, you can take advantage of the tools included in the SDK to ease the tasks of creating functionality and designing the application UI.
To Create a HelloWorld Application
- Creating the HelloWorld Project
- Launch the Tizen IDE.
-
Create the application project in the IDE.
During the project creation, use the basic Tizen project template: in the New Tizen Web Project window, select Template > Tizen > Basic > Basic Application.
- Define helloworld as the name of your project and click Finish.
The new helloworld project is shown in the Project Explorer view of the IDE, with default content in the config.xml file as well as in several project folders, including:
- css folder: CSS files directory
- js folder: JavaScript files directory
- config.xml file: Application configuration file
- icon.png file: Icon file
- index.html file: Default HTML file
- Configuring the Application and Creating the Application Code
The Web project source files already contain the basic application functionality.
The automatically-included code creates an application with the title "Application Name". To change the title to HelloWorld, take the following steps (illustrated in the following figure):
- Open index.html (1).
- Select the title (2).
- Locate the title in the code and change "Application Name" into "HelloWorld" (3).
Figure: HelloWorld project
You also have various options to set the application configuration using the config.xml file and design the application UI.
- Building and Packaging the Application
After you have finished implementing your application, you must build it.
After building, the Tizen IDE automatically packages the project by creating a .wgt file.
- Running and Debugging the Application on the Emulator
You can run the HelloWorld application on the Emulator, Simulator, or real target device.
The following figure shows the Web application running in the Emulator.
Figure: Running the project
On a real target device, you can use the Web Inspector tool to debug the application.
Creating Your First Wearable Web App
This tutorial demonstrates how you can create a simple HelloWorld application with the Tizen wearable UI. The tutorial helps you to familiarize yourself with the Tizen wearable Web application development process and use the Tizen SDK, installing the created application on the Emulator or a target device.
When developing a more complex application, you can take advantage of the tools included in the SDK to make creating functionality and designing the application UI easier.
To Create a HelloWorld Application
- Creating the HelloWorld Project
- Launch the Tizen IDE.
-
Create the application project in the IDE.
To use the Wearable UI project template, in the New Tizen Wearable Web Project window, select Template > Wearable UI > Basic Application.
- Define HelloWorld as the name of your project and click Finish.
Figure: Creating the HelloWorld project
The new HelloWorld project is shown in the Project Explorer view of the IDE, with default content in the config.xml file as well as in several project folders, including:
- css folder: CSS file directory
- js folder: JavaScript file directory
-
lib folder: Tizen wearable UI framework directory
- lib/tau/themes/black/tau.min.css: Release version of the Tizen wearable UI theme
- lib/tau/js/tau.min.js: Release version of the Tizen wearable UI library
- lib/tau/themes/black/tau.css: Debug version of the Tizen wearable UI theme
- lib/tau/js/tau.js: Debug version of the Tizen wearable UI library
- config.xml: Application configuration file
- icon.png: Icon file
- index.html: Default HTML file
- Configuring the Application and Creating the Application Code
The Web project source files already contain the basic application functionality.
- Open the index.html file (1).
- Set the viewport meta tag (2).
- Add the tau.min.css file (3).
If you created your application project using the Wearable UI template, the link already exists in the index.html file.
- Add a link to the tau.min.js file in the script element (4).
If you created your application project using the Wearable UI template, the link already exists in the index.html file.
Figure: index.html file
You have various options to set the application configuration using the config.xml file and code the application features.
- Creating a Layout using the Wearable UI Theme
In the Wearable UI, each scene is named a page. When you include the ui-page class attribute in a <div> element, the attribute applies to the visible Wearable UI theme and the supporting page navigation features.
For more information about the Tizen wearable UI layout and components, see Tizen Wearable Web UI Framework Reference.
- Building and Packaging the Application
When you have finished implementing your application, you must build it.
After building, the Tizen IDE automatically packages the project by creating a .wgt package file.
- Running and Debugging the Application on the Emulator
You can run the HelloWorld application on the Emulator or a real target device.
The following figure shows the Web application running in the Emulator.
Figure: Running the project
On a real target device, you can use the Web Inspector tool to debug the application.