Setting up Project

The webOS TV SDK provides various templates for project creation including: web app templates and JS service template.

You can create a web app project in the following ways:

CREATING WEB APPS FROM WEBOS PROJECT TEMPLATE

webOS TV SDK provides various web app templates (bootplates) that make your web app development easier.

With the IDE, you can create web apps with the following templates:

  • basic
  • moonstone-2014
  • moonstone-2015
  • moonstone-2016
  • moonstone-2017
  • js_service

The following shows how to create web apps using a template:

  1. In the IDE, click webOS Menu > New webOS Project from the menu.
    Alternatively, you can start a new webOS Project using any of the following:

    • Click File > New > New webOS Project from the menu.
    • Select New > New webOS Project from the right-click menu in the Project Explorer. 
    • Click New webOS Project from the drop-down menu next to the toolbar icon (toolbar-create-1.png).
     
  2. Enter a project name and select a template from the Project Templates list. 
    New_Project.png
     
  3. Click the Finish button.

The status bar at the bottom of the New webOS SmartTV Project window will show the app creation progress. If the new app project has been created successfully, the Console will show the created app path and the template package will be listed in the Project Explorer.


The appinfo.json file of the created project will automatically open in editor in case you have anything to modify.

For more detailed information on templates, see Creating a Web App with CLI.

If you want to deploy your app on any available versions of the webOS TV, use moonstone-2014 template (Enyo version 2.3.0).

CREATING APPINFO.JSON FILE FROM TEMPLATE

The webOS TV IDE provides the same configuration file template (appinfo.json) as the webOS TV CLI provides.

The appinfo.json template is an essential file for the webOS TV app which specifies metadata of the web app such as app id, name, and other related resources. An example has been provided below:

{

    "id": "com.yourdomain.app",
    "version": "0.0.1",
    "vendor": "My Company",
    "type": "web",
    "main": "index.html",
    "title": "Your Project Name",
    "icon": "icon.png",
    "largeIcon": "largeIcon.png"

}

 

webOS TV uses the appinfo.json file to identify the application or to launch the application.

The appinfo.json file can be edited in two ways as below:

  • Using Overview tab, you can edit the mandatory properties with its UI. However, optional properties cannot be added to the Overview tab.
  • Using appinfo.json source tab, both the mandatory and optional properties can be edited.

 

The webOS TV IDE checks the syntax errors and warnings for the appinfo.json file. It shows red and yellow icons on the source code; those colors mean that the property name or value that is written is not correct or unsupported. The red icon in the IDE indicates syntax errors and the yellow icon indicates warnings.

After you edit the appinfo.json file, make sure you save it in order to apply the changes.

For the detailed information on appinfo.json file, see appinfo.json.

CREATING ENYO SOURCE FILE IN PROJECT

You need to implement Enyo source files in your project. The following shows how to create an Enyo source file:

  1. In the IDE, click webOS Menu > New > New Source File from the menu.
    Or, you can create an Enyo source file with the following ways:

    • Click File > New > New Source File from the menu.
    • Click New Source File from the arrow on the right of the toolbar icon (toolbar-create-1.png).
     
  2. Select a parent folder which will be created in a project. 
     
  3. Enter a file name in the File name field and click Finish button.

Importing webOS Project

Any web app project which contains the appinfo.json file can be imported into the webOS TV IDE. However, the project which has the same name with already created project name cannot be imported into the webOS TV IDE.

The following shows how to import an existing webOS TV project:

  1. In the IDE, click webOS Menu > Import webOS Project from the menu to import a webOS TV project into the IDE.
    Or, you can import a webOS TV project with the following ways:

    • Click File > Import from the menu and select webOS > Import webOS Project on the Import window.
    • Select Import from the right-click menu in the Project Explorer and select webOS > Import webOS Project on the Import window.
     
  2. Click the Browse button to select appinfo.json file from file dialog, then click Open
     
  3. Click Finish to import the selected project into a folder.
    Then, the existing project source file is copied into the Project Explorer.
Here are Code Samples which are provided by LG Developer that can be imported into the webOS TV IDE.

Importing Custom Templates

The webOS TV IDE provides various templates for you to easily develop web applications. However, if you want to use your own templates for web application development, refer to the below steps:

 

Following shows how to register a new custom template on the UserTemplate folder under the workspace:

  1. Click webOS Menu > Register Application as Template from the menu to register the current application project as a template. Or,
    Click toolbar icon (icon_template.png).
     
  2. Click the second Browse button to modify the template location. The UserTemplate folder under the default IDE workspace is used to save the custom templates.
     
  3. Enter a template name. Enter a description and register a preview image if needed. Then, click Finish to register a custom template.
     
  4. To check the registered custom templates, click webOS Menu > New webOS Project from the menu. 
    the registered template under the UserTemplate menu is newly created and one of the user's templates is selectable.
To change a location where custom templates are saved, set the Preferences from the Window menu. 
On Preferences window, click webOS > User Template in the tree view on the left side of the window and change a location with Browser button.

CREATING PROJECT FOR SERVICES

The webOS TV SDK provides a service template to help your easy start on developing a service. Before you create a service, you MUST have an app project created in advance.

  1. Create a webOS project following any one of the instructions given below.
    • From the workbench menu bar, select webOS Menu > New webOS Project.
    • From the workbench menu bar, select File > New > New webOS Project.
    • From the workbench toolbar, click the arrow next to the new wizard icon ide_new_wizard.png and select New webOS Project.
    • Right-click on any place in the Project Explorer view, select New > New webOS Project.
    Doing one of the above opens up the New webOS Project dialog.
     
  2. On the New webOS Project dialog,
    1. Select the jsservice category from the Project Template list.
       
    2. In the Project name field, type in a project name for your service. We have entered MyService as the project name.

       
       
    3. If desired, change the location of this service project. If not, skip this step.
       
    4. Click the Next button. This opens a new New webOS Project dialog.

       
       

  3. On this new New webOS Project dialog, click the Browse button to select the app project for which the service is developed. This opens the Project Selection dialog.

     
     
  4. On the webOS Project Selection dialog, select an app project to which this service is written for and click the OK button. This closes the selection dialog.
     
  5. Once you have set your service name, click the Finish button to proceed. Then a popup shortly appears to show you the status project creation. 
    If the new project is created successfully, the Console would have a set of messages about project generation. 

Navigation