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

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.

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:

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:

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

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.