Create Your First Tizen .NET NUI 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 Natural User Interface (NUI) application development process. With the instructions, you can create and run a basic NUI application, which displays some text on the screen with no user interaction.

Note
.NET NUI applications are supported since Tizen 4.0.

Before you get started with developing Tizen applications, set up the development environment.
Creating a Project using Visual Studio.

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

This step shows how you can enhance your application by creating a UI and making small alterations to it to improve the usability of the application.
Building and Running NUI Application.

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

Create Project

The following example shows you how to create and configure a basic NUI application project in Visual Studio. An application project contains all the files that make up an application. To create a Tizen NUI application, follow these steps:

Launch Visual Studio.
In the Visual Studio menu, select File > New > Project.
In New project menu, select Tizen > Blank App (Tizen.NUI). Click Next:
In the Configure your new Project dialog, specify the Project name, Location, and Solution name. Click Create:
Select Platform Version and click OK:

The following figure illustrates a new project SampleNUIApp in the Solution Explorer view:

Note
If Tizen.Net is available in NuGet packages then you can use the NUI APIs.

Enhance Your Application

The SampleNUIApp is generated by the Tizen project template. The project draws a “Hello Tizen NUI world” text with a rotating animation effect. It also demonstrates how you can react to touch events on the application screen.

You can add your code in SampleNUIApp.cs file, as follows:


                C#
                
                    Copy
                    
                
            
    using System;
    using Tizen.NUI;
    using Tizen.NUI.BaseComponents;

    namespace SampleNUIApp
    {
        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);
            }
        }
    }

Adding Text Label

Declare the required system and NUI namespaces:


                C#
                
                    Copy
                    
                
            
using System;
using Tizen.NUI;
using Tizen.NUI.BaseComponents;

Include the SampleNUIApp namespace in your application:


                C#
                
                    Copy
                    
                
            
namespace SampleNUIApp

Derive the application from the Tizen.NUI.NUIApplication class:


                C#
                
                    Copy
                    
                
            
class Program : NUIApplication

The Tizen.NUI.NUIApplication class includes constructors that allow you to create applications with various stylesheets and window modes.

To handle the behavior when the application is launched, override the OnCreate() method of the Tizen.NUI.NUIApplication class and call the initialization method:


                C#
                
                    Copy
                    
                
            
protected override void OnCreate()
{
    base.OnCreate();
    Initialize();
}

Note
To invoke the Created event of the Tizen.Applications.CoreApplication class, you must call the base.OnCreate() method inside the override.

In the Initialize() method, set the text label properties:

Create the text label object from the Tizen.NUI.BaseComponents.TextLabel class:


                C#
                
                    Copy
                    
                
            
TextLabel text = new TextLabel("Hello Tizen NUI World");

Align the text horizontally to the center of the available area:


                C#
                
                    Copy
                    
                
            
text.HorizontalAlignment = HorizontalAlignment.Center;

Set the text color:


                C#
                
                    Copy
                    
                
            
text.TextColor = Color.Blue;

Define the text size in points:


                C#
                
                    Copy
                    
                
            
text.PointSize = 12.0f;

For more information on the key properties of the Tizen.NUI.BaseComponents.TextLabel class, see the TextLabel.

Implement the main application window:

Create the window and add an event handler for the KeyEvent event of the Tizen.NUI.Window class. This event handler is invoked whenever the key event is received:


                C#
                
                    Copy
                    
                
            
Window.Instance.KeyEvent += OnKeyEvent;

Add the text label to the window’s root layer:


                C#
                
                    Copy
                    
                
            
Window.Instance.GetDefaultLayer().Add(text);

Define the event handler to terminate the NUI application:


                C#
                
                    Copy
                    
                
            
public void OnKeyEvent(object sender, Window.KeyEventArgs e)
{
    if (e.Key.State == Key.StateType.Down && (e.Key.KeyPressedName == "XF86Back" || e.Key.KeyPressedName == "Escape"))
    {
        Exit();
    }
}

To handle behavior when the window close button is clicked and the application is about to terminate, override the OnTerminate() method of the Tizen.NUI.NUIApplication class:
```
                C#
                
                    Copy
                    
                
            
protected override void OnTerminate()
{
    base.OnTerminate();
}
```
Note
To invoke the Terminated event of the Tizen.Applications.CoreApplication class, you must call the base.OnTerminate() method inside the override.

Implement the Main() method:

Create the application by defining a default constructor:


                C#
                
                    Copy
                    
                
            
static void Main(string[] args)
{   
    var app = new Program();
    app.Run(args);
}

Start the application main loop.

This ensures that the images are displayed, and the events and signals are dispatched and captured.

In this SampleNUI example, the Main() method is implemented in the class. For significant application development, the Main() method must be implemented in a separate .cs file:
```
                C#
                
                    Copy
                    
                
            
app.Run(args);
```

Build and Run NUI Application

Building the solution:
- In the Visual Studio menu, select Build > Build Solution.
- In the Solution Explorer view, right-click the solution name and select Build.
Launching Tizen Emulator:
- In the Visual Studio menu, select Tools > Tizen > Tizen Emulator Manager.
- Alternatively, click Launch Tizen Emulator in the Visual Studio toolbar to launch the Tizen Emulator Manager:
- In Emulator Manager, select an emulator from the list. Click Launch:
Note
You must update the emulator images to use the latest version.
After you launch an emulator instance, you can select the target from the drop-down list to change the deployment target in the Visual Studio toolbar:

You can deploy your NUI application to the target emulator in one of the following ways:
- Press the F5 key or Ctrl+F5 keys.
- In the Visual Studio menu, select Debug > Start Debugging or Start Without Debugging.
- On the Visual Studio toolbar, click an emulator instance:
If the deployment is successful, then the application is launched on the target emulator.

The following image shows the launch of this NUI application on the mobile emulator:

Figure: NUI application on Mobile emulator

Visual Studio uses the Smart Development Bridge (SDB) to communicate with the target device or emulator.

You can also deploy your NUI application with SDB manually:
1. Copy the application .tpk file from the project binary path to the SDB tool path:
  - The SampleNUIApp tpk file(org.tizen.example.SampleNUIApp-1.0.0.tpk) is located in <ProjectPath>\SampleNUIApp\SampleNUIApp\bin\Debug\tizen{version}.
  - To locate the project path in the Solution Explorer view, right-click the solution name and click Open Folder in File Explorer.
  - SDB tool is located in c:\tizen\tools\sdb.exe.
2. Launch the Tizen SDB command prompt:
  - For Windows OS, launch the Tizen SDB command prompt (Tool > Tizen > Tizen Sdb Command Prompt).
  - For Linux OS, you can use the SDB command directly in your project path.
3. Install your application using the following SDB command:
```
                bash
                
                    Copy
                    
                
            
sdb install org.tizen.example.SampleNUIApp-1.0.0.tpk
```