Newbie Tuesday: WebView with remote HTML

Published on February 14, 2012 by Kevin Whinnery (Director of Developer Relations)

The following is the latest entry in a series of Tuesday blog posts covering basic topics in Titanium and JavaScript development.

A common need in Titanium applications is to display the content of a remote web page inside a web view. Maybe it’s a blog post linked to in an RSS feed or your own website – in any event, you often need to embed that content directly in your app, rather than launching a web page in the device’s browser.

In order to do this effectively, you should be sure to give the user feedback as the remote site is loading, so they know your app is doing something. This is especially important for web pages that are not mobile optimized, and tend to load up slowly over a mobile data network. How you create this UI will vary greatly depending on the nature of your app, but the events you’ll listen for on the web view will be the same. The web view has lifecycle events that will clue you in to the current progress of a web page as it loads.

Let’s create a simple application with a web view that will load the url given to it in a text field:

var w = Ti.UI.createWindow({
	backgroundColor:'white'
});
 
var form = Ti.UI.createView({
	height:60,
	top:0,
	backgroundColor:'#787878'
});
w.add(form);
 
var urlField = Ti.UI.createTextField({
	value:'http://www.cnn.com',
	top:5,
	left:5,
	right:120,
	bottom:5,
	borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED
});
form.add(urlField);
 
var btn = Ti.UI.createButton({
	width:110,
	right:5,
	top:5,
	bottom:5,
	title:'Go'
});
form.add(btn);
 
var webView = Ti.UI.createWebView({
	url:'http://www.cnn.com',
	top:60
});
w.add(webView);
 
w.open();

Which will look like this on iOS and Android:

Now, let’s expand that application with a modal loading state we’d like to display as the page loads by adding an opaque view to the main window:

var overlay = Ti.UI.createView({
	backgroundColor:'#cdcdcd',
	opacity:0.75
});
overlay.add(Ti.UI.createLabel({
	height:'auto',
	width:'auto',
	text:'Loading...',
	color:'#787878',
	font: {
		fontSize:24,
		fontWeight:'bold'
	}
}));
w.add(overlay);

Which should look like:

Next, let’s add some logic around the button click and the web view’s “load” event to toggle the overlay.

btn.addEventListener('click', function() {
	urlField.blur();
	webView.url = urlField.value;
	overlay.show();
});
 
webView.addEventListener('load', function() {
	overlay.hide();
});

Our little web browser is now complete! Drop this complete sample in app.js to see it in action:

var w = Ti.UI.createWindow({
	backgroundColor:'white'
});
 
var form = Ti.UI.createView({
	height:60,
	top:0,
	backgroundColor:'#787878'
});
w.add(form);
 
var urlField = Ti.UI.createTextField({
	value:'http://www.cnn.com',
	top:5,
	left:5,
	right:120,
	bottom:5,
	borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED
});
form.add(urlField);
 
var btn = Ti.UI.createButton({
	width:110,
	right:5,
	top:5,
	bottom:5,
	title:'Go'
});
form.add(btn);
 
var webView = Ti.UI.createWebView({
	url:'http://www.cnn.com',
	top:60
});
w.add(webView);
 
var overlay = Ti.UI.createView({
	backgroundColor:'#cdcdcd',
	opacity:0.75
});
overlay.add(Ti.UI.createLabel({
	height:'auto',
	width:'auto',
	text:'Loading...',
	color:'#787878',
	font: {
		fontSize:24,
		fontWeight:'bold'
	}
}));
w.add(overlay);
 
btn.addEventListener('click', function() {
	urlField.blur();
	webView.url = urlField.value;
	overlay.show();
});
 
webView.addEventListener('load', function() {
	overlay.hide();
});
 
w.open();

Hope that helps!

This entry was posted on Tuesday, February 14th, 2012 at 8:50 pm and is filed under Newbie Tuesday, Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

ransom says:

February 15, 2012 at 10:15 am

Would be a nice touch to have a back button, perhaps that disappeared when you clicked the url text box & forward if you went back that also disappeared if you clicked the url bar.

User’s will get frustrated if they cant do things they are used to.