 
|
This tutorial will assist you with the steps of the widget development process using a simple widget as a guide. Step 1: Preparation Step 2: Basic Widget Functionality Step 3: Advanced Applications |
Step 1: Preparation
We'll begin with the basic structure of a widget. The importance of the index.html
and widgetPackage.xml files and how they work will be explained, as they are necessary for your widget to function correctly.
and widgetPackage.xml files and how they work will be explained, as they are necessary for your widget to function correctly.
1.1 Overview of the Tutorial Widget
In our first lesson we'll get you familiar with a simple widget.
Below is an image of a finished widget that you may use as a reference.
Lesson 1: Overview of the Tutorial Widget
In our first lesson we'll get you familiar with a simple widget.
Below is an image of a finished widget that you may use as a reference.
Lesson 1: Overview of the Tutorial Widget
1.2 The widgetPackage.xml file
The file widgetPackage.xml is used to define attributes of your widget such as its name, version, dimensions etc.
In the next lesson we will explain what each of these attributes are used for and which ones are required.
Lesson 2: The widgetPackage.xml file
The file widgetPackage.xml is used to define attributes of your widget such as its name, version, dimensions etc.
In the next lesson we will explain what each of these attributes are used for and which ones are required.
Lesson 2: The widgetPackage.xml file
1.3 The index.html file
The index.html file is the core of the widget program. It contains the structure for the visual elements of your
widget and can also include the scripted actions that make those visual elements interactive.
Lesson 3: The index.html file
The index.html file is the core of the widget program. It contains the structure for the visual elements of your
widget and can also include the scripted actions that make those visual elements interactive.
Lesson 3: The index.html file
Step 2: Basic Widget Functionality
Go back to the top of the pageWidgets are all open source, which allows us to build complex programs by using simple widgets as examples. We have added a link on each applicable widget page to the download the finished program. It will help to refer to this while you develop your widget. In the following steps, you will develop your widget into the fully-functional completed widget which we introduced in Lesson 1.
2.1 Creating a simple widget
In this lesson we'll create a very simple widget which is based almost entirely on the index.html file.
Let's dig into how to write the index.html and widgetPackage.xml files, which are the base of widget development.
Lesson 4: Creating a simple widget.
In this lesson we'll create a very simple widget which is based almost entirely on the index.html file.
Let's dig into how to write the index.html and widgetPackage.xml files, which are the base of widget development.
Lesson 4: Creating a simple widget.
2.2 Using Preferences
Next, you will learn how to store and use preferences.
Let's study how to use/display/select data from an internal source.
Lesson 5: Using Preferences
Next, you will learn how to store and use preferences.
Let's study how to use/display/select data from an internal source.
Lesson 5: Using Preferences
2.3 Using a Timer
Sometimes you'll want your widget to perform recurring or time-based action(s),
so we'll show you how to add a slideshow function using a timer.
Lesson 6: Using a Timer
Sometimes you'll want your widget to perform recurring or time-based action(s),
so we'll show you how to add a slideshow function using a timer.
Lesson 6: Using a Timer
Step 3: Advanced Applications
Go back to the top of the pageLet’s add some more advanced functionality to the Tutorial Widget we created in Step 2.
3.1 Creating a widget that can be resized
Let's go over the process required to make your widget resizable.
Lesson 7: Creating a widget that can be resized
Let's go over the process required to make your widget resizable.
Lesson 7: Creating a widget that can be resized
3.2 Adding the search function
Next, we add the search function.
Lesson 8: Adding the search function
Next, we add the search function.
Lesson 8: Adding the search function
3.3 Adding various functions
Finally, we will add various functions.
Lesson 9: Adding various functions
Finally, we will add various functions.
Lesson 9: Adding various functions
Go back to the top of the page