Q1 2010 release focuses on strengthening 3 main aspects of RadControls for Silverlight and RadControls for WPF:

• Ensuring first-class performance for all data-centric controls through various techniques,
• Enhancing and polishing RadControls themes
• Providing highly advanced, enterprise-level features, especially for the data visualization controls 

We know that performance is crucial for line-of-business applications. Therefore, we always make sure that RadControls can help you achieve unmatched performance and this has always been our number one priority. RadControls achieve unbeatable performance through UI and Data Virtualization, Data Sampling and built-in Load On Demand features.

Several of the major controls in the bundles have been enhanced with UI virtualization support – Scheduler, CoverFlow and Book.

As a part of Q1 2010 we also want to bring an unparalleled visual richness to your applications. To achieve that we have done a major rework of all our themes. We used a uniform templating approach across all controls, streamlined naming conventions for resources and delivered a much more consistent look of the controls along the way.

RadControls for WPF bundle has been enriched with two new controls – Map and Book.

 

Another new control has been included in the Q1 2010 release. However, it continues to be in a CTP stage. This is the Transition control. We decided that this is the better way to proceed as we will need some more input from our community on how exactly to develop this control further. Therefore, we will be regularly blogging on the development progress so that we can clearly indicate the direction, in which the control is evolving and gather your feedback on whether this is the best direction.

Our Charting controls for Silverilght and WPF have been advanced with major new features such as Data Sampling, Zooming and Scrolling, Automatic SmartLables positioning, Sorting and Filtering and many more.

The new built-in paging of the GridView control now allows you to page through your data, thus resulting in an event faster and more responsive grid that can easily handle enormously large datasets.

The new major Q1 2010 release of RadControls for ASP.NET AJAX has just been uploaded on telerik.com. I know that there are many people who would like to download and try out the new controls/features in the release without any further delay, that is why I will spare you the details for now and will let you enjoy it at your own disposal :) The links below will direct you to the main resources that highlight the important parts you would like to take a look at:

 

What's new:
http://www.telerik.com/products/aspnet-ajax/whats-new.aspx

Release notes:
http://www.telerik.com/products/aspnet-ajax/whats-new/release-history/q1-2010-version-2010-1-309.aspx

 

Demos:
http://demos.telerik.com/aspnet-ajax/controls/examples/default/defaultcs.aspx

 

Documentation:
http://www.telerik.com/help/aspnet-ajax/introduction.html

We are glad to announce that the Q1 2010 Release has added another weapon to RadGridView’s growing arsenal of features. This is the brand new RadDataPager control which provides the user interface for paging through a collection of data.

The good news is that RadDataPager can be used to page any collection. It does not depend on RadGridView in any way, so you will be free to use it with the rest of your ItemsControl’s if you chose to do so.

Before you read on, you might want to download the samples solution that I have attached. It contains a sample project for every scenario that I will discuss later on. Looking at the code while reading will make things much easier for you. There is something for everyone among the 10 Visual Studio projects that are included in the solution. So go and grab it.

I. Paging essentials

The single most important piece of software concerning paging in Silverlight is the System.ComponentModel.IPagedCollectionView interface. Those of you who are on the WPF front need not worry though. As you might already know, Telerik’s Silverlight and WPF controls is share the same code-base. Since WPF does not contain a similar interface, Telerik has provided its own Telerik.Windows.Data.IPagedCollectionView.

The IPagedCollectionView interface contains several important members which are used by RadGridView to perform the actual paging. Silverlight provides a default implementation of this interface which, naturally, is called PagedCollectionView. You should definitely take a look at its source code in case you are interested in what is going on under the hood. But this is not a prerequisite for our discussion.

The WPF default implementation of the interface is Telerik’s QueryableCollectionView which, among many other interfaces, implements IPagedCollectionView.

II. No Paging

In order to gradually build up my case, I will start with a very simple example that lacks paging whatsoever. It might sound stupid, but this will help us build on top of this paging-devoid example. Let us imagine that we have the simplest possible scenario. That is a simple IEnumerable and an ItemsControl that shows its contents. This will look like this:

No Paging

1. IEnumerable itemsSource = Enumerable.Range(0, 1000);
2. this.itemsControl.ItemsSource = itemsSource;

XAML

1. <Border Grid.Row="0" BorderBrush="Black" BorderThickness="1" Margin="5">
2.     <ListBox Name="itemsControl"/>
3. </Border>
4. <Border Grid.Row="1" BorderBrush="Black" BorderThickness="1" Margin="5">
5.     <TextBlock Text="No Paging"/>
6. </Border>

Nothing special for now. Just some data displayed in a ListBox.

The two sample projects in the solution that I have attached are:

• NoPaging_WPF
• NoPaging_SL3

With every next sample those two project will evolve in some way or another.

III. Paging simple collections

The single most important property of RadDataPager is its Source property. This is where you pass in your collection of data for paging.

More often than not your collection will not be an IPagedCollectionView. It will either be a simple List<T>, or an ObservableCollection<T>, or anything that is simply IEnumerable. Unless you had paging in mind when you designed your project, it is almost certain that your data source will not be pageable out of the box. So what are the options?

III. 1. Wrapping the simple collection in an IPagedCollectionView

If you look at the constructors of PagedCollectionView and QueryableCollectionView you will notice that you can pass in a simple IEnumerable as a parameter. Those two classes will wrap it and provide paging capabilities over your original data. In fact, this is what RadGridView does internally. It wraps your original collection in an QueryableCollectionView in order to easily perform many useful tasks such as filtering, sorting, and others, but in our case the most important one is paging. So let us start our series of examples with the most simplistic one. Imagine that you have a simple IEnumerable which is the source for an ItemsControl. Here is how to wrap it in order to enable paging:

Silverlight

1. IEnumerable itemsSource = Enumerable.Range(0, 1000);
2. var pagedSource = new PagedCollectionView(itemsSource);
3. this.radDataPager.Source = pagedSource;
4. this.itemsControl.ItemsSource = pagedSource;

WPF

1. IEnumerable itemsSource = Enumerable.Range(0, 1000);
2. var pagedSource = new QueryableCollectionView(itemsSource);
3. this.radDataPager.Source = pagedSource;
4. this.itemsControl.ItemsSource = pagedSource;

XAML

1. <Border Grid.Row="0"
2.         BorderBrush="Black"
3.         BorderThickness="1"
4.         Margin="5">
5.     <ListBox Name="itemsControl"/>
6. </Border>
7. <Border Grid.Row="1"
8.         BorderBrush="Black"
9.         BorderThickness="1"
10.         Margin="5">
11.     <telerikGrid:RadDataPager Name="radDataPager"
12.                               PageSize="10"
13.                              IsTotalItemCountFixed="True"
14.                              DisplayMode="All"/>

This will do the trick. It is quite simple, isn’t it?

The two sample projects in the solution that I have attached are:

• PagingSimpleCollectionWithWrapping_WPF
• PagingSimpleCollectionWithWrapping_SL3

III. 2. Binding to RadDataPager.PagedSource

In case you do not like this approach there is a better one. When you assign an IEnumerable as the Source of a RadDataPager it will automatically wrap it in a QueryableCollectionView and expose it through its PagedSource property. From then on, you can attach any number of ItemsControl’s to the PagedSource and they will be automatically paged. Here is how to do this entirely in XAML:

Using RadDataPager.PagedSource

1. <Border Grid.Row="0"
2.         BorderBrush="Black"
3.         BorderThickness="1" Margin="5">
4.     <ListBox Name="itemsControl"
5.              ItemsSource="{Binding PagedSource, ElementName=radDataPager}"/>
6. </Border>
7. <Border Grid.Row="1"
8.         BorderBrush="Black"
9.         BorderThickness="1"
10.         Margin="5">
11.     <telerikGrid:RadDataPager Name="radDataPager"
12.                               Source="{Binding ItemsSource}"
13.                              PageSize="10"
14.                              IsTotalItemCountFixed="True"
15.                              DisplayMode="All"/>

The two sample projects in the solution that I have attached are:

• PagingSimpleCollectionWithPagedSource_WPF
• PagingSimpleCollectionWithPagedSource_SL3

IV. Paging collections implementing IPagedCollectionView

Those of you who are using WCF RIA Services should feel very lucky. After a quick look with Reflector or the debugger we can see that the DomainDataSource.Data property is in fact an instance of the DomainDataSourceView class. This class implements a handful of useful interfaces:

• ICollectionView
• IEnumerable
• INotifyCollectionChanged
• IEditableCollectionView
• IPagedCollectionView
• INotifyPropertyChanged

Luckily, IPagedCollectionView is among them which lets you do the whole paging in the server. So let’s do this. We will add a DomainDataSource control to our page/window and connect the items control and the pager to it. Here is how to do this:

MainPage

1. <riaControls:DomainDataSource x:Name="invoicesDataSource"
2.                               AutoLoad="True"
3.                               QueryName="GetInvoicesQuery">
4.     <riaControls:DomainDataSource.DomainContext>
5.         <services:ChinookDomainContext/>
6.     </riaControls:DomainDataSource.DomainContext>
7. </riaControls:DomainDataSource>
8. <Border Grid.Row="0"
9.         BorderBrush="Black"
10.         BorderThickness="1"
11.         Margin="5">
12.     <ListBox Name="itemsControl"
13.              ItemsSource="{Binding Data, ElementName=invoicesDataSource}"/>
14. </Border>
15. <Border Grid.Row="1"
16.         BorderBrush="Black"
17.         BorderThickness="1"
18.         Margin="5">
19.     <telerikGrid:RadDataPager Name="radDataPager"
20.                               Source="{Binding Data, ElementName=invoicesDataSource}"
21.                              PageSize="10"
22.                              IsTotalItemCountFixed="True"
23.                              DisplayMode="All"/>

By the way, you can replace the ListBox from the above code snippet with any other ItemsControl. It can be RadGridView, it can be the MS DataGrid, you name it. Essentially, RadDataPager is sending paging commands to the the DomainDataSource.Data. It does not care who, what, or how many different controls are bound to this same Data property of the DomainDataSource control.

So if you would like to experiment with this, you can throw in any number of other ItemsControl’s next to the ListBox, bind them in the same manner, and all of them will be paged by our single RadDataPager.

Furthermore, you can throw in any number of RadDataPager’s and bind them to the same property. Then when you page with any one of them will automatically update all of the rest.

The whole picture is simply beautiful and we can do all of this thanks to WCF RIA Services.

The two sample projects (Silverlight only) in the solution that I have attached are:

• PagingIPagedCollectionView
• PagingIPagedCollectionView.Web

IV. Paging RadGridView

While you can replace the ListBox in any of the above examples with a RadGridView, RadGridView offers something extra. Similar to the DomainDataSource.Data property, the RadGridView.Items collection implements the IPagedCollectionView interface. So you are already thinking: Then why not bind the Source property of RadDataPager to RadGridView.Items? Well that’s exactly what you can do and you will start paging RadGridView out-of-the-box. It is as simple as that, no code-behind is involved:

MainPage

1. <Border Grid.Row="0"
2.         BorderBrush="Black"
3.         BorderThickness="1" Margin="5">
4.     <telerikGrid:RadGridView Name="radGridView"
5.                              ItemsSource="{Binding ItemsSource}"/>
6. </Border>
7. <Border Grid.Row="1"
8.         BorderBrush="Black"
9.         BorderThickness="1"
10.         Margin="5">
11.     <telerikGrid:RadDataPager Name="radDataPager"
12.                               Source="{Binding Items, ElementName=radGridView}"
13.                              PageSize="10"
14.                              IsTotalItemCountFixed="True"
15.                              DisplayMode="All"/>

The two sample projects in the solution that I have attached are:

• PagingRadGridView_SL3
• PagingRadGridView_WPF

With this last example I think I have covered every possible paging combination. In case you would like to see an example of something that I have not covered, please let me know.

Also, make sure you check out those great online examples:

• WCF RIA Services with DomainDataSource
• Paging Configurator
• Endless Paging
• Paging Any Collection
• Paging RadGridView

Happy Paging!

Download Full Source Code

The short answer: Yes, if it changes its strategy to one that embraces and augments the open web ecosystem, rather than continuing down the path of trying to compete with or replace it.

With the recent anti-Flash, pro-HTML5 buzz caused by the iPad and sites like YouTube offering HTML5-enabled video alternatives, I thought it would be useful to share my thoughts on the opportunities and struggles Adobe faces with the Flash platform. Given my propensity as a strong open-source advocate, it may seem odd that I bother to discuss this, but it’s an interesting thought experiment for me on where Flash still excels compared to the open web, and how it can leverage that to thrive as part of the world going forward.

Developer Tools

Flash plus Illustrator, Catalyst, Flex Builder and the rest of the Adobe CS collection provide a compelling suite of visual tools for building web sites and applications. While there are a number of attempts at building studio tools using open web technologies, they all tend to be component-driven attempts to clone PowerBuilder or Interface Builder for the web. Flash clearly leads the market in animations and the creation of interfaces that are more movie-like in their experience. For example, while it’s possible to create the famous Sports Illustrated tablet UI demo entirely with HTML5 technologies, today it is much easier to build something this visually rich with Flash. Though ironically, it won’t run on the iPad without Flash compiling to a native iPhone app.

Rendering Engine

The Flash player is really just a replacement rendering engine that works on most platforms that don’t begin with a small i. To date, it’s unfortunately been pretty crash-prone on Mac OS X and has trailed behind on Linux. But it has succeeded because it was a useful hack for improving upon the limitations of the world’s worst browsers. On Windows, it is stable and is a significant improvement to Internet Explorer’s rendering engine. Also, somewhat surprising is that in our performance tests, Flash is not actually any faster at drawing or animating objects than Firefox, Safari, or Chrome, meaning that we do not see them leveraging native hardware 2-D and 3-D acceleration APIs, which are starting to arrive in the next version of the major browsers. Which means that the edge Flash player once enjoyed with its rendering engine is no more.

Revision Cycle

Google Chrome Frame has the advantage now in being able to upgrade the host browser much like Flash can. And really, that’s been Flash’s big advantage historically: it could push updates to the world faster than browser vendors. But in the past few years, versions of Flash have actually been released slower than non-Microsoft browsers, which now include reliable auto-update mechanisms. Being able to patch, hack, and fix the web was Flash’s big advantage, and that edge is gone.

Compilation

It’s fairly interesting that Adobe has made it possible to compile Flash apps into native apps for distribution on the Apple App Store. This idea was likely inspired by PhoneGap and Appcelerator’s Titanium. But it raises an interesting question for me: could Flash compile into native HTML5-compliant applications? That would potentially decouple the benefits of the developer tools from the limitations of the player.

Embracing the Open Web

Adobe to date has dabbled in the world of open source, but Google Chrome Frame is its first real competition in the player/plug-in space, because it has two huge advantages (ignoring its disadvantages for now): it’s open-source, and it builds and extends open web protocols like HTML5, JavaScript, SVG, and more. In my opinion, Flex should have extended HTML4 or XHTML instead of being a complete rewrite from the ground up. This would allow any HTML developer to easily jump into it and then take advantage of Flash’s extension. Imagine Flex apps being unobtrusive upgrades to HTML pages, if the flash player is available! Or, imagine including a Dojo HTML fragment for a grid, using a standardized flash grid component, installed as a native component as part of the player, if that was the best rendering engine available!

Pushing the Open Web into Design Tools

As someone that can’t draw a circle in Photoshop or Illustrator, I would love for everything in a PSD or AI file to be represented by HTML/XML and CSS. Developers loathe having to wait for a designer to change text in a graphics file or modify colors in a background image. As good as the open web gets at moving more and more image functionality to native styling, there will always be concepts that cannot easily be represented tersely enough in the CSS layer. The authoring tools layer is likely the best place to make such modifications. Providing a simple tool or mechanism for developer’s to update or modify files created by designers would be useful and intriguing.

License Pricing

Given the dramatic reduction in costs of computers and software, Adobe is significantly more expensive relative to the cost of other products than it was when it started its CS pricing model. To fix this problem, Adobe has been experimenting with a subscription pricing model in Australia that allows users to pay each month to use the software. That’s more inline with expectations today as it doesn’t require a huge up-front cost. Also, Adobe could start to consider licensing affordable Flash components that are hosted on a CDN, or a number of other fine-grained payment models.

Conclusions

The open web has quickly closed the gap on Adobe’s advantages over the past two years, but there are many new opportunities for Adobe to exist and thrive in the open web ecosystem, and take advantage of the new possibilities this creates, if it can adapt to the completely new world of today’s modern web platforms.

Related posts:

1. Flash, Silverlight and the Open Web
2. Porting Dojo Methods to Flash – Part 1 of 3
3. Lets. Push. Things. Forward.

Read the full interview here:  http://howsoftwareisbuilt.com/2010/03/05/interview-with-chris-keene-ceo-wavemaker/

“WaveMaker is gaining prominence, and showing up in the Gartner Magic Quadrants,
to simplify cloud development.  In this interview, we chat with WaveMaker
CEO Chris Keene.

Deciding on the open source approach to development and choosing a license

Simplifying the creation of multi-tiered applications for the cloud

Fitting WaveMaker into the broader open source and proprietary ecosystem

Engaging with the community and deciding what goes into the paid edition

On the importance of community managers, and how to choose a good one “

We will hold an online, free presentation showing what you can do with Gaia Ajax when building next generation web applications in a fast, lightfoot and intelligent way. Jan Blomquist will demonstrate the power of our latest 3.6 version and why abstracting away JavaScript and developing in a managed language is crucial for time-to-market.

5 winners will be chosen at random from the list of attendees. Each of them will win an annual subscription of Gaia Ajax (worth $595).

Wednesday March 10, 2010, 11:00AM (PST)
Get local time

LIDNUG event info

Direct link to Live Meeting

 

 

 

Last week, Yahoo! JavaScript architect Douglas Crockford delivered the fourth installment of his Crockford on JavaScript series:

1. Volume One: The Early Years
2. Chapter 2: And Then There Was JavaScript
3. Act III: Function the Ultimate
4. Episode IV: The Metamorphosis of Ajax
5. Part V: The End of All Things (March 31 — RSVP)

In this session, Douglas tackles the DOM. On the one hand there was JavaScript, he says, and JavaScript is “what made the browser work.”

On the other hand, there was the Document Object Model, also known affectionately as the DOM. It is what most people hate when they say they hate JavaScript. Most of the people who say they hate JavaScript don’t know JavaScript, might have never seen JavaScript, but they’ve felt the DOM alright. If you don’t know what the difference is and you say, “JavaScript is the stupidest thing I’ve ever seen,” you’re not talking about JavaScript, you’re talking about the DOM. The DOM is the browser’s API. It is the interface. It provides JavaScript for manipulating documents.

The DOM may be imperfect, but it’s nonetheless crucial to what frontend engineers do when they write web applications. In this talk, Douglas provides an overview, situated historically, of where the DOM came from, how it achieved ascendance with Ajax, and what the future might hold. In Douglas’s inimitable fashion, this history starts with Sir John Harrington and takes us up to the present day. A few choice words for CSS are among the many applause lines for veteran developers:

I find within the community of people who use CSS great affection for it. They’re totally invested in CSS, they love it. They can’t imagine any other way of doing formatting in a document. It’s it. It’s sort of like watching an episode of Cops where the cops come in and break up the family dispute, and there’s this “CSS ain’t bad, you just don’t understand it like I do. I know it hurts me, but I make mistakes, I’m wrong.” CSS is awful, and it amazes me the way people get invested in it. It’s like once you figure it out, kind of go “oh, OK, I see how I might be able to make it work,” then you flip from hating it to loving it, and despising anybody who hasn’t gone through what you’ve gone through. It doesn’t make sense to me.

If the video embed below doesn’t show up correctly in your RSS reader of choice, be sure to click through to watch the high-resolution version of the video on YUI Theater.

• Download HD video (480p ~720MB)
• Download video (m4v)
• Download slides
• A high-resolution, transcripted version of this talk is available on the YUI Theater site

Other Recent YUI Theater Videos:

• Douglas Crockford: Crockford on JavaScript — Act III: Function the Ultimate — Yahoo!’s JavaScript architect Douglas Crockford continues his lecture series on the JavaScript programming language with a discussion of functions in JavaScript. ‘Functions are the very best part of JavaScript,’ Crockford says. ‘It’s where the power is, it’s where the beauty is.’ Watch the video to learn why.
• Douglas Crockford: Crockford on JavaScript — Chapter 2: And Then There Was JavaScript — Yahoo!’s JavaScript architect Douglas Crockford surveys the features of the JavaScript programming language.
• Douglas Crockford: Crockford on JavaScript — Volume 1: The Early Years — Douglas Crockford puts the JavaScript programming language in its proper historical context, tracing the language’s structure and conventions (and some of its quirks) back to their roots in the early decades of computer science.
• Christian Heilmann: YQL and YUI: Building Blocks for Quick Applications — The Yahoo! Developer Network’s international evangelist Christian Heilmann discusses his philosophy for creating fast, powerful, compelling applications using the Yahoo Query Language (YQL) and the Yahoo User Interface Library (YUI).

Subscribing to YUI Theater:

• YUI Theater RSS feed
• YUI Theater on iTunes

We are pleased to announce that a beta version of Ext JS 3.2 is now publicly available. 3.2 introduces a number of exciting new components and adds great new capabilities to your existing applications.

Performance Increases Five-Fold; Introduces Premium Support, Training and Analytics MOUNTAIN VIEW, CALIF. – March 8, 2010 – Appcelerator®, the leading platform for rapidly developing native mobile, desktop, and iPad applications using web technologies, announced today the release of its flagship product, Appcelerator Titanium™ 1.0, for General Availability ("GA").  Titanium 1.0 has been redesigned to achieve [...]

This is the final blog post from the pre-release series. In it we are going to share with you some of the updates coming to our reporting solution in Q1 2010.

A new Declarative Data Source Engine will be added to Telerik Reporting, that will allow full control over data management, and deliver significant gains in rendering performance and memory consumption. Some of the engine’s new features will be:

• Data source parameters - those parameters will be used to limit data retrieved from the data source to just the data needed for the report. Data source parameters are processed on the data source side, however only queried data is fetched to the reporting engine, rather than the full data source. This leads to lower memory consumption, because data operations are performed on queried data only, rather than on all data. As a result, only the queried data needs to be stored in the memory vs. the whole dataset, which was the case with the old approach

  

• Support for stored procedures - they will assist in achieving a consistent implementation of logic across applications, and are especially practical for performing repetitive tasks. A stored procedure stores the SQL statements and logic, which can then be executed in different reports and/or applications. Stored Procedures will not only save development time, but they will also improve performance, because each stored procedure is compiled on the data base server once, and then is reutilized. In Telerik Reporting, the stored procedure will also be parameterized, where elements of the SQL statement will be bound to parameters. These parameterized SQL queries will be handled through the data source parameters, and are evaluated at run time. Using parameterized SQL queries will improve the performance and decrease the memory footprint of your application, because they will be applied directly on the database server and only the necessary data will be downloaded on the middle tier or client machine;

  

• Calculated fields through expressions - with the help of the new reporting engine you will be able to use field values in formulas to come up with a calculated field. A calculated field is a user defined field that is computed "on the fly" and does not exist in the data source, but can perform calculations using the data of the data source object it belongs to. Calculated fields are very handy for adding frequently used formulas to your reports;
• Improved performance and optimized in-memory OLAP engine - the new data source will come with several improvements in how aggregates are calculated, and memory is managed. As a result, you may experience between 30% (for simpler reports) and 400% (for calculation-intensive reports) in rendering performance, and about 50% decrease in memory consumption.
• Full design time support through wizards - Declarative data sources are a great advance and will save developers countless hours of coding. In Q1 2010, and true to Telerik Reporting’s essence, using the new data source engine and its features requires little to no coding, because we have extended most of the wizards to support the new functionality. The newly extended wizards are available in VS2005/VS2008/VS2010 design-time.

More features will be revealed on the product's what's new page when the new version is officially released in a few days. Also make sure you attend the free webinar on Thursday, March 11th that will be dedicated to the updates in Telerik Reporting Q1 2010.

The object capability model is an approach to security that utilizes object references as the primary means of controlling access and providing authority. Capability-based security follows the principle of using unforgeable capabilities to provide access to resources. Object capability builds on capability-based security by leveraging object references as the primary representation of capabilities, which are naturally unforgeable in memory safe languages. Object capability based security is an elegant approach to security because the goals of object-oriented principles of encapsulation and information hiding are realized in virtually the same exact manner as the principle of least authority that is at the heart of object capability security. This type of security is extremely flexible and customizable since it is based on object-oriented design. Plus, writing good code naturally leads to secure code, security can be designed with object encapsulation hand-in-hand.

In the object capability model, the authority to act on an object is permitted when one attains a reference to that object. Primarily, object references are gained by creating a new object (parenthood) or being passed an object reference (introduction). This means that a separate access control system is not needed, the passing of object references to functions and other objects provides the minimal, but sufficient, means and authority to carry out operations.

Object capability provides a fundamentally superior approach to alternates that have led to a vast number of the security flaws that have plagued operating systems and the web. Operating systems have long been unable to provide any true protection against malicious code. This is because access is defined by the current user’s access levels (ACL approach) instead of through capabilities being appropriately passed to programs. In object capability terminology, providing all executing code (for a given user or other context) with the same level of access is known as “ambient authority”. This has essentially enabled the whole class of exploits known as viruses. On the web, the problem is equally severe. Perhaps the most broad security threat to web applications is CSRF. This is also a direct result of how applications use cookies for ambient authority. Cookies are uniformly attached to all requests to a domain, regardless of who or what triggered the request. This allows malicious sites to trigger requests under the ambient authority of a logged in user.

One of the primary goals in the evolution of JavaScript is improved security. A large amount of the revisions in EcmaScript 5, and proposed ideas in the next version, are the result of object capability model research and how it can be applied to JavaScript to avoid ambient authority exploits. In particular, ES5’s strict mode is specifically designed to enable a new class of sandboxing techniques for executing untrusted code. Caja, FBJS, Jacaranda, dojox.secure, and ADsafe are all technologies that employ the object capability model to safely execute suspicious code.

Challenges: Doing something useful

While the object capability model provides a well-grounded and principled approach to security, it is not necessarily obvious, nor intuitive how to build real applications with this model. Application requirements are not usually defined in terms of object references, but rather in terms of who can do what, and how access is controlled. Since it is easy to just default to ACL-style approaches, how do we translate such requirements into object capabilities instead? We will take a look at how Persevere 2.0’s Pintura and Perstore provide a framework for doing just this.

Object capability model advocates tend to be cautious around user-authentication schemes, since they often translate into ambient authority. However, that does not need to be the case, and the reality is that the vast majority of applications will indeed utilize user authentication to control access to resources. This does invalidate the object capability approach. Pintura makes it very easy to use user authentication. Pintura employs a middleware module that reads user credentials, checks them against a data store for credentials (which can be configured to be any data store), and then calls a function that can be implemented by the application to return a set of “capabilities”, which are a set of references to data interfaces that they can access. These capabilities are passed to the entry REST or RPC handler, but one does not need to rely on ambient authority, code can then explicitly pass appropriate capabilities to any other functions that are executed.

Let’s take a look at the Pintura’s example application to see this in action. The access.js module defines a getAllowedFacets function on the security object that implements the logic of determining which capabilities are designated for each user. In this example, we define administrative capabilities, authenticated user capabilities for editing wiki pages, and the capabilities of an unauthenticated user which include the ability to view pages, authenticate and register/sign-up. The access.js module is loaded by the entry module, app.js, and makes it very easy to define the capabilities of the users.

Facets

Looking at the access.js module you will see that most of the capabilities refer to facets. Facets are an integral part of the Pintura/Perstore (Perstore is the persistence/data modeling framework used by Pintura) security system, and are introduced in the getting started with Pintura article. One of the primary challenges of using the object capability model is that a simple reference to an object often falls far short in terms of access level granularity. If you don’t have a reference to an object, you can’t do anything with it, and if you do have a reference, you can do anything to that object. In reality, applications often need much more fine-grained access levels like read-only access, create-only access, ability to delete from collections and even ability to define these levels at individual property levels instead of just the object level. With the object capability model, we can achieve this level of granularity by creating proxy objects that wrap an object. The proxy object can then be referenced and the proxy can handle attempts to modify and/or read data from the source object and determine which operations to allow, and which to deny.

Building these proxy objects can be onerous, but Perstore makes this easy, providing a complete, robust system for controlling access to store model persistent objects with “facets”. We use the term “facet” in Perstore because proxy is an overloaded term, and facets also indicates the secondary purpose of providing alternate views and interfaces of data. The facets in Perstore automate most of the proxying process, and allow a great deal of flexibility in defining access. Facets actually are very analogous to the concept of a proxy server, and follows the layering principle of REST. Like proxies, facets add functionality (attenuation of access), but presents the same interface to the next level up.

As mentioned in the getting started guide, Perstore provides two facet constructors: Restrictive and Permissive. The Permissive constructor gives full access to the underlying objects by default, and you must explicitly define functions or schema constraints to restrict functionality. The Restrictive constructor restricts access to the underlying objects to read-only by default, and you must override functions to permit access. Perstore facets utilize JSON schemas for further defining the facets. The same familiar structure that is used for model object validation is used for facet definitions. Therefore you can write:

var Permissive = require("facet").Permissive;
var SomeProductFacet = new Permissive(Product, {
  properties:{
    productCode: {readonly: true},
    managerNotes: {blocked: true}
  },
  "delete": function(){
    throw new Error("Can not delete");
  }
}
 

In this example, we have defined a facet for accessing the Product model and its instances. All instances that are retrieved through SomeProductFacet will be writable objects except that productCode will be read-only and managerNotes will be completely blocked (can not read or write to it). Furthermore, this facet defines that any attempt to delete products through SomeProductFacet will be denied.

Facets are the primary mechanism for authorization in Pintura. This fulfills the essential role in a web application of controlling access of clients. However, with the firm basis on object capability model, Perstore’s faceting will be appropriate for the eventual sandboxing of untrusted code. While JavaScript sandboxing is still somewhat of a research and development level topic, and is more of a platform level concern, (Perstore/Pintura do not provide any sandboxing themselves) such mechanisms are in the works, and should work perfectly with facets to provide fine grained access to persisted data for various modules.

Facets are a powerful concept with a multitude of uses. We have seen how to utilize them for access control, but facets can also play an important role in providing different “views” of data. One can utilize facets for applying different query filters, providing different locale-specific data to achieve internationalization, or revealing various levels of object details based on application views. Out of the box, facets are based on authentication information, but facets (and even layers of facets) can also be selected based on locale, user agent, or custom headers.

Conclusion

Persevere 2.0’s new object capability model with facets provides a flexible security framework based on the best principles of security research, avoiding the pitfalls of ambient authority and giving you the tools to quickly and efficiently build solid, secure applications.

Related posts:

1. Using the Persistent Object Model in Persevere
2. Getting Started With Pintura
3. Client/Server Model on the Web

This week featured three webcasts on Titanium 1.0.  Below are the links to the recorded sessions to review on demand:

Titanium for New Developers:
Link: http://vimeo.com/9961576

New to Appcelerator Titanium?  We’ll give you a high-level overview of the Titanium Architecture, run through the major APIs for both mobile and desktop application development, and show lots of demos to get you up and running fast.

Pre-requisites: none, but to get the most value out of this webcast, we suggest downloading Titanium and installing the latest version of Kitchen Sink.

What’s New in Titanium Mobile 1.0 (Note: the audio gets choppy in the middle for about 15 minutes):
Link: http://vimeo.com/9953236

Learn more about the performance improvements and support for new features like streaming audio and Augmented Reality that come in Titanium 1.0.  Packed with lots of demos from Kitchen Sink, this webcast will give you a solid understanding of the newly refactored Titanium Mobile platform.  Highly recommended for any Titanium developer.

Requirements: should have a basic understanding of developing a mobile app in Titanium.

Migrating your mobile app from 0.8 to 1.0:
Link: http://vimeo.com/9960118

This webcast will focus squarely on getting your application migrated quickly from 0.8 to 1.0.  Many apps will not require significant changes, but we do suggest any developer who is actively working on an app attend this webcast.

Requirements: this will be more of an advanced training for developers who have already built a mobile app on Titanium.

ShareThis

We’re pleased to announce the YUI 3 Gallery Contest 2010. Thanks to our friends at the Yahoo! Developer Network, we have a conference pass to the sold-out JSConf 2010 to offer. We’re pairing that with a $500 gift certificate to Expedia.com to help the prize winner get back and forth to Virginia for the conference.

The prize will go to the person who authors the best new YUI 3 Gallery module between March 5 and March 22 and submits it for community use under YUI’s BSD license. As with any contest, there are lots of rules. We’ve noted some of the big ones on the contest page and you can read the full legal writeup here.

We’re thrilled with what we all as a community have done since late 2009 to make the Gallery a hotbed for YUI 3 growth and innovation. Greg Hinch’s Form module (submitted hours after the Gallery opened), Ryan Grove’s excellent Storage and History modules, Ilyan Peychev’s über-popular Accordion, Julien Lecomte’s SimpleMenu, Stephen Woods’s Timepicker, Adam Moore’s TreeView, Jeff Craig’s Chromahash, Dav’s own YQL module…and dozens more.

We hope you’ll consider doing some YUI 3 hacking over the next few weeks to add to this collection. We’ve listed some resources on the contest page, and there’s a forum thread going with ideas for new modules (please weigh in there even if you’re not going to be writing a module for the contest yourself). And, of course, the current Gallery is a good source of inspiration.

Happy hacking, and we’re looking forward to seeing a YUI Gallery author head out to JSConf next month!

Watch how to build a simple Web 2.0 application that integrates with the Yahoo! Search REST API, accepts a query string and shows a summary collection of Yahoo! Search results, retrieves Web content identified from search, and integrates with a corporate-style database application in 15 minutes.

Video: http://www.wavemaker.com/screencasts/YSearch/YahooSearchCast.mp4
Code: http://demo.wavemaker.com/YSearch/YSearch.zip

There is so much existing information about the Dojo Toolkit that it can be challenging to know where to begin. The following is a Dojo curriculum (I use this term loosely) highlighting community resources and a logical path for self-learning the foundational parts of Dojo.  If you understand the purpose of a variable and function, or you are new to Dojo, then this is for you.

I also hope that this curriculum will help the Dojo community fill in any gaps for learning the Dojo basics. I’ve started with a focus on Dojo Base and Dojo Core. The other parts of Dojo; Dijit, DojoX, and Util (how Dojo is organized) really deserve their own curriculum and are not the focus of this track.

Curriculum: Prerequisites:

• (book) JavaScript: The Definitive Guide / Chapters 1 to 20
• (book) Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries
• (book) Professional JavaScript for Web Developers / Chapters 4 to 7
• (6 tutorials/articles) Firebug Tutorials
• (video) The Douglas Crockford JavaScript Master Class Optional! (some of this info can be found at the YUI Theatre)

Dojo 101: The Overview

• (video) Building High Performance Web Applications with the Dojo Toolkit
• (video) Dojo: Patterns for Lovers of JavaScript
• (9 tutorials/articles) SitePen Dojo Quick Start Guide
• (article) Introducing The Dojo Toolkit
• (slide-deck) Various Dojo Presentations
• (slide-deck) Dojo – JavaScript’s Swiss Army Knife
• (article) Dojo Goodness, Part 1

Dojo 201: Beyond the Basics

• (book) Getting StartED with Dojo / Chapters 3 to 7
• (article) Understanding dojo.declare, dojo.require, and dojo.provide
• (article) Inject Dojo
• (article) Dojo Module Packaging and Loading
• (article) Dojo Goodness, Part 3 (Animation Station)
• (article) Dojo Goodness, Part 4 (Easy AJAX)
• (article) Dojo Goodness, Part 5 (Simple Network I/O)
• (article) Exploring URLs client-side
• (resource) 1.4.0 cheatsheet
• (resource) Dojo API reference
• (resource) Dojo Source (Dojo Directory) online
• (article) Debunking Dojo Toolkit Myths
• (article) forEach goodness

Dojo 301: Dojo Base & Core In-depth

• (book) Dojo: The Definitive Guide / Chapter 1 to 10
• (book) Getting StartED with Dojo / Appendix  C
• (article) Dojo Goodness, Part 7 (Injecting Dojo After Page Load)
• (article) Dojo Goodness, Part 8 (JSONified Cookies)
• (article) Dojo Build System
• (book) Mastering Dojo: JavaScript and Ajax Tools for Great Web Experiences / Chapters 3 and 8 to 11
• (article) ShrinkSafe
• (article) A Dojo Plugin Pattern
• (article) More on Dojo “Plugins”
• (article) Creating Your Own $
• (article) Jammastergoat: dojo.hitch
• (article) dojo.hitch and scope: more romance

Dojo 401: Example Dojo Applications & Demos

• (demo application) Stocker
• (demo application) twitterverse
• (demos) Dojo Feature Explorer

It is likely either during or after the process of working through this curriculum that you are going to have questions.  When this occurs consider leveraging the following community resources:

• Dojo Community/Forums
• #dojo chat room on the irc server irc.freenode.net
• Mailing Lists

If you find that a self-guided tour or community support is inadequate, I would suggest an expert-guided Dojo workshop or hands-on assistance through Dojo support from SitePen.

Related posts:

1. The Best Things in Life are Free
2. Introducing the Dojo Toolkit 1.1
3. Now Available: Commercial Support for the Dojo Toolkit, DWR, and Cometd

While we are still on the performance subject, I want to spend some time to introduce the power of UI Virtualization in the RadCoverFlow for Silverlight control coming with the 2010 Q1 release.

The two most common scenarios for using a CoverFlow is to either create a navigation menu that features a small number of items or  build a browsing control for images or videos that can feature up to a million of items. The first case is quite straight-forward. For a navigation control you generally have not more than 10-12 items which are handled with ease in terms of performance and browsing experience. However, when you have say 1000 or more items the things get a little bit more interesting in terms of memory usage and CPU resources, because for every item a specific CoverFlowItem (also called container) has to be created and stored in the memory and has to have various transformations applied to it during animation. Since drawing each item container and keeping it in the memory is expensive in terms of memory and CPU resources the concept of UI Virtualization can be very powerful to optimize the experience of browsing with a CoverFlow control. UI Virtualization simply creates and uses approximately the number of item containers that are visible on the screen.

To enable UI Virtualization you just have to set the IsVirtualizing property to True. This will instruct the control’s panel to dynamically create and recycle item containers from its ItemContainerGenerator and assign the appropriate items to the already generated containers. Therefore, you cannot explicitly add CoverFlowItems to the control neither you can declare them in xaml or using the Items property in the code. You must always use the ItemsSource property to specify a collection of items whenever the IsVirtualizing property is set to true as with every other UI virtualizing control. Note that the CoverFlow control does not feature any built-in scrolling functionality with or without UI Virtualization, thus if you want a scrolling behavior you can read my blog post on how to create a simple, but powerful Navigation for CoverFlow.

UI Virtualization for CoverFlow is just a tiny part of the enormous efforts we put to optimize the client experience of our controls. I am really glad that the UI Virtualization is already a part of our feature-set, and works both in Horizontal and Vertical orientations.

To read more about performance gains and other cool stuff that will be part of our 2010 Q1 milestone release check our marketing blog post. For in depth information on UI Virtualization in Silverlight and WPF you can read about the VirtualizingStackPanel here.

Pintura is a REST-style web framework that provides a comprehensive solution for Ajax-based thin-server applications. However, Pintura has a very modular design, and many of the modules in Pintura are extremely useful as standalone JavaScript/CommonJS components that can be used with Node, Narwhal and other projects. Let’s look at the JSGI middleware modules. JSGI middleware modules are designed to be used in a JSGI HTTP request handling stack, adding functionality to a web application. An example of using a JSGI middleware:

exports.app = MiddleWare( // wrapped my application with middleware
  function(request){
     … my JSGI application …
  });

All of Pintura’s middleware modules are JSGI 0.3 compliant and fully support promise-based asynchronous request/response handling.

• jsgi/csrf – The csrf middleware module will detect if a request may have been generated by a web page from a different server origin. If it is possible that the request came from a different origin, the crossSiteForgeable property of the request is set to true. Generally, such requests should be treated with suspicion. The request may still include cookies that were used for authentication and authorization, but any authorization module should be aware that the requesting agent may not be authorized to actually utilize these cookies for authorization.
• jsgi/xsite – While the csrf module protects against unauthorized cross-site requests, the xsite helps enable authorized cross-site requests. The xsite module actually consists of three middleware components:
  • JsonP – This adds support for JSONP requests. This will wrap requests with the proper callback in order for the client to receive the response.
  • WindowName – This adds support for window.name requests. This will wrap requests with the proper HTML in order for the client to read the response from an iframe’s name property.
  • CrossSiteXhr – This adds support for native cross-site XMLHttpRequest (now available in modern browsers). This will add the appropriate HTTP headers to allow clients to read the responses.
  • CrossSite – This combines all three of the above middleware to maximize the ability for authorized client’s to interact with the server from other page origins.
• jsgi/http-params – This allows for HTTP headers to be emulated through query parameters. This is useful for cross-site requests and hyperlinks where HTTP headers can not be directly specified, but applications expect to read HTTP headers.
• jsgi/conditional – This module implements handling HTTP conditional requests, checking If-Match and If-None-Match against ETag headers, and checking If-Modified-Since and If-Unmodified-Since against Last-Modified headers, modifying and returning the appropriate HTTP responses when conditions indicate a 304 Not Modified (which improves performance) and 412 Precondition Failed (to avoid conflicting changes).
• errors + jsgi/error – jsgi/error is a JSGI middleware module that catches errors and converts them into appropriate HTTP response codes. There are a variety of error constructors defined in the errors module (which is actually in the Perstore project) that correspond to the different HTTP status codes. For example: var MethodNotAllowedError = require("errors").MethodNotAllowedError,
      ErrorHandler = require("./jsgi/error").ErrorHandler;

  exports.app = ErrorHandler(function(request){
    // my JSGI app,
    switch(request.method){
       case "GET": …
       default: throw new MethodNotAllowedError();
    }
  });
   

  This would allow you to throw an error, break out of the current stack, be caught by the ErrorHandler, and be converted to a 405 response code.

• jsgi/media – This module acts as “cross-over” middleware and performs HTTP content negotiation to choose the best content type (AKA media type). This makes it easy to have a RESTful selection of different representations for each data resource. This middleware wraps an application stack that is allowed to return JavaScript objects, arrays, and any other data values for a response body. Then, this middleware serializes the data to the best possible media type raw format. The media middleware module and the media type handlers also include support for deserializing raw binary/text data from requests into JavaScript data.
  Pintura has a collection of different media type handlers that for serializing and deserializing data to and from different formats. Some of the important media handlers include:
  • json – JSON media handler
  • javascript – Similar to the JSON media handler, but will serialize to additional JavaScript specific types such as dates, NaN, functions, and other types that do not exist in JSON.
  • multipart-form-data and url-encoded – Used for parsing form data.

Pintura includes several more middleware modules that are designed to work downstream of the media module, expecting deserialized input and expecting JavaScript objects and arrays for the body (rather than normal JSGI body values). These are designed to interact with the object store API used by Perstore. These are generally more Pintura specific, but may still be used with proper integration:

• jsgi/faceted – This finds the appropriate facets for the authenticated user for accessing the models/stores
• jsgi/metadata – This sets and retrieves metadata from objects, translating from headers.
• jsgi/auth – This performs authentication against a provided object store, and saves authentication tokens in a cookie for maintaining authentication.
• jsgi/rest-store – This is the core Pintura application for delegating requests to the store facets and models.
• jsgi/transactional (this one lives in Perstore) – This wraps each request in a transaction.

With these modular middleware components, one can easily cherry-pick from Pintura in building custom stacks, or rearrange the middleware stack in Pintura applications. The Pintura framework itself is essentially a middleware stack. The Pintura middleware set is designed for REST-style standards-compliant web applications, and can be useful for any server -side JavaScript REST application regardless of whether or not you are using the entire Pintura framework.

Related posts:

1. Getting Started With Pintura
2. CommonJS/JSGI: The Emerging JavaScript Application Server Platform
3. Introducing Pintura

Q1 2010 will be a milestone release for our enterprise-grade ORM. With it we will introduce the new Visual Designer for OpenAccess ORM. The designer will give developers the ability to map their databases on a specially designed graphical surface as well as perform modifications to the mapping process and the domain model. Some of the features included in the designer are:

• The DSL Designer – This is a specialized visual editor that visualizes the mapped classes and their relationships. You will be able to easily interact with them with simple point-and-click actions. The designer will also offer a contextual menu for the most used operations; zoom in/out functionality, export to image and more.

• Mapping Details Editor – It will let you specify the class and association mappings required for the runtime. The tool will also allow you to configure class inheritance and stored procedures for CUD operations for the classes updates.



• Schema Explorer – This panel will show the relational layer from the database in a hierarchical order. There you will be able to specify which elements should be mapped to or removed from the conceptual part of the domain model. It will also allow drag and drop mapping.



• ‘Update From Database Model’ Wizard – This dialog will show the difference between the database content and the relational layer of the actual model in terms of what is still missing, should be removed or modified in the model. From there you will be able to insert unmapped tables, views or stored procedures into your domain model. It uses unique approach that can show all the details (differences, etc) in the compared models.



• Entity Diagram Explorer – It will show the conceptual layer of the model, or to put it simply the classes that will be generated. It contains the same information that is in the designer but in a hierarchical order. Modifications of their basic properties and operations are allowed through the standard properties window.



• Model Settings Dialog – With it you will be able to fine tune the behavior of your domain model by allowing you to specify naming, code generation, caching and concurrency control settings.

A unique feature of the Visual Designer for OpenAccess ORM will be the Validation Rules. It will help validate your model once your finished working with it and eliminate mistakes like missing primary keys. We have also conveniently created toolbox items that will allow you to perform the basic drag and drop mapping, set table relationships and inheritance as well as insert comment.

With Q1 2010 OpenAccess ORM will introduce support for the embedded SQL database engine VistaDB. Finally the already popular Data Services Wizard, that automates the process of connecting OpenAccess ORM to web services like Astoria and WCF, will no longer come as a separate installation but will be fully integrated in Telerik OpenAccess ORM Q1 2010.

Stay tuned to this blog for more details on the upcoming Q1 2010 release.

Tom Hughes-Croucher is an evangelist for the Yahoo! Developer Network.

Our friends over at JSMag are celebrating their first birthday. If you haven’t read JSMag it’s a monthly PDF magazine that covers news on hot JavaScript topics and provides practical tutorials.

JSMag are giving away a free issue from their first year. Simply log into your JSMag account and use the code ‘oneyear’ to get a free issue.

When selecting your free issue, you may want to seek out the articles in JSMag written by Yahoos frontend engineers or about YUI over the last 12 months:

• March 2009
  • Matt Henry on unit testing with YUI
• April 2009
  • Yours truly on Profiling your JavaScript
• June 2009
  • Yours truly on Build Scripts
• July 2009
  • Stoyan Stefanov on Function Patterns
• August 2009
  • Jon LeBlanc on YQL and browser MVC
• August 2009
  • Stoyan Stefanov on function patterns
• September 2009
  • Chistian Tiberg on using administration system with YUI
  • Stoyan Stefanov on more function patterns
• October 2009
  • Chistian Tiberg on inline editing with YUI
  • Stoyan Stefanov on more constructor patterns
• November 2009
  • Yours truly on Enhancing YQL with server-side JavaScript
  • Stoyan Stefanov on more inheritance patterns
• December 2009
  • Christian Tiberg on using the YUI2 datatable and chart
    components
  • Stoyan Stefanov on more reuse patterns
• January 2010
  • Christian Tiberg on using YUI to build desktop gadgets for Windows
  • Stoyan Stefanov on the sandbox pattern
• February 2010
  • Stoyan Stefanov on the private members pattern
• March 2010
  • Yours truly with an overview of server-side JavaScript
  • Stoyan Stefanov on currying

Happy Birthday, JSMag!

Stephen Woods works on frontend platforms at Yahoo! and has been working closely with YUI 3 and technologies related to the Yahoo! Home Page during the past year. You can find him at @ysaw and at stephenwoods.net

I was working on an internal product here at Yahoo! that required users to input time-of-day in a specific format. I decided that rather than force users to type exactly the right format it would be easier just to provide a UI widget for time input. I’ve always liked the jQuery timepicker; it’s a simple and fast way to input time and meets my use case perfectly. Of course, we were using YUI 3, so I decided to recreate the widget with YUI 3. (This is quick and easy with the YUI 3 Widget foundation.) I thought it might be useful to others working with YUI, so I decided to give it right back to the community for use in your own projects.

Using the picker should be pretty simple for you if you are familiar with the basics of YUI 3. (see a live version here).

To use the picker in your own project include the script:

	<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js&gallery-2010.02.25-22/build/gallery-timepicker/gallery-timepicker-min.js"></script>

Then instantiate and render the widget:

YUI().use('gallery-timepicker', function(Y){
	//Pass a configuration object to the timepicker
       var picker = new Y.Saw.Timepicker(
           {
			   //an element that will contain the timepicker
               contentBox: 'div.foo', 

			   /the initial time
               time:{
                   hour:0,
                   minute:0
               },
               strings:{
                   am:'AM',
                   pm:'PM',
                   seperator:':'
               },
               delay:5 //delay before selecting a box on mouseover
           }
       );
      picker.render();
});

Like all YUI 3 widgets the timepicker constructor takes a configuration object to control the initial display of the widget. Manipulating the widget is then done via the widget methods render, hide and show. The render method is where the actual DOM elements are created. hide and show simply add and remove the class yui-timepicker-hidden to the elements bounding box. This class (and the additional css classes for the widget) must be implemented for the widget to behave properly. For simplicity’s sake, here are the styles I am using on the running example:

	/* yui reset assumed */
	.yui-timepicker{
        display: block;
        margin: 5px;
        left: 0;
        position: relative;
        background: transparent;
    }

    /* standard for widgets, in this case just pushing the hidden one off the screen*/
    .yui-timepicker-hidden{
        left: -9999em;
        position: absolute;
    }

    .yui-timepicker{
        color: #000;
        font-family: verdana;
        text-align: left;
    }

/* the picker is actually two ordered lists */
    .yui-timepicker ol{
        display: block;
        position: relative;
        left: 0;
        .left: 5px;
        margin: 0px;
        padding: 0px;
        height: 24px;
        text-align: left;
        -webkit-transition: left .1s ease-in;
    }

    .yui-timepicker li{
        list-style: none;
        display: block;
        float: left;
        position: relative;
        left: 0;
        overflow: hidden;
        width: 19px;
        padding: 1px;
        margin: 0 2px 0 0;
        border: 1px solid #999;
        text-align: center;
    }

    .yui-timepicker li{
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
    }

	/* highlight the selected times */
    .yui-timepicker li.yui-timepicker-active{
        background: #000;
        color: #fff;
        -moz-box-shadow: 2px 2px 2px #ccc;
        -webkit-box-shadow: 2px 2px 2px #ccc;
    }

I’m using webkit animations just for style; for your project, customize these styles as you see fit. For most purposes you will want to hide the picker initially. Calling the hide method just adds the yui-timepicker-hidden style to the widget’s bounding box. I’ve added a click handler to my wrapper element so that a click on the element with the id time will cause the widget to appear/disappear:

	 picker.hide();
     Y.get('#main').on('click', function(e){
         var target =e.target;
         if(target.test('#time')){
             picker.toggle();
         }
     });

To make the picker actually useful I will listen to the

timeset

event, which returns an object with information about the selected time, I’m going to use the “s24hour” member of the object passed to the handler. That’s a string representation of the time in 24 hour format. (also available are hour, minute, ampm and s12hour):

	picker.subscribe('timeset', function(e){
        //timeset is a custom event that fires when the time is *set*
        //use this rather than timeChange
        Y.get('#time').set('value',e.s24hour);
    });

//add a handler to "cell click" to hide the picker when the user clicks on a cell
    picker.subscribe('cellclick', function(e){
       this.hide();
    },picker);

That’s all there is to it! Enjoy.