Yahoo! User Interface Blog (YUIBlog)

Using YUI at EtreProprio.com

EtreProprio.com aims to provide high quality classifieds for free (see an example of a listing here). There are currently more than five thousand property owners selling their houses on EtreProprio.com. We wanted to provide a simple but powerful interface, and we needed a lot of front-end logic. After a little experimentation, we chose YUI which struck us as powerful, robust, very well documented and highly customizable. As a consequence, EtreProprio.com is using YUI (2.8.0) heavily for its front-end.

The following modules are used:

• CSS: Reset, Base
• Utilities: Animation, Connection Manager, Cookie, Datasource, Drag and Drop, JSON
• Widgets: AutoComplete, Button, Calendar, Container, DataTable, RTE, Slider, TabView, Uploader

Let’s go deeper on three implementations: Advanced Search, Photo Uploader and TabView.

Advanced Search

The form used to find properties is developed on top of AutoComplete and Dual Slider. The labels above slider thumbs are positioned by listening to change event. Then, they are repositioned if a collision occurs between min and max labels. The AutoComplete implementation can display mixed elements such as cities, postal codes or regions. Each element has its own display format.

Try it live.

Photo Uploader + Management

We used YUI’s Uploader, DataTable and Drag and Drop modules in order to create simple form for photo uploading. First, the user selects the photos on his computer. Then he clicks “Send all” and as the photos are sent, a table below is populated with the photos and details. Drag and drop is applied to the rows of the table, it allowing users to easily reorder the photos. The description of each photo can be modified using a simple text input and YUI’s XMLHttpRequest utility, Connection Manager.

See the video below for a demonstration:

TabView

As there is a lot of information to display in a classified detail, we used TabView to design the page. The CSS personalization capabilities of TabView allow us to integrate it perfectly with the rest of the page from a design perspective. Tabview also saves us bandwidth as only interested users click on all the tabs — TabView has support for lazyloading Tab content, and that pattern works well for us here.

Find conversations: bloglines | technorati

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