Lesson 03: Views and Navigation

From VZ Developer Wiki
Jump to: navigation, search

General Guidelines | XML Specification | Features | Views | JavaScript API | REST API | Tutorials | OAuth


Lesson 02: Meta data and how it's used Back to overview Lesson 04: Preferences

A gadget can support different views to render different content for the different places where the gadget can be implemented (for examples on the implemantation of gadgets in the VZ networks see Gadgets_Views). Views are defined as an attribute in the content tag of the gadget XML.

<Content type="html" view="profile"></Content>

You can also use one content block for more than one view, by concatenating the views:

<Content type="html" view="profile,group,canvas"></Content>

The Gadget API offers various methods to access views and navigate between them.

The following gadget offers the views profile, canvas, popup, group and preview.

<?xml version="1.0" encoding="UTF-8"?>
<Module>
    <ModulePrefs title="HelloWorld Gadget" >
        <Require feature="views" />
    </ModulePrefs>

	<Content type="html" view="profile"><![CDATA[

		<h1>Hello World!</h1>
		<a href="javascript:gadgets.views.requestNavigateTo(
                            gadgets.views.getSupportedViews()['canvas'],
                            {'name':'Bastian'})">go to canvas</a>
		<a href="javascript:gadgets.views.requestNavigateTo(
                            'popup', {'name':'Bastian'})">go to popup</a>

  ]]></Content>
	 <Content type="html" view="canvas,popup"><![CDATA[

		<h1 id="View"></h1>
		<h1 id="Greeting"></h1>
		<script type="text/javascript">

			gadgets.util.registerOnLoadHandler(function() {

				document.getElementById('View').innerHTML = 'This is the ' + 
                                          gadgets.views.getCurrentView().getName() + ' view';
				document.getElementById('Greeting').innerHTML = 'Hello ' + 
                                          gadgets.views.getParams()['name'];
    
			});

		</script>
  ]]></Content>
    <Content type="html" view="group,preview"><![CDATA[

		<h1>You absolutely have to install this gadget</h1>

  ]]></Content>
</Module>

In the profile view there are two links to the canvas and to the popup view. In the link to the canvas view, we check with gadgets.views.getSupportedViews() if the target frame exists, but it is also possible to just use the name of the view as a target. Additionally you can pass parameters to the target view by adding a Key-Value object as second parameter to the call.

In the canvas and popup view, the name of the current view and this parameter is printed out.

For a detailed description on the possible API methods see Gadgets.views_(v0.8)


  • Lesson 03: Views and Navigation