[Update 4/27/2011. I added this same example done in XCode 4 in case you want to compare the work. See XCode IPhone Client Server Echo Hello Example Using PHP
Started my self education process for mobile development. My foothold app was to have a client server communication from the phone to a web server and back. 
I first did one with XCode and Objective C. Then I tried the same using Titanium from Appcelerator and is the subject of this post. The learning curve with IPhone is steep but doable as there are plenty of open resources available. With Titanium, the field of learning choices is much narrower, however the learning curve bent down to level where a Javascript and JQUERY UI type of developer will feel grounded.
This first app is a real minimalist example. It 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.
Titanium is designed to develop for both the Android devices and IPhone devices. You can use the same source code.
This app runs on IPhone simulator. It also runs on the Android simulator but the UI components overlay each other and size differently from the IPhone. So I have work to do there to unravel the differences. There are ways to detect the device and make choices. Its faster to test IPhone in Titanium. Android is painfully slow.
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 the screen after the Send button was pressed.
app.js – The Application Script UI Components
This is the application script. I created the view, input_view, on line 5 to contain the Label, TextField and Button respectively named name_lbl, name_tf and send_btn. Using a container helps simplify the position of these. I added a TextArea named response_ta to the window on line 55.
// Default background.
Titanium.UI.setBackgroundColor('#ccc');
// Application window
var app_win = Titanium.UI.createWindow();
// A view container for name_lbl and name_tf.
var input_view = Ti.UI.createView({
top:0,
height:40,
width:'100%',
backgroundColor:'#999'
});
// Label for the name_tf.
var name_lbl = Titanium.UI.createLabel({
color:'#fff',
text:'Name: ',
top:5,
left:0,
height:30,
textAlign:'right',
right:'80%'
});
// Add name_lbl to input_view.
input_view.add( name_lbl );
// Name input TextField
var name_tf = Ti.UI.createTextField(
{
width:'60%',
backgroundColor:'#fff',
color:'#000',
top:5,
right:'20%',
height:30,
value:'Dude Yo'
});
// Add name_tf to input_view.
input_view.add(name_tf);
// Button to send name_tf to server.
var send_btn = Ti.UI.createButton({
title:'Send',
width:"16%",
height:30,
top:5,
right: 5
});
// Add send_btn to app_win.
input_view.add(send_btn);
// Label to show server response.
var response_ta = Titanium.UI.createTextArea({
color:'#000',
value:'Enter Your Name and Press Send',
font:{fontSize:20, fontFamily:'Helvetica Neue'},
editable:false,
top:80
});
[ad name=”Google Adsense”]
app.js – The Application Script UI Button Listener and HTTPClient
Line 63 sets up a listener to the send_btn click event. It also creates an anonymous function to process the click event. Inside on line 66 the name_tf focus is removed to close any open keyboard on the phone.
Line 68 creates the HTTPClient object. Line 70 provides the handler for the HTTPClient onLoad event. In the onLoad event handler we set the response_ta TextArea with the HTTPClient responseText property.
Line 75 you need to modify with your own url for example http://YOUR_DOMAIN/SCRIPT_NAME. Line 78 sends the request and line 79 shows how to set up the name value pairs.
The remainder of the script is attaching the View and the TextArea objects to the Window.
// Handler for send_btn click event.
send_btn.addEventListener("click",function(){
Ti.API.info('app.js - send_btn.addEventListener');
// Remove focus from name_tf. Closes the keyboard for name_tf.
name_tf.blur();
// Create a HTTPClient.
var xhr = Ti.Network.createHTTPClient();
// Handler for xhr onLoad event.
xhr.onload = function(e) {
Ti.API.info('app.js - xhr.onload - receiving ' + xhr.responseText + ' from server');
response_ta.value = xhr.responseText;
};
// Specify http protocols and url.
xhr.open('POST', '{PUT_YOUR_URL_TO_SERVER_SCRIPT_HERE}');
// Send data to server.
Ti.API.info('app.js - sending ' + name_tf.value + ' to server');
xhr.send({
name:name_tf.value
});
});
// Add input_view to app_win.
app_win.add( input_view );
// Add response_ta to app_win.
app_win.add(response_ta);
app_win.open();
[ad name=”Google Adsense”]
echo_hello.php – Server Script
Very simple echo script. The name identifier on line 79 of app.js 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.
<?php echo "Hello " . $_REQUEST['name'] . "!"; ?>