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
- Creating Web Application
- Packaging Web Application
- Installing Web Application
- Launching Web Application
- Debugging Web Application with Web Inspector
- Useful Tips for Plugin
- Help Menu
Once the webOS TV SDK and the plugin are installed on your computer, start the Sublime Text 2 () from the Startmenu.
Then, you can select a target device in webOS > Select Target Device menu.
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 Application from webOS Project Template
- Creating JS Service from Template
- Creating Appinfo.json from Template
- Importing Code Samples
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:
The following shows how to create a web app using a template:
- Click webOS > Create webOS Application from the menu.
- From the list, select a template.
- 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.
- Implement the app according to your development plan.
For more detailed information on templates, see Creating a Web App with CLI.
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:
- Click webOS > Create JS Service from the menu.
- Select js_service template you want to create in the list.
- 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.
- Implement the JS service according to your development plan.
For more detailed information on JS Service, see JS Services.
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:
"vendor": "My Company",
"title": "new app",
webOS TV uses the appinfo.json file to identify or launch the app.
The following shows how to create the appinfo.json file:
- 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.
- The appinfo.json template is open to the editor.
- Modify the properties according to your application.
- 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:
- Select the appinfo.json file in the Sidebar. Or,
Click webOS > Setup Appinfo.json from the menu.
- The appinfo.json file for the current web application package is open to edit.
- Modify the properties according to your application.
- Save the changes.
For the detailed information on the appinfo.json file, see appinfo.json.
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:
- Download a zipped code sample on your computer and unzip it to any folder.
- Drag the unzipped project folder and drop it into any place on the Sublime Text.
- Check whether the code sample project is imported successfully. Then, run it on a web browser or on the target device.
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.
- Click webOS > Package - minify mode or webOS > Package - non-minify mode from the menu.
- 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.
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.
For the detailed information on target device, see Selecting Target for Application Launching.
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.
The installed application can be run on the target device or a 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:
- In the plugin, select a project in the Sidebar.
- Click webOS > Run as browser from the menu.
- Then, the preview is launched in an external web browser.
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.
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.
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.
There are useful tips for plugin such as
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.
|Create webOS Application||Ctrl+Alt+A|
|Create JS Service||Ctrl+Alt+J|
|Package – minify mode||Ctrl+Alt+P|
|Run as browser||Ctrl+Alt+B|
|Debug with Web Inspector||Ctrl+Alt+D|
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 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 are a kind of templates that insert text to the editor, which help you avoid annoyingly repeated typing.
Type 'webOS' and select 'webOS.service.request' from the list by pressing Tab button. Then related source code will be inserted as below.
var success = inResponse.returnValue;
The Help SublimePlugin menu provides the helpful link for developers.
- In the plugin, click webOS > Help SublimePlugin from the menu.
- 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.