![]() Welcome to the jQuery Mobile Demo App for Drupal! We’re going to replace the contents of the tag of our index.html with some content structured for jQuery Mobile: For instance, … wraps a mobile page, while … is the header and … is the content of the page. With those tags, you’ll need to tell jQuery Mobile how your content is structured with the new HTML5 data-* attributes. I mentioned that jQuery Mobile wants its content structured into tags instead of individual HTML pages. You can link to other HTML files, of course, but you may lose your transitions between the two – and mobile users strart to expect to see those transitions. To minimize download time, and to enable transition effects between pages, it’s best to set up as many of your pages in one HTML file as possible. This is a little different from what you might be used to, where each page in a web application is a separate HTML file. This is because jQuery Mobile expects your content to be in tags that correspond to individual pages in your mobile application. Now that we have jQuery Mobile added to our project, go ahead and run the project – you shouldn’t see any difference in the output from the iPhone Simulator. Now open the index.html in your www folder so we can add the CSS file and the two Javascript files. You’ll also need to download jQuery 1.6.2 from into your javascripts folder. Create another folder under the file into the javascripts folder. In the finder, create a new folder under the file into the css folder. ![]() We will bundle the CSS, Javascript, and images into our app to minimize download times. The next step is to download and add jQuery Mobile (from ) to your XCode project. Now run the project again, (stopping the currently running DrupalApp if it is still running) and PhoneGap should let you know it’s working: Xcode will prompt you to create folder references for any added folders – choose this option if the Create groups option is selected. It should look like this:ĭrag the This is so XCode will bundle the contents of the www folder with your app when it packages the app to run on the iPhone Simulator or on an iPhone, iPod Touch, or iPad. Open up the DrupalApp project folder in Finder. Now that we have our XCode project set up, and we’ve run our project, we need to add the Luckily, this is pretty easy. Here’s what the iPhone Simulator will look like: ![]() The first time you run your project, PhoneGap will actually create a www folder you can drag into XCode to get started. PhoneGap will load, but it won’t have any content to display. Hit the Play button in the upper left hand corner of XCode to run your project in the iPhone Simulator. XCode 4 will do some processing, and then you should see your new DrupalApp project in Xcode. Now put your new project into a folder of your choice (for instance, under your home directory’s Documents), and let XCode 4 create a local git repository if it offers to. I’m going to use DrupalApp as my Product Name, and com.jefflinwood as my company identifier. You should see the PhoneGap template as one of your options:Ĭlick Next on the Choose your template dialog I’m also going to target iOS 4.x and above, using the PhoneGap Media Capture API to access the camera.Īfter running the PhoneGap installer, open XCode 4 and start a new project. ![]() To build the client application, first download and install the latest version of PhoneGap, following the directions for getting started here:įor this post, I’m using XCode 4 as the IDE for iOS, so I linked to the specific directions for that platform. Drupal 7 has a lot of functionality built in, but not web services, so you will need to install the Services 3 module. I’m going to use Drupal 7 as the server for the app. We’ll get to Drupal a little bit further down the road, so if you just want to do some apps that don’t connect to a server, this post should be useful. This first post in the series will get you up and running with jQuery Mobile and PhoneGap on iOS with XCode 4. Using PhoneGap, you can also create apps for Android, WebOS, Android, Blackberry, and Symbian. I’m going to use the PhoneGap project to create an iPhone application out of the jQuery Mobile app that you can install onto your iPhone. In this series of posts, I’m going to discuss how to build a jQuery Mobile HTML5 App that talks to Drupal 7 using AJAX, REST and JSON.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |