Here is an example of a simple Ajax layout. This example will show how simple it is to do Ajax with Phobos and how little code it requires. Also, it should be noted, how clear the separation of logic and presentation is by following the Phobos architecture. In order to follow the logic, you should be familiar with the Phobos architecture of controllers and views. Let's get started.
// Main controller for the application.
// define a controller module called "main"
library.common.define(controller, "main", function() {
// controller class (constructor)
this.Main=function() {
// insert instance initialization code here
// "show" action method
this.show = function() {
//Use the model global variable to pass information to the view.
model = {};
// render the /application/view/main.ejs view
library.view.render({view: "home.ejs",
layout: "main.ejs"});
}
//navigate function: routes and renders the view requested
//This method is used for Ajax call to update the center section of the layout.
this.navigate = function()
{
//Get the parameter for which view to render and send back
var strUrl = String(request.getParameter("url"));
//render the requested view back to the client
library.view.render({view:strUrl});
}
};
});
Our layout is a two column layout with a header, but you can do the same thing with any layout. We have one core file which makes up the structure of our layout. This is main.ejs. This is our main view. Here is the code for it.
<html>
<head><link rel="stylesheet" href=<%= library.view.quoteUrl("/jmaki-standard.css") %> type="text/css"></link>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
var req;
var isIE;
var list;
var entryField;
// This function will take care of the cal backs to the server
// You will notice that once it gets the data back, it sets the innerHtml for the main content
// section of the layout.
function initRequest(url) {
var list = document.getElementById("list");
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.onreadystatechange = processRequest;
req.open("POST", url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(null);
if (req.readyState == 4) {
if (req.status == 200) {
document.getElementById("maincontent").innerHTML = req.responseText;
}
}
}
}
//This function will be called by every hyperlink with a parameter of which view we want rendered.
//After it assembles the URL, it will call the Request function to get the view from the server.
function
submitData(strUrl) {
var url = <%= library.view.quoteUrl("/main/navigate") %> + "?url=" + strUrl;
initRequest(url);
}
</script>
</head>
<body>
<div class="outerBorder">
<div class="header">
<div class="banner">Application Name</div>
<div class="subheader">
<div>
<a
href="javascript:submitData('feedback.ejs')">Feedback</a> |
<a href="javascript:submitData('sitemap.ejs')">Site
Map</a> |
<a
href="javascript:submitData('home.ejs')">Home</a>
</div>
</div> <!-- sub-header -->
</div> <!-- header -->
<div class="main">
<div class="leftSidebar">
Sidebar Content Here
</div> <!-- leftSidebar -->
<div class="content" style="height:400px" id="maincontent">
<% library.view.layoutContent(); %>
</div> <!-- content -->
</div> <!-- main -->
</div> <!-- outerborder -->
</body>
</html>
All that is left is the three files which the above links reference. Here they are.
The home.ejs file contains: <p>Hello! This is the home page</p>The feedback.ejs contains: <p>Hello from the feedback page</p>;
The sitemap.ejs contains: <p>Hello from the sitemap page</p>
With this foundation, we can build any number of pages and load them without redisplaying the whole page. We might should add a few more things like a progress bar and a custom back button.
I hope to move to a web server and web pages soon so that the formatting for the code will be much more readable, but you get the basic idea.
Happy coding!
0 comments:
Post a Comment