Join Joseph Lowery for an in-depth discussion in this video Understanding the mobile app toolset , part of Building Android and iOS Apps with Dreamweaver CS5.5.
One of the snazziest enhancements to jQuery is the jQuery UI component which allows you to easily create and customize rich interactive effects and widgets. Recognizing the rise of mobile computing, jQuery Mobile was born. jQuery Mobile is, in their own words, a unified user interface system that works seamlessly across all popular mobile device platforms built on the rock solid jQuery and jQuery UI foundation, couldn't have said it better myself.
And when they say all popular mobile device platforms, they mean all. Here's a list of those platforms currently receiving their A grade support. There are two other levels of support for the less popular device systems. So how does Dreamweaver fit in? Extremely well it appears. To get you going quickly, there are a series of starter pages you can access via the New Document dialog box. We will explore these in depth in a later video in this chapter.
Next, there is a new jQuery Mobile category in the Insert panel filled with essential building blocks like Page as well as easy-to-use interactive widgets. Dreamweaver's integration with jQuery Mobile is not just for the drag-and-drop designer, but also speeds up hand coding with extended code hint support for jQuery methods and events. Let me show you a quick example. Here, I have the start of a basic jQuery function.
Now if I go and start to add more functionality with the $(, here you will see that Dreamweaver begins to give me a few of the code hints. Am I referring to the entire document or just to this object? Well, in this case, I'm referring to just of this object. So, I will double-click that, close off the parentheses, add another period and now I have a list of jQuery events and methods that can be applied to this object. I'm going to put in a fade so I just start typing my fa and I want to put in a fadeIn.
So I see it there as well as the various arguments. I hit Return and let's just enter in a value for duration of 300, close that off and finish it with a semi-colon and this jQuery code chain is now complete. You can quickly build up a robust call chain to manipulate the document dom and associated CSS with the enhanced jQuery code hinting. As you are building your app, you can check out basic interactions in Live View. Let me switch over to a document I have opened here and enter into Live View and now with Dreamweaver, I can easily go down to the Window Size tool and choose a Smart Phone size that's much more representative of what I'm developing for.
You can even flip your phone screen to a different orientation. I will choose Window Size again and then scroll down a bit until I see Orientation Landscape and select that and now you can see how the Apple looks in a horizontal orientation. Once you've built out your app interface with jQuery Mobile, you can package it for testing with the phone gap integration. To do that, you go to Site > Mobile Applications and choose Configure Application Framework.
Once your framework is properly set up, you'll be able to build the app and even work with it with the appropriate emulator or simulator. I'll cover all of these operations in the later chapters on working with Android and iOS. I think the new Dreamweaver mobile application development environment is really rich and opens up a whole new world of possibilities for the Dreamweaver user.
- Understanding the mobile app toolset
- Working with jQuery Mobile and mobile starters in Dreamweaver
- Applying an overall theme to an app
- Specifying Android settings
- Simulating the iPhone
- Setting up mobile pages
- Keeping jQuery Mobile current
- Applying page transitions
- Creating collapsible content
- Defining list views with images
- Creating web forms for mobile
- Integrating geolocation data with Google Maps
- Previewing an app in Device Central