Lesson 11: Separate viewer and owner

From VZ Developer Wiki
Jump to: navigation, search

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


Lesson 10: Interact with your own Backend Back to overview Lesson 12: Using the OpenSocial REST API

OpenSocial uses a viewer/owner concept to identify users. The viewer is the user currently looking at the gadget and the owner is the user on whose profile the gadget is installed.

For Details on the different Owner constellations available in different views see Gadgets_Views_Tech

For privacy reasons you can only resolve the viewer if the current viewer is the owner of the gadget.

<?xml version="1.0" encoding="UTF-8"?>
<Module>
    <ModulePrefs 
			title="HelloWorld Gadget"
			author="Bastian Hofmann" 
			author_email="bhofmann@vz.net"
			description="This is the first example Gadget for Webtech 09"
			preview="This text will be shown in the gallery"
			thumbnail="vzall_150x100.jpg"
			icon="vzall_85x85.jpg"
			platform="studivz+meinvz,schuelervz"
			age_restriction="false"
			private="false"
			>
        <Require feature="opensocial-0.8" />
        <Require feature="views" />
        <Require feature="cache" />
		<Require feature="invite" /> 
    </ModulePrefs>
 
	<Content type="html" view="profile"><![CDATA[
		<div id="greeting"></div>
		<a href="javascript:vz.invite.install()">play now</a>
		<script type="text/javascript">
			function responseprofile(data) {
				html = new Array();
				if (data.get("viewer").getData().isOwner()) {
				   	html.push('Hi ' + 
			             data.get("viewer").getData().getDisplayName());
			        html.push(', welcome back.');
			    } else if (data.get("viewer").hadError() ||
	                                    data.get("viewer").getData().getId() == null) {	
	               html.push('Profile of ' + 
				                data.get("owner").getData().getDisplayName());
				   html.push('<br />Install the game to use it');
				} else {
				    html.push('Hi ' + 
				         data.get("viewer").getData().getDisplayName());
				    html.push(',<br />');	
                    html.push('Profile of ' + 
                         data.get("owner").getData().getDisplayName());	
                }		
				document.getElementById('greeting').innerHTML = html.join('');
			}
 
			gadgets.util.registerOnLoadHandler(function() {
			    var req = opensocial.newDataRequest();
 			    var params = {};
			    req.add(req.newFetchPersonRequest(
                            opensocial.IdSpec.PersonId.OWNER, params),"owner");  
			    req.add(req.newFetchPersonRequest(
			                opensocial.IdSpec.PersonId.VIEWER, params),"viewer");
			    req.send(responseprofile);
			});
		</script>
 
  ]]></Content>
	 <Content type="html" view="canvas"><![CDATA[
		<div id="container"></div>
		<script type="text/javascript">
			function responseprofile(data) {
				if (data.get("user").hadError() ||
                                    data.get("user").getData().getId() == null || ! data.get("user").getData().isOwner()) {
					document.getElementById('container').innerHTML = 
                                        '<a href="javascript:vz.invite.install()">play now</a>';
			    }
				else {	
				    document.getElementById('container').innerHTML = 
                                    "this is the game";
				}
 
			}
 
			gadgets.util.registerOnLoadHandler(function() {
			    var req = opensocial.newDataRequest();
 			    var params = {};
			    req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER
                               , params), "user");  
			    req.send(responseprofile);
			});
		</script>
  ]]></Content>
    <Content type="html" view="group"><![CDATA[
 
		<h1>You absolutely have to install this gadget</h1>
		<a href="javascript:vz.invite.install()">play now</a>
 
  ]]></Content>
  <Content type="html" view="preview"><![CDATA[
 
		<h1>You absolutely have to install this gadget</h1>
		<p>Some Impress</p>
 
  ]]></Content>
</Module>

We have the following users:

  • Alice has installed the gadget
  • Bob has installed the gadget
  • Eva has not installed the gadget

With this gadget the following things happen:

  • If Bob visits his profile he sees "Hi Bob, welcome back". When he clicks the link he is redirected to his own canvas view and the game starts.
  • If Alice visits Bob's profile and sees "Hi Alice, Profile of Bob" and a link "play now". When she clicks the link she is redirected to her own canvas view and the game starts.
  • If Alice navigates to Bob's canvas view with the canvas view link of the container or by directly inserting the url, she sees a link "play now" which navigates her to her canvas view.
  • If Eva visits Bob's profile she sees "Profile of Bob, Install the game to use it" and a link "play now" which navigates her to the install flow of the gadget. The same happens in Bob's canvas view.
  • If Alice or Bob visit a group where the gadget is installed, they see the headline "You absolutely have to install the gadget" and the link "play now" which navigates them to their canvas pages (if you want you can also get their data in this view, because since they have installed the gadget, they will be passed as owner and viewer to the gadget in the group view (or groupinstallation view).
  • If Eva visits the group, she will be redirected to the install flow instead

See that the method vz.invite.install() does not only redirect to the installation flow of the gadget, but redirects the user to his own canvas view, if he has the gadget already installed.


  • Lesson 11: Separate viewer and owner