Create Your First Tizen .NET Application
The Tizen .NET framework allows you to easily and efficiently create applications for Tizen. Study the following instructions to help familiarize yourself with the Tizen .NET application development process. With the instructions, you can create and run a basic .NET application, which displays some text on the screen with no user interaction.
-
Before you get started with developing Tizen applications, set up the development environment.
-
This step shows how you can use a predesigned project template that creates all the basic files and folders required for your project.
-
After you have implemented code for the desired features, this step shows how you can build the application to validate and compile the code.
-
Deploy and Run Your Application.
This step shows how you can deploy and run the application on the emulator or a real target device.
-
Debug your Application in Emulator.
This step shows how you can debug the application using debugging tools.
-
This step shows how you can enhance your application by creating a UI and making minor changes to improve the usability of the application.
Create a project
The following example shows how to create and configure a basic Tizen .NET application.
To create a new Tizen .NET project, you can use the following tools:
- Visual Studio
- Visual Studio Code with Tizen SDK extensions
- CLI tools included in Tizen SDK
- Launch the Visual Studio tool.
- In the Visual Studio menu, select File > New > Project.
- In New project menu, select #C and Tizen from the dropdown menu, and choose Blank App (Tizen.NUI). Then click Next.
- Select Profile, Platform Version, and Template and then click OK
Configure the project properties and click Create. You can enter the Project name, Location, and Solution name.
The Tizen Project Wizard pop-up window appears.
The following figure illustrates a solution explorer for newly created HelloWorld project:
- Launch the Visual Studio Code tool.
- Use Ctrl + Shift + P to open Command Palette and type Tizen Create and hit Enter key.
- Select project type: Dotnet.
- Select your preferred device profile.
- Select profile version.
- Choose your desired project template.
- Enter Tizen project name. In this case, HelloWorld is used.
- Lastly, select the working folder for your project.
Go to a directory where you want project to be created and type:
$ tizen create cs-project -t Tizen.NUI.Template55.Single -v tizen-5.5 -n HelloWorld
Build your application
After you have created the application project, you can implement the required features. In this example, only the default features from the project template are used, and no code changes are required.
When your application code is ready, build the application. The building process performs a validation check and compiles your files. You must sign the application package with an author certificate when building the application. If you have not yet registered a Tizen certificate in Visual Studio, see Certificate Manager.
There are two different ways to build the application:
- In the Visual Studio menu, select Build > Build Solution.
- In the Solution Explorer view, right-click the solution name and select Build.
- Use Ctrl + Shift + P to show Command Palette.
- Type tizen build and select Tizen: Build Tizen Project.
- Review the build results in the Output window, and check the location of the package file (.tpk).
If you want to deploy the application to a Tizen device, you must create a certificate profile using Tizen Certificate Manager or Tizen CLI before building your project.
- Change working directory to the HelloWorld project, helloworld.sln file should be placed in the changed directory.
- Type
$ tizen build-cs
in your terminal. - Output .tpk file should be created in the helloworld/bin/Debug/tizen80/ directory.
Tizen .NET applications are always deployed as installed packages. The package files have the .tpk
file extension, and the process of generating a package is controlled by the manifest file. The Tizen SDK tools generate the manifest file (tizen-manifest.xml
) to the top level of the <projectname>.Tizen project.
For this example application, the default manifest is sufficient. If you want to make any changes in the application, such as changing the application icon or installing resources that are used by the application at runtime, see Package Your Application.
After you have built the application, deploy and run it.
Deploy and run your application
To run the application, you must first deploy it to the target: either a device or an emulator. Deploying means transferring the package file (.tpk
) to the target and invoking the Tizen Package Manager to install it.
To deploy and run the application on the emulator, follow the steps below:
- Launch Tizen Emulator Manager from menu Tools > Tizen > Tizen Emulator Manager.
- Choose Emulator. For basic NUI template, there is no difference which platform is used. In this example, the application is tested on TV emulator.
- When emulator window is visible you can switch back to the Visual Studio.
- In Visual Studio, new launch mode should be visible with valid emulator name. To deploy and run application, green arrow can be used.
- Finally, HelloWorld project UI is visible on emulator screen.
- Use Ctrl + Shift + P to show Command Palette.
- Type Tizen Emulator and launch the Tizen Emulator Manager.
- Choose Emulator. For basic NUI template, there is no difference which platform is used. In this example, the application is tested on TV emulator.
- When emulator window is visible, you can switch back to the Visual Studio Code.
- Use Ctrl + Shift + P to open Command Palette again and type set tizen device and set the Tizen Device.
- Use Ctrl + Shift + P to open the Command Palette and type Tizen Run App and choose Tizen: Run Tizen application to run the application on the emulator.
- You can also use Ctrl + Shift + P and type Tizen Install App and choose Tizen: Install Tizen application to install the application on the emulator.
- Finally HelloWorld project UI is visible on emulator screen.
Remember, you cannot launch an emulator directly from Visual Studio Code. Instead, you must launch the Tizen Emulator Manager and use it to launch the emulator you need.
A popup in the right corner of the Visual Studio code appears.
- Run the Tizen SDK emulator manager manually and start the Emulator Image.
- Choose Emulator. For basic NUI template, there is no difference which platform is used. In this example, the application is tested on TV emulator.
- In project directory, locate application .tpk file. Then use command:
- To run application on TV emulator type:
$ sdb install helloworld/bin/Debug/tizen80/org.tizen.example.helloworld-1.0.0.tpk
$ tizen run -p org.tizen.example.helloworld
Debug your application in emulator
The following example shows how you can use the Tizen emulator to debug a basic Tizen .NET application.
To debug your application, follow the steps below:
- Open the .cs file in your visual studio application.
- Add a break point in your source code.
- Start the debugging session by selecting Debug > Start Debugging in the menu bar, or pressing F5, or by clicking the Debug button in the menu bar.
- Deploy and run your application in the emulator.
- In the Visual Studio Code Activity Bar, click the Debug icon .
- In the Debug view, open the Configuration drop-down menu and select Add Configuration.
- Select Netcoredbg for Tizen .NET in the list of configurations.
- Start the debugging session by pressing F5.
Enhance your application
Tizen .NET provides a way to build portable applications which run in a native way. It provides a set of controls for building a user interface, as well as generates code which adapts the user interface code to use the native facilities of the supported platforms. The following is a brief introduction to the NUI controls, and how to use them to build on the application you have just created.
Understand the source code
The C# code from your first application displays and rotate a label centered on the screen, containing the Hello Tizen NUI Wolrd text. This application created from the template is set up and ready to be built and run right after you create it, as described above.
The following shows code generated by template project HelloWorld.cs file, generated by the template:
C#
Copy
using System;
using Tizen.NUI;
using Tizen.NUI.BaseComponents
namespace helloworld
{
class Program : NUIApplication
{
protected override void OnCreate()
{
base.OnCreate();
Initialize();
}
void Initialize()
{
Window.Instance.KeyEvent += OnKeyEvent;
TextLabel text = new TextLabel("Hello Tizen NUI World");
text.HorizontalAlignment = HorizontalAlignment.Center;
text.VerticalAlignment = VerticalAlignment.Center;
text.TextColor = Color.Blue;
text.PointSize = 12.0f;
text.HeightResizePolicy = ResizePolicyType.FillToParent;
text.WidthResizePolicy = ResizePolicyType.FillToParent;
Window.Instance.GetDefaultLayer().Add(text);
Animation animation = new Animation(2000);
animation.AnimateTo(text, "Orientation", new Rotation(new Radian(new Degree(180.0f)), PositionAxis.X), 0, 500);
animation.AnimateTo(text, "Orientation", new Rotation(new Radian(new Degree(0.0f)), PositionAxis.X), 500, 1000);
animation.Looping = true;
animation.Play();
}
public void OnKeyEvent(object sender, Window.KeyEventArgs e)
{
if (e.Key.State == Key.StateType.Down && (e.Key.KeyPressedName == "XF86Back" || e.Key.KeyPressedName == "Escape"))
{
Exit();
}
}
static void Main(string[] args)
{
var app = new Program();
app.Run(args);
}
}
}
This application is constructed with the following NUI components:
- The
Program
class is declared, deriving from theNUIApplication
class. - The
Program
class implements main function and creates application instance. Then the main application loop is started by callingapp.Run(args)
method. - A basic NUI applictation requires
OnCreate
callback implementation which is called shortly afterapp.Run(args)
. In this example this is the entry point of UI components initialization. - In the above example,
Initialize
method is responsible for setting up the key events handler, and for creating the text label and the animation.
Add a button and the HelloWorld application
The basic template uses a label which displays text in an area of the screen. The properties inherited from the base classes of Label
give control over the display: font attributes, families, and sizes, as well as layout options. Modify the application by adding a button control. It is similar to the label but is specifically designed to react to click events. As a result, the Button
class defines the Clicked
event, which tells the application what to do when the click event takes place.
In order to do something visible on the screen to show that you have received the click event, define another label. Give the new label a value to be displayed in the initial state, and make the button click event handler update the text and button color once the click event triggers.
To modify the application by adding a button and label, follow the steps below:
-
Since the click event triggers outside the class constructor, declare the label, and a click counter at the class level:
C#Copyclass Program : NUIApplication { private TextLabel ButtonStateLabel; private int ClickedCounter = 0; void Initialize() {
-
To avoid placing elements in the window manually, the
View root
object is created. This is a container for the application components:C#CopyWindow.Instance.KeyEvent += OnKeyEvent; View root = new View(); root.WidthResizePolicy = ResizePolicyType.FillToParent; root.HeightResizePolicy = ResizePolicyType.FillToParent; Window.Instance.GetDefaultLayer().Add(root);
-
The
root
object layouts items vertically usingLinearLayout
component:C#CopyLinearLayout rootLayout = new LinearLayout(); rootLayout.LinearOrientation = LinearLayout.Orientation.Vertical; rootLayout.HorizontalAlignment = HorizontalAlignment.Center; rootLayout.VerticalAlignment = VerticalAlignment.Center; rootLayout.CellPadding = new Size2D(10, 10); root.Layout = rootLayout;
-
The
ButtonStateLabel
shows how many times button was clicked:C#CopyTextLabel text = new TextLabel("Hello Tizen NUI World"); text.HorizontalAlignment = HorizontalAlignment.Center; text.VerticalAlignment = VerticalAlignment.Center; text.TextColor = Color.Blue; text.PointSize = 12.0f; text.HeightResizePolicy = ResizePolicyType.FitToChildren; text.WidthResizePolicy = ResizePolicyType.FitToChildren; root.Add(text); ButtonStateLabel.Text = string.Format("Clicked counter: {0}", ClickedCounter); ButtonStateLabel.HorizontalAlignment = HorizontalAlignment.Center; ButtonStateLabel.VerticalAlignment = VerticalAlignment.Center; ButtonStateLabel.TextColor = Color.Blue; ButtonStateLabel.PointSize = 12.0f; ButtonStateLabel.HeightResizePolicy = ResizePolicyType.FitToChildren; ButtonStateLabel.WidthResizePolicy = ResizePolicyType.FitToChildren; root.Add(ButtonStateLabel);
-
The
Button
object with the clicked event handler assignment is depicted below:C#CopyButton testButton = new Button(); testButton.Text = "Click Me!"; testButton.HeightResizePolicy = ResizePolicyType.FitToChildren; testButton.WidthResizePolicy = ResizePolicyType.FitToChildren; root.Add(testButton); testButton.Clicked += OnTestButtonClicked; }
-
To change the new label’s properties when the button is clicked, define the
OnTestButtonClicked
event handler.When an event triggers, two parameters are delivered to any handler set up to watch it. The first parameter is an object representing the control that triggered the event, and the second parameter is the event data appropriate to the event type.
Increment the click counter, build a string showing how many times the button has been clicked, and set the
Text
property of the label to that string:C#Copyvoid OnTestButtonClicked(object sender, EventArgs args) { ClickedCounter += 1; label.Text = String.Format("Number of clicks: {0}", ClickedCounter); } } }
The following image shows what happens when you run the modified code:
Figure: Modified Hello World App
Startup State | Clicked State |
---|---|
At startup, the text above the button is Clicked Counter: 0. After a couple of clicks, the click counter is changed.
This topic only introduces the controls in use in the example above. For more information, see the NUI Guides.
Package your application
A Tizen .NET application is deployed in the form of an installable package, with the package file extension .tpk
. A Tizen .NET package has a relatively simple structure: internally it is a ZIP file with content that matches the directory layout of the project.
The package contains the following:
-
The
shared
directory, which is for items that are considered system-wide (shareable).The application icon is packaged in the
shared/res
directory on installation, and the icon appears on the home screen with the icons for the other applications. You can either replace the icon (which is just a copy of the default Tizen logo) with one of your own using the file name generated by Visual Studio, or put a new icon in the same project directory and update the package manifest to indicate the new name. -
The
res
directory, which is for application-private resources.If the application needs a file to open at runtime, it can be placed here.
-
The
bin
directory, which contains the generated application executable. -
The
lib
directory, which contains the generated application support code.If you use nugget libraries, they are imported in the lib directory.
-
The package manifest, which defines the application properties and is used at the installation time.
-
Two signature files (author and distributor), which are checked at the installation time.
The following figure shows the layout of the platform-specific (Tizen) project:
It includes the lib
, res
, and shared
(with a res
subdirectory containing an image file) directories, and the tizen-manifest.xml file. There is also the bin
directory, which Visual Studio only shows if you select the Show all files option for the solution. These pieces all go into the package.
Package generation (and in fact installation) is controlled by the tizen-manifest.xml package manifest file. The following figure shows the .tpk
file for the initial application, to illustrate how the combination of the directory layout and the package manifest leads to the actual package.
When packaging your application, you also need to consider whether any feature or privilege declarations are needed in the manifest file, and how to place any language-specific files.