Fybit Riatrax4Js: Program YUI in Java

February 2, 2010 at 11:08 am by Erol Koç | In Development, In the Wild, YUI Implementations | 2 Comments

Erol KoçAbout the Author: Erol Koç is a co-founder of Fybit, a Switzerland based startup company. Before joining Fybit, he worked as a software architect for a security company where he was the tech lead for the product’s web frontend. He has an MS degree in computer science from ETH Zurich. During an internship at IBM, he contributed to the Eclipse project.

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.

A YUI button with server invocation

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.

The full Fybit sowcase

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.

Publication manager for a research group at ETH Zurich

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.

Find conversations: bloglines | technorati

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

Implementation Focus: Enterprise Web Developer, a Python/YUI Framework

January 5, 2010 at 6:20 am by Rob Tweed | In Development, YUI Implementations | 1 Comment

About the author: Rob Tweed is the founder and co-director of M/Gateway Developments Ltd., which is based in the UK. He has been working in application development since the early 1980s. Much of his work has focused around healthcare IT, which is consistently challenging, characterized by large, complex datasets, high security and performance requirements, and limited budgets. M/Gateway originally developed the Web gateway technology for database vendor InterSystems’ core database product Caché. M/Gateway’s current customers are mainly in the healthcare and financial services sectors. Some run internal intranet applications, but some, such as Quest Diagnostics, run their applications across the open Internet for their customers in the US.

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.

Find conversations: bloglines | technorati

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

YUI 2.7.0 on InsideLine.com

December 14, 2009 at 11:37 am by Réal Deprez | In In the Wild, YUI Implementations | 1 Comment

About the Author: Réal Deprez is the frontend architect at Edmunds.com, the premier resource for automotive information, based in Santa Monica. A Maine native and Tulane graduate, Réal has been working in frontend engineering professionally for five years.

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:

InsideLine.com multimedia spotlight.

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

InsideLine.com gallery interface.

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

InsideLine.com search interface.

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.

Find conversations: bloglines | technorati

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

Implementation Focus: Pattern Insight

December 4, 2009 at 12:05 pm by Erik Hinterbichler | In In the Wild, YUI Implementations | No Comments

Erik Hinterbichler of Pattern Insight.Erik Hinterbichler (@ehinter)is the lead user interface designer/engineer for Pattern Insight, a technology startup based in Mountain View, CA. Erik is responsible for the UI and the usability of Pattern Insight’s products. He creates UI mockups and helps develop the web frontend for Pattern Insight’s flagship products, Code Insight and Log Insight. Erik has a graduate degree in HCI from the University of Illinois at Urbana-Champaign, the university from which Pattern Insight was originally founded. He also holds a B.A. in Computer Science and Math from Dartmouth College.

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.

Find conversations: bloglines | technorati

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

Implementation Focus: OCLC/WorldCat

November 19, 2009 at 10:33 am by Fiz Mohamed | In In the Wild, YUI Implementations | No Comments

Mohamed FizFiz Mohamed has worked for OCLC since 2004 where he’s a senior UI/UX (accessible) designer/developer for a number of high profile products and is responsible for a UI Cookbook/Library. A wealth of commercial freelance experience since 1993 has resulted in a wide range of technical and graphical skills. He lead the UI design for the launch of Cinema.com and also was the UI/UX designer for the US National Archives & Records Administration ARC project.

YUI TabView on Worldcat.

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 Carousel on WorldCat.org

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.

    • Find conversations: bloglines | technorati

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

Implementation Focus: Adify

November 11, 2009 at 10:13 am by Jenny Han Donnelly | In Development, YUI Implementations | 2 Comments

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 Adify team: (From left to right) Kunal Cholera, Reynold Wang, Takashi Arai, Levi Wolfe, Robert Porter, Edwin Jarlos, Melroy Saldanha

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.

Screenshot of Adify's Network Forecast page, which uses YUI Charts.

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.
Screenshot of Adify's Network Campaigns page, which uses YUI DataTable.

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" />
Screenshot of Adify's ColorPicker implementation.

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.

Find conversations: bloglines | technorati

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

Implementation Focus: timr

October 12, 2009 at 7:31 am by Jenny Han Donnelly | In YUI Implementations | No Comments

timr teamtroii 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.

Screenshot of timr

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”.

Screenshot of timr

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.

Find conversations: bloglines | technorati

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

Next Page »
Hosted by Yahoo!

Copyright © 2006-2010 Yahoo! Inc. All rights reserved. Privacy Policy - Terms of Service

Powered by WordPress on Yahoo! Web Hosting.