Convert server-side Java to client-side HTML

Building from the ground floor up, developers first learn to print "Hello World" in a new language, and then start learning more interesting tricks. To demonstrate Java running on the server side and removing the processing of Java code from the client, this brief video tutorial uses Java code to add a link to the Hello World page without presenting the client with anything but simple HTML code. For your convenience, a written transcription of the video follows.

Hi, I’m Cameron McKenzie. The author of “Hibernate Made Easy” “Java Made Easy” and a few Java certification guides. I want to take you through a little bit of information about JSF custom tags. I’ve actually just created a JSP file that used a JSF custom tag; more specifically it used a JSF <f:view> tag, which all of your good JSF pages should be surrounded with. In order to do that I added a taglib declaration at the top of the page that said the core tag library was going to be referenced and it was going to be prefixed with the letter “f”.

The core library is one of the tag libraries that is associated with JSF. There are a number of different tags that come in that core library. Here is a list of them. This is an exhaustive listing. These are all the different JSF tags that come with the core library. You see, view and then there is sub view. There is some validator stuff, validate double range, param for links, facet for tables, some listeners, some converters.

Those are some things that come in the core library. There is also an HTML library that provides some facilities to help you develop HTML pages. You see a form tag there, output label, select one list box, output text, Boolean check-box, select many menus, and select one radio. All of the standard things you would think about when you’re doing HTML development. And again, this is an exhaustive list of the HTML tags. A lot of people think there are going to be hundreds of tags associated with the JSF tag libraries. And there are not. These are all of them that are available in the HTML tag libraries [25 items]. These are all of them in the core tag libraries [18 items].

Now what I want to do is I actually want to improve my JSP page a little bit. One of the mistakes I made is I actually called it index.jsp. I’m going to change that right now. I originally was supposed to call it “helloworld.jsp.” I’ve actually gone into the _easyjsf folder right off my C drive there and found the index.jsp and changed it to helloworld.jsp so that it’s more consistent with some of the other online documentation I’m putting together. In that file what I’m going to do is say “hey, I’m not going to just use the core tags. I’m also going to use the HTML tag libraries.” To do that you have to have an HTML core tag library declaration at the top of your page, by default we use" h" as the prefix. The tab lib looks pretty much the same as the core except we specify that we’re using HTML and we specify the new prefix.

What am I going to do? I’m just going to put a link on the page. It’s going to be a very self promoting link. It’s going to be an output link. I say <h: outputLink id ="ink01" value =http://www.scja.com> so where is this link going to put us to? I put it so SCJA.com. That’s my website for getting Java certified.

Anytime you create a tag you should end it so I have the <h: outputLink> there and I have the </h:outputLink> there. Just check and make sure it’s case sensitive and I spelled everything correctly and my quotes are matching up. The tag here will create a hyperlink; of course, if you have a hyperlink you want some text somebody can click on. If order to put text on the page I’ll do something like this: I’ll use the <h:outputText>  tag. I’ll give it a little id and I’ll give it a value, which is really the most important thing, “Get Java Certified!”.

I’ll end the tag. So I’ve got the start there, I’ll end the tag here. Make sure it’s spelled correctly. All of a sudden I have a helloworld.jsp file that is using two of the HTML tags from the HTML library and one tag from the core library. As I said, if you actually look at the number of HTML tags available, once you’ve actually used two of them the output tag and the output link, you’re knocking down the number of extra tags you have to learn pretty quickly.

Anyways, I’ve got this particular file here. I’m going to save this file, so file>save, it’s helloworld.jsp. It’s right there in the root of my _easyjsf folder, which is the root of my war file, the root of my .war file and the root of my Web application. In order to deploy this you’ll have to war it all up. I have a special command here that I run from the command prompt in my _easyjsf folder. It’s basically called the jar utility from the JDK. It creates an _easyjsf.war file by including all of the subfolders and files of this _easyjsf folder. That creates the war file, which is right there, just a little compressed file. And of course I don’t want it in the _easyjsf folder. In order to deploy an application I need to move it to the webapps folder of my Tomcat installation. There is Tomcat, there is webapps. Just to make sure this deploys, I’m going to delete the old easyjsf.war file. I’m also going to delete the folder where the easyjsf.war file was previously extracted. I’m going to paste easyjsf.war right in there.

From there, I just find my Tomcat server, move to the bin directory of the Tomcat server, and issue a startup command. I should see easyjsf.war getting deployed. Hopefully, there are no errors in there. Doesn’t seem to be. I’ll actually come back to my webapps folder. I should actually see that folder getting created, easyjsf. It should have that helloword.jsp in it. Essentially, when you deploy this compressed war file has all of its contents expanded on the file system. And of course since this application is up and running, I should be able to invoke that jsp simply by going to the local host port 8080 using easyjsf the context root which matches the name of the  war, easyjsf.war and of course asking for the hello world resource. Notice that it’s “helloworld.faces” even though the actual file is named helloworld.jsp. [the .faces extension] simply tells the servlet engine to pass request off to the Faces servlet which will then do the job of invoking the helloworld.jsp file. So that makes sure that we’re taking advantage of the JSF framework.

I click enter and all of a sudden we get the “Hello World!” that we saw before. We also get our java certified link, which if we click will take us to my SCJA page and there’s some SCJA stuff there. As we take a look at [the source for] the page, you'll notice that there are no JSF specific tags on here. There are a couple of interesting things you see, that output text turned into a <span> tag. We’ve got the id of that span tag there and the id of the link which comes from the page. But really nothing actually gets sent to the client side that has to be processed. All of the processing happens on the server. Essentially, the client gets nothing other than HTML to process.

That’s about it. That’s just another look at JSF, expanding our knowledge and looking at some of the ways we can use some HTML tags along with the core tags that we saw in our very first example. That’s it for now, happy JSF!