Fluent Essays

Building the Derby App in  App in PhoneGap  App in PhoneGap - Alternative Formats  - Page 330.  see Chapter 11  Building the Derby  App in MonoTouch  App in MonoTouch - Alternative Formats  - Page 362.  see Chapter 12  For submission : Read carefully about 2 different approaches for creating a web service from above. Then (a) compare the two approaches and (b) explain 2 advantages of each approach relative to the other. 362 ! CHAPTER 12 GETTING STARTED WITH MONOTOUCH AND MONO FOR ANDROID The intention of this section was to give you an idea of the project structure, and basic interaction between the UI and code. To build upon this, you will now tackle a more complex native MonoTouch and Mono for Android app. BUILDING THE DERBY APP WITH MONO The idea of the Derby App is to build the same app over all of the mobile platforms covered in this book. The MonoTouch and Mono for Android versions are very similar to the other versions that you have built thus far. The requirements are to list the roster from the Lansing Derby Vixens roller derby team as the primary function, and then list all the roller derby teams in the world with the ability to see their team rosters. MonoTouch For the iOS version of the Derby App, you fi rst need to create an iPhone Tabbed MonoTouch application as shown in Figure 12-25. The Tabbed application type provides a template that contains two views linked to a tab controller that you can use to start your project. The iPhone Certain features of Android apps require permission from the user before the app can gain access to those features. Before users install your app on their mobile devices, they will be prompted with a list of features that your app will be using, providing the opportunity for the user to opt not to install your app because of a particular feature. In the Mono for Android app, to enable the features that your app is going to use, you must use the Mono for Android Project Options dialog box as shown in Figure 12-24. FIGURE 12!24: Mono for Android permissions c12.indd 362c12.indd 362 28/07/12 6:09 PM28/07/12 6:09 PM Building the Derby App with Mono ! 363 User Interface When it boils down to it, the Derby App does not contain a complex user interface. All of the screens are simply lists of data. When the user interface is simple, creating the controls within code is oftentimes an option. For the MonoTouch Derby App, the UITableView controls are created and added programmatically. To get started, rename the fi rst view code and XIB fi le from FirstViewController to VixensController. For the code fi les, it’s best to right-click the class name and select the Rename option from the Refactor menu as shown in Figure 12-26. This ensures that all of the constructors and places that the class is initiated are changed as well. With the fi rst ViewController renamed, your project should look similar to the project shown in Figure 12-27. project type was selected because the only interface to the Derby App that has been shown has been a mobile phone interface, not a tablet interface. The Storyboard option was not selected, just to provide additional examples of how to work with user interfaces within iOS and Interface Builder. FIGURE 12!25: Tabbed MonoTouch iPhone app creation FIGURE 12!26: Rename refactor within MonoDevelop c12.indd 363c12.indd 363 28/07/12 6:09 PM28/07/12 6:09 PM 364 ! CHAPTER 12 GETTING STARTED WITH MONOTOUCH AND MONO FOR ANDROID Creating the Vixen Table View Just as with a native iOS app created in Objective-C, the ViewDidLoad event is fi red right after the View has loaded. Within the VixensController, this is where the table view that contains the list of all the Lansing Derby Vixens will be created. Creating a UI Table view is as simple as: Creating a new instance of the UITableView object. Setting the dimensions and where in the view it will be rendered. Adding the newly created table view as a subview to the view (in this case the Vixens View) you are working with. The following code shows this process. public override void ViewDidLoad () { base.ViewDidLoad (); UITableView tableView = new UITableView(); tableView.Frame = new RectangleF (0, 0, this.View.Frame.Width,this.View.Frame.Height); this.View.AddSubview(tableView); } Populating the Vixens Table View After the table view has been created, the data that will populate the view needs to be received. To do this, I have created a helper class named Network that contains static helper functions that will retrieve the data needed to populate the table views throughout the Derby App. To get the roster of a team, the GetRoster function is called with the team name of the data you are looking for. You have a few different methods within .NET to choose when it comes to mapping a JSON response to an object. The following example simply loops through each of the JSON items returned and manually builds the DerbyName object: public static List<DerbyName> GetRoster(string leagueName) { List<DerbyName> tmpRtn = new List<DerbyName>(); String requestURL = “http://derbynames.gravityworksdesign.com /DerbyNamesService.svc /DerbyNames?$filter=League\%20eq\%20’” + leagueName + “’”; HttpWebResponse response = GetServiceResponse(requestURL); JsonObject fullJsonObject = (JsonObject)JsonObject.Load(response.GetResponseStream()); var rosterData = fullJsonObject[“d”]; foreach (JsonObject singleEntry in rosterData) { tmpRtn.Add(new DerbyName(singleEntry[“DerbyNameId”], FIGURE 12!27: First view renamed c12.indd 364c12.indd 364 28/07/12 6:09 PM28/07/12 6:09 PM Building the Derby App with Mono ! 365 singleEntry[“Name”],singleEntry[“Number”] ,singleEntry[“League”])); } return tmpRtn; } private static HttpWebResponse GetServiceResponse (string url) { HttpWebResponse tmpRtn; var request = (HttpWebRequest) WebRequest.Create (url); tmpRtn = (HttpWebResponse) request.GetResponse (); return tmpRtn; } The data that is returned is a list of DerbyName name objects for the team name that was passed in; in this case, “Lansing Derby Vixens.” After the data has been retrieved, you need to set the DataSource property on the TableView that will display the data. In this case, set the DataSource to a new TableViewDataSource object (which you will create in the future), passing it a list of strings that contains the names of the Lansing Derby Vixens. You can do this by adding the following code to the ViewDidLoad event: public override void ViewDidLoad () { base.ViewDidLoad (); UITableView tableView; string teamName = “Lansing Derby Vixens”; List<DerbyName> fullRosterData = Network.GetRoster(teamName); List<string> data = new List<string>(); fullRosterData.ForEach(derbyName => data.Add(derbyName.Name)); tableView = new UITableView(); tableView.DataSource = new TableViewDataSource(data); tableView.Frame = new RectangleF (0, 0, this.View.Frame.Width,this.View.Frame.Height); this.View.AddSubview(tableView); } To fully bind the data to the table view, you need to implement a few more functions. Create these functions in a new class named TableViewDataSource, which was bound to the data source of the table view. The TableViewDataSource class contains a constructor that contains the data that will be bound to the TableView, in this case a list of strings: public TableViewDataSource (List<string> list) { this.list = list; } c12.indd 365c12.indd 365 28/07/12 6:09 PM28/07/12 6:09 PM 366 ! CHAPTER 12 GETTING STARTED WITH MONOTOUCH AND MONO FOR ANDROID For the table view to know how many rows it needs to select, you must implement the RowsInSection method. In this case, you just return the count of the number of items in the list object, which is the list of strings that you populated when the view loaded: public override int RowsInSection (UITableView tableview, int section) { return list.Count; } The magic really happens in the GetCell method. This method is called for the number of times that was returned in the RowsInSection. In your code, create a new cell, get the data for the correct position in the list object, and then return the cell you created, which will be added to the table: public override UITableViewCell GetCell (UITableView tableView, NSIndexPath indexPath) { UITableViewCell cell = tableView.DequeueReusableCell (kCellIdentifier); if (cell == null) { cell = new UITableViewCell (UITableViewCellStyle.Default,kCellIdentifier); } cell.TextLabel.Text = list[indexPath.Row]; return cell; } When complete, the TableViewDataSource class contains two methods and one constructor: private class TableViewDataSource : UITableViewDataSource { static NSString kCellIdentifier = new NSString (“DerbyName”); private List<string> list; public TableViewDataSource (List<string> list) { this.list = list; } public override int RowsInSection (UITableView tableview, int section) { return list.Count; } public override UITableViewCell GetCell (UITableView tableView, NSIndexPath indexPath) { UITableViewCell cell = tableView.DequeueReusableCell (kCellIdentifier); if (cell == null) { cell = new UITableViewCell ( UITableViewCellStyle.Default, kCellIdentifier); c12.indd 366c12.indd 366 28/07/12 6:09 PM28/07/12 6:09 PM Building the Derby App with Mono ! 367 } cell.TextLabel.Text = list[indexPath.Row]; return cell; } } With the table view data wired, you should be able to run the app, (by pressing the run button in the toolbar) and view the Derby Vixen roster as shown in Figure 12-28. Leagues/Team Name The Leagues tab lists all of the roller derby leagues in a TableView. The name of this controller is LeagueController. Creating the Leagues tab is very similar to the Vixens tab, with two exceptions. The fi rst is the function that is called to obtain the data that is displayed in the list. Because this is a list of leagues, you will call the GetLeagueData function found in the network class. This function returns a list of League objects, returned from the Derby service. public static List<League> GetLeagueData() { List<League> tmpRtn = new List<League>(); string requestURL = “http://derbynames.gravityworksdesign.com /DerbyNamesService.svc/Leagues”; HttpWebResponse response = GetServiceResponse(requestURL); JsonObject fullJsonObject = (JsonObject)JsonObject.Load(response.GetResponseStream()); var leagueData = fullJsonObject[“d”]; foreach (JsonObject singleEntry in leagueData) { tmpRtn.Add(new League(singleEntry[“LeagueId”],singleEntry[“LeagueName”])); } return tmpRtn; } The second difference between the views is that the League Roster screen that lists the team members for the selected league should appear when a cell is touched on the leagues view. To accomplish this, within the LeaguesController code fi le, create a new delegate that derives from UITableViewDelegate. The RowSelected event is wired up inside this delegate, which simply creates a new LeagueRoster view (which you have not created yet), sets the team name you want to load, and then pushes the view to the iOS navigation stack to make the LeagueRoster view show. private class TableViewDelegate : UITableViewDelegate { LeaguesController leagueController; private List<string> list; FIGURE 12!28: Derby Vixens roster rendering in Table View c12.indd 367c12.indd 367 28/07/12 6:09 PM28/07/12 6:09 PM 368 ! CHAPTER 12 GETTING STARTED WITH MONOTOUCH AND MONO FOR ANDROID public TableViewDelegate(List<string> list, LeaguesController controller) { this.leagueController = controller; this.list = list; } public override void RowSelected (UITableView tableView, NSIndexPath indexPath) { LeagueRoster roster = new LeagueRoster(); roster.TeamName = list[indexPath.Row]; leagueController.NavigationController.PushViewController(roster,true); } } League Roster The LeagueRoster view is shown when a user selects a league/team from the team name page. The name of this view is LeagueRoster. This view is almost identical to the Vixens view with one exception. To know which league/team you are loading the roster for the name needs to be passed into this view. You can do this by adding a property named TeamName to the LeagueRoster class: public string TeamName { get; set; } The GetRoster function within the ViewDidLoad event uses the TeamName property instead of the hard-coded “Lansing Derby Vixens” value to retrieve the roster for the team name set in the TeamName property: public override void ViewDidLoad () { base.ViewDidLoad (); UITableView tableView; List<DerbyName> fullRosterData = Network.GetRoster(this.TeamName); List<string> data = new List<string>(); fullRosterData.ForEach(derbyName => data.Add(derbyName.Name)); tableView = new UITableView(); tableView.DataSource = new TableViewDataSource(data); tableView.Frame = new RectangleF (0, 0,this.View.Frame.Width, this.View.Frame.Height); this.View.AddSubview(tableView); } Figure 12-29 shows the roster view for a selected team. Mono for Android For the Android version of the Derby App, you fi rst need to create a new Mono for Android application as shown in Figure 12-30. This will provide a simple Android app to which you will then be able to add your specifi c derby logic. FIGURE 12!29: Roster View for team c12.indd 368c12.indd 368 28/07/12 6:09 PM28/07/12 6:09 PM Building the Derby App with Mono ! 369 This version of the Derby App is going to use a few Android features that were introduced with Android version 3.0, Gingerbread. To be on the safe side, for this project you will want to target the latest Android SDK. You will want to make sure that the Android project options have the minimum API level set to 14 for Android 4.0 as shown in Figure 12-31. FIGURE 12!30: Creating a new Mono for Android project FIGURE 12!31: Setting the minimum SDK to the latest version c12.indd 369c12.indd 369 28/07/12 6:09 PM28/07/12 6:09 PM 370 ! CHAPTER 12 GETTING STARTED WITH MONOTOUCH AND MONO FOR ANDROID User Interface As with Android apps that are created using Eclipse and Java, the user interface XML fi les for Mono for Android apps are located under the Resources # Layouts directory of the project. For the Derby app you are going to have one main view that contains two tabs that will load the interface using a concept called a fragment. A fragment is simply a chunk of user interface logic with its own life cycle. The following lists the fi les required for the Derby App user interface: Main.axml: The Main layout fi le for the Mono for Android Derby app contains a linear layout and a frame layout. The frame layout is used as a container where the fragments will be loaded: <?xml version=”1.0” encoding=”utf-8”?> <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:orientation=”vertical” android:layout_width=”fill_parent” android:layout_height=”fill_parent”> <FrameLayout android:id=”@+id/fragmentContainer” android:layout_width=”match_parent” android:layout_height=”0dip” android:layout_weight=”1” /> </LinearLayout> Tab.axml: Each tab that is created for the Derby app will use Tab.axml for the interface. The tab’s user interface is simply a list view that will render the data: <ListView xmlns:android=”http://schemas.android.com/apk/res/android” android:id=”@+id/DerbyData” android:layout_width=”wrap_content” android:layout_height=”wrap_content” /> List_item.axml: Remember from Chapter 6 that each item that is rendered in a list view will have a layout fi le to specify how the data will be rendered in the list view. For the Mono for Android Derby app, just a TextView control is used to render the data. If you wanted to get fancy and add a team icon or player photo, this layout would be modifi ed to accomplish this: <?xml version=”1.0” encoding=”utf-8”?> <TextView xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”fill_parent” android:layout_height=”fill_parent” /> With the layout fi les completed, you can add the code that is required to display the UI. In the OnCreate method of the Main.cs fi le, the navigation mode of the action must be set to Tabs, which will allow for a tabbed interface to be rendered. Calls to custom methods named AddVixenTab and AddLeagueTab add the fragments that will fi nish creating the interaction of the tab and the main layout: c12.indd 370c12.indd 370 28/07/12 6:09 PM28/07/12 6:09 PM Building the Derby App with Mono ! 371 protected override void OnCreate (Bundle bundle) { base.OnCreate (bundle); SetContentView (Resource.Layout.Main); this.ActionBar.NavigationMode = ActionBarNavigationMode.Tabs; AddVixenTab (“Vixens”); AddLeagueTab (“Teams”); } To add the tabs to the Action Bar, fi rst create an ActionBar.New tab with the text that will be rendered on the screen: var tab = this.ActionBar.NewTab (); tab.SetText (tabText); After the tab has been created, you need to wire the TabSelected event to load the user interface of the tab that was selected. In this case the Vixen Tab was selected, therefore you should remove the LeagueTab from focus and display a new Vixen Tab to the user using fragments. tab.TabSelected += delegate(object sender, ActionBar.TabEventArgs e) { m_vixenTab = new VixenTab(); e.FragmentTransaction.Add (Resource.Id.fragmentContainer, m_vixenTab); e.FragmentTransaction.Remove(m_leagueTab); }; After the TabSelected event has been wired, you simply need to add the newly created ActionBar .Tab to the ActionBar of the Derby App: this.ActionBar.AddTab (tab); Creating the tabs for both the Vixens and the Leagues/Teams names is similar, with the only exception of what is rendered in the tab (VixenTab or LeagueTab). The following code shows the completed logic for adding both the Vixens and Leagues tabs: private void AddVixenTab (string tabText) { var tab = this.ActionBar.NewTab (); tab.SetText (tabText); tab.TabSelected += delegate(object sender, ActionBar.TabEventArgs e) { m_vixenTab = new VixenTab(); e.FragmentTransaction.Add (Resource.Id.fragmentContainer, m_vixenTab); e.FragmentTransaction.Remove(m_leagueTab); }; this.ActionBar.AddTab (tab); } c12.indd 371c12.indd 371 28/07/12 6:09 PM28/07/12 6:09 PM 372 ! CHAPTER 12 GETTING STARTED WITH MONOTOUCH AND MONO FOR ANDROID private void AddLeagueTab (string tabText) { var tab = this.ActionBar.NewTab (); tab.SetText (tabText); tab.TabSelected += delegate(object sender, ActionBar.TabEventArgs e) { m_leagueTab = new LeagueTab(); e.FragmentTransaction.Add (Resource.Id.fragmentContainer, m_leagueTab); e.FragmentTransaction.Remove(m_vixenTab); }; this.ActionBar.AddTab (tab); } Getting The Vixens Roster With the user interface complete, you can now complete the logic to render the data on the screen for the Vixens tab. The user interface that will be infl ated for the Vixens tab is the Tab.axml. If you remember, this layout fi le contains only a ListView control: var view = inflater.Inflate (Resource.Layout.tab, container, false); To get the roster for the Lansing Derby Vixens, you call the static GetRoster function found within the Network class. This code is identical to the logic that was created for the MonoTouch app: List<DerbyName> fullDerbyNameData = Network.GetRoster(teamName); After the user interface has been infl ated and the data has been received, you can bind the data to the ListView: derbyData.Adapter = new ArrayAdapter<string> (container.Context, Resource.Layout.list_item, data.ToArray()); The following code shows the entire OnCreateView function for the Vixens tab: public override View OnCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { base.OnCreateView (inflater, container, savedInstanceState); var view = inflater.Inflate (Resource.Layout.tab, container, false); var derbyData = view.FindViewById<ListView> (Resource.Id.DerbyData); string teamName = “Lansing Derby Vixens”; List<DerbyName> fullDerbyNameData = Network.GetRoster(teamName); List<string> data = new List<string>(); fullDerbyNameData.ForEach(derbyName => data.Add(derbyName.Name)); derbyData.Adapter = new ArrayAdapter<string> (container.Context, Resource.Layout.list_item, data.ToArray()); return view; } c12.indd 372c12.indd 372 28/07/12 6:09 PM28/07/12 6:09 PM Building the Derby App with Mono ! 373 Getting the Leagues and TeamName The logic for creating the Leagues tab is similar to the logic used for creating the Vixens tab. First you call the static function GetLeagues found within the Network class to retrieve a list of leagues. Again this code is identical to the logic used in the MonoTouch Derby App to retrieve the leagues. Also, the ItemClick event on the derbyData list view has been wired so that when it is clicked, a new activity is started that will display the roster for the team that was selected. To accomplish this, you create a new Intent, and save the TeamName as an extra that is pushed to the newly created activity: derbyData.ItemClick += delegate (object sender, ItemEventArgs args) { string teamName = ((TextView)args.View).Text; Intent rosterList = new Intent(container.Context, typeof(LeagueRoster)); rosterList.PutExtra(“TeamName”, teamName); this.StartActivity(rosterList); }; The entire OnCreateView function for the Leagues tab is shown here: public override View OnCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { base.OnCreateView (inflater, container, savedInstanceState); var view = inflater.Inflate (Resource.Layout.tab, container, false); var derbyData = view.FindViewById<ListView> (Resource.Id.DerbyData); List<League> fullLeagueData = Network.GetLeagueData(); List<string> data = new List<string>(); fullLeagueData.ForEach(league => data.Add(league.LeagueName)); derbyData.Adapter = new ArrayAdapter<string> (container.Context, Resource.Layout.list_item, data.ToArray()); derbyData.ItemClick += delegate (object sender, ItemEventArgs args) { string teamName = ((TextView)args.View).Text; Intent rosterList = new Intent(container.Context, typeof(LeagueRoster)); rosterList.PutExtra(“TeamName”, teamName); this.StartActivity(rosterList); }; return view; } Getting The Team Roster The pattern of pushing data to a list view should be starting to look very familiar to you by now. The team roster view again is the same concept. The LeagueRoster class inherits from ListActivity so there is no need to infl ate the user interface that contains the ListView control. c12.indd 373c12.indd 373 28/07/12 6:09 PM28/07/12 6:09 PM 374 ! CHAPTER 12 GETTING STARTED WITH MONOTOUCH AND MONO FOR ANDROID Also, to load the team roster, you need to get the TeamName that was passed into the Activity. You can do this by calling the GetStringExtra method found within the Intent. In this case, if one is not passed in, you default to “Lansing Derby Vixens”: string teamName = Intent.GetStringExtra(“TeamName”) ?? “Lansing Derby Vixens”; The entire onCreate method for the LeagueRoster class is as follows: protected override void OnCreate (Bundle bundle) { base.OnCreate (bundle); string teamName = Intent.GetStringExtra(“TeamName”) ?? “Lansing Derby Vixens”; List<DerbyName> fullRosterData = Network.GetRoster(teamName); List<string> data = new List<string>(); fullRosterData.ForEach(derbyName => data.Add(derbyName.Name)); ListAdapter = new ArrayAdapter<string> (this, Resource.Layout.list_item, data.ToArray()); } With all of the code in place, the Mono for Android Derby app should look similar to Figure 12-32. OTHER USEFUL MONOTOUCH/MONO FEATURES In the two example projects up to this point we have provided the basics for creating MonoTouch and Mono for Android applications that will go out to a web service and render the collected data on the screen. By no means do we feel that we have covered every possible situation you may need to develop a solution for, so we wanted to fi nish this chapter by providing a few more short examples that will help you out when discovering how MonoTouch and Mono for Android work. Local Storage Even if your application is using a web service for retrieving information, at some point you may need to save information on the device. MonoTouch plist For apps written in MonoTouch, property lists (plists) are the simplest way to store information on the device. In the Mac world, many applications use the plist format to store FIGURE 12!32: Mono for Android Derby App c12.indd 374c12.indd 374 28/07/12 6:09 PM28/07/12 6:09 PM Other Useful MonoTouch/Mono Features ! 375 application settings, information about the application, and even serialized objects. It’s best to keep the data contained in these fi les simple, though. Different variable types require different functions to retrieve and get the plist setting. The following example illustrates the different ways to retrieve and then save plist settings within MonoTouch: var plist = NSUserDefaults.StandardUserDefaults; // get plist item string stringSetting = plist.StringForKey(“StringSetting”); int intSetting = plist.IntForKey(“myIntKey”); bool boolSetting = plist.BoolForKey(“myBoolKey”); // save plist item plist.SetString(“string”, “StringSetting”); plist.SetInt(1, “IntSetting”); plist.SetBool(true, “BoolSetting”); plist.Synchronize(); Mono for Android Shared Preferences For apps written in Mono for Android, shared preferences are the simplest way to store information on the device. The Android framework enables shared preferences to be restricted to a single app, or even shared as world-readable/writable, allowing all apps to access these settings if you choose. The following code illustrates saving and retrieving shared preferences: // save shared preference item ISharedPreferences saveSharedPreference = GetPreferences (FileCreationMode.Append); ISharedPreferencesEditor editor = saveSharedPreference.Edit (); editor.PutString (“StringSetting”, “string”); editor.PutInt (“IntSetting”, 1); editor.PutBoolean (“BoolSetting”, false); editor.Commit (); // get shared preference item ISharedPreferences getSharedPreference = GetPreferences (FileCreationMode.Append); string stringSetting = getSharedPreference.GetString (“StringSetting”, “Default Value”); int intSetting = getSharedPreference.GetInt (“IntSetting”, 1); bool boolSetting = getSharedPreference.GetBoolean (“BoolSetting”, true); GPS One of the great benefi ts of mobile devices is GPS functionality. Once you are able to get over the hurdles of learning the basic functions within MonoTouch and Mono for Android, working with the GPS functions can be a great deal of fun. c12.indd 375c12.indd 375 28/07/12 6:09 PM28/07/12 6:09 PM 376 ! CHAPTER 12 GETTING STARTED WITH MONOTOUCH AND MONO FOR ANDROID MonoTouch GPS For MonoTouch, you can fi nd the GPS functionality in the MonoTouch.CoreLocation namespace. The CLLocationManager is the class you will be using to obtain the GPS information. Keeping with the pattern on MonoTouch trying to match the Objective-C way of doing things, MonoTouch uses the delegate design pattern to handle the location updates. Simply put, GPS in MonoTouch is just a matter of: Instantiating a CLLocationManager object. Confi guring settings on the CLLocation manager such as accuracy. Assigning a delegate that will handle the location updates. The following code creates the CLLocationManager object, and tells it to start tracking your location. You assign the delegate of the location manager object to an object named LocationDelegate, which is a custom-created class. CLLocationManager locationManager = new CLLocationManager (); locationManager.Delegate = new LocationDelegate (); locationManager.StartUpdatingLocation (); The custom-created LocationDelegate object derives from … 330 ! CHAPTER 11 GETTING STARTED WITH PHONEGAP } }); To make the call to an outside service for iPhone, you need to add the service to the external hosts in the PhoneGap.plist fi le. The easiest way to enable the external service for debugging is to add the * wildcard to the external hosts, as shown in Figure 11-26. The data from the request string is placed on the responseText variable in the success callback. This can then be parsed with JavaScript’s eval function, which turns the XML into an array of items that can be used to get the items from the JSON response: function successFunction(){ var dataItems = eval(“(“+this.responseText +”)”).d; for (var i = 0; i < dataItems.length; i++) { console.log(dataItems[i].Name); } } LawnChair LawnChair is a JavaScript library that was built to allow persistent storage of data in a lightweight application. The primary target for LawnChair is mobile HTML5 applications, due to LawnChair’s lightweight nature. To use LawnChair you need to set up a data store: var store = new Lawnchair({name:’testing’}, function(store) {}); Once you have the store, you can create an object with a key, and then place that object in the store: var me = {key:’adam’, lastName:’Ryder’}; store.save(me); Now that the object is stored, you can retrieve it from the store using the key: store.get(‘adam’, function(item) { alert(item.lastName); }); This would get the object and alert the lastName item from the object. LawnChair is small; only 8 K in size. This lends itself well to being packaged in PhoneGap, because it won’t take much space on the device. BUILDING THE DERBY APP IN PHONEGAP The idea of the Derby App is to build the same app over all of the mobile platforms covered in this book. The PhoneGap version is very similar to the other versions that you have built thus far or will build in future chapters. FIGURE 11!26: External hosts with Item 0 Set to * c11.indd 330c11.indd 330 28/07/12 6:08 PM28/07/12 6:08 PM Building the Derby App in PhoneGap ! 331 The requirements are to provide two pages: one that lists all the teams/leagues and one that lists all the players. When a league/team is selected, the application shows the roster for the team. When a player is selected, it shows which team the player belongs to and her number. The fi rst thing that you want to do in the Derby App is to create a placeholder which will hold the list of all the derby teams. You set this up on the index.html page: <div id=”wrapper”> <div id=”scroller”> <ul> </ul> </div> </div> You have set up the wrapper with an unordered list inside of the scroller. You need to add the listener for PhoneGap’s device ready event, and make a callback to the onDeviceReady function inside the onLoad function. You also need to add a listener to the touchmove event to prevent the default touchmove behavior. Then you can use the iScroll library to control the movement of the screen: function onLoad() { document.addEventListener(‘touchmove’, function (e) { e.preventDefault(); }, false); document.addEventListener(“deviceready”, onDeviceReady, false); } With the ondevice events wired up you can now request data from the derby name service. To accomplish this, create a fi le named OData.js to handle all requests to the oData Derby Names web service. This OData.js fi le will need to be included in your index.html header. The OData.js fi le has a getData function that takes a request string and a successFunction callback. The actual request is made using XUI’s XHR function, which calls the success function and passes the results from the request string to the function. function OData() { this.getData = function (requestString, successFunction) { x$().xhr(requestString, { callback: successFunction, headers: [{name:”Accept”, value: “application/json”}], error: function(){alert(‘Error ‘); }}); }; Next, set up a DerbyService function that contains all of the service calls and builds the request strings and sends them to the OData function. The calls in the DerbyService contain functions to get the leagues and take a callback. function DerbyService() { this.HostName = ‘http://derbynames.gravityworksdesign.com’; this.BaseServiceUrl = this.HostName + ‘/DerbyNamesService.svc/’; this.odataService = new oData(); this.searchAllLeagues = function (successFunction) { var serviceString = this.BaseServiceUrl + “Leagues?$top=50”; c11.indd 331c11.indd 331 28/07/12 6:08 PM28/07/12 6:08 PM 332 ! CHAPTER 11 GETTING STARTED WITH PHONEGAP odataService = new oData(); odataService.getData(serviceString, successFunction); }; } The onDeviceReady function calls setHeight, which is a function in your helper.js fi le and the searchAll function, which is a local function with a callback to an anonymous function that sets up the scrollView for your iScroll implementation: setHeight(); searchAll( function(){ setTimeout(function () { scrollView = new iScroll(‘wrapper’, {desktopCompatibility:true}); }, 500); }); The searchAll function creates an instance of the DerbyService, and then calls the searchAllLeagues function of the derby service with an anonymous callback function. The anonymous callback will call another helper function to display the league data on the screen. The displayAllLeagueDataOnScreen function takes a parameter for the response from the OData service, the search string (currently empty string), and the ID of the div that will hold the results. function searchAll(callback){ var service = new DerbyService(); service.searchAllLeagues(function(){ displayAllLeagueDataOnScreen(this.responseText, “”, “scroller”); } }); callback(); } The displayAllLeagueDataOnScreen function uses jQuery to fi nd the list name, and removes any list items that are currently in the list. It then calls the appendAllLeagueDataOnScreen function, passing it the data, search term, and the list name: function displayAllLeagueDataOnScreen(data, searchTerm, listName){ jQuery(“#” + listName).find(‘li’).remove(); appendAllLeagueDataOnScreen(data, searchTerm, listName); } The appendAllLeagueDataOnScreen function calls the JavaScript eval function on the data to get an array of dataItems to work with. You also create a temporary singleItem to hold the league list item. You use jQuery again to fi nd the unordered list inside of the listName that was passed in. For every dataItem, you create a link that will go to the leagues page, league.html, which shows all of the players for that league. After the item is created you append those items to the list. If the data item’s length is the same as the number of records you asked for, you also add a link to get more items when you scroll to the bottom of the list. c11.indd 332c11.indd 332 28/07/12 6:08 PM28/07/12 6:08 PM Building the Derby App in PhoneGap ! 333 function appendAllLeagueDataOnScreen(data, searchTerm, listName){ var dataItems = eval(“(“+ data +”)”).d; var singleItem = “”; var list = jQuery(“#” + listName).find(‘ul’); for (var i = 0; i < dataItems.length; i++) { singleItem = “<a href=’league.html?League=” + dataItems[i].LeagueName + “’> <li title=”; singleItem = singleItem + dataItems[i].LeagueName +” >”; singleItem = singleItem + dataItems[i].LeagueName + “</li></a>”; list.append(singleItem); } if(dataItems.length == 50){ if(searchTerm == “”){ singleItem = “<a href=’#’ id=’btnGetMore’ onclick=’LoadMorePushed()’>” singleItem = singleItem + “<li id=’liAddMore’>Load More</li></a>”; } else{ singleItem = “<a href=’#’ id=’btnGetMore’ onclick=’LoadMoreSearchPushed(&quot;”; singleItem = singleItem + searchTerm + “&quot;)’><li id=’liAddMore’>Load More</li></a>”; } list.append(singleItem); } } Figure 11-27 shows the index page rendering a list of roller derby teams. Now that you have the leagues set up as a list of links to a league.html page, you can use CSS to change the links to look more like the native OS list items. You can set the list-style to none and the list-type to none, which will remove the bullets. When you set text-decorations to none for the anchor tabs, the links will no longer be underlined. ul { list-style:none; padding:0; margin:0; width:100\%; text-align:left; } li { margin:5px 0; padding:3px 7px 7px 7px; border-bottom:1px solid #ddd; list-style-type:none; font-size:15px; font-weight:bold; margin-right:5px; } FIGURE 11!27: List of derby teams rendered on an iPhone c11.indd 333c11.indd 333 28/07/12 6:08 PM28/07/12 6:08 PM 334 ! CHAPTER 11 GETTING STARTED WITH PHONEGAP a:link, a:visited { text-decoration:none; color:#000; font-weight:bold; } Figure 11-28 shows what the Derby app looks like after this small amount of CSS has been added. With the scrolling working and the list looking like a list, you can add a header to the league page. The header consists of two links with classes, which will become image links through CSS. This header will also be used on the individualList.html page, just with different classes, so that the links look different. <div class=”header”> <a id=”btnLeague” href=’index.html’ class=”btnTwoLeft”>Leagues</a> <a id=”btnIndividuals” href=’individualList.html’ class=”btnTwoRightSelected” >Players</a> </div> Here is the CSS for the buttons; the images are stored inside the images directory within the www directory: .btnTwoLeft { height:23px; width:150px; background:url(images/btn-two-left.png) no-repeat; float:left; text-align:center; font-size:14px; font-weight:200!important; color:#fff!important; font:Georgia, “Times New Roman”, Times, serif; padding:7px 0 0 0; margin:2px 0; } .btnTwoLeftSelected { height:23px; width:150px; background:url(images/btn-two-left-selected.png) no-repeat; float:left; text-align:center; font-size:14px; font-weight:200!important; color:#fff!important; font:Georgia, “Times New Roman”, Times, serif; padding:7px 0 0 0; margin:2px 0; } With the header added, the league screen is now starting to look like a mobile app. Figure 11-29 shows the header added to the league screen. FIGURE 11!28: Formatted league list displayed on an iPhone FIGURE 11!29: Derby App with header added c11.indd 334c11.indd 334 28/07/12 6:08 PM28/07/12 6:08 PM Other Useful PhoneGap Things ! 335 There is another useful option for a list this long, and that is the ability to search. To search, you need a text box for the search term, a button to search with, and another service call for searching: <input id=”txtSearch” type=”search” placeholder=”Search” class=”searchbar”> <button id=”btnSubmit” type=”button” class=”gobtn” label=”Go” >GO</button> Wire up the button click event in the onDeviceReady function. This click function gets the searchCriteria from the search text box and passes that to the searchLeagues function: jQuery(“#btnSubmit”).click(function(){ var searchCriteria = jQuery(“#txtSearch”).val(); skipCount = 50; searchLeagues(searchCriteria); }); The searchLeagues function creates a new instance of the DerbyService and calls the searchLeagues function in the service with a callback to displayAllLeagueDataOnScreen. This is the same function that you called when you displayed the unfi ltered list. function searchLeagues(searchCriteria){ var service = new DerbyService(); service.searchLeagues(searchCriteria, function(){ displayAllLeagueDataOnScreen(this.responseText, searchCriteria, “scroller”); }); } The searchLeagues function in the service calls the OData object with a fi lter that looks for a sub- string of the searchString that is passed in the LeagueName property: this.searchLeagues = function (searchString, successFunction) { var serviceString = this.BaseServiceUrl + “Leagues?$top=50&$filter=\ substringof(‘” + searchString + “’,LeagueName)”; this.odataService.getData(serviceString, successFunction); }; With the search in place, Figure 11-30 shows the completed UI for the Leagues screen in the Derby App. With the Derby App completed, now you can take a look at some of the other useful functions in PhoneGap. OTHER USEFUL PHONEGAP THINGS Thus far, the examples in this chapter have provided the basics for creating a PhoneGap application. This application will go out to a web service and render the data on the screen. This does not cover every possible situation you will encounter as a PhoneGap mobile developer, so we will fi nish this FIGURE 11!30: Derby App with league search added c11.indd 335c11.indd 335 28/07/12 6:08 PM28/07/12 6:08 PM 336 ! CHAPTER 11 GETTING STARTED WITH PHONEGAP chapter by providing a few short examples of other common tasks you may need to accomplish when working with PhoneGap. Pickers Pickers in PhoneGap come in two fl avors. The fi rst type of picker is a date-style picker. These pickers rely on plug-ins to function, because there isn’t a uniform date picker available to the different platforms yet. iOS 5 does support the HTML date input type. You can get the code for the date picker from https://github.com/phonegap/phonegap-plugins/tree/master/ iPhone/DatePicker. This will have the .js, .h, and .m fi les. The .h and .m fi les go into your Plugins directory. The DatePicker.js fi le belongs in your www directory. You also need to add a DatePicker key and value to the plugins section of your phonegap.plist fi le. You need to create a callback and a function that will be called during the onclick of a link. var callbackFunction = function(date) { console.log(date.toString()); document.getElementById(“date”).innerHTML = date.toString(); } var showDatePicker = function(mode) { plugins.datePicker.show({ date: new Date(), mode: mode, //date or time or blank for both allowOldDates: false }, callbackFunction); } The other way to create a picker, which is our recommended way, is to create a page that lists the items you want to pick from as links back to your selector. In your HTML you could have a link to a pickList page: <a href=’pickList.html’>Choose Your Favorite Color</a> On the pickList page you can set up the list as a series of links back to the index with the choices differentiated by the query string parameter that is passed back: <html> <ul> <li><a href=’index.html?color=blue’>Blue</a> <li><a href=’index.html?color=green’>Green</a> <li><a href=’index.html?color=red’>Red</a> </ul> </html> Once back on the index page you can read the query string and take action based on what it con- tains. You can use regular expressions in JavaScript to decode the query string and return the value of the query string parameter. You could add another JavaScript library to handle this, but it is quicker and easier to just write the function yourself: function getParameterByName( name ){ name = name.replace(/[\[]/,”\\\[“).replace(/[\]]/,”\\\]”); c11.indd 336c11.indd 336 28/07/12 6:08 PM28/07/12 6:08 PM Other Useful PhoneGap Things ! 337 var regexS = “[\\?&]”+name+”=([^&#]*)”; var regex = new RegExp( regexS ); var results = regex.exec( window.location.href ); if( results == null ) return “”; else return decodeURIComponent(results[1].replace(/\+/g, “ “)); } Once you make the call to getParameterByName you can use the information that you have in the query string: var color = getParameterByName(‘color’); if (color != ‘’) { alert(‘You Chose: ‘ + color); } Figure 11-31 is an example of the color picker view. O ine Storage Sometimes you will need to store data on the device. This could be because the business rules for your app require offl ine usage, or it could be just a matter of saving a few settings such as username and password. This section shows you the different techniques you can use to store data offl ine so that it can be retrieved when the user is not connected to the web. Offl ine storage also allows you to store settings on the device for your user. Web SQL If you have a lot of data that needs to be stored, one of the better ways to store that data is in a database. PhoneGap provides a mechanism to create, maintain, and retrieve records from an internal database. The fi rst thing you need to do to use the database is to open it. You must do this after PhoneGap’s deviceready event has been fi red. The following code creates or opens a database named PlayerDemo with a version of 1.0 and a display name of Player Demo. The 10000 is the size of the database in bytes. function onDeviceReady() { var db = window.openDatabase(“PlayerDemo”, “1.0”, “Player Demo”, 10000); } Now that you have a database you can run transactions against it. You do that by calling the transaction function on the database, and passing in a callback function, an error callback, and a success callback. The callback function gets called with a transaction object. The fi rst thing you do is populate the database: db.transaction(populateDB, onDBError, onDBSuccess); FIGURE 11!31: Color picker view c11.indd 337c11.indd 337 28/07/12 6:08 PM28/07/12 6:08 PM 338 ! CHAPTER 11 GETTING STARTED WITH PHONEGAP This calls the populateDB function and passes the function its transaction. This means that if any of the commands in the transaction fail, the entire transaction will be rolled back. The following function creates a players table: function populateDB(tx){ tx.executeSql(‘DROP TABLE IF EXISTS PLAYERS’); tx.executeSql(‘CREATE TABLE IF NOT EXISTS PLAYERS (id unique, number, name)’); tx.executeSql(‘INSERT INTO PLAYERS (id, number, name) VALUES (1, 6, “Adam”)’); tx.executeSql(‘INSERT INTO PLAYERS (id, number, name) VALUES (2, 1, “Jeff”)’); tx.executeSql(‘INSERT INTO PLAYERS (id, number, name) VALUES (3, 4, “Scott”)’); tx.executeSql(‘INSERT INTO PLAYERS (id, number, name) VALUES (4, 2, “Amelia”)’); tx.executeSql(‘INSERT INTO PLAYERS (id, number, name) VALUES (5, 5, “Dave”)’); tx.executeSql(‘INSERT INTO PLAYERS (id, number, name) VALUES (6, 3, “Lauren”)’); tx.executeSql(‘INSERT INTO PLAYERS (id, number, name) VALUES (7, 7, “Ashley”)’); tx.executeSql(‘INSERT INTO PLAYERS (id, number, name) VALUES (8, 9, “Nathan”)’); tx.executeSql(‘INSERT INTO PLAYERS (id, number, name) VALUES (9, 8, “Heather”)’); } Now that you have the database populated you can create another transaction that you can use to retrieve the data from the players table that you just created. To get the data back from a query, you call executeSQL and pass it the query, arguments, the success callback, and the error callback: tx.executeSql(‘SELECT * FROM PLAYERS ORDER BY name’, [], onQuerySuccess, onDBError); You can use the onQuerySuccess callback to iterate through the results and display them to the screen, as shown in Figure 11-32: FIGURE 11!32: SQL returned to screen c11.indd 338c11.indd 338 28/07/12 6:08 PM28/07/12 6:08 PM Other Useful PhoneGap Things ! 339 function onQuerySuccess(tx, results){ try{ var playerInfo = ‘<ul>’; var len = results.rows.length; for (var i=0; i<len; i++){ playerInfo += ‘<li><b>’ + results.rows.item(i).name + ‘</b>(‘ + results.rows.item(i).number + ‘)</li>’; } playerInfo += ‘</ul>’; jQuery(‘#divPlayers’).html(playerInfo); } catch(err){ alert(err); } } Filesystem Storage Local storage is also available. The local storage is available as key-value pairs. To store Lansing as a favorite, you would call setItem, passing in the key (favorite) and the value (Lansing): window.localStorage.setItem(“favorite”, “Lansing”); This storage is persistent and will be available the next time the applica- tion is run. To retrieve the data you call getItem with the key that you are looking for. The following code retrieves the favorite item and then alerts that item, as shown in Figure 11-33: var fav = window.localStorage.getItem(“favorite”); alert(fav); GPS You access the GPS through PhoneGap by calling the geolocation function with a callback: function onDeviceReady() { navigator.geolocation.getCurrentPosition(gpsSuccess, gpsFailure); } As with all of the PhoneGap functions, the GPS functions cannot be called until the deviceready event has been fi red. The success callback returns a position object, which has a coordinates object that contains properties for latitude, longitude, altitude, accuracy, heading, and speed: function gpsSuccess(location){ var gpsinfo = ‘<ul><li>Latitude: ‘ + location.coords.latitude + ‘</li>’; gpsinfo += ‘<li>longitude: ‘ + location.coords.longitude + ‘</li>’; FIGURE 11!33: Local storage alert c11.indd 339c11.indd 339 28/07/12 6:08 PM28/07/12 6:08 PM 340 ! CHAPTER 11 GETTING STARTED WITH PHONEGAP gpsinfo += ‘<li>Altitude: ‘ + location.coords.altitude + ‘</li>’; gpsinfo += ‘<li>Accuracy: ‘ + location.coords.accuracy + ‘</li>’; gpsinfo += ‘<li>Speed: ‘ + location.coords.speed + ‘</li></ul>’; jQuery(‘#GPSInfo’).html(gpsinfo); } There is also a failure callback that returns a positionError object. The positionError object has a code and a message property: function gpsFailure(PositionError){ alert(PositionError.code); alert(PositionError.message); } Accelerometer You can access the accelerometer using the accelerometer’s watchAcceleration function with a callback for the success and for errors. watchAcceleration is set to a variable and fi res on the frequency that is set in the options. The iPhone simulator does not transmit accelerometer data; however, the Android simulator does, so if you are testing without a device, the accelerometer needs to be tested on Android. var options = { frequency: 3000 }; watch = navigator.accelerometer.watchAcceleration(successFunction, errorFunction, options); //The success function takes an acceleration object. //This object has the x, y and z change, //as well as the timestamp from when the acceleration was gathered. function successFunction(acceleration){ try{ x$(“#spanX”).html(acceleration.x); x$(“#spanY”).html(acceleration.y); x$(“#spanZ”).html(acceleration.z); x$(“#spanTime”).html(acceleration.timestamp); } catch(err) { alert(err); } } To stop the watch from fi ring constantly, you can call the clearWatch function and pass it the watch variable to stop the watch from fi ring: x$(‘#btnStop’).click(function(){ navigator.accelerometer.clearWatch(watch); }); Now that you have a working app you can connect the application to the markets. c11.indd 340c11.indd 340 28/07/12 6:08 PM28/07/12 6:08 PM Summary ! 341 CONNECTING PHONEGAP TO THE MARKETS If you have been following through the book chapter by chapter, you have seen how to connect to the different markets. Because PhoneGap applications are compiled with their native frameworks, they are released to the markets in the same manner as their true native counterparts are released. Refer to the corresponding section of Chapters 6–9 for more information on connecting to the vari- ous markets. SUMMARY PhoneGap is an easy-to-learn framework for creating cross-platform mobile applications. Everything in PhoneGap derives from the onDeviceReady listener. Once onDeviceReady fi res, you have access to the device’s native components, like the GPS, camera, or accelerometer. Leveraging your current HTML, CSS, and JavaScript knowledge also enables you to create these applications with a lower learning curve. Because PhoneGap is cross platform, you don’t need to learn four different languages to be able to deploy your application across iPhone, Android, BlackBerry, and Windows Phone 7. Having the same codebase for all platforms can also give you a sense of parity through the different device platforms. Now that you have created mobile applications with PhoneGap, the next chapter will show how to create Android and iPhone applications using .NET and the Mono framework. c11.indd 341c11.indd 341 28/07/12 6:08 PM28/07/12 6:08 PM