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.

Fybit Riatrax4Js: Write YUI in Java

YUI is not only a fantastic JavaScript library, it is also a great community. Developers
contribute to YUI and allow others to benefit from it. Now,
Fybit joins the YUI community with
Riatrax4Js, a
toolkit for rich internet applications (RIAs) based on YUI.
Riatrax4Js allows you to program RIAs in plain Java and automatically translates your code
to JavaScript, using YUI as a foundation layer. With YUI being available
from Python, Java and JavaScript,
one fourth of all developers get access to YUI.
And with 18%,
Fybit’s Riatrax4Js covers the largest part, consisting of Java developers.

Riatrax4Js: Java benefits, powerful YUI widgets

We just launched the Riatrax4Js alpha version with the goal of easing
development of YUI-based RIAs. Riatrax4Js combines the advantages of Java
with the extensive widget set and controls of YUI. Consequently, you get the
benefits and comfort of Java programming such as:

• Type safety
• Inheritance
• IDE support (Eclipse, NetBeans, …)
• Debugging
• Test tools like JUnit
• Access to many 3rd party libraries

And you all know how fantastic YUI is:

• Many powerful widgets
• Compatible with all major browsers
• Great performance
• Yahoo! experts develop YUI

Add up the advantages of Java and YUI, you get the properties of
Riatrax4Js. Riatrax4Js is not a server-side framework. It compiles Java
to JavaScript, leveraging the standard Java compiler to give you unlimited
scalability and speed. Moreover, Riatrax4Js allows you to connect
your YUI frontend to the web server and backend with a simple annotation-based
remoting mechanism.

A simple example: Show the server’s time on a button’s label when clicked

This section walks you through a simple example that is available for
download from our website.
Riatrax4Js apps consist of regular Java classes that can use the Java version
of YUI that ships with Riatrax4Js. Here is how simple that is:

@MainPanel(name="index")
public class DemoPanel {

	@Services(implementation=TimeServiceImpl.class)
	protected static TimeService service;

	public DemoPanel () {
		final Button syncButton = Button.create("syncButton");
		syncButton.addClickListener(new Listener() {
			public void perform () {
				syncButton.setConfLabel("Sync: " + service.getTime());
			}
		});
	}
}
		

The code starts with a @MainPanel annotation to allow Riatrax4Js to
find the entry point to your program. Next, there is a field service
that is annotated with the @Services annotation. Thanks to this annotation,
the server can be called to get the time (or any other value/object you
want to use on the client). It does not have to be explicitly initialized,
Riatrax4Js does the dirty work for you and ensures that the client and server
parts are connected by injecting an appropriate proxy. A YUI Button is then
created by replacing an existing HTML button “syncButton” of your HTML page. A click listener
which invokes the time service on the server is attached to the button. This
is a synchronous (i.e., blocking) call. Async calls are just as easy:
The generated proxies contains an async variant
of each method in the interface that can be readily used. Here is the corresponding
HTML page for the code:

<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>Fybit New</title>
		<script type="text/javascript" src="codebase/app-index.js"></script>
	</head>

	<body class="yui-skin-sam">
		<button id="syncButton">Synchronous Call</button>
	</body>
</html>
		

The most important line is the script tag at the beginning. It includes a
single JavaScript file app-index.js where “index” is the name given in the
@MainPanel annotation above. In the HTML body, you can find
the aforementioned HTML button. Riatrax4Js wraps the YUI Button over this button.

When you compile the application, Riatrax4Js analyses the source files and generates the file app-index.js
consisting of the Java classes needed in the browser translated to JavaScript
as well as the necessary YUI JavaScript code. Unlike with native YUI, you don’t
have to care about YUI dependencies or which YUI files to include — Riatrax4Js
includes them automatically!

This is just a small excerpt from a larger demo.
The full demo also explains how to call the server asynchronously and how to use other
YUI widgets (text editors, auto-completion, menus etc.). Apart from generating web
application from scratch, using Riatrax4Js you can improve existing web applications
easily with interactive features by wrapping ordinary HTML elements with YUI elements.

Beyond demos: “PublicationManager” written with Riatrax4Js

We used Riatrax4Js to develop a user-friendly web application to
manage publications for a research group at a university in Switzerland.
This application facilitates the process of entering and modifying publication
records and it has been put into operation in November 2009. The
PublicationManager features YUI
dialogs, sortable and resizable tables, paginators and auto-completion. The records
entered by the users are stored in a database and can be edited and complemented with
files with just a few clicks.

Security

Riatrax4Js is designed to make applications as secure as possible by default.
But because Riatrax4Js uses JavaScript, applications are as hard to secure as
any other dynamic web app. Fybit offers separate extension to Riatrax4Js,
Riatrax Security.
It is based on Riatrax4Js’s
program code analysis and secures the application by filtering invalid or
malicious content and blocking it before it reaches your code and/or application server.
Fybit Riatrax Security is also configured with Java annotations.

Want to try?

The alpha version of Riatrax4Js is currently available on our web site to registered users.
It’s great to see the user base of Riatrax4Js grow and be used by developers at this stage.

Fybit’s goal is to make Riatrax4Js the best Java RIA toolkit available and support
it in the long run. We believe that the YUI community and YUI developers can
give us important feedback about Riatrax4Js. We are excited to hear your questions
and suggestions, e.g.

• How can we improve Riatrax4Js?
• For what kind of projects would you consider Riatrax4Js?
• What is the best way for us to distribute the product?

As Fybit is a small startup company, we appreciate everyone who wants to
contribute to Riatrax4Js to make it the number one RIA framework. Just
drop us a line if
you are interested or want to know more.

Enterprise Web Developer (EWD), a Python/YUI framework

Since the early days in 1996, I wanted people to be able to use web technologies as a user interface to applications that they’d previously have considered using Client/Server or some other GUI technology to create. It seemed to be to be a technology that had the potential to be heavily automated so that developers could focus on expressing what they wanted to do rather than how to achieve it.

The thing that has always dismayed and surprised me is how the industry has not embraced this philosophy. Whilst there is no shortage of web/Ajax frameworks out there – there seems to be a new one every week – they all have a common theme: the notion that a web/Ajax application is primarily a programming issue. By contrast I’ve been firmly of the view that by building a framework that was first and foremost design-focused, the programming aspects could be potentially automated to such a degree that the actual programming required in even a complex healthcare application should be able to be reduced to almost trivial levels. That’s been the design goal of our EWD and it proves that such an approach is practical, feasible and highly beneficial.

Why Python and YUI?

We’ve ported EWD to the free Open Source NoSQL database GT.M and Chris Munt, M/Gateway co-founder, has developed a number of language bindings that EWD can use. Our recent slidecast series (described below) was based around his Python binding because it’s such a popular language these days – recent reports suggest that it has grown in use by 45% since April 2008. However, you could use EWD just as easily with Ruby or Java.

Our screencast series focuses on EWD/YUI integration for several reasons:

• YUI provides a very powerful and highly functional and usable set of UI widgets
• unlike many of the Javascript frameworks, YUI is not an “all or nothing” environment, so you can mix and match YUI components with your own
• YUI is a free Open Source library so in combination with EWD and GT.M running on a Linux platform, the demo is based on a completely free Open Source stack
• it has the Yahoo! and Douglas Crockford pedigree: what more need you say!

EWD uses XML syntax to incorporate YUI. What advantages does this offer?

Making EWD work with YUI was pretty straightforward, but it soon became clear to me that the average developer faced quite a few obstacles when adopting such a Javascript framework for their UI development. Frameworks are complex environments, requiring a lot of detailed knowledge of pretty advanced Javacript, there’s a big learning curve and there’s a lot of “devil in the detail”. Furthermore, that complex and verbose Javascript requires downstream maintenance, often by someone other than the original developer. Additionally, for me, they presented yet another example of how the industry’s solution to web/Ajax application development was moving further towards programming and away from the skillsets of designers.

From the earliest days of EWD I’d ensured that it was user-extensible, allowing you to encapsulate functionality and behaviour as XML-based “custom tags”, and they proved to be a perfect solution to incorporating YUI. The YUI custom tags I’ve demonstrated are therefore a custom extension of EWD. The YUI custom tags not only generate all the Javascript needed by the corresponding widget, they also manage the destruction of the widget at the correct time, and include optimised “just in time” loading of the correct .js and .css files, leaving the developer to not have to worry about all that up-front configuration stuff. Another key feature of XML tags is that they are inherently nestable, and usually that’s exactly what you need to do with YUI widgets: menus and datatables nested inside tab-panels for example. So the real advantages are that the developer can express what he/she wants to do in just a few intuitively named and laid out custom tags. Not only does it make development quick and simple, but downstream maintenance also becomes simple too (and remember that one of the major costs and overheads of a big, mission-critical application is maintenance).

A good example is the use of TabView widgets. In EWD these can be described by a simple, intuitive (and therefore highly maintainable) set of nested XML Custom tags, eg:

<yui:TabView>
    <yui:Tab label="By Artist" active="true" dataSrc="selectCDXArtist.ewd" />
    <yui:Tab label="By Title" active="false" dataSrc="selectCDXTitle.ewd" />
</yui:TabView>

The yui:TabView Custom Tag’s tag processor is invoked by EWD’s compiler when it encounters an instance of this tag, and it generates the run-time code that will send the appropriate YUI TabView Javascript and associated HTML markup to the browser.

EWD instructional series

We’ve done a series of screencasts to introduce EWD. Here is Part One:

The goal of the screencasts was to demonstrate the extreme level of automation of EWD when used to its full potential. I also wanted to demonstrate how, in EWD, you’re very much describing what you’re wanting to achieve, leaving EWD to do all the how work and to handle all the day-to-day things that are essential to a web application but that can and should be automated, eg session management, security management etc. I hope when people watch the videos they see how little programming has been left for a programmer to do: it’s basically fetching data from the database, validating form fields against a database, and saving data back to a database.

They always say a picture is worth a thousand words, and I think a video is even more potent. Seeing is believing, and there’s nothing like being shown how a tool can be used by the guy who designed and wrote it!

I chose to explore a set of typical UI interactions for an average application that could be demonstrated in the space of about an hour. I also wanted to demonstrate how nesting of the UI components was possible using both the inherent nesting of YUI custom tags and EWD’s “fragment”-based Ajax architecture. The demo covers logging into an application, a main menu, tab panels for choosing the action required and a query against the database whose results are presented in a DataTable. Hopefully the fact that I’ve been able to demonstrate how all that functionality can be created in just over an hour shows the power and benefit of EWD as a development framework. And in terms of maintainability, the entire application I demonstrate is described in just 134 lines of simple HTML/XML markup and only 78 lines of straightforward Python code!

Where can people get EWD to try it out for themselves?

The quickest and simplest way to get a fully-working EWD system up and running is to use our free M/DB Installer. We’ve done a

screencast for this too.

At present the EWD/YUI Custom Tag library isn’t generally available, but we’re hoping to be able to release it soon.

We also have a forum for EWD users that people are very welcome to join.

Here at Edmunds (Edmunds.com) we just launched a redesign of
Inside Line (InsideLine.com), our automotive enthusiast web site, and we are using the YUI JavaScript library extensively.

Some of the YUI utilities & widgets used on Inside Line:

• Yahoo/Dom/Event
• Animation Utility
• Connection Manager
• ImageLoader
• JSON
• Selector
• Carousel
• TabView

We (the Frontend team) started out with YUI 2.7.0 JavaScript core and built our own JavaScript user interface library on top of it to encapsulate site-specific components and functionality. Our library takes advantage of YUI’s core utilities, including Dom, Event, Connection Manager, and Animation.

We are using Dom and Event extensively to handle DOM interaction, event listeners and custom event handling. The YUI Connection Manager is handling all of our Ajax implementations, including our custom search widgets. We are also using many of the YUI widgets on Inside Line, including TabView and Carousel, with custom skins. The YUI ImageLoader helped us improve page performance and meet our strict performance requirements.

We chose YUI because of its great documentation, thorough testing, and the scope and depth of its offerings. The library is easy to learn, understand, and implement. The modularity of the system fits in well with our design principles, and the API and custom events make it extremely extensible and easy to integrate.

Some Highlights

Multimedia Spotlight (tabview, carousel) from InsideLine.com:

Image and Video Galleries (core, JSON and Carousel):

Ajax Search Widgets (Dom, Event, Connection Manager):

Do you have a YUI Imlementation you’d like to share on YUIBlog? Check out our contribution guidelines — we’d love to hear from you.

About Pattern Insight

Pattern Insight provides powerful solutions to index, search, and analyze semi-structured data. By “semi-structured” we mean any type of system data — code, logs, scripts, and more.

Currently we have two major software suites: “Code Insight” and “Log Insight.”

Code Insight provides several unique capabilities for analyzing source code. At its core is a lightning-fast fuzzy snippet search which scales to billions of lines of code. With snippet search, you can paste in a snippet of code and find all similar snippets across your entire code base, even tolerating variable name changes or line insertions/deletions. Built on top of this fuzzy search capability is Patch Miner, an application for locating buggy code that needs to be fixed. You can input a bug fix and Patch Miner will find all other locations where that bug fix should be applied. Finally, we have Pattern Miner, a copy-paste and duplication detector. Pattern Miner can help you refactor your code base by automatically finding duplicated code, even when variable names have changed. It can also detect IP leaks across different codebases; e.g., if you use both open source and proprietary code and want to prevent code from flowing between them.

Log Insight is our next-generation log search and analysis product. Log Insight can index TBs of system data and provide sub-second performance for complicated search queries. Furthermore, it enables the creation of persistent signatures that can be used to scan new or archived data for instant matches. Log Insight can also automatically extract common patterns (e.g. for failures) that can then be codified as signatures back to the Pattern Insight engine.

The Importance of UI

We recognize that possessing great underlying technology is not enough to create a successful product. A good UI is absolutely essential if we want users to be able to see the value of our technology and take full advantage of it. Thus the requirements for our user interfaces drive much of the development of our backend technology.

As one example, a product like Patch Miner is heavily dependent on the UI to shape it. At its highest level, Patch Miner is a fairly abstract concept: “find all the places where a bug fix needs to be applied in my code base.” Turning this into a concrete UI provides quite a few unique design challenges. For instance, what exactly is a “bug fix” and what is the best way for a user to input it? And once Patch Miner has found a bug somewhere else, what’s the best way to present the result to the user? Solving these user experience problems has provided the road map for the development of the core Patch Miner application.

Using YUI at Pattern Insight

The UIs for Code Insight and Log Insight are fully web-based, and we are using YUI heavily to improve user experience. When we were initially trying to decide which JS framework to use, there were two things that sold us on YUI: the extensive documentation and the wide variety of ready-made components and widgets. We ended up making use of almost all of them: animation, autocomplete, button, calendar, connection manager, container, cookie, datasource, history, JSON, slider, tabview, treeview, loader, logger, test, and CSS base/reset/fonts/grids.

Maintaining High Performance in a Rich Application

Our main strategy in keeping our rich applications performant has been to develop our own web services API which we use to load data on-demand as much as possible. The built-in support for on-demand loading in YUI widgets like treeview has made this much easier for us. We also made the decision to stop supporting IE 6. This has enabled us to use much more sophisticated Javascript that modern browsers can handle but IE 6 can’t.

Most Interesting YUI Implementation Features

We’ve developed quite a few of our own custom widgets, including a multi-select list with filtering capability and an auto-resizing textbox that grows and shrinks based on user input. Things like auto-resizing might seem minor, but I think most users would agree that small things like this are often the difference between pain and joy when using an interface.

Additionally, purely from a development perspective, our use of the YUI loader makes it very easy to quickly write new pages. We can effortlessly drop in anything we want on a given page, either standard YUI widgets or our own. Essentially, at the top of each page we just need to call our own “loadModules” function and give it the list of components we want to use, plus a callback function:

YAHOO.PI.loadModules(['treeview', 'PI.SelectableList'], function() { …

We are still using YUI 2, but this works similarly to the new YUI().use function in YUI 3.

What’s Next?

We are currently hard at work on Code Insight 1.6, our next major release, which will come with some impressive improvements to Patch Miner. We are also actively developing the next version of Log Insight, which will include a brand new, highly sophisticated UI. Among the new features are a web-based signature editor with live syntax highlighting, autocompletion, and error checking.

If you’re interested in learning more about us, you can read about our products and check out some videos at our website: http://www.patterninsight.com. Also, feel free to email us at info@patterninsight.com.

Here at OCLC — a worldwide non-profit library cooperative that provides web visibility for library catalogues around the world — we initially came across YUI while discussing grid frameworks early in 2008. Later that year the subject of JavaScript toolkits arose, and we recalled YUI as part of the investigation for one of our products. We looked at a number of other popular toolkits, and we tried to approach the toolkits from the point of view of both a developer and designer. While it was a close call between some, I was very impressed with the YUI, especially with the YUI 3 intro at that time which showed that Yahoo’s developers weren’t afraid to make big changes for the better, and had borrowed ideas from other mature toolkits and improved upon them. Even using YUI 2 would save us time with its fully-featured set of interactive widgets. On top of that, YUI was supported both by Yahoo and an active developer community.

YUI components have since found their way onto OCLC’s WorldCat.org, a site that allows users to search for an item of interest and discover which libraries near them own that item. WorldCat.org has become the Web destination for cross-library searching and uses YUI components in several locations:

• TabView: One the homepage, tabs built on YUI TabView let a user click between a default search of all formats and one of several narrowed, format-specific searches, including books, DVDs and articles. TabView is also used on library profile pages (such as http://www.worldcat.org/libraries/14229), where users can tab through recently-catalogued items by genre.
• Carousel: The WorldCat.org detailed record page provides a host of evaluative information about an item plus links to related items. Record pages on OCLC’s “WorldCat Local” service, a locally-branded and focused instance of WorldCat.org that serves as a library’s online catalog, uses the YUI Carousel to present a scrollable assortment of similar works by the same author or about the same subject. (See page bottom of http://ucsd.worldcat.org/oclc/3952807&referer=brief_results for an example.)
• Reset/Fonts/Grids CSS: We use the complete YUI Reset package on the detailed record page, our most complex layout and most important page since it connects users to the local catalogs of our member libraries. The CSS package helps us maintain a consistent presentation across supported browsers, especially with user adjustment of font sizes — a key to making the page accessible for library users with limited sight.
• Menu: WorldCat.org will soon use YUI Menu to create its main navigation and user-account menubar. We liked the better support for keyboard and mouse navigation over our current third-party utility.
]]> http://www.yuiblog.com/blog/2009/11/19/yui-on-oclc-and-worldcat/feed/ 0 http://www.yuiblog.com/blog/2009/11/11/implementation-focus-adify/ http://www.yuiblog.com/blog/2009/11/11/implementation-focus-adify/#comments Wed, 11 Nov 2009 18:13:06 +0000 Jenny Han Donnelly http://www.yuiblog.com/blog/?p=860

Former Yahoo! Levi Wolfe is the Manager of UI Development at Adify, a vertical ad network management and media services company that is an independent, wholly owned subsidiary of Cox TMI Inc., part of Atlanta-based Cox Enterprises.

Levi has worked in software development for the past 10 years. He has written everything from high performance web servers in C/C++ to Firefox plugins and ActiveX controls. Levi manages the seven person UI team at Adify. They are responsible for several internal and external web applications written in C#/ASP.NET and have been using YUI since 0.11.0.



Members of the Adify team: (From left to right) Kunal Cholera, Reynold Wang, Takashi Arai, Levi Wolfe, Robert Porter, Edwin Jarlos, Melroy Saldanha.

Tell us about your company/product/website.

Adify offers two related services — the Adify Network Builder platform and Adify Media.

Adify Network Builder is a fully integrated, end-to-end technology platform developed and optimized for the unique requirements of premium vertical ad networks and their publisher partners. Adify Network Builder enables enterprises such as Warner Brothers, Univision and Forbes and entrepreneurs such as Resonate, Yardbarker, and MOG to build and commercialize branded vertical networks.

Adify Media is the media services division of Adify. Built on the Adify Network Builder platform technology that powers more than 200 vertical ad networks, Adify Media has unique access to over 12,000 sites in networks built by top media companies. Adify Media reaches advertisers’ goals by delivering creative and content with 100 percent transparency to quality mid-tail sites.



What is your team’s approach to development?

Unlike a lot of other projects using YUI, we are building a business application. Our users want a fast, responsive application that they can log into, get their reports, and get out. We want our application to feel as professional and solid as a desktop application, without being held back by traditional limitations of a web-based environment.

What made YUI a good fit for your project?

As YUI is completely client side, it integrates extremely well with many server technologies (ASP.NET included). It is very stable and professionally maintained. This can be seen in everything from the numerous examples and very helpful API documentation to the active forums and bug tracking. I’m impressed Yahoo! has such talented people working on something they give away for free.

How are you using YUI?

We have nearly 200 aspx pages, and almost all of them are using YUI in some way. We’re using Fonts and Grids CSS components (we haven’t quite worked up to Reset yet). We use the core components to navigate and manipulate the DOM, and to smooth over browser differences. Some of the more commonly called functions include Dom.addClass(), Dom.getElementsByClassName(), Event.stopEvent(), and Event.onDOMReady().

We probably use about half of the widget components, some highlights are:

1. Using DataSource to power Charts and DataTable. It becomes incredibly easy to switch between local or XHR sources depending on the amount of data, which is great for client performance.
2. Using the ColorPicker control to create a highly customizable white-label interface. We are then able to easily reskin various components with a small amount of dynamic CSS.
3. Integrating a YUI Panel with an ASP.NET UpdatePanel to make something we call an UpdateDialog. This gives us an in-page modal dialog box that can use AJAX to dynamically load its contents or make a server call based on the user’s decision without reloading the entire page.



What is your approach to integrating YUI with ASP.NET?

One of the biggest benefits of ASP.NET is the ability to encapsulate common behaviors or widgets into highly reusable custom server controls. The control developer becomes intimately familiar with YUI while the page developer merely needs to learn how to use the custom ASP.NET control. We wrap all the YUI widgets we use with a custom control that inherits from WebControl. The control is responsible for rendering the required markup and registering YUI scripts. For instance, if I wanted to put a ColorPicker that defaults to red on my .aspx page, all I would write is:

<Adify:ColorPicker ID="myPicker" Color="#ff0000" runat="server" />



Then in my server side code-behind file, I can just get or set myPicker.Color to use it. Here is a more complicated example of how we could use a DataTable in an .aspx page to show clicks over time:

<Adify:YuiDataSource ID="LastMonthData" OnRowDataBound="OnDataSourceBound" runat="server">
<Columns>
	<Adify:YuiDataSourceColumn Name="Time" />
	<Adify:YuiDataSourceColumn Name="Clicks" />
	<Adify:YuiDataSourceColumn Name="CTR" />
</Columns>
</Adify:YuiDataSource>

<Adify:YuiDataTable DataSourceId="LastMonthData" runat="server">
<Columns>
	<Adify:YuiDataTableColumn Key="Time" Formatter="Date" />
	<Adify:YuiDataTableColumn Key="Clicks" Formatter="Number" />
	<Adify:YuiDataTableColumn Key="CTR" Label="Click Through %" Formatter="Percent3" />
</Columns>
</Adify:YuiDataTable>

We’ve created our own custom data-bound YuiDataSource web server control. It is responsible for serializing objects to JavaScript in the case of local data sources, or caching objects server side for XHR data sources. It renders itself in the page’s HTML as a YuiDataSource and could be used by a Chart or DataTable (or both). Our YuiDataTable control exposes a collection property called Columns which is a collection of YuiDataTableColumn objects. It serializes the Columns collection into a JavaScript array of objects passed to the DataTable constructor.

The main point here is that the custom controls are as simple as possible to use. They expose properties for any of the options YUI provides, and override the OnPreRender event to render themselves as JavaScript calls to YUI. This frees up the page author to think about the logic on his page, and not the gory details of instantiating a YUI widget.

How has YUI helped your project achieve success?

Application developers tend to make good ASP.NET developers since they usually have a strong computer science background. Unfortunately they don’t always have quite as much experience dealing with the multitude of browsers or with JavaScript (which I’ve learned over the years is far more powerful and complex than initially suspected).

YUI helps in several ways. First, it helps abstract away a number of browser differences, so we don’t all have to know every last detail about how some obscure browser version affects our code. Second, browsing some of the samples has served as inspiration. I’ve even seen a Product Manager make a quick prototype using a YUI sample to explain how he wanted a feature to work.

Finally, I can’t even count how many hours we’ve saved or how improved our interface has become thanks to all the widgets. We replaced a very basic palette chooser with the ColorPicker, ASP.NET’s built-in Calendar with YUI’s, and a powerful but hard-to-maintain JavaScript grid with the DataTable. In every case, we greatly increased the usability of our application while simultaneously decreasing the amount of effort spent fixing bugs in our controls.

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

Honestly, writing JavaScript that lives up to YUI. If there is one thing that has pushed us to write better client-side code, it would be the example of YUI. We’ve really tried to apply the same discipline and rigor when writing JavaScript as when developing server code in C#.

What are some YUI-related projects on your roadmap?

We have a small internal tool written using the Uploader control that became very popular. We definitely want to integrate the Uploader into our main product. We’re all really happy with the DataTable control, and want to start adding inline-editing where appropriate. We also need to keep up with all the great improvements to the Chart control.

We’re also keeping a close eye on YUI 3 and can’t wait to start seeing widgets based on the new architecture.

]]> http://www.yuiblog.com/blog/2009/11/11/implementation-focus-adify/feed/ 2 http://www.yuiblog.com/blog/2009/10/12/timr/ http://www.yuiblog.com/blog/2009/10/12/timr/#comments Mon, 12 Oct 2009 15:31:32 +0000 Jenny Han Donnelly http://www.yuiblog.com/blog/?p=617

troii Software is a small Austrian software company, working on software development and consulting projects. troii Software was founded in 2008 by Wolfgang Brandhuber, Mario Breid and Thomas Einwaller. All three met in college and after some years of working on their own they decided to found troii. The troii principle is “The whole is more than the sum of its parts”. This means that by combining our talents, products and services we become a company focused on creating high quality, state-of-the-art software.

Tell us about your product.

timr is a very easy to use time-tracking application which offers a web application as well as native clients for mobile phones. This combination allows our users to easily track their times in the office and on the go.



What problem are you trying to solve for users?

For most people, time tracking is an evil, consuming a lot of time, money and energy. The reason that time tracking often fails is the lack of an appropriate tool.

Most systems are cumbersome, complicated or simply not available when users have the need to track their time. Times are mainly tracked subsequent to the work performed and not parallel to the work, which increases the effort that is needed. This is even more dramatic since times are mostly tracked not directly after work but at the end of the week or, even worse, at the end of the month.

timr allows its users to track their times instantaneously during the work day, easily and ubiquitously. That means the time is always tracked parallel to the work, no matter if you are in the office or on the go. At the end of the day, all your time is already tracked, without having to invest one more minute to track any work before going home.

What makes your product stand out?

Over the past few years we have had a lot of experiences with different time-tracking applications and concepts. Most are too complicated or simply too cumbersome. So we designed a system that we ourselves would enjoy using. We decided that time tracking has to be Easy, Instantaneous and Ubiquitous:

• If a time-tracking application isn’t easy to use, you won’t use it and it will be even harder to convince your employees to use it.
• If time tracking isn’t easy enough it is usually procrastinated, but subsequent time tracking needs even more time then instantaneous time tracking — a dangerous loop.
• For ongoing instantaneous time tracking you need the possibility to track times anytime, anywhere.

What are the things your team is most proud of?

By leveraging YUI in our web applications as well as building out native clients for mobile phones, we made time tracking with timr always easy, in the office and on the go. Although it would have been much easier for us to develop a web application that also works on mobile phone browsers and sell this as a “solution” for mobile time tracking, you would realize very fast that having to start a browser, open the mobile web page and enter your login credentials to instantaneously track your time isn’t easy. We’ve taken no shortcuts in our efforts to give users the power and convenience to track their times anytime, anywhere.

Please describe how you came to choose YUI as a resource.

We looked for a library of reusable components that could provide us the best usability. It was also important for us to be able to customize and tweak the components for our needs. Many rich component libraries provide a lot of features but do not allow developers to hook into them easily to extend them.

With our server architecture consisting of the Spring Framework and the free application container Tomcat, we found in YUI a perfect companion to sit on top as the “JavaScript-Layer”.



Which YUI components in particular do you use in your product?

We use about 70% of the components included in YUI 2.7. The application consists of a minimal set of JSPs through which most user inputs are submitted using dynamic dialogs. These dialogs are based on the YUI Container family of components and use the Connection Manager to send the inputs by AJAX to the server. This improves the flow of the application a lot.

Another important component is the TreeView, which we use to display our highly customizable task structure and through which users can define their exact hierarchy of customers, projects and tasks.

All the reporting is done in the DataTable with server side filtering, sorting and pagination enabled. Custom formatters and special configurations allow us to adapt the grid exactly to our needs.

Besides these components, we make heavy use of Context Menu and Drag & Drop all over the application, to give power users an efficient workflow.

What have been the successes of using YUI in your project?

YUI helped us create a web application that is so easy to use that there are no more excuses for “old-fashioned” time tracking systems. Many of YUI’s components enable our web application to feel much more like a desktop application but without having to install and update it on each client computer. The interesting thing is, that after using timr ourselves we experienced that time tracking actually became fun, and the coolest thing is how many of our users tell us the same: time tracking is fun! YUI has played a significant role in helping us achieve this “fun” side effect.

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

One word: JavaScript. Frankly, the power of JavaScript has been underestimated for a long time and many developers have used JavaScript with old bad patterns. Luckily Douglas Crockford’s book helped us a lot to find the good parts of JavaScript and how to use them. We believe that being able to write good JavaScript code is an essential requirement for today’s web developers and we are sure that we will see a lot more great JavaScript applications in the future.

What are some upcoming features you are tackling with YUI?

One of the upcoming features we are planning is a special reporting page that will make heavy use of YUI Charts. We will give the user a huge set of predefined reports using the DataTable and provide dynamic charts for visualization and allow them to create their own.

]]> http://www.yuiblog.com/blog/2009/10/12/timr/feed/ 0 http://www.yuiblog.com/blog/2009/07/31/implementation-focus-short-reckonings/ http://www.yuiblog.com/blog/2009/07/31/implementation-focus-short-reckonings/#comments Fri, 31 Jul 2009 16:52:23 +0000 Jenny Han Donnelly http://www.yuiblog.com/blog/?p=405

After having been VP Technology of Webmotion, a Canadian-based Internet services company, for 12 years, Mikaël is currently volunteering for an IT project in Cambodia where he helps with the startup of a Software Engineering and Telecommunications school targeting poor students of the countryside.

Mikaël has worked in software development for the past 15 years. While he has worked on projects of various kinds and magnitudes, he has always been obsessed by user interface aspects and is a strong advocate of Web-based software.


Mikaël had the idea of ShortReckonings.com when he was a student and was often sharing expenses with friends. Having such a tool at the time would have been great but this was before the Web. With the YUI Library, he has found the framework he needed to make this happen. He considers Short Reckonings as both a lab to experiment with the latest Web technologies and his attempt to create the smoothest user experience possible. He was also seduced by YUI because of the support that comes with it.

Please tell us a little about your project.

http://shortreckonings.com is a free YUI-based Web tool that helps tracking and evening out group expenses. Its light user interface is ideal for coworkers, roommates, travel buddies or family members.



Which components of the YUI Library are used on your site?

Short Reckonings uses the following YUI components: Lang, Dom, Connection, Event & CustomEvent, Overlay & Dialog, TabView, DataTable, Calendar, AutoComplete, JSON. The AutoComplete control allows for faster input of expense descriptions for example. Custom events are used intensively to make the different elements of the application communicate together.

What have been your recent successes?

1.5 years after its beta launch — which was covered on the YDN Blog — Short Reckonings has reached a momentum with its adoption by users from many countries. Today, I am pleased to announce that Short Reckonings is no longer in beta. Since its beta launch, a lot of new features and user interface improvements have been made. Among the most significant
ones:

• Support for non-even splits and formulas;
• Rich widgets such as calendar and autocomplete;
• Content can be in any language (utf8);
• Print & export to Excel;
• Sign in with your Facebook account.



Congrats! What about any challenges you’ve faced recently?

A recent challenge has been the integration with Facebook Connect JS API. Because FB Connect is a young library and is not very stable, using YUI Custom Events to build a YUI layer above it has been the key to make it usable in production environment.

What do you see for the road ahead?

With my current stay in Cambodia, I have become very concerned about making software usable in slow connection environments and offline. The next version of Short Reckonings will support offline usage (with Google Gears or HTML5 offline storage). Once back in Canada, I also would like to release an iPhone version. And of course migrating to YUI 3 will be an exciting experience!

]]> http://www.yuiblog.com/blog/2009/07/31/implementation-focus-short-reckonings/feed/ 1 http://www.yuiblog.com/blog/2009/06/09/implementation-focus-squarespace/ http://www.yuiblog.com/blog/2009/06/09/implementation-focus-squarespace/#comments Tue, 09 Jun 2009 16:08:18 +0000 Jenny Han Donnelly http://yuiblog.com/blog/?p=355

Squarespace.com started in the dorm room of Anthony Casalena and has grown into a sizable company and a formidable service that serves the needs of tens of thousands of customers every day — including Mark Ecko and Kevin Rose. Squarespace allows its customers to create and manage their web sites using a polished interface without having to install software — it’s all done through the browser. Squarespace is defined by our insistence on software that provides an unparalleled user experience from a robust core. Every pixel of Squarespace’s software is engineered and animated to be flawless.



Members of the Squarespace team: (From left to right) Paolo DeDios, Erica Reitman, Dane Atkinson, Jonathan Snook, Anthony Casalena, Tyler Thompson, Davin Chew, Rolando Berrios.

Can you provide a background of projects where you’ve used YUI? What problems are you trying to solve for users?

Squarespace has two different audiences that have to be served in different ways. We have Squarespace customers who use the tools that we provide and we have the people who visit the sites that our customers create. YUI is used to drive a lot of the functionality that we provide to our customers and do that in a way that works reliably cross-browser. If we don’t provide a reliable in-browser experience, we’ll hear about it with support requests.

We also have YUI available for our customers to use on the sites that they build (although it’s never been a requirement). Our customers get to rely on a stable and reliable library for any of their own site-building needs.



You chose YUI’s JavaScript library to help drive the UI. What led you to make that choice?

At the time the decision was made, YUI was the best choice. YUI is a well-designed library that considered the requirements of multiple scenarios, not limiting itself to one or two use cases. It was also one of the few libraries that had an integrated and supported set of widgets.

Also, the fact that YUI is actively maintained and tested so extensively with the Yahoo! homepage is a massive win. No other library we looked at was receiving that sort of extensive testing and coverage. When we have run into speed issues, it’s turned out to be cross-browser issues unrelated to our use of YUI.

What YUI components are in use on which projects?

Of course the standard DOM and Event stuff along with Drag and Drop, Animation, and Connection Manager. On the widget side of things, we take advantage of Calendar, ColorPicker, and Slider.

Design and interface quality are huge differentiators for startups. What are the features you have prioritized in your interfaces and what have you build on top of YUI?

For Squarespace, design and interface quality is a big part of our success. We really work to create a polished in-browser experience so that customers can design and manage their sites all from one place.
We’re trying to replace desktop tools. The browser and YUI have allowed us to do that.

We pull in dynamic overlays allowing our customers to move content around, edit content on the spot, or add new content without requiring a page refresh. Squarespace also allows them to edit the look and feel of their sites dynamically. Change colours, images, or other CSS properties from the interface or have direct access to specify whatever CSS you want. It’s really quite flexible, and we’re very proud of how well it has been received.



What are the next interface challenges you are tackling for upcoming releases?

We have some great features that we’re working on right now that will increase the flexibility that our customers will have to modify their content and design right from the browser but the challenge with doing more stuff within the browser is ensuring that you’re creating a snappy and responsive interface. We definitely don’t want them to be sitting there while we load up large assets. We want them to be able to jump in and play with their sites as quickly and easily as possible.

We plan to stick with YUI and will be watching the progress of YUI 3 very closely to see how it’ll fit into our future plans.

]]> http://www.yuiblog.com/blog/2009/06/09/implementation-focus-squarespace/feed/ 2