Tutorials
Prepare
In this section we explain how to set up a widget development environment,
how to use the SDK, and how to get started running a sample widget.

Step 1: Widget Installation
Step 2: Enabling a Widget
Step 3: Understanding Widget Structure

Step 1: Widget Installation

Let's start by learning how to install a widget. So far we don't have a tool that will simulate the mylo® device on a PC for widget testing, so instead we will walk through the widget installation process so we can test a sample widget on the mylo® device.


1.1 Installing a Widget

  1. Tap "mylo" button to launch mylo® Screen and select "Widget Installer" from the OPTION menu.
  2. When "Widget Installer" has launched, select "Install."





  3. The following is the initial screen for the Widget Installer

    4. Use this screen to find a widget file you would like to install.
    Select the desired widget and then select "Install".




  4. When the following dialog is displayed, select "OK" to begin the install process.




  5. Details about the widget are displayed.  If correct, then select "OK" to start installing the widget.




  6. If the widget has an end user license agreement (EULA), the following screen will appear. Read the agreement and tap "Accept" to proceed with the installation process.





  7. The following dialog will be displayed when the installation process is successful. Select "OK" to complete the process.





    8. The installation process has now completed.

Step 2: Enabling a Widget
 Go back to the top of the page

Let's enable the widget we just installed! The steps to enable a widget are the same regardless of whether the widget is your own creation or one downloaded from the mylo® Widget Gallery. The following steps are very important and should be followed exactly.

2.1 Widget Settings

In order to use a widget, you have to enable it after it is installed.

  1. Switch to Widget Setting mode

    2. Tap the "mylo" button to launch the mylo® Screen and select "Widget Setting mode" from the OPTION menu.




  2. Disable Widgets

    3. For each widget you choose to disable, tap the [x] icon at the upper right corner of the widget.




  3. Enable Widgets

    4. Select "Add Widget" from the OPTION menu or tap on an empty position on the screen that does not contain a widget. A list of widgets that are not currently enabled will be displayed. Choose the widget you want to enable from the list, then select “Add”.




  4. Widget Settings

    5. By tapping and holding the upper left corner "Move" icon, you can move the widget around the screen. You can also move the widget by tapping and dragging on any part of the widget except the icons.




    By tapping and holding the "Resize" icon at the lower right corner of the widget, you can resize the widget.




    You can change a widget's settings by tapping the "Settings" icon at the lower left corner of the widget.





    Press the 【BACK】 button or select "Exit Setting Mode" from the OPTION menu to go back to the Active mode and run the widget.





Step 3: Understanding Widget Structure
 Go back to the top of the page

Finally, we will look at how the widget program itself is structured. Here, we will explain it using a very simple example, but the basic structure and concepts are the same for all widgets.

3.1 Widget Program Structure

The following files are located in the Simple Widget folder.




The following files are necessary to run a widget. The ZIP file that includes all these files (with a .mylow extension) is called the "Widget Package."

The index.html and widgetPackage.xml are required files. They must be included in the Widget Package for the widget to install properly.

The files in the Widget Package must follow these rules:

Use UTF-8 for the character encoding type
Use LF for new line characters
Everything is case sensitive


3.2 Explanation of Widget Package files

index.html (required)
Contains the basic layout and structure of the widget's elements and in some cases the behavior of the widget.

widgetPackage.xml (required)
Includes basic metadata about the widget including its name, version, description and default height and width.

- The preceding two files are the ones that developers use the most.

myloConfig.xml (optional)
Includes the structure of a widget's settings and preferences.

If a Widget Package does not include a myloConfig.xml file, it will be created when the widget program is installed.

eula.txt (optional)
eula.txt file is the End User License Agreement that a user must agree to in order to install a widget.

temp.xml (reserved)
temp.xml file is automatically generated when the widget saves information.

If the Widget Package already includes this file, the file will be deleted when the Widget Package is installed.

dropbox (reserved)
dropbox is the folder where the downloaded files will be saved.

If the Widget Package already includes this folder, the folder will be deleted when the Widget Package is installed.

parts *
parts is the folder where the required images for the widget are included.

code.js *
code.js is the JavaScript file that contains code that defines the widget's behavior.

style.css *
style.css is a CSS file that contains styles for the widget’s visual layout.

* As long as they do not conflict with any of these reserved names, you can create files and folders with any name you choose.

You can learn more about these files in the Develop section.


Go back to the top of the page