Softpedia
 

NEWS CATEGORIES:



NEWS ARCHIVE >>
SOFTPEDIA REVIEWS >>
MEET THE EDITORS >>
Home > News > Webmaster > Tips and Tricks

December 28th, 2007, 17:59 GMT · By Catalin Bocanu

How to Customize Opera Widgets

SHARE:

Adjust text size:


Opera Widgets Example
Enlarge picture
Opera widgets are web applications that run directly on your desktop without displaying the browser controls because Opera web browser can install and show them automatically.
They can be constructed using regular client side programming languages such as JavaScript and Flash. As a consequence, minimal knowledge regarding common used web-related programming languages are necessary if you want to create a new widget or to modify an existing one.

The main parts of an Opera widget are a file named index.html and a config.xml file. The index.html file can control external files, such as Flash animations or external Javascripts or could contain a Javascript in it, for example. Practically a widget could be assimilated to a regular client side web application which performs certain actions on a Windows or Linux desktop, as if it was called from a web browser.

The config.xml file is made in compliance with the Extensible Markup Language (XML) specifications. It contains the widget "configuration" options such as dimensions, icon, security, id and more. Every Opera widget is a zip archive containing beside index.html and config.xml other necessary files such as images, external javascript or CSS files.

For example, if you want to modify an existing Opera widget, you just have to download it and unzip all files in a convenient location, even if the file has not specified the archive type. Then, you must identify the elements that should be changed and their corresponding code in index.html, Javascript, Java or other existing file in the archive. For testing purposes (after you modify the widget) you must drag and drop the config.xml file directly in an Opera browser window and the widget will run automatically.

The next code forms an Opera widget that will display the current time on your desktop. It contains a Javascript included in the index.html file:

CODE

Clock


Look At The Current Time On Desktop!!!!!!
The current time is :

var Time = new Date()
var h = Time.getHours()
var m = Time.getMinutes()
var s = Time.getSeconds()
if (m < 10)
m = "0" + m
if (s < 10)
s= "0" + s
document.write(h + ":" + m + ":" + s)




The corresponding config.xml file must contain the next code:

CODE

Clock

This is a clock widget (simple clock)

300
300

yourdomainname.com
Clock
2007-12

TELL US WHAT YOU THINK:

6,606 hits · Link to this article · Print article · Send to friend · Subscribe to news

MUST-READ RELATED ARTICLES:


The Basic Structure of a HTML Template

Web Site Development with WYSIWYG HTML Editors

Optimal Usage of WYSIWYG HTML Editors: KompoZer Case

Easy Building of Web Applications with HTML/OS

Trip into the Future of HTML

READER COMMENTS:



No user comments yet.
Be the first to express your opinion!
Copyright © 2001-2012 Softpedia. Contact/Tip us at

WindowsGamesDriversMacLinuxScriptsMobileHandheldNews

SUBMIT PROGRAM   |   ADVERTISE   |   GET HELP   |   SEND US FEEDBACK   |   RSS FEEDS   |   UPDATE YOUR SOFTWARE   |   ROMANIAN FORUM