Using Sublime Text 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 The Differences Between Sublime Text Plugin vs. CLI.

The following sections provide:

Selecting Target for App Launching

Once the webOS TV SDK and the plugin are installed on your computer, start the Sublime Text 2 (Sublime Text icon) from the Start menu. Then, you can select a target device in webOS > Select Target Device menu.

When you start the Sublime Text for the first time, an emulator will be selected as a target device by default. To add other devices you are targeting, use the webOS TV CLI command. Once added, the target devices you have added will be shown in webOS > Select Target Device.

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 will show the app creation progress.
    If the new app project is created successfully, the Status bar will show the created app path and the template package be listed in the Sidebar.

  4. Implement your app according to your development plan.

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

Creating JS Service from Template

webOS TV SDK provides a JS service template, which is running as a background service on JS service. Sample JS service responses simple messages for service requests. JS service template MUST be created with a web app template or added to an existing web app.

The following shows how to create 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 will show the JS service creation progress. If the project is created successfully, the Status bar will show the created service path and the template package be listed in the Sidebar.

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

For more detailed information on JS service, see JS services.

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 has been provided 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 will be 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 will be 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.

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

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

The developed app and JS service must be packaged in the specified directory to be installed and launched on a target device. Packaging can be done in the following two modes:

  • Minify Mode
    Minify mode reduces the size of source codes 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.

  • Non-minify Mode
    Non-minify mode skips the process of minifying the source code and creates a package file (.ipk) with the original source code.

The big difference between minify mode and non-minify mode is that the minify mode is used for launching; the non-minify mode is used for debugging. For packaging 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.

The package is based on a file open in the editor. Therefore, if there is no open file in the editor, the package will fail.

Installing Web App

The package file can be installed 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 a 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 with minify mode before installing the package file. You can check the installation status in the Status bar.

You must run a target device in advance before installing or launching an app. Otherwise, installing a web application will fail.

For the detailed information on the target device, see Selecting Target for App Launching.

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

The installed app can be run on the target device or a web browser:

Running on Web Browser

The plugin provides the preview on an external web browser. This enables you to check the preview of an app before launching on a target device. Following shows how to run a web app on a web browser:

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

  2. Click webOS > Run as browser from the menu.

  3. Then, the preview is launched in an external web browser.

Running on Target Device

For launching a 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. Then, launch it to the target device. Actually, the system searches an app ID which is referred to the appinfo.json file.

To launch a web app, the target device must be launched on your computer in advance.

Checking Running Apps

You need to check whether an 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 which 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 a web app running on a 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 a web app, you must package your app with non-minify mode. If the source code was reduced 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.

Node Inspector for JS service debugging is not supported in the plugin now. You can use it by using the CLI command. See Launching Node Inspector for the detailed information.

Useful Tips for Plugin

There are useful tips for plugins such as

Shortcuts

The plugin provides shortcut keys for the webOS menu. To use the shortcuts below, click the guided set buttons simultaneously. For example, "Ctrl+Alt+A" is telling you to press the Ctrl key and while continuing to hold the Ctrl key, press the Alt key and A to perform the shortcut.

Menu

Shortcut

Create webOS app

Ctrl+Alt+A

Create JS service

Ctrl+Alt+J

Package – minify mode

Ctrl+Alt+P

Run as browser

Ctrl+Alt+B

Install

Ctrl+Alt+I

Launch

Ctrl+Alt+L

Debug with Web Inspector

Ctrl+Alt+D

Quick Button

After developing an app, the steps to package, install and launch an 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 showing an error message.

  • "Package + Install + Launch" button

The app is packaged with a minify mode.

Auto Complete

Auto Complete 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 Auto Complete feature.

To use Auto Complete feature, click "Ctrl+Spacebar" at the same time and select one from the completion popup. For example, click "Ctrl+Spacebar" after typing "luna://" words. Then, the completion popup will show 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 will be 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 will be 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 LG Developer site.

Navigation