Creating WebAssembly Applications

This section describes how to create a basic "Hello World" - type application with WebAssembly.

Creating a WebAssembly Web Application

The WebAssembly Web application is the main "container" for both the HTML/JavaScript and WebAssembly parts.

To create the Web application:

  1. Select "File > New > Tizen Project" in the Tizen Studio main menu.

  2. Select "Template" or "Sample", and click "Next".

    Figure 1. Select Project Type

    Figure 1. Select Project Type

  3. Select the "TV" profile and a version from the drop-down list and click "Next".
    Note: To be able to develop WebAssembly, you need to choose "TV-samsung v5.5" or a newer version.

    Figure 2. Select Profile and Version

    Figure 2. Select Profile and Version

  4. Select the "Web Application" as the application type, check the "WebAssembly (C/C++)" check box, and click "Next".

    Figure 3. Select the Application Type

    Figure 3. Select the Application Type

  5. Select an application template and click "Next".
    The Tizen Project Wizard creates the project based on the selection.

    Figure 4. Select the Application Template

    Figure 4. Select the Application Template

  6. Define the project properties and click "Next".

    Figure 5. Define Project Properties

    Figure 5. Define Project Properties

  7. Enter paths to the Samsung Emscripten SDK configuration file and cache directory.
    The Emscripten SDK configuration file (.emscripten) is the one that was created in the Setting Up Samsung Emscripten SDK stage.
    The paths can either be entered manually or you can click the "Browse" button and select the path. Click "Finish".

    Note

    The configuration file must exist and be readable - otherwise it cannot be selected.
    If the selected cache directory does not exist, it is created on the first time the WebAssembly module is built.

    Important

    It is recommended to set a different cache directory for each WebAssembly module so that each cache can be cleared when required without impacting other caches.

    Figure 6. Select the Toolchain

    Figure 6. Select the Toolchain

Adding a WebAssembly Module to Web Applications

To add a WebAssembly module to a Web application:

  1. In the Tizen Studio "Project Explorer" view, right-click on the Web application project that you have created in the previous section.

  2. Select "New > WebAssembly Module".

    Figure 7. Add a WebAssembly Module

    Figure 7. Add a WebAssembly Module

  3. Specify C++ as the programming language, click the HelloWorld sample, and then click "Next".

    Note

    If you do not want to use a sample, you can also select an empty module for the module content. The empty module is a basic WebAssembly module that does not provide any particular functionality. It can be used as a starting point for creating the target WebAssembly module (usually much more complicated and comprised of several header and source files).

    Figure 8. Define Module Content

    Figure 8. Define Module Content

  4. Define the module name. The module name must be unique in the current workspace.

    Figure 9. Define the Module Name

    Figure 9. Define the Module Name

  5. Define the canvas and text area (if required) for displaying the WebAssembly module on the web page, and click "Finish".

    Note

    If a sample module (like HelloWorld) is selected, the position and size controls are not visible, because the module display layout is controlled by the sample's settings.

    Figure 10. Configure Module Visibility

    Figure 10. Configure Module Visibility

The module is created within the wasm_modules folder in the application project. It also appears as its own project in the "Project Explorer" view, so you can configure and develop the module separately.

Figure 11. Project Explorer Tree

Figure 11. Project Explorer Tree