Injecting JavaScript and CSS into Portal Header on JBoss AS

This knol describes how to insert Javascripts and CSSs into the header of a Portal (HTML page) on the JBoss AS.

Prerequisites



Detailed Description

Javascript and CSS are meant to be placed in the header. However, if you have never injected scripts or style sheets into the header through the JBoss AS, then it can be tricky. After the the process is understood, header injection is an easy task to perform.



Configuration Files

This section is probably the most important section, as articles online may not be entirely clear on this process. The portal container is a web standard and its implementation across application servers will be the same for the most part. Header injection is one of the technologies that does not seem to have a standard. In the WEB-INF folder of a web app, there are 3-4 necessary configuration files, depending on the nature of the web app. The JBoss AS REQUIRES an extra configuration file for header injection. This file may not be required for other application servers. If it doesn't exist, the file should be created and named:

jboss-portlet.xml

The structure of this XML file will be VERY similar to portlet.xml. In fact, it uses almost all the same common tags. However, They are not to be confused. They are two very different files. If header injection is tried through portlet.xml, it will undoubtedly not work, cause errors in the XML structure/project, and the Javascripts/CSS will not work. Here is an example jboss-portlet.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE portlet-app PUBLIC
"-//JBoss Portal//DTD JBoss Portlet 2.6//EN"
"http://www.jboss.org/portal/dtd/jboss-portlet_2_6.dtd">

<portlet-app>

    <!-- HelloWorldPortlet -->
    <portlet>
        <portlet-name>HelloWorldPortlet</portlet-name>

        <header-content>
            <link type='text/css' rel='stylesheet' href='/css/helloworld.css' />
            <script type='text/javascript' src='/js/helloworld.js' />
        </header-content>
    </portlet>
</portlet-app>

The <portlet-app>, <portlet>, and <portlet-name> tags are common to portlet.xml. The few tags that are different are the <header-content> tags and the HTML include tags for Javascript and CSS. All scripts and style sheets should be included within the header-content tags. The usage and format of the link and script tags should be noted. There should not be an ending script tag (</script>), unless you are writing the script directly in this file, which is not recommended. This is not tested, but there seems to be an order for the attributes on the script and link tags. (It did not work initially, so I changed the order of attributes to what is seen above, and it worked so... yeah... I don't know...).

The next section will build on what was done in Hello World Portlet on JBoss AS. So if you have not completed it, I recommend going through it first. If you have already done it or just plan on reading it, then you may skip it.



CSS

From the above jboss-portlet.xml file, we need to create a file named helloworld.css. First, create a folder called css in the WebContent folder (not WEB-INF). This is the directory where all the CSS files will go for our web app. Within the css folder, create helloworld.css. In this example, all we will do is turn our hello world text red. Add the following code to helloworld.css:

h1.helloworldtitle {

    color: red;
}

If you wish to verify that the css file was injected into the header, you may export the portlet, load the page, and view the source at this point.  The css should be linked in the header.  It may be difficult to see it because of other markup, so just search the page source using find and type in the file name of the css.

The Hello World Portlet on JBoss AS will need a few minor changes as well. The portlet should look something like this:

public class HelloWorldPortlet extends GenericPortlet {

    protected void doView( RenderRequest rRequest, RenderResponse rResponse ) throws PortletException, IOException, UnavailableException {

        rResponse.setContentType( "text/html" );

        PrintWriter out = rResponse.getWriter();
        out.write( "Hello World!" );
        out.close();
    }
}

Just change the line:

out.write( "Hello World!" );

to:

out.write( "<h1 class='helloworldtitle'>Hello World!</h1>" );

Save the changes and export the portlet. Go view or refresh the portal. The text in the Hello World Portlet on JBoss AS should now be red.




Javascript

In this section, we will add a button that will reference a script included in the header. We will do something simple: cause an alert box to pop up with a message. First, create the directory js in the WebContent folder (not WEB-INF) and add the file helloworld.js to the directory. This js folder is where all the Javascripts for the web app should be placed. Inside this newly created file, insert the following:

function test() {

    alert( "Hello world." );
}

If you wish to verify that the js file was injected into the header, you may export the portlet, load the page, and view the source at this point.  The js should be linked in the header.  It may be difficult to see it because of other markup, so just search the page source using find and type in the file name of the js.

The last thing is to add the button to the portlet. Underneath

out.write( "<h1 class='helloworldtitle'>Hello World!</h1>" );

add this line:

out.write( "<input type='button' value='Click Me!' onclick='test()' />" );

Save the changes and export the portlet. Go view or refresh the portal. Try clicking the button. An alert box should pop up that reads: Hello world.




Works Cited

Comments


Thomas Heute

JSR-286

Note that the JSR-286 specification implemented in JBoss Portal 2.7 offers a standard way to include things in the headers.

(And thanks for the articles)

Last edited Sep 9, 2008 11:08 AM
Report abusive comment
Matt
Matt
Web Developer at Burris Logistics
Milton, DE
Article rating:
Your rating:

Activity for this knol

This week:

22pageviews

Totals:

1436pageviews
2comments
©2009 Google