I am going to start a new project with Phobos so I can become familiar with how to write a web site and convert existing web sites to the Java platform. The first thing I did was read the Phobos overview located at the following URL https://phobos.dev.java.net/overview.html. If you come from a Java background the architecture is probably familiar to you. If you have been programming purely with html pages and script engines, the architecture may be a little confusing. It took me a few times through the documentation to get a few basic concepts.So let's start with the first thing every web site needs and that is a layout. We will use the default jmaki layout for our sample app. If you start a new project in Netbeans and choose the default Phobos app you will be prompted to choose a layout. Choose any layout and click finish.
You will notice that I have an extra directory which was not created by the wizard called dynamic. Add this if you are planning to do this example. The Phobos team will be adding this soon. The dynamic folder along with the ejsp file extension is a new feature that is not in the documentation yet. It is a special folder which is accessed by the system whenever a file with the ejsp extension is requested. You can put any type of file in there and use it to script just like you would ASP or PHP. This is important to note as this is not the standard procedure for Java type applications.
Before we go into detail about the mechanics, lets follow a classic ASP example of how we would write a basic page with a layout. The default home page for the application is /script/index.js. Here is the code for it currently:
/* This script is called when the client tries to access the "/" URL.
* It simply redirects to a URL that causes the main application page
* to be displayed.
*/
// default index is to activate the main controller or page:
library.httpserver.sendRedirect(library.httpserver.makeUrl("default.ejsp"));
We are simply using the two library functions to redirect the browser to our home page. Because we used the ejsp extension, Phobos knew to look in the dynamic directory for the file. We did not have to give it a full path.
The code for our home page looks like this:
<% library.view.include("/application/dynamic/header.ejs"); %>
Hello from embedded Javascript running on a JDK
<% library.view.include("/application/dynamic/footer.ejs"); %>
The library.view.include function includes content from another file just like and include directive in ASP or PHP. So we included our header and footer and put our main content in between. We did have to provide the full path to the files because the extension is ejs. We could have just used the file name if our header and footer were located in the view directory. Phobos would have found them for us in that case.
When creating hyperlinks in our main content, we can link directly to file names in the dynamic folder and include our layout like we did above. This is typically how scripting has worked on the web and what scripters are used to.
Now we will look at how Java typically has done the same thing so we can understand the whole Phobos framework. You will notice in the directory layout that we have a controller folder and a view folder. In Java, you would use what they call a Model View Controller framework. If you are trying to visualize with the layout page in mind compared to the example above, what you need to understand is that we essentially link to the same controller ("file") with our hyperlinks and swap out the center content section of the page. This has its advantages as you will see as we progress, and it is still very flexible.
So with MVC we always have at least two files. We have the controller and the view. The model is the data shared between the two. In our controller we would put all of our script code and then paint the view. The view can have presentation code in it as well and adjust itself based on the data in the model. Here is the modified code for the index.js when we are going to use the controller:
/* This script is called when the client tries to access the "/" URL.
* It simply redirects to a URL that causes the main application page
* to be displayed.
*/
// default index is to activate the main controller or page:
library.httpserver.sendRedirect(library.httpserver.makeUrl("/main/show"));
Here we are sending a redirect, and Phobos knows where the controllers are so we do not have to give it the path. We are calling the show method of the controller.
Here is the code for the main controller:
/*
* Main controller for the application.
*
* This file was generated, please edit it as needed.
*/
// define a controller module called "main"
library.common.define(controller, "main", function() {
// controller class (constructor)
function Main() {
// insert instance initialization code here
}
// "show" action method
Main.prototype.show = function() {
/*
Use the model global variable to pass information to the view.
Alternatively, a view can access the controller instance by
using the expression:
invocation.controller
*/
model = {};
// render the /application/view/main.ejs view
//library.view.render("main.ejs");
library.view.render({view: "mainContent.ejs",
layout: "main.ejs"});
}
// export the controller class
this.Main = Main;
});
Consider this commented line:
//library.view.render("main.ejs");
This line would have rendered the view called main.ejs. However, we can have a layout file and a different file with the content for the main section. These commands will render both files:
library.view.render({view: "mainContent.ejs",
layout: "main.ejs"});
The mainContent.ejs is the center section of the page and the main.ejs is the layout.
The main views are just made up of html except that in the layout where the center content is placed, you place a function call with the following line:
<% library.view.layoutContent(); %>
I hope this has shown that Phobos can act like a traditional script engine and is flexible. I have attempted also to explain the semantics behind the MVC pattern which is a much powerful and maintainable when writing large applications.
