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 the scratch. With webOS menu provided in the Sublime Text plugin, you can have the same result as the webOS TV CLI. If you want to check what are available features in the Sublime Text plugin, see The Differences Between Sublime Text Plugin vs. CLI.

The following sections provide:

Selecting Target for Application Launching

Once the webOS TV SDK and the plugin are installed on your computer, start the Sublime Text 2 (Sublime_Text_Logo.png) from the Startmenu.

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 various templates including: web app template, JS Service template and configuration file template (appinfo.json).

The following sections provide:

Creating Web App from webOS Project Template

webOS TV SDK provides a variety of web app templates (bootplates) that allow you to easily develop web apps. With the plugin, you can create a web application with the following templates:

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

 

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 the 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 the app according to your development plan.

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

webOS TV v1.x and v2.x have the Enyo v2.3 and v2.5 library. The webOS TV SDK v3.0.x creates apps using the Enyo v2.6 library by default. Therefore, if you want to run your apps that are created using Enyo v2.6 on webOS TV v1.x or v2.x, package your app with non-minify mode. The package file will contain the Enyo library which IDE provides by default.

Creating JS Service from Template

webOS TV SDK provides JS Service template which is running as a background service on JS Service. Sample JS Service responses simple messages for service request. 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 js_service template you want to create in 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 appthe 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 application 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 application.
  4. Save it to the root directory of the application package.
    When packaging a 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 in 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 application package is open to edit.
  3. Modify the properties according to your application.
  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 on the target device.

Packaging Web Application

The developed application 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 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 application 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, package will fail.

Installing Web Application

The package file can be installed on the target device. Before installing the web application, 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 application in Sublime Text, click webOS > Install from the menu.

If the package file does not exist in the directory, the application 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 application. Otherwise, installing a web application will fail.

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

Checking the Installed Applications

You need to check whether your application is installed successfully on the target device.

For checking applications installed on the target device, click webOS > Installed Application List from the menu.
This menu shows the application IDs which are installed on the selected target device.

Launching Web Application

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

You can launch or close a web application on Launcher and App Manager of the emulator. Refer to App Testing on webOS TV to install the package file on a real TV using USB.

Running on Web Browser

The plugin provides the preview on an external web browser. This enables you to check the preview of an application before launching on a target device.

Following shows how to run a web application 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 application on target device in Sublime Text, click webOS > Launch from the menu.

If the application 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 application ID which is referred to the appinfo.json file.

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

Checking Running Applications

You need to check whether an application is launched successfully on the target device.

For checking applications launched on the target device, click webOS > Running Application List from the menu.
This menu shows the application IDs which are running on the selected target device.

Debugging Web Application with Web Inspector

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

To debug a web application, you must package your application 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 CLI command. See Launching Node Inspector for the detailed information.

Useful Tips for Plugin

There are useful tips for plugin such as

Shortcuts

The plugin provides shortcut keys for 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 Shorcut
Create webOS Application 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 application, the steps to package, install and launch an application 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 application is packaged with a minify mode.

Auto Complete

Auto Complete suggests the completion popup for 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 JavaScript file such as enyo.kind and webos.service.request.

Snippets are a kind of templates that insert text to the editor, which help you avoid annoyingly repeated typing.

On the JavaScript file, for example, type 'enyo' and select 'enyo.kind' from the list by pressing 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