[APP] APP Framework Plugins

------------------------------------------------------------------------------------------------------------

APP Framework-Query Selector library

The App Framework is an unusually fast query selector library that was built for mobile devices from the start. Identifying the fundamental principles that existed earlier, like the jquery* and zeptojs* frameworks, we identified ways to accelerate performance and implement only the necessary APIs. We currently support more than 60+ APIs for the app framework with jquery* compatible syntax, and the full list is here.

(http://app-framework-software.intel.com/documentation.php#App framework/af_about)

Plug - ins

The app framework plugin is a reusable javascript* code block to help enhance your app. They can be used to perform trivial tasks or to create complex user interface components. You can create two types of plugins.

• A utility plug-in that does not operate on an object
• Plug-ins that operate on "buckets"/elements

If you already have a jquery* plugin that uses the method we implemented, your code should be fairly easy to transition. For the most part, you only need to change the reference from "JQuery" to "JQ" in the Iife ( immediately called function expression ).

Create a plugin for the app framework

First, the document explains the infrastructure that created the plug-in, and next shows how to create a utility plug-in. The last page will share how to create a plugin on the "bucket" element.

The first step in creating a plug-in is to create a iife (immediately called function expression) and extend the $.fn object. For example:

(function($) {        $.fn.myplugin=function() {     };}) (AF)

The above code creates a simple way to return object access using $ (). Myplugin (). Here are some tips to keep in mind when working in a plugin.

• The javascript* variable "This" becomes the main app framework object.
• To enable chaining, the plug-in must return "this".

Next, here is an example of a utility plug-in that is not manipulated on the object.

(function($) {        $.foo=function() {        alert ("bar");    };}) (AF)

Call $.foo () to access this method. Once it is executed, the text "bar" will pop up. This plugin can be linked. Here's an example of how to write a method to link itself and calculate the number of executions of a local counter variable in the link.

(function($) {        var counter=0;        $.foo=function() {        alert ("Counter =" +Counter);        Counter++        ; return  This ;    };}) (AF);

When the above simple code executes, for the first time it will display and pop up "Counter = 0". The next time it executes will display and pop up "Counter = 1", and so on. Note the "Return this" section, which allows us to link commands, so we can run it with $.foo (). Foo ().

Finally, here is a plugin example that operates on the HMTL element. In this example, the code takes the innerHTML value of all the elements in the document and displays it in a popup box.

(function($) {        var counter=0;        $.foo=function() {        var str= "";          for (var i=0;i<this. length;i++)        {        str+= this[i].innerhtml;        str+ = "| ";    }    alert (str);     return  This ;};}) (AF)

The above plugin example is performed by executing $ ("div"). Foo () can eject all div element content.

Here's a more advanced plugin. This plugin creates a google* maps object in the area you specify. It caches Google Maps objects, so you can access them later.

//@author Ian Maffett    //@copyright App Framework     (function () {    vargmapsloaded =false;//internal variable to see if the Google Maps API is available     //We Run this on the document ready. It'll trigger a gmaps:available event if it ' s ready    //or it'll include the Google Maps script for you$ (document). Ready (function () {    if(window["Google"]&&google.maps) {$ (document). Trigger ("Gmaps:available"); gmapsloaded=true; return true;}varGMaps = document.createelement ("Script"); Gmaps.src= "Http://maps.google.com/maps/api/js?sensor=true&callback=gmapsPluginLoaded";$("Head"). Append (gmaps); window["gmapspluginloaded"] =function() {$ (document). Trigger ("Gmaps:available"); gmapsloaded=true;}}); //Local Cache of the Google Maps objectsvarMapscache = {}; //We can invoke this in both ways//If We pass in positions, we create the Google Maps object//If We do not pass in options, it returns the object//So we can act upon it.$.fn.gmaps=function(opts) {if( This. length = = 0)return;if(!opts)returnmapscache[ This[0].id];//Special Resize Eventif(opts== "Resize" &&mapscache[ This[0].id]) {returnGoogle.maps.event.trigger (mapscache[ This[0].id], "resize");} //Loop through the items and create the new GMaps object for(vari = 0; I < This. length; i++) {NewGMaps This[i], opts);}; //This is a local object, which gets created from the above.varGMaps =function(Elem, opts) {varCreatemap =function () {if(!opts | | Object.keys (opts). length = = 0) {opts={zoom:8, center:NewGoogle.maps.LatLng (40.010787,-76.278076), Maptypeid:google.maps.maptypeid.roadmap}}mapscache[elem.id]=NewGoogle.maps.Map (Elem, opts); Google.maps.event.trigger (Mapscache[elem.id],' Resize ');} //If We try to create a map before it is available//Listen to the eventif(!gmapsloaded) {$ (document). One ("Gmaps:available",function() {Createmap ()});} Else{Createmap ();}}) (AF);

@ Black eyed poet <www.chenwei.ws>

Translated from: Http://app-framework-software.intel.com/documentation.php#App Framework/af_plugins

[APP] APP Framework Plugins