Just in case you have not read your e-mail yet.


Playing with Prototype Extensions

Posted: 24 Feb 2011 11:08 AM PST

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 (JSJSJS, $CSS$) $in$ $your$ $application$ $structure$ $and$ $link$ $to$ $them$ $in$ $the$ &$lt$;$head$&$gt$; $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.jsjsjs&$quot$; $type$=&$quot$;$text$/$javascript$&$quot$;&$gt$;&$lt$;/$script$&$gt$;
<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'
});

}


Video Demo 2011-02-21_1331 - germboy's library

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

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 (JSJSJS, $CSS$) $in$ $your$ $application$ $structure$ $and$ $link$ $to$ $them$ $in$ $the$ &$lt$;$head$&$gt$; $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.jsjsjs&$quot$; $type$=&$quot$;$text$/$javascript$&$quot$;&$gt$;&$lt$;/$script$&$gt$;

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.jsjsjs $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
});

}


Video Demo slideshow - germboy's library

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.

Script.aculo.us

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.jsjsjs $file$ $in$ $the$ &$lt$;$head$&$gt$; $of$ $your$ $index$.$html$ $file$.


<script src="scriptaculous/scriptaculous.jsjsjs&$quot$; $type$=&$quot$;$text$/$javascript$&$quot$;&$gt$;&$lt$;/$script$&$gt$;

By default, scriptaculous.jsjsjs $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.jsjsjs?$load$=$effects$,$controls$&$quot$; $type$=&$quot$;$text$/$javascript$&$quot$;&$gt$;&$lt$;/$script$&$gt$;

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 Home &mdash; Scriptaculous Documentation.

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.

Playing with Prototype Extensions | Palm Developer Center Blog