Using webOS TV Plugin

The Sublime Text plugin, which you probably are already familiar with, provides most features of the webOS TV CLI. It means that you do not have to study the CLI commands from scratch. With the webOS menu provided in the Sublime Text plugin, you can have the same result as the webOS TV CLI. If you want to check available features in the Sublime Text plugin, see Supported features.

Creating web apps

For web app creation, the webOS TV SDK provides a web app template, JS service template, and configuration file template (appinfo.json).

Creating web app from webOS project template

webOS TV SDK provides a web app template that allows you to develop web apps easily. The following shows how to create a web app using a template:

1. Click webOS > Create webOS Application from the menu.

2. From the list, select a template.

3. Enter your app name at the bottom of the Sublime Text window. The Status bar shows the app creation progress. If the new app project is created successfully, the Status bar shows the created app path, and the template package is listed in the Sidebar.

4. Implement your app according to your development plan.

Creating JS service from template

webOS TV SDK provides a JS service template that contains a sample JS service. The sample JS service responses to simple messages for service requests. Note that the JS service template MUST be created with a web app template or added to an existing web app.

The following shows how to create a JS service using a template:

1. Click webOS > Create JS Service from the menu.

2. Select the js_service template you want to create on the list.

3. Enter the service name at the bottom of the Sublime Text window. Then, the Status bar shows the JS service creation progress. If the project is created successfully, the Status bar shows the created service path, and the template package is listed in the Sidebar.

4. Implement the JS service according to your development plan.

Creating appinfo.json from template

The plugin provides the same configuration file template (appinfo.json) as the webOS TV CLI provides. The appinfo.json template is an essential file for webOS TV apps. It specifies metadata of the web app, such as app id, name, and other related resources. An example of appinfo.json is as below:

{
  "id": "com.yourdomain.app",
  "version": "0.0.1",
  "vendor": "My Company",
  "type": "web",
  "main": "index.html",
  "title": "new app",
  "icon": "icon.png",
  "largeIcon": "largeIcon.png"
}

webOS TV uses the appinfo.json file to identify or launch the app. The following shows how to create the appinfo.json file:

1. Click webOS > Create Appinfo.json from the menu. Once the appinfo.json file exists in the currently selected web app package, the Setup Appinfo.json menu is disabled.

2. The appinfo.json template is open to the editor.

3. Modify the properties according to your app.

4. Save it to the root directory of the app package. When you package your web app, the system searches the appinfo.json file first, and all subfolders and files are packaged based on the location of the appinfo.json file.

If the related appinfo.json file exists in the web app package, the Setup Appinfo.json menu is shown on the webOS menu. To set up the appinfo.json file:

1. Select the appinfo.json file in the Sidebar. Or, Click webOS > Setup Appinfo.json from the menu.

2. The appinfo.json file for the current web app package is opened to edit.

3. Modify the properties according to your app.

4. Save the changes.

Importing code samples

Code Samples , which are provided by LG Developer, can be imported into the Sublime Text. Following shows how to import code samples which are downloaded from the LG Developer:

1. Download a zipped code sample on your computer and unzip it to any folder.

2. Drag the unzipped project folder and drop it into any place on the Sublime Text.

3. Check whether the code sample project is imported successfully. Then, run it on a web browser or the target device.

Packaging web app

To install and launch your app and service on a target device, you must package your app and JS service in the specified directory. You can package them in the following two modes:

Minify Mode

Minify mode reduces the size of your source code when creating the package file. It adjusts and shrinks variable names and line spacing. It also merges multiple files into a single file to reduce source code size and file loading time. You can use the minify mode to install your app on the target device or submit your app to LG Seller Lounge.

Non-minify Mode

Non-minify mode skips the process of minifying your source code and creates a package file (.ipk) with the source code. You can use the non-minify mode to debug your app.

How to package a web app

To package a web app in Sublime Text, follow the steps below.

1. Click webOS > Package - minify mode or webOS > Package - non-minify mode from the menu.

2. The package file (.ipk) is created in the same directory as the appinfo.json file. You can check the status and the path of the created package file in the Status bar.

Installing web app

You can install the package file on the target device. Before installing your web app, get ready for the package file, and select a target device. Also, connect to the target device according to the selected target device.

For installing your web app in Sublime Text, click webOS > Install from the menu. If the package file does not exist in the directory, the app is automatically packaged. You can check the installation status in the Status bar.

Checking the installed app

You need to check whether your app is installed successfully on the target device. For checking apps installed on the target device, click webOS > Installed Application List from the menu. This menu shows the app IDs, which are installed on the selected target device.

Launching web app

You can run the installed app on the target device or a web browser.

Running on web browser

The plugin provides the preview on an external web browser. This feature enables you to check the preview of an app before launching on a target device. To run your web app on the web browser, follow the step below.

1. In the plugin, select the project in the Sidebar.

2. Click webOS > Run as browser from the menu. Then, the preview is launched in the web browser.

Running on target device

For launching your web app on the target device in Sublime Text, click webOS > Launch from the menu. If the app is not installed on the target device, the package file is automatically installed and launched to the target device.

Checking running apps

You need to check whether your app is launched successfully on the target device. For checking apps launched on the target device, click webOS > Running Application List from the menu. This menu shows the app IDs that are running on the selected target device.

Debugging web app with Web Inspector

The webOS TV SDK provides Web inspector for debugging web apps. Web inspector monitors your web app running on the target device with the execution information. Web inspector uses the Chromium browser as a default browser. The webOS TV SDK includes the Chromium browser, so you don’t need to install the chromium-browser on your computer.

To debug your web app, you must package your app with non-minify mode. If the source code was minified or the files were merged, it becomes difficult to check the information. Select a package file and click webOS > Debug with Web Inspector from the menu for debugging.

Useful Tips for Plugin

There are useful tips for plugins.

Shortcuts

The plugin provides shortcut keys for the webOS menu. To use the shortcuts below, click the guided set buttons simultaneously.

Quick button

After developing your app, the steps to package, install, and launch your app are complex and tiresome. You may want to do these steps simply just with one button.

The plugin provides two menus for this feature as below:

• Install + Launch button

The package file must exist in the selected project. If not, the error occurs with an error message.

• Package + Install + Launch button

The app is packaged with a minify mode.

Autocomplete

Autocomplete suggests the completion popup for a keyword as you type in the editor. Therefore, typing only a few characters shows the complete candidate words or sentences with this Autocomplete feature.

To use the Autocomplete feature, click Ctrl + Space bar at the same time and select one from the completion popup. For example, click Ctrl + Space bar after typing luna:// words. Then, the completion popup shows the available service APIs. When the mouse pointer moves to the method, the available methods are listed on the completion popup by clicking Ctrl + Spacebar.

Snippets

The plugin provides the snippets only for a JavaScript file such as enyo.kind and webos.service.request.

Snippets are a kind of templates that insert text to the editor, which helps you avoid annoyingly repeated typing. On the JavaScript file, for example, type enyo and select enyo.kind from the list by pressing the Tab button. Then related source code is inserted as below.

enyo.kind({
    name:"*MyNewKind*",
    kind:"*enyo.object*",
    components:[
    ],

    create: function(){
        this.inherited(arguments);
    }
});

Type webOS and select webOS.service.request from the list by pressing Tab button. Then related source code is inserted as below.

webOS.service.request("luna://*com.palm.connectionmanager*",{
    method:"*getStatus*",
    parameters: {},
    onSuccess: *getStatusResponse*,
    onFailure: function(inError){
        //...
    },
    onComplete: function(inResponse){
        //...
    },
    subscribe: true,
    resubscribe: true
});

function *getStatusResponse*(inResponse){
    var success = inResponse.returnValue;
    return true;
}

Help menu

The Help SublimePlugin menu provides the helpful link for developers.

1. In the plugin, click webOS > Help SublimePlugin from the menu.

2. Click the link on the popup window. Then, the web browser is open and goes to the Using Plugin for Sublime Text help page in the webOS TV Developer site.