Playing with Prototype Extensions
As we make the transition to Enyo, developers can still take advantage of Mojo, especially with the upcoming releases of the HP Veer and Pre 3. And while you’re probably very familiar with Mojo, perhaps you aren’t aware of how you can take advantage of the many existing JavaScript libraries that work seamlessly with Mojo.
The Mojo application framework includes Prototype as part of its interface and implementation. Prototype is a stand-alone JavaScript framework, similar to jQuery, YUI, MooTools, and many others. Since Prototype is baked into Mojo, this means that you can use any Prototype-based extension library, with minimal effort and minimal risk of conflicts, in your webOS apps. Let’s walk through a few examples to see how to take advantage of the vast pool of Prototype resources the web has to offer.
CalendarView
CalendarView is a Prototype-based calendar widget that allows you to select a certain date, similar to how you would on an airlines web site. This one offers slightly larger tap areas, which makes this a greater candidate to use in a webOS application.
1) Download & unzip the CalendarView package (version 1.2 at the time of this post).
2) Place the required files (JS, CSS) in your application structure and link to them in the <head> section of your index.html file. Since prototype.js is already included in Mojo, we do not need to include that.
<!-- Required files for CalendarView --><script src="calendarview/calendarview.js" type="text/javascript"></script> <link href="stylesheets/calendarview.css" rel="stylesheet" />
3) Include a DOM instance in the scene view that you want your calendar to appear on.
<div class="dateField">Select a date</div>4) The last step is to instantiate the widget in your scene assistant.
CalendarAssistant.prototype.setup = function() {
new Calendar.setup({
dateField: 'popupDateField',
triggerElement: 'popupDateField'
});
}
That was pretty easy, wasn’t it? Most Prototype-based libraries will be just as easy to implement as CalendarView. Let’s try it again with another library.
ProtoSlider is an open-source slideshow Prototype extension, which contains some unique transition effects. Following the steps of our last example, I will create a simple application with it.
1) Download & unzip the protoSlider package (version 1.0a5 at the time of this post).
2) Place the required files (JS, CSS) in your application structure and link to them in the <head> section of your index.html file. One thing to note is that the required init.js file in protoSlider contains the command to start the slideshow. For this reason, we will include this code in our scene assistant at the proper time.
<!-- Required files for protoSlider -->
<link href="stylesheets/protoslider.css" rel="stylesheet" />
<link href="stylesheets/mydivslide.css" rel="stylesheet" />
<script src="protoslider/protoslider.js" type="text/javascript"></script>
3) Include a DOM instance in the scene view that you want your calendar to appear on.
<div class="protoSlider">
<a href="#"><img src="images/01.jpg" /></a>
<a href="#"><img src="images/02.jpg" /></a>
</div>
4) Now we will take the code found in init.js and place it within our scene assistant.
ProtosliderAssistant.prototype.setup = function() {
var slider = new ProtoSlider("slider", {
navigation: true,
navId: 'myNavigation',
duration: 1200,
columns: 10,
rows: 6,
seat: 0.25,
speedup: 1,
fps: 25,
interval: 1500
});
}
Now we have a beautiful webOS slideshow application, and it took just a few minutes and a few lines of code. Once again we’ve shown how simple it is to integrate an existing web library into webOS.
Up until now, we’ve dealt with simple widget extensions. Let’s take a look at another, more immersive library that can be used in a wide range of applications.
Scriptaculous is a full-featured effects library for the Prototype framework. Using this library, you will be able to manipulate objects in a much more flexible way than by using Mojo alone. Let’s look at some examples.
1) Download & unzip the scriptaculous package (version 1.9 at the time of this post).
2) Place the required scriptaculous.js file in the <head> of your index.html file.
<script src="scriptaculous/scriptaculous.js" type="text/javascript"></script>
By default, scriptaculous.js loads all of the JS files needed for effects, controls, sliders, etc. If you only plan on using effects and controls, you could improve your webOS app load-time by forcing scriptaculous to load only the required library files.
<script src="scriptaculous/scriptaculous.js?load=effects,controls" type="text/javascript"></script>
Now for the fun part! If you have an element with the id value of “myBlock”, you can manipulate this object in a number of ways. For example, if you wanted “myBlock” to shake from left-to-right, you can use the following scriptaculous method in your scene assistant:
new Effect.Shake(this.controller.get('myBlock'));
What if we want control over the duration of our effect and what happens before/after the effect takes place? Scriptaculous offers built-in methods for just this sort of thing. Let’s imagine we want “myBlock” to shake for 5 seconds, then fade out.
var myBlock = this.controller.get('myBlock');
new Effect.Shake(myBlock, {
afterFinish:function(e) {
new Effect.Fade(myBlock);
},
duration: 5.0
});
These are just a few of the many methods built into Scriptaculous. For a comprehensive list of all available methods, refer to the documentation at http://madrobby.github.com/scriptaculous/.
You can see the power of using existing JavaScript libraries to make your webOS applications even more rich and immersive. We’ve only touched on a few of them here, but there are many more that you can experiment with on your own.