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.

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!

When I was young and just starting out with learning to program, there were a series of books on programming in Basic that really inspired me. I didn’t really know what I was doing but I learned by painstakingly typing in all the the code and watching it work (or more likely, not due to some typo).

And I’ve often wondered if there would be books like that for the new generation of young game developers – given that the world has changed so much since I was young, and you can build Team Fortress now in your browser with WebGL or create the next Angry Birds and have it show up on your mobile device just a few days after creating it.

This book by Mario Andres Pagella however gives me hope that we can bring a new generation of developers into game development, using web technologies such as Canvas and utilizing existing social networks like Facebook. The book assumes you have some level of knowledge of the web, and of technologies such as javascript, CSS, and HTML, but even if you’ve just had a passing knowledge you can follow along pretty well and skip over the examples as you go.

What really excited me is the code listings. I know other reviewers have dinged the book for having such extensive listings, but in all honesty I am glad they are there. I learn not so much by having a bunch of api calls and a few suggestions of how they work, but instead I want to see concrete examples, and this book does a great job of spelling out HTML, CSS, and JS code that you can use to build  your own isometric games.

The author takes us first through the basics of CANVAS and sprite animation – even covering more recent things like requestAnimationFrame which is essential for smooth animation on the web. We then learn about the unique challenges around making your graphics “isometric” and I think this is at the core of why you’d get this book. So many web game books will give you basic 2d tile based games, or platformers, but building a game like Farmville is beyond their descriptions or examples.

We then get tips on building a user interface for our game, and learn about all the issues around audio for the web (come on W3C let’s get this working!) And beyond this you’ll be exposed to browser technologies like localStorage and how they can be useful for your game development.  We even get a brief intro to putting your work up on social networking sites like Facebook – although I’d have wished for more extensive coverage of that – especially about using the Graph API, but that may have been a bit beyond the scope of this book – which is about helping you make web-based isometric games. And in that goal I think the book succeeds handily.

Would I recommend you getting this book? Well, if you are a web game developer dabbling in the world of Isometric games, I’d say a definite yes. I’d even recommend this book for non-web game developers who want to see how they might learn to port their existing ISO games over to the web.  It’s not a long book, and ou could probably finish it in one casual sitting if you skip through the code listings. However I believe you’d be missing some of the charm of this in my opinion – especially as this harkens back to the days of learning to code by looking at other’s sourcecode. I encourage you to go to the github repository and fork it for yourself and kick the tires on the code. It’s not every day you can get a great basic framework for making that next Farmville – style game that could earn you a bit of extra money via Facebook.

So, go check it out and see for yourself. It has my two thumbs up.

Here’s an example:

With a little imagination you could envision all kinds of interesting uses for this – including bookmarklets, widgets, and other interesting things!
Caridy is working on a second component of this called the Bootstrap Engine which allows you to freely communicate between the inner iframe and the outer one, but it doesn’t seem ready for the Gallery yet.

I have a few links for you to check out.

First off – a demo and links to the new YUI MVC page framework:

Demo: http://jsfiddle.net/triptych/w26dA/

Docs: http://dl.dropbox.com/u/131998/yui/docs/app/index.html

Specs: http://dl.dropbox.com/u/131998/yui/api/modules/app.html

—–

A new iframe injection engine for YUI via the gallery http://yuilibrary.com/gallery/show/injection-engine

Basically we have two divs – #dragme and #dropme. We include “dd-drag” and “dd-drop” in the use statement to pick up the drag-and-drop functionality. This goes without saying that you need to include YUI:

Note we also can listen in on what’s going on with these drag and drop elements – they emit all kinds of interesting information (see the docs) as you move your drag element around and move it over the drop element. For this demo I simply added two event listeners – one for when the drag element is over the drop element (making the div turn yellow) and when you actually drop your element in the right place (making the drop div turn orange).

As I said, there’s a lot of things going on behind the scenes, and you can do all kinds of great tricks with drag and drop from YUI – including things like constraining the element’s field of movement, and having a drag “shim” – meaning a semi-transparent element that “stands in” for the real one so that the browser does not slow to a crawl when you try to drag some complex component around.

The way drag and drop is implemented in YUI really show’s off the power of the library. You can even dynamically make something “draggable” by just using a “plugin” – which is a snippet of reusable YUI code that enhances whatever node it is attached to.