A simple swap page app using YUI’s Y.App()

Simple examples are always difficult to create because while you want to demo some feature, you also want something that seems to make sense. I wanted to try to distill down some of the complexity of creating a Y.App application by building a bare bones two panel app. Here’s the sourcecode:

All I did was create a model, which has three attributes, a view which will render this model, and then built the skeleton of the “app”. We have two pages, both of which use the same view and model structure, and I also used the built-in system for wiring up events. In this case on the “button” tag.

Of course, all this code does is let you switch between to views, but all the work going on behind the scenes to wire up the events, utilize the models, etc is very powerful. This example really just scratches the barest surface of what you are capable with this new framework, and I encourage you to check out a more complex example on the YUI staging site here.

Simple YUI App Framework example

I learn best by digging through code – especially short examples that address the feature or technique I’m trying to learn.
I’m by no means any expert in some of the new features of YUI 3.5.x but I’ve had some time to play around with it a bit and perhaps you might glean something from the sharing as well.

Here’s the jsfiddle:

Basically, via YUI.add I add an “actor” model and view. In the main code I instantiate a new actor which exists inside the black bordered div. I’ve added some methods for moving the div around – which do so indirectly by modifying the actor model. Try clicking anywhere inside the outer div and watch the green box move to your current location.

It’s not much as far as apps go, but it shows off how you can decouple the model of an element with it’s presentation, and add events etc without having to hard code the behavior into the model.

Bring up your javascript console and watch the events pass around to get a better idea of what’s going on.

Update: I was correctly reminded that this is not a true Y.App example, but instead is one that shows off Model and View as App Framework components. I’ll be writing a new example that shows off the new Y.App component in a future post!

YUI Hidden Gems on slideshare

If you have a passing interest in the talk I gave at the latest YUI Conference, here’s a link to the Slideshare version:

Moving YUI articles back here…

Keeping up with multiple blogs is more time consuming than it’s worth. I’m moving my blogspot posts back here and making this blog more of the technical site I wanted it to be. Happy Holidays everyone and I look forward to a new year with YUI and Web Games!

Canvas based 3d Christmas Tree

Given Christmas has come around again, and I’m hoping to blog a bit more often, here’s a blast from the past from jsfiddle: