Widgets for Web 2.0

Celeberating 2 years of Widgets !

We have fully revised and edited version of Developing Web Widget with HTML, CSS, JSON and AJAX.



What has changed ?

We heard you ! We went through all the reviews, comments, love-hate emails, of our readers and tried to answer each of the concern in the next edition of the book.

here is one review we got recently of the second edition !

5.0 out of 5 stars Excellent book (2nd Edition), February 16, 2012 By Jonh Smith

"I got the second edition of the book and I don't see any issue mentioned in other reviews. The book is a fantastic way to learn Web Widget even for beginner's and the topics are explained in easy to use manner. The book has a flair for design, so every topic is illustrated in a nice way to make you understand.

Overall as the title says it is, The Complete Guide to Web Widget, so every aspect of Web Widget is described in the book and if you go step by step, chapter by chapter, you will be able to create a very secure and advanced performance widget. Overall a great and timeless buy.

If you want to learn about Web Widget this is the ONLY guide available in the market, so grab it as soon as you can.

Buy it from amazon here http://www.amazon.com/Developing-Widget-HTML-JSON-AJAX/dp/1450502288/

Labels: developing widget, web widgets, widget book

3 steps to get the free book

1. Read the book Free chapter here, kindle edition here
2. Review the book at Amazon http://www.amazon.com/Developing-Widget-HTML-JSON-AJAX/dp/1450502288
3. Email your U.S. address to connectrajesh[@]hotmail[.]com

I got 5 publishers copy left for the book Developing Web Widget with HTML, CSS, JSON and AJAX If you live in USA and if you want to learn developing Web Widgets, send me your address. I will send you the book for FREE. The only thing I want is, you do an honest review for the Developing Web Widget book at amazon.com. This will help me write the next edition of the book and help others decide on the book. More about the book at http://widgets-gadgets.com.

Labels: Free, widget book

Labels: developing widget, download, web widget, widget book

If you ever wanted to create a secure and high performance web widget, here is a comprehensive book on the topic.

To create a successful web widget, the only complete guide you need is Developing Web Widget with HTML, CSS, JSON and AJAX.

In the Complete Guide to Web Widget you learn:

1. Know what are Web Widget and how they work

2. Create Hello World Widget with HTML, CSS and JavaScript

3. Create Rating Widget using HTML, CSS, JSON and AJAX

4. Know design guidelines and standard practices for Widget development

5. Create high performance Widget with bootstrapper

6. Create RSS Widget with Ajax, cross domain proxy server and Google ajax feed APIs

7. Create Widget using Facebook APIs and Facebook UI framework

8. Understand the Revenue Model of the Widget

Back Cover

Labels: developing widget, widget book

I was getting a lot of request for an Electronic copy of the book, result is, Developing Web Widget Kindle Edition.

A Kindle edition of the book is now available at Amazon store. The conversion of a PDF to Kindle format is not very accurate and the quality seemed a bit average, so keep that in mind. Also note that the Book edition is also newer edition.

So if you need a crash course on developing Web Widget you know (now!) where to look. Free Kindle software is available for PC, Mac, IPhone, IPad and the book’s instant delivery to your device is free.

Labels: developing widget, web gadget, widgets book

Here is the Sample chapter (chapter 5: Creating Hello World Web Widget With HTML CSS and Javascript) from the book Developing Web Widget with HTML, CSS, JSON and AJAX.

• Download HelloWorld Widget – 19.01 KB


• Download Chapter 5 in PDF – 685 KB

Chapter 5: Creating Hello World Web Widget with HTML, CSS, and JavaScript

� I hear and I forget. I see and I remember.

I do and I understand.� -Confucius

IN THIS CHAPTER

• Create a Hello World Widget


• How to pass parameter to the Widget


• How Widget process data


• What could be a good data source for Widget

Introduction

A web widget in simple terms is a client side, browser based application, with a small functionality, and which display data coming from different sources.

In this chapter, we will create a basic Hello World Widget using HTML, CSS, and JavaScript. This chapter gives you a good starting point to understand the development of a web widget. If you are a beginner I would suggest you to do this chapter along with me, and get a good grasp of all the aspects of the web widget. In the next section we will create a more advanced widget and you will learn all aspects of it, like customization,security and performance as in the real world scenario. This chapter first shows the different components of the Hello World widget, and then takes in a step by step process, to develop it.

We will use Microsoft�s Visual Web Developer Express (free) edition for developing the Widget, but you can use your favorite Integrated Development Environment (IDE).

Hello World Widget

Before diving into the developing the widget, let�s see what it does. The Widget takes two parameters with values �Hello� and �World�, one is passed from the test page where it is hosted and the other comes from the data which is hosted in the server, joins them and display it together along with the image as shown in figure 5.1. When you click on the �Hello World� text it redirects to a website http://widgets-gadgets.com , which is also passed as a parameter from the page.

Figure 5.1

Widget Overview

The main functionality of the widget is to display data based on the data from the server and the parameter passed in the page. The most common data for a web widget is JSON (JavaScript Object Notation) file format. The reason being that, the JSON data can be used cross domain , so what that means is a JSON data can be residing in a different server and the web widget on a users page can include and use it using a function call. Essentially the JSON data becomes the part of the parameter of the function call.

For example to include JSON data from the server, include a JavaScript file data.js, with a single function with json data as parameter as shown below:

// function which accepts JSON data
ParseData( JSONData[]);

// JSON data format
  [{ �text�: �MyText�}]

// Widget.js
ParseData(data)
{
  var jsondata = data[0]; // since the the JSON data is an array
  document.write(jsondata.text);
}

The actual JSON data can be array of any number of key value pairs which follows the JavaScript object notation. More information at JSON.org. The ParseData function will be in another JavaScript file say myWidget.js file And when the JavaScript file is loaded the function is called and the JSON data is then parsed and displayed using Document.Write.

The important point here is the data.js file can be dynamically created on the server side, here it is JSON data but it can also be dynamically created series of JavaScript document.write lines which renders HTML directly. Although having JSON data gives modularity to the approach.

Let�s now see the Hello World Widget architecture.

The architecture of a widget can be divided into three parts as shown in the Figure 5-2

• Data: The data of the widget, coming from data.js


• HTML: The page which hosts the widget and passes the parameter to the Widget


• JavaScript: The main functionality of parsing and displaying data


• Images and Style: Presentation of the Widget

In the section we will create a widget which take the JSON data coming from the server and parse and display it in the Widget as hello World. Open your favorite HTML editor and let�s get started.

Figure 5.2

Developing the Hello World Widget

The Hello World Widget will display �Hello World� along with the image of the widget in the viewable area of the widget.

Here are the parts of the widget as shown in Figure 5.3.

• Web page (testpage.html) where the Widget is hosted


• Bootstrap JavaScript file (bootstrap.js) which instantiates the Widget


• The core functionality (widget.js ) of the widget which takes the data and displays it


• JSON data file (data.js) which is hosted in the server


• The presentation of the Widget (style.css)


• Two images, widget and the background

Widget Page

Create a new HTML page and name it testpage.html and enter the code shown below. The widget code in the page contains few variables and javascript to include script to add a DIV element �myFirstWidget� and to include the bootstrap.js file. Don�t worry about them now, we will create and see what bootstrap does later.

The variables can also be given a local scope by encapsulating all the lines inside a single function and calling that function.

Test Page

 <script type="�text/javascript�">
  wWidth = �260px�;
  wHeight = �195px�;
  wFColor = �#627ea6�;
  wTitle = �Hello�;
  wURL= �http://widgets-gadgets.com�;
  document.write(�

�);
  document.write(��);
 </script>

Note that we are also not including the JavaScript file using HTML code but rather using the JavaScript code, this is to group the widget together as a single chunk of embeddable code. The HTML element myFirstWidget is the main element that is used to render the widget data as you will see later. The JavaScript file bootstrap.js contains the logic to load the widget functionality and the data. Let�s create bootstrap.js next.

Figure 5.3

Bootstrap

The bootstrap.js file is used to make the widget more modular, think of it as the light weight file which is loaded with the page but can load other files as needed. The widget might have multiple JavaScript files so a Bootstrap file is the single file which can contain all the code for initialization.

Create a JavaScript file and name it bootloader.js

document.write(�<link rel="�stylesheet�" type="�text/css�" href="�style." />�);
document.write(�<script type="�text/javascript�" src="�widget.js�"></script>
var myElement = document.getElementById(�myFirstWidget�);
var JavaScriptCode = document.createElement(�script�);
JavaScriptCode.setAttribute(�type�, �text/javascript�);
JavaScriptCode.setAttribute(�src�, �data.js�);
document.getElementById(�myFirstWidget�).appendChild(JavaScriptCode);

In our bootloader, we have more JavaScript code to load the data and the functionality of the widget. In the later chapter we will see how we can use bootloader to delay loading of the widget which free the page from loading. Note that widget.js is loaded first and data.js is rendered later, the reason is the data.js calls the function which is declared in the widget.js

In HelloWorld Widget we need three things from the bootloader:

• Loading the presentation style sheet, style.css


• Loading the JSON data, data.js


• Loading the logic of the widget, Widget.js, this takes the data and parses it

Presentation with HTML, CSS and Images

The first thing bootstrap code loads is the style sheet because it should be loaded before we use it in the widget code. The presentation of the widget consists of both style sheet and the images which are used to display widget data. For our widget let�s create a style.css and image(s) to be used for

widget and background (see figure 5-4).

Create a new file Style.css and add it to your project. A separate stylesheet file allows you to change the look and feel of the widget without touching the widget functionality. Enter the following code.

Note here we have a single style to be used on the widget DIV element later. The images are included in the source, but you can use a photo editing software to create them.

Figure 5.4

#MyWidget{
 margin:2;
 padding:5;
 font:Arial;
 font-size:larger;
 font-weight:bold;
}

JavaScript Object Notation (JSON) Data

The second thing bootstrap load is widget.js but let�s look at the data first because that will be passed in the widget.js. Create a new JavaScript file and name it data.js and enter the following:

  WidgetCallback([
   {
    �image_url�: �images/widget.gif�,
    �text�: � World �,
    �description�: � My First Widget�,
    �id�: �1�
   }
  ]);

As mentioned earlier the data,js is basically a function call with JSON data as parameter . We will create the function WidgetCallback in the Widget.js file. Note the key value pair for each parameter, each of them can be accessed using the dot notation in the called function. Next we will create the Widget.js

Core functionality with JavaScript

Create a new JavaScript file and name it widget.js

The JavaScript file widget.js will have single function WidgetCallBack. The function will read the JSON data and will generate HTML code based on the values in the data passed.

Here is the code of the file widget.js.

Note that both the color palette displays a limited set of colors, which is called web safe colors (more on this in next section) and includes gray colors. A color pallette has become a standard for widget color customization so lets see what is needed to create a color palette.

function WidgetCallback(JSONobject)
{
  var wHelloWorld = JSONobject[0];
  var wHTML = ��;
  wHTML += (�<center><div id="�MyWidget�">�);
  wHTML += (�<img border="�0�" width="0" height="0" src="��" />�);
  wHTML += (�<a target="�_blank�" href="��" style="text-decoration: none; ">�);
  wHTML += ( wTitle + � � + wHelloWorld.text + �</a>�);
  wHTML += (�</div></center>�);
  document.getElementById(�myFirstWidget�).innerHTML = wHTML;
 }

Note that the function WidgetCallBack is called as soon as data.js is loaded completely.

As you see the code creates the HTML code for Hello World. It takes values from the parameter passed from the test page as well as data from the JSON object.

• wWidth used for defining the width of the Widget


• wHeight used for height of the Widget


• wWidgetHelloWorld.image_url used for background image of the Widget


• wFColor used for the foreground color of the Widget Text


• wTitle and wHelloWorld.text together to display �Hello� and � World�

Note once the HTML is rendered the DIV element myFirstWidget�s innerHTML is updated.

That�s it now we have created the files required just open the test page in the browser and you should be able to see the Hello World Widget in action. Right now we have all the files locally so what I want you to do is make a small change in the bootstrap.js file, and run the test page again.

  var myElement = document.getElementById(�myFirstWidget�);
  var JavaScriptCode = document.createElement(�script�);
  JavaScriptCode.setAttribute(�type�, �text/javascript�);
  JavaScriptCode.setAttribute(�src�, �http://widgets-gadges.com/
  widgetbook/chapter4/data.js�);
  document.getElementById(�myFirstWidget�).appendChild(JavaScriptCode);

The point here is the widget is independent of where the data is located, and so can be hosted any web page in any domain.

Widget Data Display Complete Process

In Hello World Widget JSON data is the link between the server side data and the widget. The JSON data is meant to be created dynamically by server side code and is consumed by the widget residing on the web page. The process of displaying Hello World starts from the parameter �Hello� which along with other parameters are passed to the widget. The Widget is then loaded along with the Data, from where comes the text �World� the widget functionality joins the two text and

displays it in the Widget Element. Figure 5-5 shows the architecture of the Widget for Hello World Widget.

Here are the steps for data display of Hello World Widget:


1. Test page loads the widget is loaded with parameters


2. Widget calls the data.js which has the dynamic content


3. The style sheets are loaded for the widget presentation


4. The widget functionality includes parsing the dynamic content


5. The widget functionality uses parameters passed to render the final HTML code


6. Final Widget display HTML is passed back to the web page

Figure 5.5

Summary

In this short chapter we learnt how to create a simple �Hello World� Widget. We saw how a widget can display data from a remote server:

• Widget can be divided into three parts
  
  
  
  • Core functionality in the form of Script
  
  
  • Data from the remote host
  
  
  • Presentation in the form of Style sheet and images
  
  
  
  


• Widget interaction includes
  
  
  
  • Parameters passed from the page where it is hosted
  
  
  • Dynamic data which comes from the server
  
  
  • Script code which renders the Widget code based on the parameters and the data
  
  
  
  

References

• Developing Web Widget with HTML, CSS, JSON and AJAX


• All about Web Widgets

Thanks

I hope you find this useful. I would be delighted to hear your comments email at connectrajesh@hotmail and take care – Rajesh Lal.

Creating Hello World Web Widget With HTML CSS and Javascript

Labels: web gadget, web widgets, widget book

        Download PDF Table of Content

Here is the Table of Contents for the Book: Developing Web Widget with HTML, CSS, JSON and AJ

Table of Contents: Developing Web Widget with HTML, CSS, JSON and AJAX

Labels: developing widget, web widgets, widget book