Make your own widgets for Samsung star

Hi,

This is a small simple tutorial, how you can make your own widgets.

Widgets: These are the small applications which lay on the screen, and serve some purpose, like display date, time, calendar etc….

Technically there are many types of widgets, which are application specific, where it can run.

Samsung star supports HTML Widgets. HTML in the sense, widgets are comprises of html pages(.html), style sheets(.css), java script(.cs) and image files.

These are not a big deal to learn these. As a computer student or a software professional, you can build your own widgets.

Moving further, let’s start with building a simple widget.

Firstly, define the purpose of your widgets: for the example, I always want a text on the screen, no matter if I change my wallpaper frequently. But I hate to edit all the wallpapers and add the text to them, and use as the wallpaper. Instead we can make the widget of that text and make use of it. Now you can place this widget where ever you like, and change wallpaper independently as you like.

Widgets are zipped archive files with extension “.wgt”

This archive contains the following files/folders

Config.xml – XML file, which stores the configurations of the widget

Index.html – html file which loads when it starts

Images – Folder containing the image file (png,jpg)

Js – Folder containing the javascript files

Css – Folder containing style sheet files

Config.xml

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<widget xmlns="http://www.w3.org/ns/widgets" 
height="30" 
id="758261586-784785239" 
version="1.00"
width="100">
<title>Preetigagi</title>
 <description>Preetigagi</description>
<icon src="images/p.png"/>
 <content src="index.html"/>
 <access network="false"/>
</widget>
  1. height: specify the height of the widget
  2. width: specify the width of the widget
  3. id: Random or unique value for your widget
  4. version: version of widgets, use to replace the older widgets
  5. Title: name of your widget
  6. description: little description
  7. icon: path to the image, which you want it to be the icon
  8. content src: html page to load
  9. access network: set whether it access network or not

Images

In this folder, you can save your image files, used by your widget

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Preetigagi</title>
</head>
<body background="images/p.png" style="background-repeat:no-repeat">
</body>
</html>

This html page is the simplest one, it just loads an png image file for the background.

CSS And JS

As this is a simple application, it doesn’t require style sheet and java scripts and folders are empty. If your widget requires them add them in these folders and link them in index.html

Next, zip all the these contents into a zip archive [mywidget.zip], and change the extension to .wgt [mywidget.wgt]

Create an installer.html

<html>
<head>
<meta http-equiv="refresh" content="0; url=mywidget.wgt">
</head>
</html>

Finally, copy installer.html and mywidget.wgt to your star and install the widget by opening installer.html

You can download this widget here

Advertisements