What I am still learning about the web

Acknowledgements

Before I start this article, I would like to  state this is a continuation of a blog written by Sean Corfield which can be found here An Architects View – Railo build blog. And I would strongly advise anyone attempting to build Railo, to read both articles to get a better understanding of the whole process.

Requirements

In order to build Railo from the Source in an easy and simple way, you’re going to need a few things first.

• An SVN Client I use Tortoise SVN.
• Eclipse, preferably the JEE version.
• Eclipse, with installed JRE set to JDK 5, not 6.
• The latest Railo.War.
• The latest Apache Tomcat.

Working Railo Explanation

If you followed my advice you would have visited Sean’s site and seen the requirement for a running Railo installation. This sometimes puzzles people but can be easily explained. The later sections of the build process are processed in ColdFusion, this means you need an environment capable of parsing CFML, and what better one to use than the one you have decided to build.

Install Tomcat (optional)

This part is only for people who wish to do as I did, and use the Windows Tomcat installer to get Railo up and running quickly.

Use the Windows Service Installer, it’s quick and painless. Once installed check that the service is not running, if it is stop it.

Install Railo

Get the latest Railo.war and rename if to something like railobuild.war. This will just make the URL you’re going to need later easier to read. Place the newly renamed war file into the webapps directory within Tomcat and start the Tomcat service, this should unpack the war file into a directory named railobuild in my example or in yours whatever your war file was named.

Well done Railo is ready. Now we can get the Source.

Getting the source

Using your SVN client checkout the latest source from Railo’s repository

http://anonsvn.jboss.org/repos/railo

This will take some time but when completed you should have a single Railo folder containing the standard Branches, Tags and Trunk directories at the time of this article being written Branches and tags were empty. But being as we are only interested in Trunk that’s no great shakes.

Setting up the Eclipse Projects

Now we have the source code we need to add the projects to eclipse. To do this we will import them. This part is shamefully similar to Sean’s explanation but that’s because there really is only one way to do this part.

In Eclipse select File > Import > General > Existing Projects into Workspace and click Next >. For the root directory, Browse to railo/trunk/railo-java/railo and Choose that folder. It should now import the project into a directory called Railo. Click Finish.

Do exactly the same for railo/trunk/railo-java/railo-core, railo/trunk/railo-java/railo-loader and railo/trunk/railo-java/railo-master.

Fixing the Build Paths

You will notice that Railo-Core and Railo-Loader have a red ‘x’ on the project. This is due to the build paths being incorrect. Lets fix that by right clicking on the project and selecting Build Path > Configure Build Path navigate to the libraries tab select all the jars apart from the JRE System Library, and click remove. Now we need to replace them with the same jars but in the correct locations. Click Add External Jars then Browse to the railo/trunk/railo-java/libs directory and select all the jars, being careful not to copy the .svn directory and click open. This should populate the libraries tab with all the jars. Make sure you have done this for both Railo-Core and Railo-Loader.

Preparing your Working Railo

We need to move some files into the Railo you created earlier, copy the contents of the railo/trunk/railo-cfml directory into the Railo-Build directory on your tomcat railo install.

This is also a good time to log into your Railo web administrator and set a password. This will be required during the build process.

Setting the Build Properties

Within the Railo-Core project you will find the build.properties file, open this within a text editor and within that file change the railo.url to the location of your compileAdmin.cfm which if you have followed this tutorial with no variation will be:

railo.url=http://localhost:8080/railobuild/compileAdmin.cfm

Building Railo

Within the Railo Source project, right click the build.xml file and select Run as > Ant Build. The build will begin and approximately half way through a prompt box will appear asking you for the Railo password you provided in your tomcat Railo setup. Once accepted the build process will complete the final coldfusion parts of the build process. Within the console you should see all the output and  hopefully “Build Successful”.

Deploying your Railo

Now right-click the Railo-Core project and select Refresh. The red ‘x’ should go away and you should see build and dist directories inside that project. Open the dist directory and you should see [version].rc file.  Take the created .rc file and paste it into the following directory within your Railo install.

C:\tomcat\webapps\railobuild\WEB-INF\lib\railo-server\patches
if this is where you have your directory.

Now all that is left to do is restart Railo. When you next log into the web administrator you will see within the overview that the version number has changed to the version you have just built.

Hi this is a quick post pointing anyone who wants a quick JQuery solution to the following site

UI JQuery

Here you can touch up pre-designed templates for the most common JQuery functions and then download them. Always save the best until last, they also come with  a very handy examples page where you can basically strip the code out of and place it straight into yours.

Short and sweet but hope it helps

This is not particularly hard or something you will want to do with every site you ever develop. That being said i recently used this same technique to list and make links of all of my web apps within a Tomcat configuration I have. First things first you will need to be running a platform capable of parsing JSP files for this to work and it is always a good idea to have your Java up to date currently I’m running 1.6.

The Scenario

We are developing an application that will check, and report back which applications are installed upon our Tomcat install. Further more we are ( having made sure that each web application has, in there root directory either an index or default page) going to create links to those pages.

ROOT

I am using the ROOT directory within the webapps directory, for the base of my application. I have emptied this directory and in its place put an empty index.jsp file.

at the top of the file is the usual language declaration,

<%@ page language=”java” contentType=”text/html; charset=UTF-8″
pageEncoding=”UTF-8″%>

below this we are going to place an empty function that we will write later, this function  will deal with the creation of the links.

<%!

public String createLink(String dir){

}

%>

As you can see from the above declaration the method will expect a String and return one also. The string being passed in will be the directory name. The returned will be the link in its fully formed and valid format.

Getting The Directory Contents

To do this we need a file object, a String array and a String.  We place the relative location of the webapps directory within our string. Then call upon and instantiate the Java File object like so.

String filename=”..\\webapps\\”;

java.io.File file = new java.io.File(filename);

This code can be placed just before the last %> of the previous code section. this code takes the java.io.File object and creates  a new instance of itself using the String supplied in this case the location of the webapps directory. We name this new File object file. We now take the contents of that directory and use the list method with the file object itself, to populate the String array.

String [] dirs = file.list();

We now have all the information we need to pass the Strings to the createLink function.

The Loop

To pass the individual strings into the createLink function we will loop through the array like so.

<ul>

<%
for(int i = 0; i < dirs.length; i++){

// if directory we are in skip it
if(dirs[i].equals(“ROOT”)){
continue;
}
String newLink = createLink(dirs[i]);
out.println(newLink);
}
%>

</ul>

You can see that there is a conditional check within the loop. If you remember we jumped out one directory with the file object so in affect we would have created a link to our own app. I chose not to but if you wish to have your own app listed simply remove this if statement block.

So now we need to create the function to create the links, I hope you have noticed that the separation is not totally necessary depending upon what you require you could quite easily fill the loop with this code and list out the directories. I have other purposes and other checks that needed to be done so I decided to put all these in a separate function. The code of which is here:

String link = “”;

link = “<li><a href=\”../” + dir + “\”>” + dir + “</a></li>”;

return link;

This code should be placed within the function block we created at the beginning. and that’s it all done with one reminder. This is very basic and should be used as such there has been very limited testing on this and most of the code was written in not copy and pasted in so please check for syntax errors especially in the ” ” areas.

In this tutorial I am going to show the basics of using CSS to create easily manipulated navigation. In a further post to be created later I will demonstrate drop down, pop out functionality using CSS. Before we try to implement the advanced drop down, pop out functionality, I need to show you the basics.

The XHTML

There are many ways to layout your navigation with XHTML, but I prefer the simple approach, utilising the ul and li tags. An example of this type of navigation can be found below. I have not placed any CSS within the first step so we can step through and view the changes.

<ul>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
</ul>

If we display this code in a browser you will see four links listed with bullet points vertically.

Adding the CSS

CSS needs to be able to associate it’s styles with your XHTML code. To do this we use a selector, this is the element you are wanting to add styles to. In this tutorial you are going to be introduced to three of the available selectors. The attribute selector, the ID selector and the class selector.

The Attribute Selector

The attribute selector is the simplest form of selection available within CSS, for example if we wanted to select and transform the colour of the text within every occurrence of the li tag to black in a given document. We would simply place the following code within our CSS:

li {
color:#000;
}

This is relatively simple and the colour shown here is in Hex format, hex is a six digit representation for colour, in this case being as each second character is the same as the first we can use a short hand version of the hex for example:

#000000  black can be shortened to #000

#FFFFFF white can be shortened to #FFF

The attribute selector is the very basics of CSS.

The ID Selector

If we take our example unordered list above we are going to utilise an ID selector here by simply adding the following to the ul element:

<ul id=”nav”>

We have opened up the ul element to be uniquely identified within our style-sheet and document. The ID selector should be used sparingly within a document. To demonstrate using the ID selector within your CSS code I have set a height of 56px like so:

#nav {
height:56px;
}

As you can see from above the ID selector is accessed using the # symbol.

The Class Selector

this selector is designed for reuse for instance in our code we have  an li tag that has a class of last defined like so:

<li class=”last”><a href=”#”>Link</a></li>

we can now declare the rules for this class in our css like so:

#nav li.last {
border-right:solid #000 1px;
}

you can see that I am combining selectors here an ID selector with a Class selector, this is not required but I have done this to demonstrate two points, the first being that of Specificity, this is the internal scoring system used within CSS to determine which rules to use for a given element. for more on Specificity look at the W3C’s candidate recommendation 6.4.3 Calculating a selector’s specificity. and the second being that you can use the parent child relationship to increase specificity and isolate elements you wish to have unique styles. In our example any li with a class of last will only be affected if they have an ancestor with with an id of nav.

Styling the Example

We need to make our list items line up so in line, at this point most people would use the display:inline attribute as this will take the list items and line them up horizontally along the page. My problem with this method is that there is an inherent margin which means we cant get them lined up next to each other. To remedy this I use float left, this has the same effect as display:inline but without the margin. as you can see from the following navigation example.
Now we have taken away the gap, placed a grey background on the links, also we have a border and made the font white.

Developer Tools

great way to view CSS and other style related features is through two Firefox plug-ins I would highly recommend, the first is the Web Developer tool, and the second is Firebug. If you do not have these add-on’s then you can get the CSS from the file here by viewing the source navigation example.