Setting Up the NUI Development Environment on Ubuntu
PUBLISHED
This topic explains how to setup, build, and run NUI (DALi C#) applications using Visual Studio Code (VSC). It assumes that the starting point is a completely 'clean' system, though that is not essential.
VSC can be installed on Ubuntu 14.04 and onwards.
The NUI Hello World tutorial [1] is used as an example. It provides an introduction into NUI application development, describing how to display text in a text label.
Installing .NET Core and Visual Studio Code
To install .NET Core and Visual Studio Core (VSC):
- Install .NET Core for Ubuntu [2].
- Install the latest version of Visual Studio Code for Ubuntu:
- Download the Debian package from https://code.visualstudio.com [3].
- Install the package:
$ sudo dpkg -i code_1.10.2xXXXXXXXXXX_amd64.deb
- Launch VSC:
- Launching VSC through the icon:
- In the desktop launcher, select Search your Computer > Applications for the Visual Studio Code icon.
- Select the Launch button to open VSC.
- Optionally, copy the VSC icon to the launcher, so you can start VSC by double-clicking the icon in the launcher.
- Launching VSC from the terminal:
$ code // Launch VSC $ code // Launch VSC in current directory $ code myfile // Open file in VSC
- Launching VSC through the icon:
- Set the firewall proxy settings.
VSC requires installation of required packages and libraries. It can be necessary to configure the firewall proxy settings to enable HTTP download.
- Install C# extension in the VSC Extensions view:
- Bring up the Extensions view by clicking the Extensions icon in the Activity Bar, or by pressing Ctrl + Shift + X. This brings up all the extensions in the VS code marketplace.
- Type "C#" to filter the selection.
- Click Install next to the C# extension. After a successful install, click Reload to restart VSC.
Alternatively, you can install the C# extension through the Visual Studio Marketplace [4].
- Familiarize yourself with VSC by building the "Hello World" application. For more information, see Get Started with C# and Visual Studio Code [5].
Getting the NUI Source Code
To get the NUI source code from Git:
-
Create a NUI root folder for the source code. The following example uses
~/DALiNUI
.$ mkdir ~/DALiNUI $ cd ~/DALiNUI
- Get the source 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/nui
- Switch to the
devel/master
branch for each required repository, for example, fordali-core
:
$ cd ~/DALiNUI/dali-core $ git checkout devel/master
Setting Up the NUI Build Environment
To set up the NUI build environment and save the settings to a file:
$ cd ~/DALiNUI $ dali-core/build/scripts/dali_env -c $ dali-env/opt/bin/dali_env -s > setenv $ . setenv
The above process only needs to be done once.
You must source your environment variables every time you open up a new terminal (or you can add them to .bashrc
). You can do this by sourcing the setenv
script you created above:
$ . setenv
Building the NUI Source Code
To build the NUI source code:
- Build the DALi native repositories in the following order, following instructions in the
README
file in each repository folder:- Build
dali-core
. - Build
dali-adaptor
. - Build
dali-toolkit
.
The shared library files (
.so
) are built and installed into the~/DALiNUI/dali-env/opt/lib
folder. - Build
- Optionally, run and test DALi Native (C++):
- Get the code. This step requires the
dali_demo
repository. - Build from the README file (see the Building the Repository section).
- 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 the test is successful, the DALi demo window appears.
- Get the code. This step requires the
- Change to the NUI C# bindings folder:
$ cd dali-csharp-binder
- Build the NUI C# bindings:
$ autoreconf --install $ ./configure --prefix=$DESKTOP_PREFIX $ make install -j8
- Copy the
nui
source folder to a newnuirun
subfolder (for subsequent overwriting of files):
$ cd ~/DALiNUI $ mkdir nuirun $ cp -r nui/Tizen.NUI/src nuirun
- Copy/overwrite 2 NUI files in
~/DALiNUI/nuirun/src/public
:- Download CoreApplication.cs [6].
- Download NUIApplication.cs [7].
- Place the files in your
nuirun/src/public
folder (overwrite the existingNUIApplication.cs
file).
Replacing the above 2 files is necessary, as NUI in Ubuntu is not fully supported just yet (as of July 2017).
- To subsequently clean the build (if required), see Cleaning the Build.
Building and Running the Hello World Tutorial
To build and run the Hello World (NUI) tutorial:
-
Create the tutorial file:
- Copy the example code from the NUI Hello World tutorial [1] to a new file,
hello-world.cs
. - Create a
tutorials
folder. - Copy
hello-world.cs
to thenuirun/tutorials
folder:
$ mkdir tutorials $ cp hello-world.cs ~/DALiNUI/nuirun/tutorials
- Copy the example code from the NUI Hello World tutorial [1] to a new file,
- Create a Hello World project in VSC:
- Launch VSC.
- Select File > Open Folder in the main menu.
- Select the
nuirun
folder in the File dialog. - Open the command prompt by pressing Ctrl + ` (backtick).
- In the VSC integrated terminal, enter the following commands:
$ cd ~/DALiNUI $ . setenv $ cd ~/DALiNUI/nuirun $ dotnet new console
The
setenv
is not necessary, if the environment has been set up in your.bashrc
.The
dotnet new console
line creates a project, with a project filenuirun.csproj
and aProgram.cs
file. - Delete
Program.cs
in VSC Explorer, as it is not needed. - Modify the project file by editing
nuirun.csproj
, adding the following line inside thePropertyGroup
element:
<DefineConstants>DOT_NET_CORE</DefineConstants>
- Restore the dependencies and tools of the 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 a
tasks.json
file.Press Ctrl + Shift + P to open the command palette, type
ctr
, and select Configure Task runner > NET core.A
tasks.json
file is essential, to prevent "No task runner configured" or "Error Could not find the Pre Launch Task 'build'" errors from occurring when building. - Build the project:
$ dotnet build
Note This step builds thenui
library.The screenshot shows the key files associated with the "Hello World" project in VSC Explorer.
- Copy the shared library to the application runtime location (this step must be done after the build step, when the
bin
folder exists):
cp dali-env/opt/lib/libdali-csharp-binder.so ~/DALiNUI/nuirun/bin/Debug/netcoreapp1.1/
- Run the project:
- To run the full size application in the VSC integrated terminal:
$ dotnet run
- To run the adjusted size application in the VSC integrated terminal:
$ DALI_WINDOW_WIDTH=600 DALI_WINDOW_HEIGHT=800 dotnet run
- To run the full size application in the VSC integrated terminal:
Modifying the Hello World Application Window Size
You can configure the application Launch profile.
In VSC Explorer, open the launch.json
file. 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 are picked up if the application is run with F5.
Configuring Firewall Proxy Settings
To configure the firewall proxy settings:
- To set up the system firewall proxy settings to enable installing the VSC C# extension package:
- On the desktop, select System Settings > Network > Network Proxy.
- In the HTTP Proxy and HTTPS Proxy fields, enter the IP address, including the port number.
- To configure the VSC firewall proxy settings for installing library packages, such as mono runtime and .NET Core Debugger:
- Select File > Preferences > Settings > Edit.
- Select HTTP in the middle pane.
- Select Edit > Copy to settings.
The
http.proxy
is copied to the right hand pane. 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, with the proxy settings for the library packages in the
settings.json
file.
Alternatively, you can set the
http_proxy
andhttps_proxy
OS environment variables in a terminal from which VSC is run:$ export http_proxy=http://xxx.xxx.xxx.xxx $ export https_proxy=http://xxx.xxx.xxx.xxx
These export variables must also be set in your
.bashrc
file.
Cleaning the Build
To clean the NUI build:
$ make maintainer-clean