Appcelerator Blog

The Leading Resource for All Things Mobile

Newbie Tuesday: WebView with remote HTML

0 Flares 0 Flares ×
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!
0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×

Sign up for updates!

Become a mobile leader. Take the first step to scale mobile innovation throughout your enterprise.
Get in touch
computer and tablet showing Appcelerator software
Start free, grow from there.
0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×