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. Debug your Application in Emulator.

    This step shows how you can debug the application using debugging tools.

  6. 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 the 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. Create new project

  4. In New project menu, select #C and Tizen from the dropdown menu, and choose Blank App (Tizen.NUI). Then click Next.
  5. New project menu

    Configure the project properties and click Create. You can enter the Project name, Location, and Solution name.

    Configure your project

    The Tizen Project Wizard pop-up window appears.

  6. Select Profile, Platform Version, and Template and then click OK
  7. Tizen Project Wizard

    The following figure illustrates a solution explorer for newly created HelloWorld project:

    Project Folder

You can scroll this table.
  1. Launch the Visual Studio Code tool.
  2. Use Ctrl + Shift + P to open Command Palette and type Tizen Create and hit Enter key.
  3. Create a project

  4. Select project type: Dotnet.
  5. Project type selection

  6. Select your preferred device profile.
  7. Device profile selection

  8. Select profile version.
  9. Device profile version selection

  10. Choose your desired project template.
  11. Select project template

  12. Enter Tizen project name. In this case, HelloWorld is used.
  13. Setting project name

  14. Lastly, select the working folder for your project.
  15. Select working folder for your 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. Build solution

  3. In the Solution Explorer view, right-click the solution name and select Build.
  4. How to run builder

You can scroll this table.
  1. Use Ctrl + Shift + P to show Command Palette.
  2. Type tizen build and select Tizen: Build Tizen Project.
  3. Building a project

  4. Review the build results in the Output window, and check the location of the package file (.tpk).
  5. Package file location

    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.

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, follow the steps below:

  1. Launch Tizen Emulator Manager from menu Tools > Tizen > Tizen Emulator Manager.
  2. Launching Tizen Emulation 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. Choosing emulator
  5. When emulator window is visible you can switch back to the Visual Studio.
  6. Emulator window
  7. In Visual Studio, new launch mode should be visible with valid emulator name. To deploy and run application, green arrow can be used.
  8. Deploy and run applicaion
  9. Finally, HelloWorld project UI is visible on emulator screen.
  10. Visible project UI on emulator screen

You can scroll this table.
  1. Use Ctrl + Shift + P to show Command Palette.
  2. 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.

  3. Type Tizen Emulator and launch the Tizen Emulator Manager.
  4. Launching Tizen Emulator manager

  5. Choose Emulator. For basic NUI template, there is no difference which platform is used. In this example, the application is tested on TV emulator.
  6. Choosing emulator

  7. When emulator window is visible, you can switch back to the Visual Studio Code.
  8. Emulator window

  9. Use Ctrl + Shift + P to open Command Palette again and type set tizen device and set the Tizen Device.
  10. Setting Tizen Device

    A popup in the right corner of the Visual Studio code appears.

    Device popup

  11. 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.
  12. Runnign Tizen Applicaiton on emulator

  13. 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.
  14. Runnign Tizen Applicaiton on emulator

  15. Finally HelloWorld project UI is visible on emulator screen.
  16. Visible project UI 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. Choosing emulator

  4. In project directory, locate application .tpk file. Then use command:
  5. $ sdb install helloworld/bin/Debug/tizen80/org.tizen.example.helloworld-1.0.0.tpk
  6. To run application on TV emulator type:
  7. $ tizen run -p org.tizen.example.helloworld
You can scroll this table.

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:

  1. Open the .cs file in your visual studio application.
  2. Add a break point in your source code.
  3. Debuggin application

  4. 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.
You can scroll this table.
  1. Deploy and run your application in the emulator.
  2. In the Visual Studio Code Activity Bar, click the Debug icon VS Code Debug Icon.
  3. In the Debug view, open the Configuration drop-down menu and select Add Configuration.
  4. Select Netcoredbg for Tizen .NET in the list of configurations.
  5. Start the debugging session by pressing F5.
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 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:

  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