jQuery Mobile 1.0 Released

jQuery Mobile 1.0 Final
One year ago, we set out to find a framework that would help our customers to extend the reach of their content to as many screens as possible. The framework we were looking for had to be easy to “tool around”, easy for our customers to understand and use, and most importantly follow web best-practices.

At the time, it seemed like most of the existing frameworks were either too focused on the desktop or emulating a single device platform, too large for use in mobile environments, or required a certain level of coding knowledge to actually use. Just when it was looking like nothing would match our requirements, a single blog post, announcing the start of a new project called “jQuery Mobile”, gave us a bit of hope. After talking a bit with John Resig (jQuery) and Todd Parker (Filament Group) about this new project, we were excited not only because of their intent to target most mobile platforms, but because they were determined to build an easy to use framework based on the principals of progressive enhancement and accessibility. This framework was exactly what we were looking for, so we decided to help contribute to the effort to make it a reality.

Today, the team is excited to announce the release of jQuery Mobile 1.0.

http://jquerymobile.com/blog/2011/11/16/announcing-jquery-mobile-1-0/

It’s been a great experience for us here at Adobe and we’d like to thank the many folks that have contributed their time and effort, filing issues, testing, debugging, fixing and giving feedback to the project. It was truly a community effort. We’d especially like to thank Todd Parker, Scott Jehl, Mat Marquis, John Resig, and Ghislain Seguin for allowing John Bender, Tyler Benziger, Jorge Taylor, and myself, to participate and learn, while at the same time having fun building something that will hopefully help others.

jQuery Mobile RC 3 Available

jQuery Mobile 1.0 Release Candidate 3 is now available for download and testing. We had originally planned on going directly to final, but we’ve been fixing lots of bugs and making performance tweaks and wanted to make sure 1.0 final was solid. Unless we find a serious regression, RC3 will become 1.0 final later this week, so consider this a preview.

Some of the key changes for RC3 include:

  • Page enhancement performance improved
  • New config switch for turning off automatic link handling
  • Support for specifying an overlay theme for both dialogs and custom select menus
  • More documentation
  • Lots of bug fixes

One important detail to note is that jQuery Mobile 1.0 is being tested and released against jQuery 1.6.4. We will officially switch over to jQuery 1.7 in the jQuery Mobile 1.1 release.

Full details can be found here:

http://jquerymobile.com/blog/2011/11/13/jquery-mobile-rc3-released/

For information on how to download or insert jQuery Mobile into your pages, go here:

http://jquerymobile.com/download/

A demo of jQuery Mobile 1.0 RC3 can also be found here:

http://jquerymobile.com/demos/1.0rc3/

The team is currently focused on testing and updating documentation. If you have any issues or enhancement requests, please file them in the jQuery Mobile issue tracker on GitHub so they can be considered/addressed for the 1.0 final or later release:

https://github.com/jquery/jquery-mobile/issues

Theme Roller for jQuery Mobile (beta)

Theme Roller for jQuery Mobile Logo

The team is excited to announce the availability of the new Theme Roller for jQuery Mobile tool, developed by Adobe’s very own Tyler Benziger, in conjunction with the fine, and very talented, folks from the Filament Group.

Theme Roller for jQuery Mobile Screen Shot

http://jquerymobile.com/themeroller/

If you’ve used the Theme Roller for jQuery UI, the tool should feel very familiar to you, but there are a few enhancements worth mentioning. Aside from building a theme and downloading it for yourself, you can generate a URL for your theme and share it with others. Simply pass the URL along to your friends/co-workers, and once they load it, they can edit or download the theme you created. Another great feature is the ability to import your theme CSS directly into the tool for updating/editing at a later date. This comes in quite handy when you need to make a slight tweak or add more swatches as you make changes to your existing jQuery Mobile application.

Kuler Integration Screenshot

The last feature we’re especially excited about is the integration with Adobe’s Kuler App Service, which gives you access to the library of color sets created by designers within the Adobe Community. You can search for color sets by color, view the most popular or most recent, or even get random suggestions to help spark your creativity.

The Theme Roller for jQuery Mobile source is open and available on Git Hub:

https://github.com/jquery/web-jquery-mobile-theme-roller

Give Theme Roller a spin and be sure to give us feedback. You can file enhancement requests and issues in the project issue tracker:

https://github.com/jquery/web-jquery-mobile-theme-roller/issues/

For more details on this release, be sure to check out the official jQuery Mobile blog post:

http://jquerymobile.com/blog/2011/10/28/announcing-themeroller-for-mobile-beta/

jQuery Mobile RC 2 Available

jQuery Mobile 1.0 Release Candidate 2 is now available for download and testing. The team is excited to announce that as of RC2, we have now covered all target platforms outlined within our graded browser matrix. This means that we currently have support for the majority of all modern desktop, smartphone, tablet, and e-reader platforms. Also, since we use a progressive enhancement approach, we are able to support feature phones and older browsers.

Some of the key changes for RC2 include:

  • Expanded support for HTML5 date, time and color input types
  • New helper class for hiding elements in an accessible way
  • Custom selects: now work in controlgroups
  • Fixed toolbar improvements
  • New: Theme vs. structure stylesheets

Full details can be found here:

http://jquerymobile.com/blog/2011/10/19/jquery-mobile-1-0rc2-released/

For information on how to download or insert jQuery Mobile into your pages, go here:

http://jquerymobile.com/download/

A demo of jQuery Mobile 1.0 RC2 can also be found here:

http://jquerymobile.com/demos/1.0rc2/

The team is currently focused on fixing bugs and improving performance. If you have any issues or enhancement requests, please file them in the jQuery Mobile issue tracker on GitHub so they can be considered/addressed for the 1.0 final release:

https://github.com/jquery/jquery-mobile/issues

Adobe Edge Preview 3 Available

Adobe Edge Preview 3 is now available on Adobe Labs:

http://labs.adobe.com/technologies/edge/

Edge is Adobe’s new Motion and Interaction Design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3. Below, I’ll briefly cover a few of the new additions in Preview 3 and hopefully give you some background and tips that help to get you going.

Preview 3 adds support for interactivity in the form of actions and timeline triggers which execute a custom JavaScript function, defined by you, whenever a specific event occurs on an element, or a time offset within a timeline has elapsed. Actions and triggers provide powerful hooks for manipulating the timeline, elements on the page, or for calling out to your application specific code to accomplish some task. To kick-start the use of actions and triggers, a small library of code snippets has been provided in both the actions and trigger panels in Edge, which allow you to insert the code for common tasks with just a click of a button. The snippets are a great way to get a feel for the types of things you can do with an action or trigger. It’s also a good way to start learning the basics of the Edge Runtime API which the team has started to document here:

http://adobe.com/go/edge_jsapi

Since the Edge Runtime itself uses jQuery 1.6.2, the code for your custom action/trigger functions can make full use of the jQuery core API.

Here are some things to keep in mind when writing your custom event/trigger functions:

  • Your actions and triggers are written to a JavaScript file with the same name as your HTML file, but with an “_edgeActions.js” appended to it. So for example, if you saved your composition to “foo.html”, you will find your actions and triggers in a file called “foo_edgeActions.js”.
  • Within the Actions and Trigger panel, you only type in code for the body of your custom function. You will never have to type the function keyword, or the function signature and curly braces. The Edge Runtime will call your code as if it were defined in a function with one argument named ‘e’, which is the event object for the event your action was bound to. So for example, if you added a “click” action to an element that displays an alert() with the coordinates of the click, you would type something like the following into the Actions panel:
    
    
    	// Display an alert to show the coordinates
    	// of the event.
    
    	alert(e.type + “ event was triggered on #” + e.target.id + " at " + e.pageX + ", " + e.pageY);
    
    

    When you actually click on the element, the Edge Runtime will call your code as if it were declared in a function like this:

    
    
    	function ( e )
    	{
    		// Display an alert to show the coordinates
    		// of the event.
    
    		alert(e.type + “ event was triggered on #” + e.target.id + " at " + e.pageX + ", " + e.pageY);
    	}
    
    
  • The “this” reference within your custom function will always be the symbol instance that contains the element or timeline your action/trigger was bound to. For preview 3, this symbol instance is always the stage. This makes manipulating the timeline easy since you can simply call this.play() or this.stop() directly on the stage object from within your custom function. For instance, one common question folks have is how to create an animation that loops continuously? In Preview 3 you would simply create a trigger at the very end of your timeline, and add the following code to your custom function:
    
    
    	// When this trigger is hit, restart the timeline by
    	// calling play with a time offset of zero.
    
    	this.play( 0 );
    
    
  • When creating closures within your custom function, make sure you save an instance of the “this” reference in a local variable if it is used within the closure.
    
    
    	// Save the symbol into a local variable
    	// so that we can refer to it from our
    	// our closure passed to setTimeout().
    
    	var stage = this;
    
    	setTimeout(function() {
    		stage.stop();
    	}, 60000);
    
    
  • The output for Preview 3 has been modified in such a way that allows for multiple Edge compositions to be combined into a single HTML document. Since compositions are created independently, and sometimes by different people, there is always the chance that the names used for objects within these compositions could collide. To get around this the Edge Runtime dynamically maps object names into unique ids. When using some of the code snippets, mentioned above, you may notice the use of a symbol method called lookupSelector(). This method converts the object name into a unique CSS id selector that can be passed to jQuery so that it can actually find the object/element in the DOM.
    
    
    	$( this.lookupSelector( "Text1" ) ).hide();
    
    

If you want to manipulate the timeline or one of the elements within the stage from a context outside of an action or trigger function, you will need to know this little tidbit. The stage for every composition is tagged with a unique class name. If you look at the HTML document for your Edge composition, you will see a div within the body that looks something like this:



	<div id="stage" class="EDGE-1952485">
	</div>

You can use this class name to get a reference to the stage object so you can manipulate the timeline for that stage, or to find a particular object within the stage:


	//in yourCode.js

	var stage = Edge.getComposition("EDGE-1952485").getStage();
	$( stage.lookupSelector("Text1") ).hide();

When creating your own Actions within Edge, you’ll notice options for binding to the usual mouse and touch events. You might also notice that there are a set of events that have the same name as the mouse events, but are prefixed with the lettter ‘v':

  • vmouseover
  • vmousedown
  • vmouseup
  • vmouseout
  • vclick

The idea behind these “virtual” mouse events is to allow you to bind your action function to a single event that, under the hood, can be triggered by either a native mouse event, or the equivalent touch event on a touch device. The event object that is actually passed into your callback function is normalized to look just like a normal mouse event, so you can write your function to consume this virtual event like you normally do with mouse events on the desktop. Support for these virtual events is actually provided through the use of the standalone jQuery Mobile virtual mouse plugin which hides a lot of the complexity involved when dealing with both mouse and touch events, especially on devices that support both.

That’s about it for now. Download Edge Preview 3 and try-out the new interactivity features within your compositions. Please send any feedback, questions and requests, and samples of the compositions you’ve built, to the team via the Edge forum:

http://forums.adobe.com/community/labs/edge/

jQuery Mobile 1.0 RC 1 Available

jQuery Mobile 1.0 Release Candidate 1 is now available for download and testing. This release contains numerous bug fixes and some much needed updates to the framework documentation.

The team is also very excited to announce the development of a new Theme Roller Mobile tool, spearheaded by our very own Tyler Benziger, which makes it incredibly easy to create jQuery Mobile themes in just minutes, without having to edit a single line of CSS. Also in the works is a Download Builder tool which allows you to generate custom versions of the jQuery Mobile framework JavaScript and CSS files. Simply choose the components you wish to use, and the Download Builder will take care of building the custom full/minified JavaScript and CSS files necessary to support those components.

Full details can be found here:

http://jquerymobile.com/blog/2011/09/29/jquery-mobile-1-0rc1-released/

You can see a video preview of the new Theme Roller Mobile tool here:

http://bit.ly/o3iEe2

For information on how to download or insert jQuery Mobile into your pages, go here:

http://jquerymobile.com/download/

A demo of jQuery Mobile 1.0 RC1 can also be found here:

http://jquerymobile.com/demos/1.0rc1/

The team is currently focused on fixing bugs and improving performance. If you have any issues or enhancement requests, please file them in the jQuery Mobile issue tracker on GitHub so they can be considered/addressed for the 1.0 final release:

https://github.com/jquery/jquery-mobile/issues

jQuery Mobile Beta 3 Available

jQuery Mobile Beta 3 is now available. Updates Among the numerous bug fixes made, some new enhancements were added including, support for pushstate, on platforms that support it, event hooks for allowing developers to inject or modify pages dynamically, and support for the iOS 5 -webkit-overflow-scrolling:touch property. Full details can be found here:

http://jquerymobile.com/blog/2011/09/08/jquery-mobile-beta-3-released/

Be sure to check out the video demo of the -webkit-overflow-scrolling support here:

http://vimeo.com/28776692

You can also play with the live demo used in the video here:

http://filamentgroup.com/examples/jqm-overflow-touch-enabled/

For information on how to download or insert jQuery Mobile into your pages, go here:

http://jquerymobile.com/download/

Finally, we are now driving towards the 1.0 release. Focus will be placed on fixing bugs and improving performance. If you have any issues or enhancement requests, please file them in the jQuery Mobile issue tracker on GitHub so they can be considered/addressed for the 1.0 release:

https://github.com/jquery/jquery-mobile/issues

jQuery Mobile Beta 2 Available

jQuery Mobile Beta 2 was released last night. It includes some user requested enhancements such as the ability to enhance dynamically added content, DOM cache management, page pre-fetching, and the ability to delay framework initialization.

The complete list of enhancements/changes for Beta 2 can be found here:

http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/

Download information here:

http://jquerymobile.com/download/

One important change to note with this release is the updated Mobile Grade Browser Support matrix, which includes several new platforms in the A-Grade support level:

http://jquerymobile.com/gbs/

If you have any issues or enhancement requests, please file them in the jQuery Mobile issue tracker on GitHub so they can be considered/addressed for the pending 1.0 release:

https://github.com/jquery/jquery-mobile/issues

Adobe Edge Preview 1 and jQuery

Adobe recently released Preview 1 of Adobe® Edge, a new web motion and interaction design tool, on labs:

http://labs.adobe.com/technologies/edge/

Edge allows a designer to create animated content for websites, using web standards like HTML5, JavaScript, and CSS3. To get an idea of the types of animations you can create, be sure to check out the “Getting Started” video and samples:

http://tv.adobe.com/watch/adc-presents/edge-getting-started/
http://labs.adobe.com/technologies/edge/resources/

jQuery is one of the key components in Edge’s implementation. It is used both internally, within the application itself, and within the final animation output it produces, to evaluate selectors and manipulate/traverse the DOM.

The animation output produced by Edge does not make use of jQuery’s $.animate() function. Edge uses its own declarative representation and implementation of timelines and tweens. This representation is designed to be highly flexible yet toolable and human-readable.

Edge Preview 1 uses jQuery 1.4.2. Succeeding Previews will use newer versions of jQuery, and the next release is expected to use version 1.6.2.

Please keep in mind that this is a preview, not a beta, or finished product so there is still quite a bit of work to be done on the product itself. Also, the Edge team is aware of the many ways to animate content with open web technologies (JS, CSS3, Canvas, SVG, etc). For this preview, the focus was on basics, specifically, animation of elements within the HTML document DOM. We’ve heard loud and clear from the community about their desire to animate content within canvas and SVG elements. I assure you that the team has already thought about support for content inside these elements, and so there are already implementation requests for these features in the Edge product backlog.

Give Edge a whirl and send any feedback, questions and requests to the team via the Edge forum:

http://forums.adobe.com/community/labs/edge/

Dreamweaver CS5.5 Speaks jQuery

With the release of Creative Suite 5.5 we’re beginning to see the benefit of Adobe’s support for jQuery.

It’s especially exciting for us to see the integration of jQuery Mobile into Dreamweaver CS 5.5.  As this video shows, Dreamweaver users now have an incredibly easy way to get started with jQuery Mobile and mobile web application development.

The addition of industrial-strength jQuery code hinting is also fantastic to see and should be a welcomed addition to all those folks who work with jQuery code in Dreamweaver.