Widget Initialization Using JSON, HTML Custom Tags and XML files

Component reuse is a must in development. Reuse reduces development time, avoids coding errors, visual components will look identical, and so on... Code once, use anywhere! DHTML (Dynamic HTML) components or widgets are common nowadays; existing all over the Internet, from simple components such as calendars, toolbars, menus, etc., to more sophisticated frameworks like the Yahoo! UI Library. These components will behave in a different way according to some parameters or properties passed to them. This article will explain some ways to configure DHTML widgets, exposing its pros and cons, as well as programming techniques to avoid errors and speed up development time.

Properties declaration

Imagine a “List widget,” a common widget used to display, for example, tabular customer data. This kind of widget is also called a table or grid widget and will be used along the examples. To place a widget in a page, this example will retrieve widget properties, construct a widget object, then place it where the

reference is located. Properties give shape to our widget (height, weight, number of rows, etc.) including its behavior (such as the onclick event, onmouseover event, etc). Throughout this article, various ways to perform this task will be detailed:

a) Old style declarations with global variables

Global variables are defined and used as widget property values. This kind of declaration should not be used in order to avoid global scope issues.

var rows = 3; var columns = new Array(); // Then all or some properties are used in the list widget constructor

b) Parameters to the constructor object

The properties of the widget are defined as passing parameters to the list widget constructor. This approach solves the global scope issue but the number of properties to pass is fixed. If we want to add a new property to the widget, the method signature must be changed, and thus, if we have a lot of properties in our widget, the method signature will become unreadable. This option is not recommended if we want to have an extensible widget Framework.

// The properties are defined with various parameters // that are passed to the list constructor var list = new List('customer', 3, rowsArray);

c) JSON (JavaScript Object Notation) as a properties object.

This option uses JSON notation as a method to pass parameters, avoiding global scope issues, reducing the number of parameters and increasing code readability. This alternative is 100% pure JavaScript programming, as opposed to the use of Custom Tags and XML files (explained in following sections), which denotes simpler and easier notation.

By Nicolas Erlijman
source: http://www.webreference.com/programming/javascript/widgets/index.html

Read more...

Summary only...

Blogger tag adder user script

Blogger tag adder user script

Yes, another tag adder for Blogger. So, no credit for the idea. In my opinion there were small things missing in existing scripts. That's why I created my own script. Editing and styling tags where the most important to me.

Features of my Blogger tag adder (0.3.1) user script for Greasemonkey:

• Tags can easily be modified on existing or draft posts as they are read back into the tag input field!
• Tags are placed in a unordered list, which make them easy to style!
• You can easily add sites to tag.
• Separate tags using a comma.

Example of the generated HTML (in case of Technorati tags):

<div class="tags"> Tags: <ul> <li><a href="http://www.technorati.com/tag/Greasemonkey" rel="tag">Greasemonkey</a> <li><a href="http://www.technorati.com/tag/Security" rel="tag">Security</a> </ul> </div>

Example of CSS to use to get the tags next to each other:

.tags * { display: inline; margin: 0; padding: 0; }

0.3.1

Update it to work on the restyled BlogThis!.

0.3

You can use this on BlogThis! as well now.

0.2.5

Added support for compose mode editing.

0.2.4

Fixed it to work with Greasemonkey 0.6.4.

0.2.3

Updated to work with my form data rescue script.

0.2.2

Fixed it to work with Greasemonkey 0.5.1. The fix in version 0.2.1 was no good.

0.2

Added tabindex.

0.1

Initial version.

source: blogger tag adder user script

Read more...

Summary only...