Yahoo! User Interface Blog (YUIBlog)

Implementation Focus: Car Rental Express

Car Rental Express is the leading independent car rental comparison website on the Internet. It lets users rent cars online in more than 1000 cities and airports around the world.

Our user base is largely non-technical, which means they want to compare prices and rent cars as easily as possible. With the relaunch of our website in June of 2010 we have implemented many components of YUI 2 to help provide our customers with an intuitive experience.

Which YUI components are we using?

The components that we’ve been using include Connection Manager, AutoComplete, DataSource, Calendar, Animation, JSON, and Container.

Why we chose YUI

When reviewing the different JavaScript libraries that we could potentially use on Car Rental Express, we found that the YUI was the most complete for our needs. The biggest selling features for us was the very modular approach the YUI took to implement different design patterns, as well as the robust documentation and examples they provided. From a development standpoint this led to rapid development of our application without having to struggle with a library.

How we use YUI

We utilize the YUI in a number of ways. Our 4 most used components are AutoComplete, Calendar, Container, and Connection Manager. Here are some of the ways we use each of these components.

AutoComplete

The AutoComplete component is used extensively on our site to help users find a city or airport in which to rent a car. We really liked how easy it was to implement this component, and how quickly it responds. We cache search results server-side to help improve search results; however, having the client-side caching also helped tremendously in speeding up the response of the component. Another feature that we really took to was how easy the results were to style. When displaying the locations to the user this was crucial as we needed to identify which locations where found in cities and which were found at airports.

Calendar

The Calendar component is also used throughout the site when a renter is filling in dates to conduct a search. We are using a customized version of John Peloquin’s Interval Selection Calendar and displaying it in a YUI Dialog. Essentially what we wanted to do was give the renter a two-month view when choosing their dates, as well as visually show them what date range they currently have selected. Again, this was extremely straightforward to implement using YUI 2 Calendar, and it basically came down to creating a YUI Dialog, setting the body to contain a div for the Calendar, then attaching a YUI Interval Calendar to that div.

Containers

We utilize YUI Containers throughout our website in a number of different ways. In the example above we were using a Dialog to help us display the Interval Calendar when a user was selecting a date. On our rate search results page we make heavy use of Containers to give the renter more information on different aspects of the car rental agency and the vehicle they might potentially rent. Most of the containers on this page are Panels that we re-use for each different listing. For example, the vehicle display features Panel:

Things got a little more fun with the Renter Rated agency ratings. When displaying the ratings, we really wanted to focus the user’s attention to the scores an agency received and to display this information in a clean, easy-to-view way. By utilizing the Dialog Control we were able to constrain the viewport and center the dialog easily to help us achieve this goal. By setting a blank header and footer it made styling simple by just adding the appropriate styles to our CSS. The end result was a clean ratings container that provides the renter with the information they want.

Connection Manager

Connection Manager is used throughout the site whenever we need to pull data via a XHR request. In some of the examples above we utilize this component for requesting cities and airports for the AutoComplete implementaitons and pulling the rating information for the Renter Rated Dialog.

One interesting way we utilize Connection Manager is with our rental center block that sits on most pages. To help with performance we do a lot of full-page caching on many of our content pages. However, we still wanted to display the dynamic rental center block on these pages. This presented us with a problem we were able to solve with Connection Manager. Rather than having to break up our fully cached page and cache only aspects of the page we found it was easier to just include the rental center block via a simple asynchronous request. We found that this allowed us to retain the performance from having a fully cached page, yet still display dynamic content in our rental center box.

Final Thoughts

Overall we have been extremely happy with our choice to use YUI. It provides us with a modular library that is well documented, easy to use and implement.

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

Implementation Focus: Lamplight

Matt Parker (@Lamplightdb on Twitter) is the founder and developer at Lamplight Database Systems, a small company providing a fully-featured web-based management system for non-profits in the UK. Matt lives and works in North-West London.

What is Lamplight?

Lamplight is a database for charities and voluntary groups (that’s non-profits) in the UK. It helps our customers keep their data efficiently, demonstrate the impact they have on the people they work with, and streamline administrative and reporting tasks. We’ve been going since 2004 and re-wrote the entire system in 2009, using YUI2 very heavily.

Lamplight has a pretty demanding bunch of users: they are generally not very keen to be sat in front of a computer — they want to be out working with the people they serve. So Lamplight’s got to be intuitive to use, responsive, and make their jobs easier.

We’re also committed to making it affordable for the smallest organisations — a hosted system starts at £15/month (for the whole organisation). So we work really hard to make a single system that is flexible enough for a whole range of different organisations to use without becoming impossible to manage and administer.

Which YUI components do you use?

It’s easier to list the ones we don’t: Carousel, Charts, Cookie, ImageCropper, ImageLoader, Layout, ProgressBar, Slider, Storage, SWF and TreeView. Everything else is in there to a greater or lesser extent. DataTable, Editor and Menu get the biggest workouts.

Why did you choose YUI?

First impressions go a long way. While I was trying out some of the libraries, YUI widgets seemed to be the most responsive, and/or the most reliable in different browsers. And then it doesn’t take long to realise the documentation, examples, and forums are really impressive too.

In some ways it’s made things harder — we use Zend Framework on the server, which (now) comes with Dojo ‘built in’ — but I’m pretty sure it was the right decision.

What have you had most fun with?

We’re just about to push the new YUI 2 based Diary to all our customers. Diary’s my own creation, and it seems to be working pretty well. It does what you expect a diary to do — drag and drop appointments, click and drag to add, and so on. It’s built on a whole stack of existing YUI 2 components (the Resize utility, Drag & Drop, and DateMath in particular). Diary is on GitHub, along with the API docs and a few examples (http://mattparker.github.com/diary/)

I’ve also enjoyed working with DataTable. I’ve added a column chooser context menu, used and added a bit to Satyam’s work with key navigation around an editable table, and implemented remote sorting/paging with the server returning HTML.

And Editor’s received some attention too: we have mail-merge menu buttons, some extra HTML filter buttons to handle content pasted from MS Word, a document templating system, and a built-in image insertion/uploader (images come from our server).

Finally, we’ve got a very simple ACL system, so that (for example) I only need one set of context menus that enable or disable items depending on who’s logged in — I think it’s good to know what you can’t do, rather than searching for a removed ‘delete’ option!

What’s been hardest?

Managing all the widgets that come and go. There shouldn’t ever be a page load until you log out, and in that time there are a lot of DataTables, TabViews, Buttons, ContextMenus… coming and going. Sometimes these’ll be in a Dialog, so I can’t just destroy() them on every ajax request, for example. I’ve ended up with a singleton WidgetManager, which stores sets of widgets (for example a form with some Buttons and a DataTable) and destroys (or hides them out the way, in the case of Editor) them at the right moment. All these widgets register themselves with the WidgetManager when they’re constructed. And we re-wrote fair chunks so that there’s only a single Editor, Dialog, and Panel that get re-used whenever they’re needed. Fortunately this wasn’t too painful as they’re all wrapped on the server by PHP classes, so I only needed to alter my Yui_Datatable or Yui_Form (for example) classes.

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

Using YUI 2 on the DuckDuckGo Search Engine

DuckDuckGo is a search engine that uses YUI extensively. Here’s what it uses in particular:

• ImageLoader. Matt Mlinac’s YUI 2 ImageLoader was the first thing I implemented and what originally hooked me on YUI for this project. DuckDuckGo has favicons next to results and often has “Zero-click Info” above results that usually includes an image. I didn’t want these images to compete with the results when loading, as getting results as fast as possible is the ultimate goal.

  The ImageLoader Utility handles this well by loading the images after the page load. DDG also auto-loads the next page of results when you scroll down. Sometimes the favicons icons are therefore hidden, and with ImageLoader their load is delayed (sometimes indefinitely) until necessary. To accomplish this, there is a different image group per (internal) page, each with its own custom trigger.

  div.event=new YAHOO.util.CustomEvent('it');
      var ig1=new YAHOO.util.ImageLoader.group(div,'click');
      ig1.addCustomTrigger(div.event);
      div.ig = ig1;
  

• Cookie. DuckDuckGo has a lot of settings, which are stored via cookies and alternately via URL params. When cookies are used, I use Nicholas Zakas’s YUI 2 Cookie Utility to easily get and set the values.

    YAHOO.util.Cookie.set(cookie, value, { expires: new Date("January 12, 2025") });
    x=ki||YAHOO.util.Cookie.get("i");

• StyleSheet. Some DDG settings change the look and feel of the site. These changes are actually accomplished after page load via Luke Smith’s YUI 2 StyleSheet Utility. Some of these changes are straightforward and I can just use the setStyle Dom function.

  YAHOO.util.Dom.setStyle('b2','display','block');

  Others require actual class changes, which I use the utility to do.

  YAHOO.util.StyleSheet('DDG').set('.ci', {display: "block"}).
              set('.cid', {display: "block"}).
              set('.ci2', {display: "block"}).
              enable();

• Dom. I also use some functions in Matt Sweeney’s base YUI 2 Dom component. I referenced setStyle above, and I also use the related getStyle, addClass and removeClass functions. In addition, I find the getViewportHeight, getViewportWidth, getX and getY functions to be incredibly useful to make things work cross-browser, and now on mobile screens as well.

• KeyListener. DDG has a bunch of keyboard shortcuts that let you navigate results without the mouse. I use the YUI 2 KeyListener component to enable these shortcuts.

  kl14 = new YAHOO.util.KeyListener(document, { keys:[70] }, { fn:not } );kl14.enable();

• AutoComplete. I’m currently working on adding search suggestions to the search engine, and will be using Jenny Donnelly’s YUI 2 AutoComplete component for the front-end. I understand that AutoComplete is getting introduced in YUI 3 soon. Everything else I use has already been introduced in YUI 3, though I still use YUI 2. However, I will be exploring the migration to YUI 3 soon.

About the author: Gabriel Weinberg is the founder of the DuckDuckGo search engine, based out of Valley Forge, PA. Gabriel has been a startup founder for over ten years, and his last company was sold in 2006. Gabriel holds degrees from MIT in Physics and the Technology and Policy Program.

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

Implementing YUI on the Assembla.com Agile Planner

Fast and fun – that was the user requirement for the new Assembla.com Agile Planner – an AJAX interface for adding development tasks, building story/feature outlines, and scheduling them into releases. We were lucky to have YUI 3 to make it fast and fun to implement as well.

I had used YUI 2 for a number of prior projects and I had been impressed by the engineering of the UI components and the underlying library infrastructure. I wanted to learn more about YUI 3, with its compact syntax and deeper focus on DOM manipulation and CSS3-style selectors. This project, with a low dependence on ‘prebuilt widgets,’ was a perfect opportunity to get my feet wet with YUI 3. The facilities for ‘large app’ implementation via custom modules and integration with YUI loader made it a natural choice.

The Agile Planner supports a number of drag and drop user interactions with multiple interaction groups and context based behaviors. At the same time, it handles a complex set of interactions with the server, including merging in new data from the server, and propagating changes to the server.

We improved on the existing Planner which was based on Rails handlers and Prototype.js. YUI’s sandbox philosophy and strong OOP facilities made coexisting with Prototype.js a breeze.

We used a large number of YUI components, including:

• Async-Queue to offer a responsive experience on a page that can involve 1000+ simultaneous tickets
• Drag and Drop with interaction groups.
• IO as a connection manager to queue and massage server interaction.
• Event-delegate to allow simply hydrating html templates and forgetting about them.
• Event-key for keyboard interaction and navigation.
• Collection for giving us a consistent implementation experience across browsers.
• Cookie for easy short-term UI persistence.
• Profiler to find the biggest speed gains
• YUI Doc to leave information for the rest of the team

Working with YUI 3 on an app like this has been fun, and I am looking forward to hearing what our users will urge us to do next!

About the author: Joachim Larsen is a frontend engineer with Assembla.com.

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

Implementation Focus: Demeter

    <div id="datatable-ux">
		<div id="datatable-ux-hd"></div>

		<div id="datatable-ux-bd">
			<div id="node-depths" style="display: none">root  > Testing  > 5_Dev Testing BA  > 80000_1010</div>

			<div id="output"></div>
			<div id="yui-datatable" class="yui-dt">
			  <img src="images/icon-loading.gif" alt="loading" align="absmiddle" style="margin: 30px 0;" /> loading data...
			</div>
		</div>

		<div id="datatable-ux-ft"></div>
    </div>

	<div id="node-apply-wrap" style="display: none;">
		<fieldset>
			<legend>Apply to</legend>

			<input type="radio" name="node-apply" checked="checked" />Current node only<br />
			<input type="radio" name="node-apply" />Current node and child nodes<br />
			<input type="radio" name="node-apply" />Child nodes only
		</fieldset>
	</div>

   // simple example to extend the CellEditor Classes
   // short alias
   var lang = YAHOO.lang,
	  util = YAHOO.util,
	  widget = YAHOO.widget,
	  Dom = util.Dom,
	  Event = util.Event;

   // extend TextboxCellEditor
   Gcc.admin.TextboxCellEditor = function(config) {
	   Gcc.admin.TextboxCellEditor.superclass.constructor.call(this, config);
   };
   lang.extend(Gcc.admin.TextboxCellEditor, widget.TextboxCellEditor, {
	   renderForm : function() {
		   Gcc.admin.TextboxCellEditor.superclass.renderForm.call(this);

		   var oHd = document.createElement('DIV');
		   this.getContainerEl().insertBefore(oHd, this.textbox);
		   oHd.id = container.id + '-admin-editor-head';
		   Dom.addClass(oHd, 'admin-editor-hd');

		   var oCurrNode = document.createElement('DIV');
		   this.getContainerEl().insertBefore(oCurrNode, this.textbox);
		   oCurrNode.innerHTML = 'Current node: ' + Dom.get('node-depths').innerHTML;
		   Dom.addClass(oCurrNode, 'admin-editor-pd');

		   var oApply = document.createElement('DIV');
		   this.getContainerEl().appendChild(oApply);
		   oApply.innerHTML = Dom.get('node-apply-wrap').innerHTML;
		   Dom.addClass(oApply, 'admin-editor-fieldset');
	   },

	   move : function() {
		   Gcc.admin.TextboxCellEditor.superclass.move.call(this);
		   Dom.addClass(this.textbox, 'admin-editor-pd');
	   }
   });

<%@ page pageEncoding="UTF-8" contentType="application/json; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
{"PropertySet":{
"Property":[
<s:iterator value="displayPropertyResultList" status="index">;
    {
    "Id":"<s:property value="id" />",
    "Name":"<s:property value="name" />",
    "Type":"<s:property value="type" />",
    "Value":"<s:if test="%{value != null}"><s:property value="value" /></s:if>",
    "ApplyFrom":"<s:property value="applyFrom" />",
    "ApplyTo":"<s:property value="applyTo" />",
    "Readable":"<s:property value="readable" />",
    "Writable":"<s:property value="writable" />"
    }
    <s:if test="%{!#index.last}">,</s:if>

</s:iterator>
]}
}

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

Implementation Focus: Phanfare Media Organizer

Cory Mintz from Phanfare wrote in last week to tell us about their recent product launch, which is heavily based on YUI 2.8.0.

We just released our new web organizer yesterday… It is a full photo and video organizer built as a web application, using just about every YUI 2 component. We think it really blurs the line between desktop and web software.

Some notable features are:

• Using the Uploader, we let people organize and edit their photos as they upload.
• With the help of Drag and Drop and Menu, the thumbnail grid has all of the behaviors of an OS’s file browser. You can drag select, drag and drop reorder, multi-select using ctrl and shift, arrow between thumbnails, etc.
• The dynamic loading of the TreeView, let us lazy load user accounts with 100s of albums since they are hierarchical ( year -> album -> section ). This allows the page for an extremely large account to load just as fast as a small account.

I love the clean professionalism of the site and the extraordinary attention to detail in the UI. Feel free to tour the site — trial accounts are free and come populated with sample albums to give you a feel for what the site has to offer. Congratulations to Cory and the team for such a fantastic launch.

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

Implementation Focus: Mr Purple’s Movies and More

Murray Macchio is a Senior Software Developer with over 7 years of web development experience located in Kingston, Ontario in Canada. He is currently working with a company called SMT Plus to help streamline their e-learning development process. He will soon be starting as a web developer at a company called Front Runner Pro.

Tell us a little about your project.

I had been putting off a website for my uncle’s company for some time, but with the help of YUI, I built his entire site from scratch in just 3 days.

What is your background with YUI? Why did you choose YUI for this project?

I have been using YUI for the past 2 years. In my previous job, I introduced it into every single internal application. I chose YUI for this project due to my familiarity with it, and because it does ALL of the hard work for you. In short, YUI makes me look very good on a daily basis.

Which YUI components in particular are in use?

I used the Carousel, AutoComplete and my absolute favorite, the DataTable.

What have been the challenges of using YUI in this project?

The main challenges were with a couple of Carousel bugs. These were issues I did expect, as it is still in beta. The only really major issue I had was figuring out why 2 carousels on the same page didn’t play nicely together. Then I realized that their items shared the same IDs.

What are the things you’re most proud of in this project?

I am proud of the fact that I was able to provide a rich user experience very quickly. Specifically, the catalog page that uses the AutoComplete widget with the DataTable allows users to easily browse a movie catalogue of over 4000 movies and games.

What are some upcoming features/projects you are tackling with YUI?

Next order of business, finish the Form Validation component I have been working on with Luke Smith for YUI 2. I am excited to see how it’s received by the YUI community. I also plan on introducing YUI to companies I will be working with in the near future.

How did the YUI components perform?

They performed excellent. The DataTable was able to handle 4000 records at a time without an issue. I have found that the performance of the YUI components has steadily improved with every release.

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!