As we can see, a widget has the following structure:
/ Root
– config.xml
– index.html
– icon.png – this image file is what users will see in their widget bar
– / css
- css files
– / images
- PNG (recommended)
– / js
- js files
In this post I'm assuming that everyone has HTML/CSS knowledge. So let's understand the Widget architecture.
As we can see in Figure 1 and Figure 2, a widget is a front-end app that is emulated in a browser. The widget is composed by HTML + CSS + JS.
html>
a set of tags and rules for using them in developing hypertext documents
a protocol which include "tags" that are used to encode and format text, graphics, animation, sound, and other types of files on the World Wide Web
the predominant markup language for web pages. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists etc as well as for links, quotes, and other items.
css>
is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. ...
js>
is an object-oriented scripting language used to enable programmatic access to objects within both the client application and other applications.
is a scripting language widely used for client-side web development. It was the originating dialect of the ECMAScript standard. It is a dynamic, weakly typed, prototype-based language with first-class functions.
The application that we've created can run in any browser. You can try :)
Let's check the code:
html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id="hello">
<h2>Hello World</h2>
</div>
<div id="hello_again">
<h2>Another hello!</h2>
</div>
<h3 onclick="toggle()">Press to toggle</h3>
</body>
</html>
Very simple HTML with two id's: hello and hello_again (id's must be unique). And a call to toggle() js function.
js>
var state = 'hello';
//toggle function
//after any button click, this function will
//be called (based on created HTML).
function toggle()
{
//get the element id's (DOM)
var helloElem = document.getElementById("hello");
var hello_againElem = document.getElementById("hello_again");
//check the state
if(state == 'hello')
{
//change the CSS to hide the 'hello' element
helloElem.style.display = 'none';
//change the CSS to show the 'hello_again' element
hello_againElem.style.display = 'block';
//update state
state='hello_again';
}
else
{
//change the CSS to show the 'hello' element
helloElem.style.display = 'block';
//change the CSS to hide the 'hello_again' element
hello_againElem.style.display = 'none';
//update state
state='hello';
}
}
css>
body {
padding: 0;
margin: 0;
}
/* hello id: used in html and js */
div#hello {
display: block;
}
/* hello_again id: used in html and js */
div#hello_again {
display: none;
}
h2 {
color:white;
text-align: center;
background-color:rgb(80, 80, 170);
}
h3 {
text-align: center;
color:white;
margin:-15px 10px 0 10px;
padding:4px;
background-color:rgb(80, 80, 170);
border:2px solid;
border-color:#c4c4e8 black black #c4c4e8;
font-family:sans-serif;
font-size: medium;
}
So, can you see how these elements are connected? In HTML file, as presented:
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/main.js"></script>
</head>
Easy?
:)
Thanks for your visit! :)
Next post: Widgets: Tips and Good Practices!
Feel free to ask/suggest/comment.
Twitter: @oliveiraeduardo
Nenhum comentário:
Postar um comentário