In the last lesson you parsed the USA Mountain XML data from the web and displayed the mountain names in TextView. In this lesson you replace the TextView with a TableView. In the TableView you will display the mountain names along with their elevations.
Screen With TableView
You use a UITableView and it uses a data source for the items it displays. The data source that you use in this lesson is a NSMutableArray. Items in the NSMutableArray are used to create UITableViewCell objects that are added to the UITableView.
In the NSXMLParser you can take each mountiain in the XML data, place it’s data into a MountainItem object you created in the last lesson and store the MountainItem object in the NSMutableArray.
A UITableView needs a UITableViewDataSource delegate object to call methods. You can make the MainViewController that object and then tie them together in the MainViewController interface.
Step 2: MainViewController.m – Add UITableView, NSMutableData Objects and Update Navigation Bar Title
This step gets the new variables included and sets the title.
Open the MainViewController.m in the project navigator window.
The highlighted lines 10, 37 and 72 you are replacing the resultsTextView object with the resultTableView object.
Lines 17 and 41 add in the NSMutableData mountainData object.
You need to initialize the NSMutableData mountainData object. Line 59 allocates memory and initializes and the next line keeps it out of the way of the garbage collector.
Update the navigation bar title on line 62.
//
//
//
#import "MainViewController.h"
#import "MountainItem.h"
@implementation MainViewController
@synthesize searchButton;
@synthesize activityIndicator;
@synthesize resultTableView;
@synthesize urlConnection;
@synthesize receivedData;
@synthesize xmlParser;
@synthesize mountainData;
// State is loading data. Used to set view.
static const int LOADING_STATE = 1;
// State is active. Used to set view.
static const int ACTIVE_STATE = 0;
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
}
return self;
}
- (void)dealloc
{
[searchButton release];
[activityIndicator release];
[resultTableView release];
[urlConnection release];
[receivedData release];
[xmlParser release];
[mountainData release];
[super dealloc];
}
- (void)didReceiveMemoryWarning
{
// Releases the view if it doesn't have a superview.
[super didReceiveMemoryWarning];
// Release any cached data, images, etc that aren't in use.
}
#pragma mark - View lifecycle
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
mountainData = [[NSMutableArray alloc] init];
[mountainData retain];
[self setTitle:@"USA Mountains Lesson 4"];
}
- (void)viewDidUnload
{
[super viewDidUnload];
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
self.searchButton = nil;
self.activityIndicator = nil;
self.resultTableView = nil;
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
// Return YES for supported orientations
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
Step 3: MainViewController.m – No Changes for #pragma mark – UI Interface
The code in the UI Interface pragma mark remains unchanged and is added here for completeness.
#pragma mark - UI Interface
-(IBAction) startSearch:(id)sender
{
NSLog(@"startSearch");
// Change UI to loading state
[self setUIState:LOADING_STATE];
// Create the URL which would be http://YOUR_DOMAIN_NAME/PATH_IF_ANY_TO/get_usa_mountain_data.php?elevation=12000
NSString *urlAsString = [NSString stringWithFormat:@"%@", kTextURL ];
NSLog(@"urlAsString: %@",urlAsString );
NSURLRequest *req = [[NSURLRequest alloc] initWithURL:[NSURL URLWithString:urlAsString]];
// Create the NSURLConnection con object with the NSURLRequest req object
// and make this MountainsEx01ViewController the delegate.
NSURLConnection *con =[[NSURLConnection alloc] initWithRequest:req delegate:self];
// Connection successful
if (con) {
NSMutableData *data = [[NSMutableData alloc] init];
self.receivedData=data;
[data release];
}
// Bad news, connection failed.
else
{
UIAlertView *alert = [
[UIAlertView alloc]
initWithTitle:NSLocalizedString(@"Error", @"Error")
message:NSLocalizedString(@"Error connecting to remote server", @"Error connecting to remote server")
delegate:self
cancelButtonTitle:NSLocalizedString(@"Bummer", @"Bummer")
otherButtonTitles:nil
];
[alert show];
[alert release];
}
[req release];
}
-(void) setUIState:(int)uiState;
{
// Set view state to animating.
if (uiState == LOADING_STATE)
{
searchButton.enabled = false;
searchButton.alpha = 0.5f;
[activityIndicator startAnimating];
}
// Set view state to not animating.
else if (uiState == ACTIVE_STATE)
{
searchButton.enabled = true;
searchButton.alpha = 1.0f;
[activityIndicator stopAnimating];
}
}
Step 4: MainViewController.m – NSURLConnection Reset Table For New Search Data
In the connectionDidFinishLoading remove this code you used to display data in the TextView from the last lesson. You could keep lines 164 and 167 should you want to trace the code coming in, but by now that functionality should work.
Open this source and remove the highlighted lines.
Now you can the needed code highlighted in the next code block.
There are two additions for your NSURLConnection connectionDidFinishLoading method.
First you need to clear the NSMutableData mountainData object before parsing. Line 164 in the connectionDidFinishLoading is an ideal place as you know there is new data successfully loaded.
Second the UITableView resultTableView object needs a refresh once the data is parsed and loaded into your NSMutableArray mountainData object. This occurs with changes to the XML parsing methods you do in upcoming steps.
On line 170 after the XMLParser has completed, reloadData message is sent to the UITableView resultTableView object and it will reset the data displayed from the NSMutableArray mountainData object.
#pragma mark - NSURLConnection Callbacks
- (void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response
{
[receivedData setLength:0];
}
- (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data
{
[receivedData appendData:data];
}
- (void)connection:(NSURLConnection *)connection didFailWithError:(NSError *)error
{
[connection release];
self.receivedData = nil;
UIAlertView *alert = [[UIAlertView alloc]
initWithTitle:@"Error"
message:[NSString stringWithFormat:@"Connection failed! Error - %@ (URL: %@)", [error localizedDescription],[[error userInfo] objectForKey:NSURLErrorFailingURLStringErrorKey]]
delegate:self
cancelButtonTitle:@"Bummer"
otherButtonTitles:nil];
[alert show];
[alert release];
// Change UI to active state
[self setUIState:ACTIVE_STATE];
}
- (void)connectionDidFinishLoading:(NSURLConnection *)connection
{
// Clear the NSMutableData the tUITableView uses.
[mountainData removeAllObjects];
// Do the Parsing
xmlParser = [[NSXMLParser alloc] initWithData:receivedData];
[xmlParser setDelegate:self];
[xmlParser parse];
// Tell the UITableView to reload the data
[self.resultTableView reloadData];
// Connection resources release.
[connection release];
self.receivedData = nil;
// Change UI to active state
[self setUIState:ACTIVE_STATE];
}
Step 5: MainViewController.m – Place the XML Data in the TableView Data Source
First you have some clean up. So you need to remove the code highlighted. Line 192 you could just comment in case you need to debug. Line 194 was for the UITextView you are removing and replacing with a UITableView.
Open this source and remove the highlighted lines.
Now you can add the mountainItem object to the NSMutableArray mountainData object. Each item in mountainData is used to feed the UITableView you will see in code coming up.
Step 6: MainViewController.m – Add UITableView Methods To Add The Data
Now you just have two methods to add for the UITableView to call. These are defined by the NSXMLParserDelegate we specified in the MainViewController.h header. In a later step the UITableView resultsTableView is linked to make this class the delegate to receive these messages.
This first method, numberOfRowsInSection, is needed to tell the UITableView resultsTableView object how many rows it is managing. You simply return the total items in the NSMutableArray mountainData object.
The cellForRowAtIndexPath is where you manufacture a UITableViewCell and return it to the UITableView resultsTableView.
Line 212 attempts to get a cell available that the UITableView resultsTableView is not using. Lines 215 to 220 handle the case where there are no available cell to use.
The indexPath method argument provides the row you need to fetch data from the NSMutableArray mountainData. Line 222 assures mountainData has that row.
Then on line 225, you get a local copy mountainItem of the MountainItem data stored in the NSMutableArray mountainData for the row being processed. The name and the elevation are put together on line 227 for a label to the row.
On lines 229 and 230 you update the cell and finally at the end of the method the cell is returned for the UITableView to manage.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *SimpleTableIdentifier = @"SimpleTableIdentifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:
SimpleTableIdentifier];
// UITableViewCell cell needs creating for this UITableView row.
if (cell == nil)
{
cell = [[[UITableViewCell alloc]
initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:SimpleTableIdentifier] autorelease];
}
NSUInteger row = [indexPath row];
if ([mountainData count] - 1 >= row)
{
// Create a MountainItem object from the NSMutableArray mountainData
MountainItem *mountainItemData = [mountainData objectAtIndex:row];
// Compose a NSString to show UITableViewCell cell as Mountain Name - nn,nnnn
NSString *rowText = [[NSString alloc ] initWithFormat:@"%@ - %@ feet",mountainItemData.name, mountainItemData.elevation];
// Set UITableViewCell cell
cell.textLabel.text = rowText;
cell.textLabel.font = [UIFont boldSystemFontOfSize:14];
// Release alloc vars
[rowText release];
}
return cell;
}
@end
Step 7: MainViewController.xib – Remove the UITextView
Delete the TextView show here.
Delete UITextView
Step 8: MainViewController.xib – Add The UITableView
Now drag a TableView from the Objects library in the bottom right to place it under the button with the Activity Indicator.
Table View
XCode will put in place makers for the header, footer and rows so as you adjust the properties and get a visual sense of your work.
Positioning to fill the bottom of the screen under the UIActivityIndicator can be done in the design window or you can use the values here to match exactly. Adjust the size of the rows as you please. You do not use the header and footer in this tutorial.
Table View Size Inspector
Here is the result:
Delete UITextView
Then you need to wire this TableView to the MainViewController. In the Connections Inspector set the dataSource and deletegate to the File’s Owner by dragging to the File’s Owner icon in the files panel on left.
Repeat for the “New Referencing Outlet” and when you release the mouse over the File’s Owner icon select resultTableView.
In the last lesson you loaded XML data from the web and displayed in a TextView. In this lesson you are going to parse the XML data and just show the mountain names in TextView.
Screen With Mountains Names Parsed From XML
To do this you will implement the NSXMLParser class and modify your MainViewController to be the NSXMLParser delegate with NSXMLParserDelegate protocol. Protocols are a kind of interface. The NSXMLParser has call backs as it proceeds with the parsing and you need a class to act as the delegate for the NSXMLParser object you create.
You also are going to create your own custom class to represent the data for one mountain. We have limited use for this class in this lesson but it will become handy in passing data around our project in this lesson and as we proceed into the next lessons.
A note about our XML is that the data is only in attributes.
<mountain_item id = "1" name = "Mount McKinley" elevation = "20320" lat = "63.0690" lon = "-151.00063" />
Thus this tutorial does not show you how to parse XML data that would be inside of a node. This makes the XML parsing programming much simpler to do and a great way to get introduced to the overall implementation which also facilitates extracting XML node data when you need to learn how.
There are no UI changes. The one change you will make is in code to display the names of the Mountains in the TextView instead of displaying the XML.
This will add our custom class to represent the data for one mountain from the XML file.
Select the USAMountainsTutorial02 folder. Then from the main menu choose File->New->New File
MountainItem – File New
Select Cocoa Touch from the left panel and Objective-C Class from the right panel for the Templates dialog.
MountainItem – Objective C Class
Your class subclasses NSObject.
MountainItem – Options
The file name is MountainItem. The project folder is USAMountainsTutorial02 and the group is also USAMountainsTutorial02. The target USA Mts 02 was done for you in creating the starting project. Targets have to do with deployment and is beyond the scope of this tutorial and not relevant to just using the Simulator.
MountainItem – Save As
You should see two files name MountainItem.h and MountainItem.m in your Project navigator window. If they are not in the USAMountainsTutorial02, just drag them in.
Step 2: MountainItem.h – Add the Instance Variables
Open the MountainItem.h file and add the highlighted lines.
These are the variables that represent the data in the XML file for one Mountain.
Step 4: MainViewController.h – Add the NSXMLParser and Set the NSXMLParserDelegate Protocol
Select the MainViewController.h in the project navigation window on the left and add the highlighted lines.
Line 8 makes your MainViewController a NSXMLParserDelegate for a NSXMLParser and in particular the NSXMLParser object defined on lines 17 and 27. Your xmlParser is now able make calls on NSXMLParserDelegate methods you will add to this class.
If you are working from the Starting XCode Project, update line 4 with your url. This was covered in lesson 2.
Step 5: MainViewController.m – Add the NSXMLParser Object and Update Navigation Bar Title
Select the MainViewController.m in the project navigation window on the left and add the highlighted lines.
Two lines, 12 and 35, you can add here are for the NSXMLParser xmlParser object.
Then line 52 update the navigation bar title.
#import "MainViewController.h"
#import "MountainItem.h"
@implementation MainViewController
@synthesize searchButton;
@synthesize activityIndicator;
@synthesize resultsTextView;
@synthesize urlConnection;
@synthesize receivedData;
@synthesize xmlParser;
// State is loading data. Used to set view.
static const int LOADING_STATE = 1;
// State is active. Used to set view.
static const int ACTIVE_STATE = 0;
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
}
return self;
}
- (void)dealloc
{
[searchButton release];
[activityIndicator release];
[resultsTextView release];
[urlConnection release];
[receivedData release];
[xmlParser release];
[super dealloc];
}
- (void)didReceiveMemoryWarning
{
// Releases the view if it doesn't have a superview.
[super didReceiveMemoryWarning];
// Release any cached data, images, etc that aren't in use.
}
#pragma mark - View lifecycle
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
[self setTitle:@"USA Mountains Lesson 3"];
}
- (void)viewDidUnload
{
[super viewDidUnload];
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
self.searchButton = nil;
self.activityIndicator = nil;
self.resultsTextView = nil;
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
// Return YES for supported orientations
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
#pragma mark - UI Interface
-(IBAction) startSearch:(id)sender
{
NSLog(@"startSearch");
// Change UI to loading state
[self setUIState:LOADING_STATE];
// Create the URL which would be http://YOUR_DOMAIN_NAME/PATH_IF_ANY_TO/get_usa_mountain_data.php?elevation=12000
NSString *urlAsString = [NSString stringWithFormat:@"%@", kTextURL ];
NSLog(@"urlAsString: %@",urlAsString );
NSURLRequest *req = [[NSURLRequest alloc] initWithURL:[NSURL URLWithString:urlAsString]];
// Create the NSURLConnection con object with the NSURLRequest req object
// and make this MountainsEx01ViewController the delegate.
urlConnection = [[NSURLConnection alloc] initWithRequest:req delegate:self];
// Connection successful
if (urlConnection) {
NSMutableData *data = [[NSMutableData alloc] init];
self.receivedData=data;
[data release];
}
// Bad news, connection failed.
else
{
UIAlertView *alert = [
[UIAlertView alloc]
initWithTitle:NSLocalizedString(@"Error", @"Error")
message:NSLocalizedString(@"Error connecting to remote server", @"Error connecting to remote server")
delegate:self
cancelButtonTitle:NSLocalizedString(@"Bummer", @"Bummer")
otherButtonTitles:nil
];
[alert show];
[alert release];
}
[req release];
}
-(void) setUIState:(int)uiState;
{
// Set view state to animating.
if (uiState == LOADING_STATE)
{
searchButton.enabled = false;
searchButton.alpha = 0.5f;
[activityIndicator startAnimating];
}
// Set view state to not animating.
else if (uiState == ACTIVE_STATE)
{
searchButton.enabled = true;
searchButton.alpha = 1.0f;
[activityIndicator stopAnimating];
}
}
Step 6: MainViewController.m – Start the XML Parsing When Data Loading Completed
Once the NSURLConnection connectionDidFinishLoading method is fired, you can initiate the XML parsing. This is done on lines 162-164.
On line 162 the NSXMLParser is created with the initWithData which conveniently takes the NSMutableData receivedData you got from the NSURLConnection.
[ad name=”Google Adsense”]
Line 163 sets this class as the delegate for the NSXMLParser xmlParser object that you specified in MainViewController.h. To make this work, in MainViewController.h you implemented the NSXMLParserDelegate protocol.
The parsing is kicked of on line 164. In the next step you add one method that NSXMLParser will call.
We are still dumping XML data to the console, so the code for converting the NSMutableData receivedData to a NSString is retained for this lesson but not necessary.
Step 7: MainViewController.m – Parse Each mountain_item In XML
At the end of the file you can add the didStartElement method the NSXMLParser calls when it starts a new element in the XML file.
As a reminder here is what your XML node you need to select and parse looks like.
<mountain_item id = "1" name = "Mount McKinley" elevation = "20320" lat = "63.0690" lon = "-151.00063" />
The first step on line 178 is to see if the element being processed matches your XML file’s element mountain_item.
[ad name=”Google Adsense”]
You could have left out lines 180 to 184 for this lesson, but I thought is was a good point to get set up for future lessons where we need to store the mountain item data in an array as a data source to a table.
These lines show how to access an attribute in the method. Your XML file attribute names are name, elevation, lat and lon.
The console will show the mountain names parsed with the NSLog statement on line 186.
On line 188 we append a new line to the UITextView that is just the mountain name.
In this lesson you will make a requests for the Mountain data from a web site. The data is returned in an XML format. Then for testing you will display the raw XML on the phone screen and also display the XML data in the XCode console.
Screen With XML Loaded From Web
The main goal is to learn to use the NSURL, NSURLRequest, NSURLConnection and NSMutableData classes.
NSURL defines a URL for XCode. NSURLConnection establishes a connection to a server and manages the data to and from that server. NSURLRequest defines a network request along with data to send. NSMutableData stores any returning data.
When you load data from the web or any indeterminate process, you will want to include an activity indicator. So we will add a UIActivityIndicatorView that is the common activity indicator for Mac applications.
To see the data on the phone screen, we will use the UITextView which is a scrollable text component. In future lessons, we will replace the UITextView with a scrolling list of mountains in the XML data we receive.
You will need a web server to complete this and all future lessons in this tutorial. The tutorials use a web server with PHP that reads a comma delimited file containing the mountain data. The XML that the PHP script returns is included in this post should you not have PHP on your server. I will show you how to use that instead of the provided PHP script. However in future lessons we will want to ask the server for just partial data and we need a program to do that. Keep in mind you can also put the mountain data into a database on the server.
Select the MainViewController.h in the project navigation window on the left and add the highlighted lines.
Line 4 is a constant for the URL to the PHP script or the XML file if you choose not to host the PHP script. More on these choices in this post when we get to those files.
The app will enable and disable the UIButton searchButton, so we need to include it for reference in code.
The UIActivityIndicatorView and UITextView are being added and are also referenced from our UI. The UIActivityIndicatorView will need to be hidden and revealed when we are not and are loading data from the server as well starting and ending its animation. So we need to make it an IBOutlet.
The UITextView will be updated with data coming in from the server and so it also needs to be an IBOutlet.
The MSMutableData is needed to capture the data coming in from the server in a raw format.
Your implementation code will call for disabling and enabling the search button and hiding and unhiding the activity indicator in more than one place in the code. Line 26 defines a method you will use so you do not have to repeat this UI state changing code in more than one place. The method receives an int parameter to define the state of the UI components. You will define their values in the implementation code.
Step 2: MainViewController.m – Add Properties and Constants
This step basically is the implementation housekeeping prerequisites.
You add the getter and setters for the properties on lines 4 to 9 using synthesize.
Lines 12 and 14 provide constants for states of the view that are used in the setUIState method we defined in the last step. Those places in the code can make the code more readable when calling the setUIState.
#import "MainViewController.h"
@implementation MainViewController
@synthesize searchButton;
@synthesize activityIndicator;
@synthesize resultsTextView;
@synthesize urlConnection;
@synthesize receivedData;
// State is loading data. Used to set view.
static const int LOADING_STATE = 1;
// State is active. Used to set view.
static const int ACTIVE_STATE = 0;
Add the memory release for the searchButton, activityIndicator, activityIndicator, resultsTextView, urlConnection and receivedData in the dealloc method.
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
}
return self;
}
- (void)dealloc
{
[searchButton release];
[activityIndicator release];
[resultsTextView release];
[urlConnection release];
[receivedData release];
[super dealloc];
}
- (void)didReceiveMemoryWarning
{
// Releases the view if it doesn't have a superview.
[super didReceiveMemoryWarning];
// Release any cached data, images, etc that aren't in use.
}
Step 4: MainViewController.m – Navigation Top Bar Title Updated
On line 47 you might want to update the title so you are not confused when viewing the app.
#pragma mark - View lifecycle
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
[self setTitle:@"USA Mountains Lesson 2"];
}
Step 5: MainViewController.m – More Memory Management
In the viewDidUnload method add these lines to release the subviews you are going to link to this view in the UI.
- (void)viewDidUnload
{
[super viewDidUnload];
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
self.searchButton = nil;
self.activityIndicator = nil;
self.resultsTextView = nil;
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
// Return YES for supported orientations
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
Step 6: MainViewController.m – Update the startSearch Method to Fetch Server Data
The startSearch method is already linked to our searchButton from the last tutorial. You have the code below to get the UI in the state for loading in progress, to make a request to the data source on the server and take needed steps based on the success or failure of that connection.
Line 69 is calling a method you will add in the next step to set the UI state. Your constant LOADING_STATE was defined in the last step.
Line 71 creates a NSString for the URL. In a future lesson you are going to concatenate a parameter to send along with the URL and now this line is ready for that.
[ad name=”Google Adsense”]
The NSURLRequest object named req is created on line 74.
The instance object named urlConnection on line 77 is your NSURLConnection. It does all the work for communicating with the server.
You see on line 77 it is using our NSURLRequest req object and also sending the delegate message to make this class, self, its delegate. That means urlConnection can call NSURLConnection methods you add to this class to take action needed to handle notifications such as successful completion or failure.
For this lesson you need to add four methods to handle the NSURLConnection messages didReceiveResponse, didReceiveData, didFailWithError and connectionDidFinishLoading. You will do that just after creating our setUIState method.
Lines 79 to 83 handle a successful connection. A NSMutableData object is created and assigned to the class receivedData NSMutableData object that in later code you will convert to readable XML for display.
Should the connection fail, lines 85 to 97 display a UIAlertView with the error information. Generally you will want to change that to something more meaningful to the user.
#pragma mark - UI Interface
-(IBAction) startSearch:(id)sender
{
NSLog(@"startSearch");
// Change UI to loading state
[self setUIState:LOADING_STATE];
// Create the URL which would be http://YOUR_DOMAIN_NAME/PATH_IF_ANY_TO/get_usa_mountain_data.php?elevation=12000
NSString *urlAsString = [NSString stringWithFormat:@"%@", kTextURL ];
NSLog(@"urlAsString: %@",urlAsString );
NSURLRequest *req = [[NSURLRequest alloc] initWithURL:[NSURL URLWithString:urlAsString]];
// Create the NSURLConnection con object with the NSURLRequest req object
// and make this MountainsEx01ViewController the delegate.
urlConnection = [[NSURLConnection alloc] initWithRequest:req delegate:self];
// Connection successful
if (urlConnection) {
NSMutableData *data = [[NSMutableData alloc] init];
self.receivedData=data;
[data release];
}
// Bad news, connection failed.
else
{
UIAlertView *alert = [
[UIAlertView alloc]
initWithTitle:NSLocalizedString(@"Error", @"Error")
message:NSLocalizedString(@"Error connecting to remote server", @"Error connecting to remote server")
delegate:self
cancelButtonTitle:NSLocalizedString(@"Bummer", @"Bummer")
otherButtonTitles:nil
];
[alert show];
[alert release];
}
[req release];
}
Step 7: MainViewController.m – Create the UI State Setting Method setUIState
This is your custom method to set the states of the UI components.
The UIButton has an alpha and enabled property. For your UIButton searchButtonobject, the alpha value is toggled between 50% and 100% and its enabled state is also toggled between true and false.
The UIActivityIndicatorView has methods on lines 108 and 116 for starting and stopping their animation. There is also a property hidesWhenStopped that you will set in the UI design that handles the hiding and showing of our UIActivityIndicator.
-(void) setUIState:(int)uiState;
{
// Set view state to animating.
if (uiState == LOADING_STATE)
{
searchButton.enabled = false;
searchButton.alpha = 0.5f;
[activityIndicator startAnimating];
}
// Set view state to not animating.
else if (uiState == ACTIVE_STATE)
{
searchButton.enabled = true;
searchButton.alpha = 1.0f;
[activityIndicator stopAnimating];
}
}
Step 8: MainViewController.m – Clear Received Data When Connection Is Established
You learned about pragma marks in the last lesson. You have 4 NSURLConnection related methods to add and this mark on line 119 is an easy way in XCode to get to where you are placing them in the code.
The connection didReceiveResponse method occurs when a connection is established. When that happens, your data communication starts over. To be on the safe side of it occurring more than once, you clear the NSMutableData object from any previous incomplete attempts. Consider this a boilerplate block you always include in code.
Step 9: MainViewController.m – Accumulate Data Being Received
The NSURLConnection calls the connection didReceiveData method as data arrives and is ready for use. This is called as often as needed depending on the amount of data. The code you need here is to append the data received to your NSMutableData object.
The connection didFailWithError NSURLConnection call back method is where you handled the failure of the data transmission. In your case the code displays a UIAlertView with information from the NSError class error object passed in for learning purposes. A better user error should be considered for a released app.
You can use the NSError class to take different action based on the type of error. This is over the scope of this tutorial.
[ad name=”Google Adsense”]
There is some housekeeping such as calling the connection object release method and terminating the NSMutableData receivedData property.
The last line of code calls the sertUIState method with the ACTIVE_STATE value so the UI again appears available for another search.
This final method is called when all the data is successfully loaded. The NSMutableData receivedData object is converted to a NSString on line 147.
On line 151 the UITextView text property resultsTextView is set to the data as a NSString. One the previous line the same is displayed in the XCode console window.
After that the NSURLConnection connection variable is released and the receivedData NSMutable object is truncated.
Your last line has the same task of setting the UI back to a state that the user can search again.
Step 12: MainViewController.xib – Add the Activity Indicator
Open the MainViewController.xib in the Project navigator and drag an Activity Indicator from the Objects library in the bottom right to place it under the button with the Search label.
Activity Indicator View
Be sure you keep the Activity Indicator you placed selected while completing the next three tasks.
Select the size panel in the top right and set the x and y values as shown here.
Activity Indicator Size Inspector
Select the Properties inspector and set the style to Large White and check the Behavior Hides When Stopped.
Activity Indicator Properties
In the Connections Inspector panel drag from the “New Referencing Outlet” in the “Referencing Outlets” group to the File Owner’s icon and release the mouse. Then select activityIndicator. You defined activityIndicator in your MainViewController code as a UIActivityIndicatorView.
Here is how the Connections Inspector will look when you are done.
Activity Indicator Connection Inspector
Step 13: MainViewController.xib – Add the TextView
You are adding a TextView that in a future tutorial you replace with a TableView. So there is no need to get heavily invested in how it looks.
Now drag a TextView from the Objects library in the bottom right to place it under the button with the Activity Indicator.
Text View
Keep the TextView you placed selected while completing the next two tasks.
Select the size panel in the top right and set the X, Y, Width and Height values as shown here.
Text View Size Inspector
In the Connections Inspector panel drag from the “New Referencing Outlet” in the “Referencing Outlets” group to the File Owner’s icon and release the mouse. Then select resultsTextView defined activityIndicator in your MainViewController code as a UITextView.
Your Connections Inspector should appear as follows.
Text View Connection Inspector
Step 14: MainViewController.xib – Review the Changes
First you can check the layout looking as follows.
MainViewController Design Window Complete
If you select the Connections inspector and then the File Owner’s icon you should see the following. If so you are good to go.
File Owner’s Connection Inspector
Step 15: PHP Server Script or XML File
This IPhone app loads XML data from a server. The Source Download includes an XML file you can use for this lesson.
However, the longer term of the Tutorial will request a query of the data from the server and at that point you can use the PHP script provided. I suggest you use that with this lesson so you are set up. But if you do not have a PHP script enabled server, you can use the XML file for a few more lessons.
Detailing how the PHP script works is beyond the scope of this tutorial. However what you should know it reads a CSV file. Here is a snippet of the file. The name used in the PHP script is mountain_data.csv.
Mount McKinley,20320, 63.0690,-151.00063
Mount Saint Elias,18008,60.2927,-140.9307
Mount Foraker,17400,62.9605,-151.3992
Then the PHP script returns XML. This is a snippet of what the XML data looks like when returned.
This is the first lesson for our Mountains of the USA tutorial. The basic goal for this lesson is to create a NavigationController to manage the two screens.
Main Screen
We will not create the second screen where we will show the map for the mountain but we are set up to add the screen in a future lesson.
Also we are going to add a search button plus the method to handle the touch up inside event for the search button. We will test that code out before going on to the next lesson using NSLog to the console window.
To start off create a Window-Based Application project for IPhone in XCode. This is a bare bones template.
You will add the UINavigationController in the next step.
I named my project USAMountainsTutorial01.
Choose IPhone and we are not using Core Data or Include Unit Tests so uncheck if necessary.
Company identifier can be anything for testing in the simulator but will need a proper identifier from your Apple developer account to test on an IPhone. This is beyond the scope of this tutorial so we will just use the simulator. However sound advice is to test on all target devices often. I have tested all these tutorials on my Verizon IPhone 4.
Step 2: Create UIViewController for the Main View
The next step is to add a UIViewController. In the project navigator, select the project group name with the folder icon and choose File and then New File… with the main or shortcut menu.
You will see this choose a template dialog window. Select the UIViewController and choose Next.
Leave the subclass as UIViewController. Uncheck “Targeted for IPad” and check “With XIB for user interface”. Choose Next.
I named the file MainViewController and placed it in the folder for the project and in the group created by XCode 4. Both are named USAMountainTutorial01. Note the “Add to targets:” bears the same name USAMountainTutorial01 and we leave that checked. Targets represent the data for where the app will run and the default will handle the simulator for us.
If your new files end up in a different place than you expect, you can move files with drag and drop in the project navigator pane.
Step 4: MainViewController.m – Add the startSearch method
Select the MainViewController.m in the project navigation window on the left and add lines 33 and 49 to 53.
Line 33 provide a dynamic updating of the top navigation bar for the UINavigationController. An alternative is to set this in the UI properties for this view.
An output to the console window using NSLog on line 52 is all we need for the search button at this point.
Line 49 is a way to provide navigation in your code window. XCode 4 provides a navigation bar above the code and the these pragma marks will appear in the list. As code builds up, you can put related coded together under a pragma mark and use the navigation bar to quickly locate the code versus scrolling. I like to have a pragma mark for the IBAction methods because often I am thinking what happened when the user did this or that in the UI and so all the code is in that one group. We will add more pragma marks for the table view, network communication and XML parsing in later tutorials.
#import "MainViewController.h"
@implementation MainViewController
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
}
return self;
}
- (void)dealloc
{
[super dealloc];
}
- (void)didReceiveMemoryWarning
{
// Releases the view if it doesn't have a superview.
[super didReceiveMemoryWarning];
// Release any cached data, images, etc that aren't in use.
}
#pragma mark - View lifecycle
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
[self setTitle:@"USA Mountains Lesson 1"];
}
- (void)viewDidUnload
{
[super viewDidUnload];
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
// Return YES for supported orientations
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
#pragma mark - UI Interface
-(IBAction) startSearch:(id)sender
{
NSLog(@"startSearch");
}
@end
Step 5: USAMountainsTutorial01AppDelegate.h – Add the UINavigationController Object
Now you can update the application delegate header to work for a Navigation Controller by adding line 7 shown below. The object name is navController and we will see that when we tie it in using the Interface Builder.
Step 6: USAMountainsTutorial01AppDelegate.m – Add the navController object to the Application Window
For the implementation, add the highlighted lines 4 and 9 below. Simply put, the root controller for the application window will be our navController object.
The above steps were done first so we work on the application interface so these names startSearch and navController will be available to connect.
#import &lt;UIKit/UIKit.h&gt;
@synthesize window=_window;
@synthesize navController=_navController;
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// Override point for customization after application launch.
self.window.rootViewController = self.navController;
[self.window makeKeyAndVisible];
return YES;
}
Step 7: MainWindow.xib.m – Add a NavigationController Object
Open the MainWindow.xib file and drag a Navigation Controller object from the object library to the design window. I like placing it to the left but you can place it anywhere.
This is how the interface window will appear.
Navigation Controller Added
Step 8: MainWindow.xib.m – Set Navigation Controller View to MainViewController
Select the View object in the Navigation Controller:
Set Navigation Controller View To MainViewController
Open the Identity Inspector and change the class from UIViewController to MainViewController. MainViewContoller is a subclass of UIViewController when you created it in Step 2.
Set Navigation Controller View To MainViewController
Step 9: MainWindow.xib.m – Connect the NavigationController Object To The Application Delegate
Show the Utilities panel on right which is a small group of icons labeled View on the top right corner of XCode 4.
Click the Connections Inspector in Utilities and the NavigationController icon in the related files panel on left. Now you can drag from the “New Referencing Outlet” to the USAMountainTutorial01AppDelegate icon in the related files panel on left and unclick over it. Then select navController which is the name we gave our NavigationController in the USAMountainTutorial01AppDelegate.
Here is what the Connections Inspector with the NavigationController selected looks like if you succeeded.
Referencing Outlet Set to USAMountainsTutorial01AppDelegate
Step 10: MainViewController.xib – Add the Search Button
Find the Round Rect Button icon in the objects panel in bottom right.
Round Rect Button
Drag from the objects window a Round Rect Button to the view.
MainViewController.xib Design Window Complete
You can select the Search button. Then select the Attributes inspector in the top right row of icons and change the title to Search. You could also do that by clicking into the button.
Then select the Size Inspector in the top right row of icons to match my size and position which x=20, y=60, Width=280 and Height=32.
[ad name=”Google Adsense”] Step 11: MainViewController.xib – Connect Search Button to the startSearch Method
Select the Connections Inspector in the top right row of icons and drag from the Touch Up Inside to the File Owner’s Icon in the Files panel on the left. Release the mouse and select the startSearch method. This is what the Connections Inspector for the Search button looks like when you are done.
Round Rect Button Outlets
Step 12: Test In The IPhone Simulator
Now you can test using the Simulator. Use the mouse to click the Search Button to simulate a Touch Up Inside and at the bottom middle of XCode the Console window will show the startSearch method we added in step 4 on line 52 has executed.
I am reading Social Media Marketing by Li Evans for a book group. The book is a great overview to the social media marketing field. This is a log of what I find interesting in the book and what might come out of the book group. This is not an endorsement of the book, but if you need a guide to social media marketing this looks both pithy and comprehensive.
Are there software tools to help you monitor conversations about your product or company? “You Need to Monitor the Conversations about Your Company”, page 34 lists Google Alerts, Radian6 and Techrigy.
What are the social media audience types? Chapter 5 “Know Who Your Audience Is and What They Are Doing” lists five social media audience types : creators, critics, collectors, joiners, spectators and inactives.
What is the Groundswell Profile Tool? Chapter 5 “Know Who Your Audience Is and What They Are Doing” introduces the tool and its use to build audience information.
Effective social marketing involves research, strategy, planning, and measuring. Page 100.
Just because your competition has a blog does not mean you need to develop one right way. You might find that mimicking your competitors’ social media marketing efforts does not result in the same gains (or the same pitfalls) for your company. If you are focused on competing with your competitors, your real audience might be elsewhere talking about your company — and you will miss it. Page 101.
Why does a blog with a seemingly low readership warrant careful attention? Page 94 reveals the hidden powerful reader or subscriber plus five techniques to better quantify giving attention to a blog site including Google page ranking, activity in posting, search engine ranking for keywords, Technorati ranking and comments on the blog or other social media attached to the blog.
What is a key source to social media content? Your audience. See page 228.
Why Interns Make Coffee & Not Social Media Strategy? There are six answers in Chapter 21: lack brand knowledge, uniformed on your ethics or philosophies, no vested interest, Facebook wizards does not mean marketing wizards, gone before you know it and may not relate to your target market.
By the way Li, this is a test to see if you are monitoring this social media conversation.
[ad name=”Google Adsense”]
Welcome to the tutorial on creating the Mountains of the USA IPhone using XCode. The links to the completed lessons are located at the end of this post.
The tutorial examples uses the UINavigationController to manage the two screens. I built the first tutorial using a Window-Based Application project and then added the UINavigationController rather than use a Navigation Based project. This helped me understand the wiring of controllers to their interface counterparts and I believe provided a bit more flexibility. I learned to do this with Beginning iPhone 4 Development: Exploring the iOS SDK which was crucial to cracking the mysteries in writing IPhone apps.
The app will parse XML data containing the name, elevation, latitude and longitude of the highest 100 mountains in the USA. The XML data is loaded from a web server PHP script that allows for returning all 100 mountains or a selection above a specific elevation in feet. Then the location of any mountain is displayed in a map view.
Search Screen
Detail Screen
The first screen contains the user input to search for USA mountains based on their elevation and displays the results in a UITableView. Touching a mountain the UITableView opens the second screen where you can see the location of the mountain in a MapView with an MKAnnotationView showing the pin location on the map and a title.
Prerequisites: This is designed for beginners who have experimented with XCode and IPhone projects and who want work through an example that connects concepts into a useful app.
You need to have XCode installed. I used XCode 4 and IOS 4.2 for the tutorial projects. You can use XCode 3 however many screens and menus have changed for the better I might add which will make you dig a bit to find a panel or window. Otherwise the functionality you need is the same.
[ad name=”Google Adsense”]
You need to know how to build a basic hello world XCode IPhone project and run in the Simulator. You should have some basic practice using Interface Builder and adding IBOutlets and IBActions in Objective C.
You need to be a practicing programmer in some language. You do not need to be a ninja. A basic understanding of Objective C is helpful but if you have programming background, you should pick up on the Objective C nuances.
IOS Classes Used: In the tutorial you use the UINavigationController, UITableView, UITableViewCell, UITableViewCellStyleDefault, MKMapView, MKAnnotationView, MKPinAnnotationView, NSNumber, NSNumberFormatter, NSNumberFormatterDecimalStyle, UIActivityIndicatorView, UISlider, NSMutableData, NSMutableArray, UIButton, NSString, NSUInteger, CLLocationCoordinate2D, UIAlertView and NSXMLParser.
[ad name=”Google Adsense”]
Currently there are nine lessons and this will provide a table of contents for them as they get posted. You can register below and you will get notifications when new lessons are posted.
This XCode example like the Titanium version simply sends text entered on the phone and returns it with the word “Hello” prefixed. It uses HTTP and the POST protocol. The server app is a simple PHP script. First Launch
This is the IPhone screen when the application first runs.
The text input will show the keyboard when typing. The send button closes the keyboard and starts the HTTP session. There is no error handling should the connection fail or the server fail.
This is an asynchronous example. So other operations could occur while the request to server is in process. For example the send button can be pressed over and over. So an activity indicator would be a nice improvement.
I used the IOS “View-based Application” when creating a new project in XCode. All the coding is in the AnimatedDieFaceViewController UIViewController.
NSUrlClientServerURLVariablesEx01ViewController.h
This sets out the interface for the view controller.
Line 2 contains a constant for the PHP script that received the name and returns the response. You need to replace the YOURDOMAIN and the PATH_IF_ANY_TO/ for your project. The php script is included in the download and is also listed at the end of this post.
The responseTextView is updated with the response from test02.php.
The receivedData NSMutableData object handles the byte data that will come from the server.
[ad name=”Google Adsense”]
The two IBOutlet variables for the controller to access UI components. The controller needs to read the user input from nameTextField and needs to update responseTextView with data received from the server.
The one IBAction method kicks off the client server process with the send button.
This sets out the interface for the view controller. Five methods are used to handle the request to and response from the server.
The makeRequest method initiates the request to the server is on line 10.
First Launch
Four methods on lines 91, 99, 106 and 127 are required because line 27 makes this controller the delegate for NSURLConnection.
The makeRequest method on line 10 is fired from the send button. It performs two tasks. One is assembling the parts of the nsMutableURLRequest object such as the protocol and name value pair parameter. The POST protocol is set on line 18 and line 20 creates the name=whatever_the_user_enters name value pair needed for the server script. The second task is making NSURLConnection and testing if it can work.
Lines 91 – 97 contains the connection didReceiveResponse method. This is needed to clear the data received because of the nature of multiple times it can be called.
The connection didReceiveData method on line 99 – 104 starts collecting the byte data received over the network.
If there is a problem with the connection the connection didFailWithError method occupying lines 106 to 125 is called. Here you can create a better UIAlertView and perhaps relegate the error codes to a trace log.
Finally should everything go well and all the data is received, the connectionDidFinishLoading method on lines 127 – 139 updates the UITextView with our results.
//
#import "NSUrlClientServerURLVariablesEx01ViewController.h"
@implementation NSUrlClientServerURLVariablesEx01ViewController
@synthesize nameTextField;
@synthesize responseTextView;
@synthesize receivedData;
// Send button Touch Up Inside
- (IBAction)makeRequest
{
NSLog(@"%s", __FUNCTION__);
//Allocate NSURL object
NSURL *nsURL = [[NSURL alloc] initWithString:kTextUrl];
// Allocate NSMutableURLRequest
NSMutableURLRequest *nsMutableURLRequest = [[NSMutableURLRequest alloc] initWithURL:nsURL];
// Set HTTP method to POST
[nsMutableURLRequest setHTTPMethod:@"POST"];
// Set up the parameters to send.
NSString *paramDataString = [NSString stringWithFormat:@"%@=%@", @"name", nameTextField.text];
NSLog(@"%s - paramDataString: %@", __FUNCTION__, paramDataString);
// Encode the parameters to default for NSMutableURLRequest.
NSData *paramData = [paramDataString dataUsingEncoding:NSUTF8StringEncoding];
// Set the NSMutableURLRequest body data.
[nsMutableURLRequest setHTTPBody: paramData];
// Create NSURLConnection and start the request.
NSURLConnection *nsUrlConnection=[[NSURLConnection alloc]
initWithRequest:nsMutableURLRequest
delegate:self];
// Successful connection.
if (nsUrlConnection) {
NSMutableData *data = [[NSMutableData alloc] init];
self.receivedData=data;
[data release];
}
// Unsuccessful connection.
else {
responseTextView.text = [NSString stringWithFormat :@"Unable to make connection!"] ;
}
// Clean up
[nsURL release];
[nsMutableURLRequest release];
// Close keypad.
[nameTextField resignFirstResponder];
}
- (void)dealloc
{
[nameTextField release];
[responseTextView release];
[receivedData release];
[super dealloc];
}
- (void)didReceiveMemoryWarning
{
// Releases the view if it doesn't have a superview.
[super didReceiveMemoryWarning];
// Release any cached data, images, etc that aren't in use.
}
#pragma mark - View lifecycle
/*
// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad
{
[super viewDidLoad];
}
*/
- (void)viewDidUnload
{
[super viewDidUnload];
// Release any retained subviews of the main view.
self.nameTextField = nil;
self.responseTextView = nil;
self.receivedData = nil;
// e.g. self.myOutlet = nil;
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
// Return YES for supported orientations
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
#pragma mark -
#pragma mark NSURLConnection Callbacks
// Connection response.
- (void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response
{
NSLog(@"%s - Response Code: %d\n", __FUNCTION__, [(NSHTTPURLResponse *)response statusCode]);
NSLog(@"%s - Content-Type: %@\n", __FUNCTION__, [[(NSHTTPURLResponse *)response allHeaderFields] objectForKey:@"Content-Type"]);
// Clear the NSMutableData receivedData.
[receivedData setLength:0];
}
// You got data.
- (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data
{
NSLog(@"%s", __FUNCTION__);
// Append the data to our NSMutableData receivedData.
[receivedData appendData:data];
}
// Sorry Dude, connection failed gloriously.
- (void)connection:(NSURLConnection *)connection didFailWithError:(NSError *)error
{
NSLog(@"%s", __FUNCTION__);
// Create noxious error message.
NSString *errorMessage = [[NSString alloc]initWithFormat: @"Connection failed! Error - %@ (URL: %@)", [[error userInfo] objectForKey:NSURLErrorFailingURLStringErrorKey]];
// Throw up a noxious error message.
UIAlertView *alert = [[UIAlertView alloc]
initWithTitle:@"Sorry Dude!"
message:errorMessage
delegate:self
cancelButtonTitle:@"Close"
otherButtonTitles:nil];
[alert show];
// Clean up
[connection release];
self.receivedData = nil;
[alert release];
[errorMessage release];
}
// Finally the data is completely loaded.
- (void)connectionDidFinishLoading:(NSURLConnection *)connection
{
NSLog(@"%s", __FUNCTION__);
// Encode received data to NSUTF8StringEncoding
NSString *receviedDataAsString = [[NSString alloc] initWithData:receivedData encoding:NSUTF8StringEncoding];
NSLog(@"%s - receviedDataAsString: %@", __FUNCTION__, receviedDataAsString);
// Show received data in the responseTextView.
responseTextView.text = receviedDataAsString;
// Clean up.
[receviedDataAsString release];
[connection release];
self.receivedData = nil;
}
@end
[ad name=”Google Adsense”]
NSUrlClientServerURLVariablesEx01ViewController.xib UIView
This is the layout of the interface.
There is another UIView behind the UILabel, UITextField and UIButton. The UIView background is set to a light gray to give a panel effect.
The UITextField is preloaded with a value.
Below the UIView at the top is a UITextView. It is also preloaded with a message on how to use the app.
NSUrlClientServerURLVariablesEx01ViewController IBOutlets and IBActions
The IBOutlets are for the UITextField and the UITextView so their properties in the controller code can be read or changed. The UITextField is read on line 20. The UITextView is changed on line 134.
The view outlet was set when I choose the IOS View-based Application to create the XCode project.
The IBActions are for the one UIButton when the Touch Up Inside event is initiated. You can see the method makeRequestlinked to the UIButton.
[ad name=”Google Adsense”] echo_hello.php – Server Script
Very simple echo script. The name identifier on line 20 of NSUrlClientServerURLVariablesEx01ViewController.m is picked up in the PHP $_REQUEST object as you might expect. The value of $_REQUEST[‘name’] is appended to ‘Hello’ plus a space and returned without any data markup. Nothing very fancy.
Mobile development products are springing up forming a new industry. These are called mobile frameworks, development tools and mobile kits for example. Some embrace an enterprise level and some just client side. The products are aimed at the need to leverage skills of developers to build applications for devices cheaper and quicker.
To help you keep up, I am maintaining this list as the industry unfolds and will update as I find new products. There are links to the web site and to product overview videos or demo videos.
There is no particular ranking to the list. However those vendors that have clear links to overview videos and have a good hello world or the like video are listed first. It shows enthusiasm to communicate and is a criteria for any comparisons. Other than that the list is somewhat in the order I discovered the vendor. It is important for all vendors to know that ease of use depends on the simple atomic how to videos to win minds of developers. The faster you get into the mind of a developer the more likely you win that mind.
Cabana This is built in HTML5 and provides a drag and drop wireframe type of app development tool. This visual approach also include RESTful JSON and XML APIs, and you can bind them to your user interface. It appears Cabana handles store distribution and updates are automatic which may indicate you are really creating a web app. Also they have a Fan Page Mobilizer tool that lets you take your Facebook Fan Page and convert it to an app.
Marmalde Not only promising a cross deployment solution but includes converting IOS apps to Andriod and covers Kindle Fire. Here is their line: “Marmalade is the world’s most powerful SDK for the creation of richer apps and games on iOS, Android and other platforms. Marmalade’s unique technical architecture offers maximum performance through true native code. “
AMPchroma from Antenna Software. AMPchroma is the first cloud platform for managing the entire mobile lifecycle. All design, development, management, and analytics functionality are presented as a suite of software modules accessible from a user-friendly web interface.
Kendo UI | Demo | Kendo UI Mobile helps developers build apps and sites for mobile devices that always look native. On iOS, Kendo UI Mobile widgets look native to iOS. On Android, Kendo UI Mobile widgets look native to Android. Automatically. Kendo UI Mobile detects the device and applies the proper styling.
Appcelerator Titanium | Video Demo | A free and open source application development platform, Titanium lets you create native mobile, tablet and desktop application experiences using existing web skills like Javascript, HTML, CSS, Python, Ruby, and PHP.
Red Foundry | Video Demo | Creating, developing mobile IPhone app is free as is publishing yourself for apps started withing a limited time offering. Publishing the app through Redfoundry has a monthly cost but they handle all the details. Android expected Q2 2011.
RhoMobile | Video Demo | Rhodes is Ruby-based framework that enables the creation of native apps for major smartphone operating systems (iPhone, Windows Mobile, RIM, Symbian and Android). Developers can create native iPhone and iPad apps from a Windows-based PC using in HTML, Javascript and Ruby.
appMobi | Video Overview | Video Demo. HTML5, CSS and JavaScript to create mobile apps using their cloud. Uses WebKit based MobiUs browser to access native phone functionality.
jQ.Mobil JQuery written from the ground up for mobile, HTML5 on IOS and Andriod device. In beta as of 1/18/12.
Trigger.IO/ HTML5, CSS and JavaScript to create mobile apps free while in beta. Write once, submit to PhoneGap and download all the supported platforms ready for submission. Supported platforms currently IPhone Andriod, Symbian and Palm.
PhoneGap HTML5, CSS3 and JavaScript to create mobile apps and the Trigger.IO service converts to native apps while retaining deployment to web browsers. Free conversion service has Trigger.IO branding on splash screen and in the description; and free conversion serviceis limited to free apps. Monthly fee service extends to paid apps and drops the in app Trigger.IO branding.
Mobile Nation | Video Overview | Video Demos. Design, build and publish mobile apps for iPhone and Android devices using their web based environment. Use a QR code, their installed app and your device camera to load to your testing phone. Looks like a corker.
MoSync | Video Demo | Open source SDK using C++ and a set of powerful APIs, you can harness the full power of modern smartphone platforms while still supporting Java ME devices using a single codebase. MoSync produces real native IPhone and Android applications, packaged and ready for distribution in each platforms’ native installation format.
Jo HTML Mobile App Framework | Video Demo | JavaScript framework for HTML5 capable browsers and devices. It was originally designed to work on mobile platforms as a GUI and light data layer on top of PhoneGap. Since its creation, Jo has also been tested successfully as a lightweight framework for mobile browsers, newer desktop browsers, and even Dashboard widgets.
Senica Touch This is a Javascript library that produces the native look and feel of mobile devices. You would integrate with PhoneGap for device features like Accelerometer
AppMakr No Coding Required. Use the templates for loading data feeds such as blogs, video and photos. Customize with PhoneGap. Look and feel all customized from menu systems. Handles push notification service. Will publish using your developer account. Has a portfolio of accounts that have used this to publish apps.
Tiggr This is a cloud based development tool with a software subscription service.
StackMob Offers a mobile development sandbox environment with backend api for mobile apps remote data and remote services.
JQTouch A JQuery plugin for mobile web development.
JQuery Mobile HTML5-based user interface system for all popular mobile device platforms and built on the JQuery platform.
Local Mobile Geared towards businesses needing to reach customers versus towards developers such as with SMS, QR and Ecommerce. They do all the work for hosting, at a fee, the app.
AppFurnance is a set of online tools that help you to create all kinds of apps without having to be a programming genius. It gives you control to design interfaces, create location-aware experiences and, if you want to take it further, add your own JavaScript and produce exactly what experience you want.
Codiqa Drag and drop approach to prototype, build, and manage fully functional mobile web apps with jQuery Mobile.
Tiggzi HTML5 CSS PhoneGap cloud-based mobile app builder.
In the TableView you will display the mountain names along with their elevations.
![](https://lh5.googleusercontent.com/_e5pwU0LJbN8/TcxTpBN00xI/AAAAAAAAF6o/9-6i6kBtXUU/s400/USAMountainTutorial02MainViewControllerActivityIndicatorSize.png")
![](https://lh4.googleusercontent.com/_e5pwU0LJbN8/Tcx7QJbvKGI/AAAAAAAAF68/e1QRO4bEWm0/s400/USAMountainsTutorial02MainViewControllerActivityIndicatorProperites%20.png")
![](https://lh4.googleusercontent.com/_e5pwU0LJbN8/TcxWAczW_4I/AAAAAAAAF60/h2rIEXKhxkk/s400/USAMountainTutorial02MainViewControllerActivityIndicatorConnections.png")
This is a duplication of a Titanium example I created February 27th: see 
Mobile development products are springing up forming a new industry. These are called mobile frameworks, development tools and mobile kits for example. Some embrace an enterprise level and some just client side. The products are aimed at the need to leverage skills of developers to build applications for devices cheaper and quicker.