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.

  1. Before you get started with developing Tizen applications, set up the development environment.

  2. Create a Project.

    This step shows how you can use a predesigned project template that creates all the basic files and folders required for your project.

  3. Build Your Application.

    After you have implemented code for the desired features, this step shows how you can build the application to validate and compile the code.

  4. Deploy and Run Your Application.

    This step shows how you can deploy and run the application on the emulator or a real target device.

  5. Enhance Your Application.

    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 following tools:

  • Visual Studio
  • Visual Studio Code with Tizen SDK extensions
  • CLI tools included in Tizen SDK
  1. Launch the Visual Studio tool.
  2. In the Visual Studio menu, select File > New > Project.
  3. In New project menu, select Tizen > Blank App (Tizen.NUI). Then click Next.
  4. 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.

  5. Select Platform Version and click OK
  6. The following figure illustrates a solution explorer for newly created HelloWorld project:

You can scroll this table.
  1. Launch the Visual Studio Code tool.
  2. Use ctrl + P to open commands tool and type Tizen .NET: Create and hit Enter key.
  3. Choose NUI Application template: tizen-6.0 TizenNUIApp
  4. Choose the Tizen .NET project name. In this case, HelloWorld is used.
  5. If the project is created properly, a popup will appear in the bottom corner of the Vscode window.
  6. If Yes option is selected, the Vscode changes working directory to the created project

    .
You can scroll this table.

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
You can scroll this table.

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:

  1. In the Visual Studio menu, select Build > Build Solution.
  2. In the Solution Explorer view, right-click the solution name and select Build
  3. .

You can scroll this table.
  1. Use `ctrl + P` to show command panel
  2. Type Tizen .NET
  3. .

  4. Choose solution.
  5. Now build system should create tpk file with the NUI application.
You can scroll this table.
  1. Change working directory to the HelloWorld project, helloworld.sln file should be placed in the changed directory.
  2. Type $ tizen build-cs in your terminal.
  3. Output .tpk file should be created in the helloworld/bin/Debug/tizen80/ directory.
You can scroll this table.

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:

  1. Launch Tizen Emulator Manager from menu Tools > Tizen > Tizen Emulator Manager.
  2. Choose Emulator. For basic NUI template, there is no difference which platform is used. In this example, the application is tested on TV emulator.
  3. When emulator window is visible you can switch back to the Visual Studio.
  4. In Visual Studio, new launch mode should be visible with valid emulator name. To deploy and run application, green arrow can be used.
  5. Finally, HelloWorld project UI is visible on emulator screen.
You can scroll this table.
  1. Use ctrl + P to show command panel.
  2. Type Tizen .NET: Emul and launch the Tizen Emulator Manager.
  3. Choose Emulator. For basic NUI template, there is no difference which platform is used. In this example, the application is tested on TV emulator.
  4. When emulator window is visible, you can switch back to the Visual Studio Code.
  5. Use ctrl + P to open command panel again and type Tizen .NET: Set and set the Tizen Device.
  6. A popup in the right corner of the Visual Studio code appears.

  7. Use ctrl + P to open the command panel and type Tizen .NET: Run and choose available option.
  8. Finally HelloWorld project UI is visible on emulator screen.
You can scroll this table.
  1. Run the Tizen SDK emulator manager manually and start the Emulator Image.
  2. Choose Emulator. For basic NUI template, there is no difference which platform is used. In this example, the application is tested on TV emulator.
  3. In project directory, locate application .tpk file. Then use command:
  4. $ sdb install helloworld/bin/Debug/tizen80/org.tizen.example.helloworld-1.0.0.tpk
  5. To run application on TV emulator type:
  6. $ tizen run -p org.tizen.example.helloworld
You can scroll this table.

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 the NUIApplication class.
  • The Program class implements Main function and creates application instance. Then the main application loop is started by calling app.Run(args) method.
  • A basic NUI applictation requires OnCreate callback implementation which is called shortly after app.Run(args). In this example this is the entry point of UI components initialization.
  • In the above example, Initialize method is responsible for setup the key events handler, create 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:

  1. Since the click event triggers outside the class constructor, declare the label, and a click counter at the class level:

    C#
    Copy
    class Program : NUIApplication { private TextLabel ButtonStateLabel; private int ClickedCounter = 0; void Initialize() {
  2. To avoid placing elements in the window manually, the View root object is created. This is a container for the application components:

    C#
    Copy
    Window.Instance.KeyEvent += OnKeyEvent; View root = new View(); root.WidthResizePolicy = ResizePolicyType.FillToParent; root.HeightResizePolicy = ResizePolicyType.FillToParent; Window.Instance.GetDefaultLayer().Add(root);
  3. The root object layouts items vertically using LinearLayout component:

    C#
    Copy
    LinearLayout 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;
  4. The ButtonStateLabel shows how many times button was clicked:

    C#
    Copy
    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.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);
  5. The Button object with the clicked event handler assignment is depicted below:

    C#
    Copy
    Button testButton = new Button(); testButton.Text = "Click Me!"; testButton.HeightResizePolicy = ResizePolicyType.FitToChildren; testButton.WidthResizePolicy = ResizePolicyType.FitToChildren; root.Add(testButton); testButton.Clicked += OnTestButtonClicked; }
  6. 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#
    Copy
    void 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

You can scroll this table.
Startup State Clicked State
Enhanced application Enhanced application

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:

Project layout

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.

Package content

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.

Get Started
Next API Privileges
Submit your feedback to GitHub