I have been working on a project where I needed a ListBox that displays multiple lines of information per row. The user must select from a list of offices, but many of the office names are the same and the only way to distinguish one office from the other is by the office address. Because a ListBox does not allow multiple lines in each row, I decided to create the imMultiLineList jQuery plugin. This plugin will turn any div into a multi-line multi-select list. And because I need to interact with the plugin, I decided to create it using an Object Oriented approach.

The imMultiLIneList plugin is fairly simple to use. Multiple items can be added to the list ajaxally using a JSON object, but the plugin will also allow single items to be manually added.

Options

The following are the options that can be used with the imMultiLineList plugin:

option_map: Just like a ListBox or Select (http://www.w3schools.com/tags/tag_select.asp) element, each row in the imMultiLineList plugin must have a value and display text. The option_map allows the user to define what the optionValue and optionText will be. The option_map is a mandatory option because the plugin won’t know how to parse the JSON data without this map.

option_map: {"optionValue": "id", "optionText": "address"}

In the example above, the plugin knows when the JSON data is loaded, to use the id as the optionValue and the address as the optionText.

item_class: Use this option to define the style for the items in the list (more on this later).

item_hover_class: Use this option to define the hover style for the items in the list.

item_select_class: Use this option to define the style for an item when it is selected.

value_text_separator: This option is used when manually adding items to the list. The default value is a tilde (~).

Usage

Because I created the imMultiLineList plugin with an Object Oriented approach, using it requires at least two lines of code. The first line defines the options, and the second is used to initialize the plugin (A standard jQuery plugin defines the options and initializes in a single step).

Adding Items

Use the addItems method to add multiple items to the list. When adding multiple items, the data that is loaded must be in the JSON format.

$(document).ready( function() {
	var addressList = $("#listCntnr").imMultiLineList({
		option_map: {"optionValue": "id", "optionText": "address"},
		item_class: "multiListItem",
		item_hover_class: "multiListItemHover",
		item_select_class: 'multiListItemSelect'
	});
	addressList.addItems('assets/js/jquery/immultilinelist/address.php');
});

The addItems method takes a single argument – the url where you intend to retrieve the JSON object. The option_map option must be set prior to loading the data. In the example above, the plugin will try to parse the id and address:

[{"id": "1", "address": "Ben\'s Chilli Bowl<br />1213 U St NW Washington, DC<br />20009"}]

Notice the br tags. This is how I create the multiple lines. In fact, the plugin will accept any html, so you could also add images or any other html element.

Add Single Item

The plugin will also you to manually load a single item to the list. The item added can be one of the following:

1. A JSON object – The JSON must be created with the same data map options:

   {"id": "1", "address": "111 Whatever Street, This City, MD 22222"}

2. Any string value – If the optionText is not a JSON object, the imMultiLineList plugin will use the value to create a JSON object. The option_map option optionValue can be entered with the optionText value.
   • To specify the optionValue, add the value to end of the string and separate the optionText and optionValue with a tilde (~).

     111 Whatever Street, This City, MD 22222~5

     Note: The tilde can be changed by adding the value_text_separator option.

   • If the optionValue is not part of the string, the imMultiLneList plugin will calculate the value based upon the number of items in the list.

In the example below, I add multiple items using the addItems method. I then add a single item from an input field when the user clicks on a button.

$(document).ready( function() {
	var addressList = $("#listCntnr").imMultiLineList({
		option_map: {"optionValue": "id", "optionText": "address"},
		item_class: "multiListItem",
		item_hover_class: "multiListItemHover",
		item_select_class: 'multiListItemSelect'
	});
	addressList.addItems('assets/js/jquery/immultilinelist/address.php');
	$('#theButton').click(function() {
		addressList.addItem($('#theText').val());
	});
});

Get Selected Items

Just like any other ListBox or select, the imMultiLineList plugin allows the developer to retrieve the selected option value and text using the getSelectedItems method. The method will return a multi-dimensional array that contains two members: value and text.

Note: Just like a ListBox, use cntrl-click (cmd-click on Mac) to select multiple items or use shift-click to select a range of items.

In the example below, I retrieve the selected items and then place the value and text inside a div.

$(document).ready( function() {
	var addressList = $("#listCntnr").imMultiLineList({
		option_map: {"optionValue": "id", "optionText": "address"},
		item_class: "multiListItem",
		item_hover_class: "multiListItemHover",
		item_select_class: 'multiListItemSelect'
	});
	addressList.addItems('assets/js/jquery/immultilinelist/address.php');
	$('#theButton').click(function() {
		var addresses = addressList.getSelectedItems();
		$.each(addresses, function(i,itm) {
			$('#selectedCntnr').append(itm.value + '<br />' + itm.text + '<br />');
		});
	});
});

Remove Selected Items

Although this may not be useful in most situations, I decided to add the ability to remove selected items from the list. Removing selected items is fairly straightforward – use the removeSelectedItems method.

$(document).ready( function() {
	var addressList = $("#listCntnr").imMultiLineList({
		option_map: {"optionValue": "id", "optionText": "address"},
		item_class: "multiListItem",
		item_hover_class: "multiListItemHover",
		item_select_class: 'multiListItemSelect'
	});
	addressList.addItems('assets/js/jquery/immultilinelist/address.php');
	$('#theButton').click(function() {
		addressList.removeSelectedItems();
	});
});

CSS

The list can be styled to your liking. The following is the CSS that I used to create the examples in the demos:

#listCntnr {
	float:left;
	width: 300px;
	height:300px;
	background-color:#fff;
	border: solid thin #000;
	overflow:auto;
	font-family:"arial";
	font-size:12px;
}
.multiListItem {
	width:100%;
	margin-bottom:3px;
	padding-left:3px;
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}
.multiListItemHover {
	background-color:#BDE1F2;
	cursor:pointer;
}
.multiListItemSelect {
	background-color: blue;
	color:white;
}

This styling is fairly simple. The listCntnr is the ListBox container. The other styles define the CSS for the item (multiListItem), item hover (multiListItemHover) and select (multiListItemSelect) states. Note that the multiListItem defines user-select attributes. If these attributes are not defined, when a user shift-clicks multiple items, the browser will select the text within each item.

Demos

A demo of this plugin can be viewed in the demo section of this site.

The plugin can be downloaded from GitHub.

Enjoy.

I just stumbled on a cool site – html5readiness.com. The site displays a break down of browser support for HTML5 and CSS3 (Canvas, SVG, GeoLocation, Transforms, Border Radius, etc). The browsers included for 2010 are IE 7, IE 8, IE 9, FireFox 3.5, FireFox 3.7, Opera 10.50, Safari 4, and Chrome 4.

I wasn’t surprised to find that Safari and Chrome have the most HTML5 and CSS3 support (since both use the webkit engine). Firefox support for HTML5 and CSS3 is not far behind Safari and Chrome.

I was not surprised to find that Internet Explorer lags far behind (although IE 9 adds support for SVG, Video, SVG as Background, Media Queries).

I was very surprised to find that HTML5 and CSS3 support in Opera 10.50 rivals that of FireFox.

Anyway, if you ever need to know what is supported by each browser, take a look at html5readiness.com.

P.S. I wonder why Safari and Opera aren’t used as much as Firefox, Chrome and IE. Safari can be used with a Mac or PC, but appears to be used primarily by Mac users. Chrome has been around since 2008 and already has 5 times as many users as Safari (see browser stats).

I added a new photo gallery to galleries.digitalvilliage.com. I created the Photo Gallery widget using Dojo Toolkit about a year ago for a project that I have been working on. I recently updated to give it more options than I needed for my project.

The gpDojoGallery widget can be set to display thumbnail images in the center, left, right, top, or bottom of the page. When the thumbnails are set to the center position, the dojox.image.Lightbox module can be used to display the large image.

The widget receives a JSON object that contains the image information (location, width, height, etc). I store the information using dojo.data.ItemFileReadStore, so it was easy to add a pics-per-page option just be limiting the number items to be read within the store.

if (this.picsPerPage) {
	request = imageStore.fetch({onBegin: startFetch, onError: fetchFailed, onComplete: initGallery, start: 0, count: this.picsPerPage});
}  else {
	request = imageStore.fetch({onBegin: startFetch, onError: fetchFailed, onComplete: initGallery});
}

The gpDojoGallery widget was fairly simple to create, but it has enough options to be a very versatile photo gallery. You can view demos on my digitalvilliage.com site. The widget (and demos) can be downloaded from GitHub.

I’m working on a new project that uses Dojo Toolkit and DJango. I haven’t started on the DJango back-end yet because I first need to create a few Dojo widgets. The first widget that I created is gpDojoPortfolio. As the name suggests, this widget will display a portfolio. Each item in the portfolio slides into view using the dojo.fx module.

gpDojoPortfolio Container

To provide content for the widget, you must first create a container. You must provide an id for the container. You can optionally provide a class.

Note: I created the widget so that multiple portfolio’s can be displayed on a page. If you plan to display multiple portfolio’s, then I suggest that you create a class for the container.

<div id="gpPortfolioCntnr" class="gpPortfolioCntnr">
 
</div>

Portfolio Title

If you want a title to be displayed on top of the portfolio, you must use an h1 tag.

<div id="gpPortfolioCntnr" class="gpPortfolioCntnr">
        <h1>This is my portfolio</h1>
</div>

Portfolio Items

Each portfolio item is contained within a div. You must provide a class name for this div. In the example below, I named the div gpPortfolioItem.

<div id="gpPortfolioCntnr" class="gpPortfolioCntnr">
        <h1>This is my portfolio</h1>
        <div class="gpPortfolioItem">
 
        </div>
        <div class="gpPortfolioItem">
 
        </div>
</div>

Each portfolio item contains two display segments – a left display and a right display. For instance, I may want to display an image in the left display and a description in the right display. You must wrap each display segment with li tags. The widget will convert these into the left and right display – the first li will be on the left and the second will be on the right.

<div id="gpPortfolioCntnr" class="gpPortfolioCntnr">
        <h1>This is my portfolio</h1>
        <div class="gpPortfolioItem">
                <ul>
			<li>
				<a href="http://web2.digitalvilliage.com" target="_blank"><img src="images/portfolio/dvilliage.jpg" width="355px" height="200px" /></a>
			</li>
			<li>
				<h3>DigitalVillage.com</h3>
				<p>DigitalVilliage.com is one of our sites. The site has two subdomains (web20 and galleries). The web20 site will generate web 2.0 domain names (and search for availability). </p>
				<p>You can also generate color harmonies from a Web 2.0 pallette, a Web216 pallette, or a selected image (or random Flickr image). </p>
				<p>The galleries site displays a free Flash/XML photo gallery. <br/>We developed this site using CakePHP, JQuery and Flash/AS3.</p>
				<p>Click <a href="http://web2.digitalvilliage.com" target="_blank">here</a> to view the site.</p>
			</li>
		</ul>
        </div>
        <div class="gpPortfolioItem">
                <ul>
			<li>
				<a href="http://grasshopperpebbles.com" target="_blank"><img src="images/portfolio/gpebbles.jpg" width="350px" height="200px" /></a>
			</li>
			<li>
				<h3>GrasshopperPebbles.com</h3>
				<p>Grasshopperpebbles.com is our blog site. This blog focuses on Ajax Frameworks such as jQuery, YUI, and Dojo, but I also discuss other web technologies such as PHP, CSS, Flash, etc. </p>
				<p>We developed this site using Wordpress and jQuery. We developed the demos section of the site using CodeIgniter.</p>
				<p>Click <a href="http://grasshopperpebbles.com" target="_blank">here</a> to view the site.</p>
			</li>
		</ul>
        </div>
</div>

Setting Up the gpDojoPortfolio Widget

<link rel="stylesheet" type="text/css" href="js/gpWidgets/gpDojoPortfolio/css/styles.css">
<link rel="stylesheet" type="text/css" href="demo.css">
 
<script type="text/javascript" src="js/dojo/dojo.js" djConfig="parseOnLoad: true, modulePaths:{'gp':'../gpWidgets/gpDojoPortfolio'}"></script>
 
<script type="text/javascript">
	dojo.require("gp.gpDojoPortfolio");
 
	dojo.addOnLoad(function() {
		var ga = new gp.gpDojoPortfolio({},'gpPortfolioCntnr');
	});
</script>

Note: When setting up the widget, you should not make changes to the widget’s CSS file, instead, you should provide a separate CSS file. In the example above, I created a file named demo.css. More on this later in the post.

Widget Options

The gpDojoPortfolio widget only has a few options:

portfolio_items: This option is the class name of the portfolio items. The class name is not used in the construction of the widget, so there is really no need to change it.

dojo.addOnLoad(function() {
	var ga = new gp.gpDojoPortfolio({portfolio_items: '.myItems'},'gpPortfolioCntnr');
});

<div id="gpPortfolioCntnr" class="gpPortfolioCntnr">
        <h1>This is my portfolio</h1>
        <div class="myItems">
 
        </div>
        <div class="myItems">
 
        </div>
</div>

title_class: I created this option for those who plan to create multiple portfolio’s on page and want to style each title (h1) tag differently. The default value is gpPortfolio-Title.

dojo.addOnLoad(function() {
	var ga = new gp.gpDojoPortfolio({},'gpPortfolioCntnr');
        var ga2 = new gp.gpDojoPortfolio({title_class: 'blueTitle'},'gpPortfolioCntnr2');
});

show_side_nav: Use this option to show/hide the side navigation. The default is true.

dojo.addOnLoad(function() {
	var ga = new gp.gpDojoPortfolio({show_side_nav: false},'gpPortfolioCntnr');
});

interval: Use this option to have portfolio automatically slide to the next portfolio item. This value is in milliseconds. When using this option, I usually hide the side navigation.

dojo.addOnLoad(function() {
	var ga = new gp.gpDojoPortfolio({interval: 6000, show_side_nav: false},'gpPortfolioCntnr');
});

anim_duration: How long, in milliseconds, the slide animation will occur (when sliding to the next portfolio item). The default is 1000.
anim_easing: The easing function to be applied to the animation. The default is elasticOut. For more options, see dojo.fx.easing.

dojo.addOnLoad(function() {
	var ga = new gp.gpDojoPortfolio({anim_duration: 2000, anim_easing: 'quadIn'},'gpPortfolioCntnr');
});

Styling the Widget

You should create a separate CSS file to style the widget so that there will be no confusion if I ever create a new version.

To change the overall dimensions of the widget, update the following styles:

#gpPortfolioCntnr {
	width:900px;
}
.gpPortfolio-SlideCntnr {
       /* The container width - the width of the navigation (x 2) */
	width:820px;
}
.gpPortfolio-DisplayCntnr {
        /* The container width - the width of the navigation (x 2) */
	width:820px;
}

The container that does the actual sliding has a default width of 5000px. Depending upon the number of display items, you may want to increase this value:

.gpPortfolio-Slider {
	width:10000px;
}

The following is the default styling of the left and right display:

.gpPortfolio-LeftItem, .gpPortfolio-RightItem {
	float:left;
	margin:10px;
	width:390px;
	height:360px;
}

The following is the default styling for the side navigation container and images:

.gpPortfolio-Side-Nav {
	float:left;
	width:40px;
	height:425px;
	text-align:center;
	display:none;
}
.gpPortfolio-PrevBtn, .gpPortfolio-NextBtn {
	float:left;
	width:32px;
	height:32px;
	cursor:pointer;
	background:url(../images/previous.png) no-repeat;
	margin-top:120px;
}
.gpPortfolio-NextBtn {
	background:url(../images/next.png) no-repeat;
}

The top navigation (circle navigation) can be changed as well. The default images are grey.

.gpPortfolioCntnr h1 ul.gpPortfolio-Top-Nav li {
	float:left;
	display:block;
	background-image: url("../images/dot-nav-grey.gif");
	cursor:pointer;
	height:9px;
	width:9px;
	margin-left:5px;
}
 
.gpPortfolioCntnr h1 ul.gpPortfolio-Top-Nav li span {
	display:block;
	background-image: url("../images/dot-nav-grey.gif");
	background-position: -9px 0;
	height:9px;
	width:9px;
}

I have provided a number of other colors (black&white, blue, green, orange, and red), but you can also create your own.

.gpPortfolioCntnr h1 ul.gpPortfolio-Top-Nav li {
	background-image: url("../images/dot-nav-blue.gif");
}
 
.gpPortfolioCntnr h1 ul.gpPortfolio-Top-Nav li span {
	background-image: url("../images/dot-nav-blue.gif");
}

The following is the CSS file that I created for the gpDojoPortfolio demo – much of the styling changes will occur in the left and right displays.

.gpPortfolio-LeftItem IMG {
	margin-top:20px;
}
 
.gpPortfolio-RightItem h3 {
	color:#0239a4;
}
 
.gpPortfolioCntnr h1.gpPortfolio-Title {
	color:#0239a4;
	font-family:Arial, Helvetica, sans-serif;
	border-bottom-color: #0239a4;	
}

That’s it. The gpDojoPortfolio widget is fairly easy to use. You can view a demo in the dojo demo section of my site. You can download the widget from GitHub.

When the web20.digitalvilliage site was nearly complete, I wanted to add a contact form. I like the feedback tabs that I have been seeing on websites recently (displayed on the right or left of the page), so I decided to build one. I was already using a JQuery UI theme on the site, so I decided to create a JQuery UI widget so that the color scheme of the feedback form would match the color scheme on the site.

This ui.imFeedBack widget is extremely versatile. The feedback tab can be placed on the right or left and can even be displayed as a dialog.

Creating a JQuery UI Theme

Before setting up the widget, create a theme with the JQuery UI Themeroller. I discuss the themeroller in a previous post.

Setting up the ui.imFeedBack Widget

First add the necessary CSS and JS files to the head section of your web page:

<link rel="stylesheet" type="text/css" href="css/jquery-ui/custom-theme/jquery-ui-custom.css" />
<link rel="stylesheet" type="text/css" href="css/imfeedback/imfeedback.css" />
 
<script type="text/javascript" src="js/jquery/jquery-ui/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery/imfeedback/ui.imFeedBack-0.5.js"></script>

The only option that is needed in order to use the ui.imFeedBack widget is the submit_url. This is the location of your server-side script that sends the email.

$(document).ready(function(){
	$(document.body).imFeedBack({
		submit_url: 'http://www.mysite.com/send_mail.php'
	});
});

This will create the FeedBack tab on the right of the page. When the user clicks on the tab, the feedback form will slide open. If I prefer to display the feedback tab on the left:

$(document).ready(function(){
	$(document.body).imFeedBack({
                location: 'left',
		submit_url: 'http://www.mysite.com/send_mail.php'
	});
});

Changing CSS Styles

The ui.imFeedBack widget is set up to automatically use a JQuery UI theme, but I set it up so that it can be styled independently. The following are the options that can be used to change the styling of the widget.

form_container_class: 'ui-widget ui-widget-content ui-corner-all'
// The form buttons are the send and close buttons
form_button_class: 'fg-button ui-state-default ui-corner-all'
form_button_class_hover: 'ui-state-hover'
// The header class is the caption container
header_class: 'ui-widget-header ui-corner-top'
// The feedback_button is the feedback tab that is displayed on the left or right
feedback_button_class: 'fg-button ui-state-default ui-corner-top' 
feedback_button_class_hover: 'ui-state-hover'

Sending the User’s Name

By default, the feedback form contains an email, subject, and message field. To display a name field, use the form_capture_name option. There are 4 possible values for this option:

false: Name fields are not displayed (the default)

firstName: A First Name field is displayed
fullName: A single input input field is displayed where the user can enter their full name
firstLast: First name and last name fields are displayed

$(document).ready(function(){
	$(document.body).imFeedBack({
                form_capture_name: 'firstName',
		submit_url: 'http://www.mysite.com/send_mail.php'
	});
});

The ui.imFeedBack widget will validate the form fields by default (value must not be blank and email must be correct format). You have the option of turning off the validation of the name field using the validate_name option.

$(document).ready(function(){
	$(document.body).imFeedBack({
                form_capture_name: 'firstName',
                validate_name: false,
		submit_url: 'http://www.mysite.com/send_mail.php'
	});
});

Setting Text Options

A number of text options can be set or changed. The following are the options with their default values:

header_caption: 'Please Send Us an Email'
// The top_text is the area above the form field. Use this area to display any additional information or instructions
top_text: ''
// The feedback tab
feedback_button_text: 'FeedBack'

In addition, the subject field can be pre-filled. You can also set whether you want the subject field to be disabled.

feedback_subject: 'I love Stargate SG-1'
// The disable_subject option is empty by default
// To disable the field, set the option to true
disable_subject: ''

Displaying the FeedBack Form in a Dialog box

By default, when a user clicks on the feedback tab, the feedback form will slide into view. If you prefer to display a dialog box, set the show option to dialog (it is set to slide by default). You also have to give the dialog an id and set the width.

$(document).ready(function(){
	$(document.body).imFeedBack({
		show: 'dialog',
		dialog_container: 'imFeedBack-dialog',
		dialog_width: '550px',
		submit_url: 'http://www.mysite.com/send_mail.php'
	});
});

This dialog_container does not have to be styled, if you have not set the body’s font-size to 62.5%, you may want to set it here.

#imFeedBack-dialog {
        font-size: 62.5%
}

When using the dialog option, you also have the option of displaying your own form. Just set the dialog_widget_form option to false and then create your own form.

$(document).ready(function(){
	$(document.body).imFeedBack({
		show: 'dialog',
		dialog_container: 'my-dialog',
                dialog_widget_form: false, 
		dialog_width: '550px',
		submit_url: 'http://www.mysite.com/send_mail.php'
	});
});

When using this option, make sure you name your form imFeedBack-FormContainer, so that it will be submitted correctly.

<div id="my-dialog">
<form name="imFeedBack-FormContainer" id="imFeedBack-FormContainer">
 
</form>
</div>

External Control

I set up the ui.imFeedBack widget so that it can be opened by a separate element on the page. Use this option if you want to display a specific feedback_subject and top_text options that are different from your site-wide feedback form. I created the web20.digitalvilliage.com site for marketing purposes. At the top of the page, I created a button with the text: Need A Web Developer?. When the user clicks on the button, the feedback form appears with the subject field pre-filled.

$(document).ready(function(){
	$(document.body).imFeedBack({
		top_text: 'For expert web design, contact us today',
		feedback_subject: 'I need a web designer',
		external_control: { id: 'stargateBtn', top_text: 'If you love Stargate SG-1, send us an email to tell us why.', feedback_subject: 'I love Stargate-SG1', disable_subject: true},
		submit_url: 'http://www.mysite.com/send_mail.php'
	});
});

The external_control option has 4 values that can be set:

id: The id of the controlling element (Mandatory)
top_text: The text to be displayed above the form fields (optional)
feedback_subject: The text to be displayed in the subject field (optional)
disable_subject: Whether to disable the subject field (optional)

Once the feedback form is closed, the relevant values will be set back to the global options.

Submitting the Form

The feedback form will submit the following fields:

• imFeedBack-Email
• imFeedBack-Subject
• imFeedBack-Message

When using the form_capture_name option, the form will also submit:

• imFeedBack-FirstName (when option = firstName)
• imFeedBack-Name (when option = fullName)
• imFeedBack-FirstName, imFeedBack-LastName (when option = firstLast)

In addition to these values, you can send hidden fields, using the hidden_fields option:

$(document).ready(function(){
	$(document.body).imFeedBack({
		hidden_fields: [ {name: "message_type", value: "P"}, {name: "action", value: "doWhatever"}],
		submit_url: 'http://www.mysite.com/send_mail.php'
	});
});

The form is submitted ajaxally. The widget expects a Json record to be returned.

{"response": "Message Sent"}

If “Message Sent” is the response, then the widget will display:

Thank you for contacting us. We will get back to you as soon as we can.

If “Message Sent” is not in the response, the widget will display the message sent back.

if ($success) {
        echo '{"response": "Message Sent"}';
} else {
        echo '{"response": "'. $errorMsg . '"}';

The success message can be changed by setting the success_msg option:

$(document).ready(function(){
	$(document.body).imFeedBack({
		success_msg: 'Thank you contacting us',
		submit_url: 'http://www.mysite.com/send_mail.php'
	});
});

Well that’s it. As you can see the ui.imFeedBack widget is extremely versatile, but simple to use. You can download the widget from GitHub. You can view demos of the widget in the JQuery UI Widgets demo section of my site. Enjoy.

I discussed the use of the gpUrlLoader Class in a previous post (see: AS3: A URLLoader Class). This class, part of my gpAS3Library, will load image, swf, text, xml, html, stylesheet, json, and sound files.

In this post, I will discuss how to use the gpUrlLoader class to load multiple images into a Flash movie. I used this technique when I created the gpFlashGallery (A free Flash/XML photo gallery).

package {
 
	import flash.display.Sprite;
	import flash.display.Loader;
	import flash.events.*;
	import com.grasshopper.utils.*;
 
	public class gpGallery extends Sprite {
                private var images_xml:XMLList;
		private var images_ar:Array = new Array();
		private var cnt:int = 0;
                private var total_images:int;
 
		public function gpGallery() {
 
		}
 
		public function init(images:XML):void {
                        images_xml = images;
                        total_images = images_xml.length();
			loadImage();
		}
 
                private function loadImage():void  {
			images_ar[cnt] = new gpUrlLoader();
			images_ar[cnt].addEventListener(Event.COMPLETE, imageLoaded);
			images_ar[cnt].init(images_xml[cnt].@thumb, 'image');
		}
 
                private function imageLoaded(e:Event):void {
			var ldr:Loader = images_ar[cnt].getImage();
                        addChild(ldr);
                        // ldr.x = 
                        // ldr.y =
			cnt++;
			if (cnt < total_images) {
				loadImage();
			} 
		}
}

I store each instance of the gpUrlLoader in an array.

images_ar[cnt] = new gpUrlLoader();

I initialize the gpUrlLoader class using a thumb attribute from an images XMLList.

images_ar[cnt].init(images_xml[cnt].@thumb, 'image');

Once the image is loaded, I call the getImage method of the gpUrlLoader class.

var ldr:Loader = images_ar[cnt].getImage();

If the count (cnt) is less than the total number of images, call the loadImage method.

if (cnt < total_images) {
	loadImage();
}

That’s it. Loading multiple images into a flash movie has never been so easy.

In a previous post, I discussed the web 2.0 domain name generator and the web 2.0. color harmonizer that I created on web20.digitalvilliage.com. On the galleries.digitalvilliage.com subdomain, I created the gpFlashGallery, a free XML-based Flash Photo Gallery.

The gpFlashGallery is highly configurable via an XML file. Every aspect of the gpFlashGallery can be configured using this XML file (page color, thumb container dimensions and color, transition type, etc). The image information (location and optional title) is also stored in an XML file.

gpFlashGallery Features

• Easily change background color
• Display images with varying dimensions
• Image preloader
• Animation effects can be applied to large image (transition in and out)
• Thumb container can be positioned on the bottom or top of the page
• Optional title can be displayed for each image
• Free

More information about the gpFlashGallery can be found on http://galleries.digitalvilliage.com. The files can be downloaded from GitHub.

BTW, the reason I named the subdomain galleries rather than gpflashgallery is because I plan to add to add other photo galleries there in the future. I created both a Dojo and JQuery photo gallery almost a year ago for projects that I was working on. Once I get change to document the plugins/widgets, I will place them on the galleries subdomain.

Let me know what you think.

In a previous post, I discussed the web 20. domain name generator that I created on web20.digitalvilliage.com. The other tool that I created for this subdomain was a web 2.0 color harmonizer.

The web 2.0 color harmonizer tool allows you to select colors from 4 different color palettes:

1. You can select a color from a web 2.0 color palette
2. You can select a color from a web216 color palette
3. You can select colors from an image by entering the url of the image
4. You can select colors from a random Flickr image

The color harmonies displayed include color schemes from a color wheel: Complementary, Split-Complementary, Analogous, Triad, and Tetrad (or quadrads). A 5% Saturation gradient, a 5% Luminance Gradient, and a 5% combined Saturation/Luminance gradient will also be displayed for the selected color.

I created a CakePHP Component to calculate the color harmonies and created a JQuery Plugin to display the results. Let me know what you think.

I purchased the domain name digitalvilliage.com quite a few years ago. I wasn’t sure what I was going to do with it when I first purchased the name (but I knew that it was a great domain name). Although I still haven’t decided what the focus of the site should be, I decided, for now, to create a web 2.0 domain name generator on the site. I developed the site using CakePHP and jQuery. I created a JQuery plugin to provide the domain names ajaxally (a term that I added to wikipedia – and yes, I already purchased the domain name) .

The site divided into two subdomains (web20.digitalvilliage.com and galleries.digitalvilliage.com). I’ll discuss the galleries subdomain in a later post.

I’ve seen other web 2.0 domain name generators, but my site offers more than just web 2.0 domain name generation. The site contains two main buttons (web 2.0 and suggest)

Click the web 2.0 button and a domain name will be dynamically generated.

I you click the suggest button, a dialog box will be displayed with a name input field and a category dropdown. The categories are: automotive, art, books, business, clothing, computers/internet, entertainment, health/fitness, money/finance, music, politics, popular, romance, travel, and urban dictionary.

After entering a name and selecting a category, a list of domain names will be displayed. You can then click on the name and click the search button to find whether the name is available. If you click on a name from the ‘urban dictionary’ category, a popup will be displayed with the definition from urbandictionary.com. I’ve only added 40-50 names from urbandictionary.com – I plan to add more later.

After entering a name from the suggest or clicking the web 2.0 button, you can then search for the availability of the name.

If a domain name exists, the Google Page Rank, Alexa Rank, Google, Yahoo, and Bing BackLinks counts will be displayed. You will also be provided a link to the whois database for that name as well a link to Alexa Stats.

If the domain name does not exist, you will be provided a link to a number of domain name registrars.

I worked on this site on-and-off for about 6 months (whenever I had the time). I think that it’s pretty cool. The site provides an Ajax web 2.0 domain search generator and an Ajax domain search tool. Let me know what you think.

I finally completed the redesign/development of my portfolio site (GreenScorpion.com).

This site was my first attempt at grunge design. I used Photoshop brushes that I downloaded from GetBrushes.com to design the site (and followed some tutorials that I found on SixRevisions.com and DesignHard.com).

I developed GreenScorpion.com using Flash/ActionScript 3 and Joomla (and a bit of JQuery).

For the portfolio display, I created a Flash Movie relied heavily upon the gpAS3Library and XML. I then used Joomla to create a component that incorporated the Flash movie. After the Joomla component was completed, I created a Joomla module based upon the component so that the Flash movie could be displayed in a specific area on a page (on the home page).

I need to add more to the site, but the portfolio part is done. I also need do something to create a more consistent color feel between operating systems. I created the design on my Mac, but I did most of the development on Ubuntu. The website is much darker on Ubuntu than on my Mac (I haven’t looked at it on Windows, but I’m sure that there will be a difference as well). But for now, I’m done.