Part 4 - FlickrView: Implementing SettingsView - Archived Tutorial

This tutorial is for Dojo 1.9 and may be out of date.

Part 4 - FlickrView: Implementing SettingsView

In the previous part, FlickerView: Implementing FeedView, we implemented the feed view and we are now able to use data from a JSON request to update our ScrollableView with templated ListItems. This part will focus on the Settings view to get and set values from various input widgets (TextBox, Switch, RadioButton) and use Transition Events.

SettingsView properties

We just need to keep some widget references, as well as the language currently selected:

return declare([ScrollableView], {
	feedView: '',
	tagInput: '',
	selectSwitch: '',
	selectedLanguage: '',
//...

SettingsView startup

Same as what we did in FeedView startup method: we call the parent method and initialize our properties:

startup: function () {
	this.inherited(arguments);
	this.feedView = registry.byId("feed");
	this.tagInput = registry.byId("tags");
	this.selectSwitch = registry.byId("select");
	// ...
}

We also take the opportunity to add some useful getters and setters to our SettingsView class:

 setTags: function (tags) {
	this.tagInput.set('value', tags);
},
getTags: function () {
	return this.tagInput.get('value');
},
setTagMode: function (tagmode) {
	this.selectSwitch.set('value', (tagmode === "all") ? "on" : "off");
},
getTagMode: function () {
	return (this.selectSwitch.get('value') === "on") ? "all" : "any";
}

dojox/mobile/switch has 2 states: on or off. We arbitrarily choose to map the tag mode ALL to the on state and ANY to the off state.

Continuing on the startup method, we create a handler to retain the selected language when user clicks on a radio button. To do that we rely on a powerful feature of dojo/on: even delegation with selector.

// handler to record the selected feed language
this.on("[name=feedLanguage]:click", lang.hitch(this, function (e) {
	this.selectedLanguage = e.target.value;
}));

Is it done?

Add a click handler on the Done button, such as:

programmatically perform the transition back to the Feed view
force a refresh of the view only if the user changed at least one setting

// handler to update search query parameters when done button is selected
registry.byId("doneButton").on("click", lang.hitch(this, function () {
	// we are done with the settings: transition to FeedView
	this.performTransition("feed");
	// check if anything changed in the setting view
	if (this.getTags() !== flickrview.QUERY.tags ||
		this.getTagMode() !== flickrview.QUERY.tagmode ||
		this.selectedLanguage !== flickrview.QUERY.lang) {
		// update QUERY
		flickrview.QUERY.tags = this.getTags();
		flickrview.QUERY.tagmode = this.getTagMode();
		flickrview.QUERY.lang = this.selectedLanguage;
		// force FeedView list refresh
		this.feedView.refresh()
	}
}));

As we manually trigger the transition, we have to update our HTML to tell the view not to automatically transition, with moveTo:'#':

<!-- Settings view -->
<div id="settings"
	data-dojo-type="flickrview/SettingsView">
	<div data-dojo-type="dojox/mobile/Heading"
	data-dojo-props="fixed: 'top', label: 'Settings'">
		<span data-dojo-type="dojox/mobile/ToolBarButton"
			id="doneButton"
			data-dojo-props="label:'Done', moveTo:'#', transition:'none'" style="float:right;"></span>

One last step and the implementation will be done!

Respond to transition events

Dojo Mobile provides a set of events related to transitions. Still in the startup method, we’ll set a handler on the event beforeTransitionIn to get notify just before a transition to the settings view occurs.

// handler to get notified before a transition to the current view starts
this.on("beforeTransitionIn", lang.hitch(this, function () {
	this.setTags(flickrview.QUERY.tags);
	this.setTagMode(flickrview.QUERY.tagmode);
	this.selectedLanguage = flickrview.QUERY.lang;
	registry.byId(this.selectedLanguage).set('checked', true);
}));

In this handler we simply update input widgets from the Settings view to reflect the actual values from the QUERY object.

Clean up your code

In the previous parts of this tutorial we first created a mockup of the application. This is a best practice to start from here as it gives a fast and easy way to apprehend the user experience before jumping into the hard part.

Remove HTML mockup code

Now that our application is done we can remove all the artifacts from the mockup. It will reduce the size and contribute to a clearer code:

FeedView: remove the ListItems.
DetailssView: remove the static description.

Remove Cache-Preventing Meta Tags

Remember the META tags we added to prevent caching during development of the widget? Remove those to allow the application to be cached on the device:

<!-- prevent cache -->
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">

You did it!

Congratulations! You just developed a complete Dojo Mobile application. The next part will show you how to make your application ready for production.