#summary How to navigate between views (API 0.7)

= Introduction =

0.7 changed the Surface object to a View object and moved navigation out of the `opensocial` namespace into the `gadgets` namespace.  This page updates the sample code available in the [http://code.google.com/apis/opensocial/docs/0.6/devguide.html#Nav OpenSocial Developer's Guide] to work with the 0.7 API

= Details =

Here is a complete example to list the supported views and navigate between them:

{{{
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Navigating Between Views (0.7)" description="Navigates between views">
    <Require feature="opensocial-0.7" />
    <Require feature="views" />
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
    <div id="main"></div>
    <script type="text/javascript">


/**
 * Create the list of links to the other views
 */
function createLinks() {
  //Get the environment, current view and an object containing the supported views
  var env = opensocial.getEnvironment();
  var views = gadgets.views.getSupportedViews();
  var currentview = gadgets.views.getCurrentView();
  var text = [ "You are currently on the ",
               currentview.getName(),
               " view.  Other views: " ].join("");

  //Set up some DOM
  var outputdom = document.getElementById("main");
  outputdom.appendChild(document.createTextNode(text));
  var ol = document.createElement("ol");
  outputdom.appendChild(ol);

  //Iterate over each view
  for (var viewname in views) {
    var view = views[viewname];
    //Make some DOM to present each link
    var li = document.createElement("li");
    var a = document.createElement("a");
    ol.appendChild(li);
    li.appendChild(a);
    a.href = "javascript:void(0);";

    //Put the name of the surface in the link
    a.appendChild(document.createTextNode("Link to " + view.getName()));
    //Handle when the user clicks a link to the other server
    a.onclick = getNavigateClosure(view);
  }
};

/**
 * Returns a function that navigates to the supplied view
 */
function getNavigateClosure(view) {
  return function() { gadgets.views.requestNavigateTo(view); };
};

//Execute createLinks when the page is done loading
gadgets.util.registerOnLoadHandler(createLinks);


    </script>
  ]]>
  </Content>
</Module>
}}}

Here is a sample that navigates to the canvas view:

{{{
function gotoCanvas() {
  var canvas_view = new gadgets.views.View("canvas");
  gadgets.views.requestNavigateTo(canvas_view);
};

gotoCanvas();
}}}

Here is a sample that navigates to the profile view:

{{{
function gotoProfile() {
  var profile_view = new gadgets.views.View("profile");
  gadgets.views.requestNavigateTo(profile_view);
};

gotoProfile();
}}}