Setting up the NUI development environment on Ubuntu

This guide explains how to setup, build and run NUI (DALi C#) applications using Visual Studio Code (VSC).

It assumes the starting point is a completely ‘clean’ system, though that is not essential.

VSC can be be installed on Ubuntu 14.04 and onwards.

The NUI Hello World tutorial provides an introduction into NUI application development, describing how to display text in a text label.

Overview

This document covers:

Installation of .NET Core and VSC
Getting NUI source code
NUI build environment
Building NUI source code
Build and run the Hello World tutorial
Appendix A - Configuring firewall proxy settings
Appendix B - Clean build

Step-by-step guide

Installation of .NET Core and Visual Studio Code (VSC)

Install .NET Core for Ubuntu
1. Follow instructions for installing .NET Core for Ubuntu
Install latest VSC for Ubuntu
1. Download deb package.
2. Install deb package, the VSC instructions are to use:
```
  $ sudo dpkg -i code_1.10.2xXXXXXXXXXX_amd64.deb
```
Alternatives for opening VSC via the icon
1. In the desktop launcher, select Search your Computer > Applications for the Visual Studio Code icon.
2. Select the Launch button to open VSC
3. Copy VSC icon to Launcher.
4. Subsequently, can Double click on the VSC icon in Launcher.
Alternatives for opening VSC from a terminal

    $ code            // Open VSC
    $ code .          // Open VSC in current directory
    $ code myfile     // Open file in VSC

Firewall proxy settings

VSC requires installation of required packages and libraries. It may be necessary to configure the firewall proxy settings to enable download via http. The procedures for firewall setup are described in Appendix A.

Install C# extension from within VSC, via the Extensions View
1. Bring up the Extensions view by clicking on the extensions icon in the Activity Bar, or Ctrl+Shift+X (View extensions command).
2. This will bring up all the extensions in the VS code marketplace.
3. Type “C#” to filter selections.
4. Click the Install button next to C#. After a successful install, you will see the Reload button, click to restart VSC.
Alternatively, Install_C# extension_from VSC marketplace.

Recommended - Familiarisation with VSC

Build VSC with a console hello world

Getting started with Visual Studio code will give you a basic understanding of projects in VSC.

Get NUI source code from Git

Create a ‘NUI root folder’ for the source code, I am using ~/DALiNUI as an example
```
  $ mkdir ~/DALiNUI
  $ cd ~/DALiNUI
```
Get code from GitHub

    $ git clone git@github.com:dalihub/dali-core
    $ git clone git@github.com:dalihub/dali-adaptor
    $ git clone git@github.com:dalihub/dali-csharp-binder
    $ git clone git@github.com:dalihub/dali-toolkit
    $ git clone git@github.com:dalihub/app-stub
    $ git clone git@github.com:dalihub/nui

Switch to the ‘devel/master’ branch for each required repo, i.e for dali-core:
```
  $ cd ~/DALiNUI/dali-core
  $ git checkout devel/master
```

NUI build environment

Build environment setup, saving to a file:

    $ cd ~/DALiNUI
    $ dali-core/build/scripts/dali_env -c
    $ dali-env/opt/bin/dali_env -s > setenv
    $ . setenv

These steps only need to be done once.

You will have to source your environment variables every time you open up a new terminal (or you can add to .bashrc if you prefer). You can do this by sourcing the ‘‘setenv’’ script you created above:

    $ . setenv

Building NUI source code

Build DALi native repo’s in the following order, follow instructions in the README file in each repo folder.
1. Build dali-core
2. Build dali-adaptor
3. Build dali-toolkit

The shared library files (.so) will be built and installed into the ~/DALiNUI/dali-env/opt/lib folder.

Optional - Run and test DALi Native (C++)
1. Get code - this step requires the dali_demo repo
2. Build from README file (“Building the Repository” section)
3. Run dali-demo

    $ git clone git@github.com:dalihub/dali-demo
    $ cd ~/DALiNUI/dali-demo
    $ git checkout devel/master

    Build from README

    $ cd ~/DALiNUI/dali-env/opt/bin
    $ dali-demo

If ok, DALi demo window will appear.

Change to NUI csharp bindings folder

    $ cd dali-csharp-binder

Build NUI csharp bindings, by running these commands from the ‘dali-csharp-binder’ folder.

    $ autoreconf --install
    $ ./configure --prefix=$DESKTOP_PREFIX
    $ make install -j8

Build app-stub C# repository, by running these commands from the app-stub folder.

    $ cd ~/DALiNUI/app-stub
    $ dotnet restore
    $ dotnet build

Build nui repository as a library
1. Download build-nui-as-lib.sh
2. Place in your ~/bin folder (or equivalent)
3. Run the build script:

    $ cd ~/DALiNUI/nui
    $ ~/bin/build-nui-as-lib.sh

This creates a separate Tizen.NUI.Code folder which is used to build the NUI toolkit as a separate library. It does not build any of the example code within the sample folders.

Build your own application

Create tutorial file
1. Copy code in “full example” section of the NUI Hello World tutorial to a new file, hello-world.cs
2. Create a tutorials folder
3. Copy hello-world.cs to the tutorials folder:

    $ cd ~/DALiNUI
    $ mkdir tutorials
    $ cp hello-world.cs ~/DALiNUI/tutorials

Create a ‘Hello World’ project in VSC
1. Open VSC
2. Select File > Open Folder in the main menu.
3. Select the tutorials folder in the File Dialog
4. Open the command prompt CTRL+` (backtick)
5. In the Integrated Terminal, type the following:

    $ cd ~/DALiNUI
    $ . setenv
    $ cd ~/DALiNUI/tutorials
    $ dotnet new console

The ‘setenv’ will not be necessary, if the environment has been set up in your .bashrc as described in Build environment)

The ‘dotnet new console’ creates a Project, with a Project file tutorials.csproj and a Program.cs file.

Delete Program.cs in VSC Explorer, as its not needed.
Modify project file
1. Edit tutorials.csproj, adding the following lines inside the ‘Project’ element:

    <ItemGroup>
      <ProjectReference Include="..\nui\Tizen.NUI.Code\Tizen.NUI.csproj" />
      <ProjectReference Include="..\app-stub\Tizen.Applications.csproj" />
    </ItemGroup>

2. Add the following line inside the 'PropertyGroup' element:

    <DefineConstants>DOT_NET_CORE</DefineConstants>

Build assets
1. Restore the dependencies and tools of a project.

    $ dotnet restore

Running dotnet restore gives you access to the required .NET Core packages that are needed to build your project.

Configure VSC by creating tasks.json
1. Press Ctrl+Shift+P to open the command Pallete, type “ctr”, and select Configure Task runner > NET core

A tasks.json file is essential, or else will get “No task runner configured”, or “Error Could not find the Pre Launch Task ‘build’” message pane on building.

Build
```
  $ dotnet build
```

Note: This step builds the ‘tutorials’ executable.

The screenshot shows the key files associated with the “hello world” project in VSC Explorer.

To Run full size application in VSC integrated terminal
```
  $ dotnet run
```

To Run adjusted size application in VSC integrated terminal

  $ DALI_WINDOW_WIDTH=600 DALI_WINDOW_HEIGHT=800 dotnet run

Modify Hello World Application window size

This section provides an insight into the configuration of the application “Launch” profile.

In VSC, Open launch.json via the Explorer. In the “configurations” section, add the required width and height to the environment variable:

    "name": ".NET Core Launch (console)",

    ...
    ...
    "env": {
        "DALI_WINDOW_WIDTH":"600",
        "DALI_WINDOW_HEIGHT":"800"
    },

These settings will be picked up if the application is run via F5.

Appendix A - Configuring Firewall proxy settings

Setup System firewall Proxy settings for VSC enable install of the VSC C# extension package
1. On desktop, select System Settings > Network > Network Proxy > HTTP Proxy and type the IP address, including port number
2. On desktop, select System Settings > Network > Network Proxy > HTTPS Proxy and type the IP address, including port number

Configure VSC firewall proxy settings (for install of library packages such as mono runtime and .NET Core Debugger)
1. Select File > Preferences > Settings > Edit
2. Select HTTP in middle pane
3. (a) Select Edit icon > Copy to settings. “http.proxy” should be copied to right hand pane, then (b) add the proxy setting:
```
  {
"http.proxy": "http://xxx.xxx.xxx.xxx:xxxx
  }
```

The proxy settings are saved to the settings.json file.

The screenshot shows the installed C# extension package, and also the proxy settings for the library packages in the settings.json file.

OR Set the OS environment variables http_proxy and https_proxy, in a terminal from which VSC will be run
```
 $ export http_proxy=http://xxx.xxx.xxx.xxx
 $ export https_proxy=http://xxx.xxx.xxx.xxx
```

These export variables could also be set in your .bashrc file.