Tony Bhimani's Blog » HOWTOs

AJAX: Learn The Basics Without Using Toolkit Libraries

Tony Bhimani — Mon, 24 Oct 2011 05:00:28 +0000

AJAX is one of the popular acronym buzzwords in the world of web development technologies. It stands for Asynchronous JavaScript and XML. What it does is allow you to make your website far more dynamic by updating portions in realtime without page reloads (refreshes). This beginners AJAX tutorial will teach you how to write JavaScript code to do some simple screen updates. It’ll focus on a low-level AJAX implementation meaning JavaScript toolkits like jQuery and script.aculo.us will not be used (future tutorials will make use of these high-level time-saving tools). In my opinion, learning AJAX in this manner is far better because you’ll grasp the concept and it will help you move in the direction of using toolkits to simplify your coding (you must crawl before you can walk…). Also, this AJAX tutorial will be the first post in a series I plan on publishing regarding this subject.

Phase 1: Writing the AJAX JavaScript Code – Making the Call

I first learned AJAX from the W3Schools website and will be using their code base as the foundation for this AJAX tutorial. The first step in working with AJAX is to create an object of XMLHttpRequest. The Firefox, Opera, Safari, and Internet Explorer browsers all handle this differently, however code wise the first three are the same. Internet Explorer (yes, Microsoft) has to take a unique approach (putting it nicely) which is different than the other mainstream web browsers. Getting back on point now, the code below is a modified version of what you can find from the W3Schools AJAX Guide for creating a object for XMLHttpRequest (the interface to make AJAX music).

function GetXmlHttpObject() {
  var xmlHttp = null;
  try {
    // Firefox, Opera 8.0+, Safari
    xmlHttp = new XMLHttpRequest();
  } catch (e) {
    // Internet Explorer
    try {
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  return xmlHttp;
}

The code starts with creating a variable handle for the XMLHttpRequest object and making it null. Within a try and catch block the XMLHttpRequest() method is called. If an object is created then exit the function and return the object. If the object can’t be created then the ActiveX (Microsoft) route is taken by using Msxml2.XMLHTTP and Microsoft.XMLHTTP. If this part fails as well, AJAX isn’t possible with the browser for whatever reason, otherwise after having called this GetXmlHttpObject() function we’ll have an AJAX object to work with. Next we’ll build an AJAX request.

// create xml http object
var objXmlHttp = GetXmlHttpObject();
// open a connection and send the ajax request
objXmlHttp.open("GET", "http://www.domain.com/ajaxresponder.php", true);
objXmlHttp.send();

The AJAX request is composed of a call to the open and send methods of the XmlHttpRequest object. The open method takes three parameters (type of request [GET or POST], URL of the file on the server, and boolean true [asynchronous] or false [synchronous]).

Type of Request: GET or POST? Well, it depends on your requirements but most of the time you will be using GET for your AJAX calls. AJAX is information dependent meaning that what you give it will determine what it gives back to you. For example, say you’re providing a weather service and want to get the temperature for a specific zip code. That zip code would be passed as part of the URL in the query string. The file on the server would accept that input and give the temperature as output.
URL of file on the server: This URL is where the processing of your data happens. The type of file will be a dynamic server-side scripting language such as PHP that can take your input (via GET or POST), process it, and send back formatted output that you will present to the user’s browser. Using the weather example from above, this script would take the zip code and possibly do a database lookup to get the temperature and pass it back to the AJAX caller.
Asynchronous or Synchronous: Once again, depending on your requirements you may choose one option over the other. A high percentage of the time your calls will be asynchronous, which means that once the AJAX call is issued your browser won’t be held up waiting on the response; it can continue doing other tasks and once the response does come in it can be processed. One instance when a synchronous call would be necessary is when the response of a first AJAX call is required by a second call. If you keep it asynchronous then once the first AJAX call is done the second would run right away. There is no guarantee that the first call would be fast enough to get the result to pass to the second call, hence keeping it synchronous forces the order of operations to follow through. Be careful though! If the synchronous call takes a long time processing it can appear that your browser window has locked up!

Phase 2: Crafting a Server-Side PHP Script to Process AJAX Requests

With the JavaScript code in place for invoking the AJAX call the server-side script to handle that call needs to be written. The sole purpose of this script will be to listen for the AJAX call, process the request, and send back output. Because this is AJAX tutorial is being written in a manner with beginners in mind, the server-side script is going to be extremely basic. What it will do is send back a random quote from a famous author. In the next tutorial I’ll take it up a notch by showing you how to integrate a database and fetching data.

I’ll be using PHP to write this server-side script because that is my preferred language, however you can use Perl CGI, Cold Fusion, Microsoft’s Active Server Pages, ASP.NET or another language as long as the server that will be hosting the script can support it. If you don’t know PHP then try and follow along and I’ll explain the code as I go.

This is a very simple PHP script. All it does is define a six string array with the variable name of $quotes_arr. One of those six quotes is chosen at random using the PHP rand() function. What rand() will do is pick a random number between 0 and the size of the array less one (6 – 1 = 5) to serve as an index for choosing a string from the array. Note: PHP arrays are zero-based indexing meaning the first element begins at zero, not one. Finally, using PHP’s echo the chosen quote string is printed out to the browser.

Phase 3: Putting All This AJAX & PHP Coding Stuff Together

The pieces to this AJAX puzzle are on the table, it’s time to fit them together. We’ve learned how to build an AJAX request and what an AJAX processing script can look like, the last step is to build the HTML page that makes use of them. The mechanics will be once the page loads the AJAX request will be made, the famous quote will be received from the server-side script, and the quote will be written to the HTML page. I’ve also included a button that can be clicked to load a new quote when clicked.

AJAX Tutorial: Random Famous Quotes

Random Quote of the Day

You may notice I’ve added some extra code to the AJAX JavaScript section. Because this is an asynchronous call we have to declare an event handler. An event handler is a code block that sits around and waits for an event to occur before it executes its code. Our event handler (JavaScript function) is attached to the onreadystatechange event of the XMLHttpRequest object. It will get executed when the ready state changes. We check two XMLHttpRequest properties readyState and status for specific values. Once these values are attained (readyState of 4 meaning all data has been received and HTTP status of 200) we then use getElementById and change the HTML code between the start and end tags of the P with the id of quotes using this innerHTML property.

Okay, we’ve reached the end of this beginner’s AJAX tutorial. I’ve been talking about AJAX this whole time and I’m sure you’re eager to finally see the AJAX code in action. Below is a link to the sample page where you will see a randomly pulled quote from the PHP AJAX script. Click the Reload Page button to see another quote from the PHP array.

AJAX Tutorial for Beginners: Random Famous Author Quotes

Source Code Download: AJAX Tutorial for Beginners 1 [ No Toolkits ] (Zip)

JavaScript: Controlling a Popup Window’s Parent Window

Tony Bhimani — Mon, 17 Oct 2011 06:47:33 +0000

You may find it useful to control a parent window from a generated popup window, such as being able to manipulate its look, content, etc. One example being a web application I wrote for work. In the portion for entering a new sales order, products are added from a popup search window. When the product being added is selected, a button is clicked and the parent window’s line item table is modified to include the selected product. This is only one example as many others exist. This tutorial will discuss how to launch a popup window and change properties of the parent (colors, fonts, sizes, and styles).

We begin with creating the parent window. There won’t anything fancy with it, just a H1 title, a couple paragraphs of text, and a link to launch the popup window controller. To the left is a screenshot of what our parent window will look like when the HTML has been added. In the code some elements have been added to allow us to use JavaScript to control (manipulate) the contents of the parent window. Namely id attributes for the H1 and P tags for use the the Document Object Method getElementById.

Parent Window HTML + JavaScript Code ( parent-window.html ):

The Parent Window [ JavaScript: Controlling a Popup Window's Parent Window ]

The Parent Window

This is the window that will be controlled by the popup window.

Click the link below to open the popup window controller.

Launch Popup Window

Note: Please disable any popup blocker software if you don't see the popup window.

You’ll see that the code for opening the popup window is located in the href onclick. The JavaScript window.open is called and the popup window filename is passed as the first parameter, followed by a name for the window, and lastly the specs for the window appearance (width, height, hide the menu and status bars).

With the parent window created the next step is to create the popup window. The purpose of the popup window is to control its parent window. For this demonstration it’s accomplished through a series of buttons that call JavaScript functions that alter the parent window’s properties (as seen on the left). I have created buttons that change the window’s background color, the font family for the H1 title, the font size for the first paragraph, the font style for the second paragraph, and to reload the parent window page. Obviously I’m only scratching the surface here as much more can be done with JavaScript to alter the parent window.

Popup Window HTML + JavaScript Code ( popup-window.html ):





The Popup Window [ JavaScript: Controlling a Popup Window's Parent Window ]



The Popup Window

I’m not going to go over all the code. The key to making the popup control the parent is the Window object’s opener property ala window.opener. In my code I assign it to a variable called parent_window which I use throughout my functions. By referencing it in front of the document object you can hook into the window properties of the parent much like you would for any foreground window. Having done so you now have access to getElementById and other Document Object Methods to get a handle to the object. Add some creative JavaScript and you can build some pretty interesting web applications with popup windows.

That’s it in a nutshell so enough talk. I’m sure you want see it in action, so try out the Controlling a Popup Window’s Parent Window Demonstration.

Source Code Download: Control a Parent Window by Popup using JavaScript (Zip)

PHP: Checkbox Arrays with Javascript Usage

Tony Bhimani — Sat, 15 Oct 2011 10:12:22 +0000

If you’ve created HTML forms then you’ll have used checkboxes and radio buttons for gathering user input. Taking it a step further you would link your form with a server-side scripting language such as PHP to capture the user input and process it. Things get a little tricky when you have groups of checkboxes or radio buttons in your form. Once you create a group of these same control types you form what is known as an array. An array is simply an integer-indexed collection of objects. When defining a checkbox or radio button you need to give it a name. This naming convention allows you to access the value of the control object and use it for whatever purpose you need (store it, email it, etc).


 I speak English

 I speak French

Above is an example of two checkboxes for choosing a spoken language. Notice how they both share the same name language to create an array (more precisely a nodelist of elements).

Next I have created a simple function called showMyChoices1 that loops through the checkboxes, creates a message, and displays it using an alert. The variable objCBarray is a handle for the checkbox nodelist acquired by using getElementsByName Document Object Method. Using a for loop to iterate through each checkbox (the loop count is determined by the length property), the checked ones get added to a string called strChoices. After the for loop is finished the length of the string is tested for a value greater than zero. If it tests positive then an alert is shown with the checked values, otherwise a message prompting the user to select a language is shown.

Let’s put it all together (including a button) and see it in action. Try it below.

Here is the code for the JavaScript only version.



 I speak English

 I speak French

If you plan on using PHP to process your form data then the way the checkboxes were named isn’t going to work. PHP requires you to name the variable in an array manner. It’s basically the same as before but you have to add trailing square brackets []. For example, I used language for the name of my checkboxes. To make this work with PHP I’ll need to use language[]. Having made this change the JavaScript function I’ve created won’t work because of the variable name in getElementsByName (be it with or without the brackets, no bueno). Square brackets in JavaScript have a special meaning so two changes need to be made to my code.

The first change is to add an id to the

tag so it can be accessed via getElementById (now I’ll be using this HTML DOM method in place of getElementsByName). The second change is in how I call the getElementById. Notice the notation of how I reference the id of my form and then my checkboxes (BTW, this second function version uses food[] checkboxes). The rest of the function remains the same.

My favorite food is?

Burgers
Pizza
Spaghetti
Tamales

Here is the code for the PHP + JavaScript version.



My favorite food is?
 Burgers

 Pizza

 Spaghetti

 Tamales

All that would be left to do is build a PHP script to process the form submission data and set the script’s file name as the action in the

Ogre3D SDK 1.7.3 for Apple iPhone iOS HOWTO

Tony Bhimani — Sun, 10 Jul 2011 06:12:02 +0000

Welcome to my third installment for Ogre3D on the Mac platform. This tutorial will describe the steps to installing the Ogre3D SDK version 1.7.3 Apple iPhone iOS release on Mac OS X. I’ll also go over installing the Ogre Xcode iPhone Template for generating a default iOS project and building the Ogre Samples Browser project. Although this sounds like a lot of information to cover, much of the groundwork was explained in my first guide for Mac OS X Ogre SDK and my second one outlining how to build the Ogre Samples Browser. I highly recommend reading those before continuing any further with these instructions because I won’t discuss installing Xcode, the NVIDIA Cg Toolkit, or CMake. My two prior Ogre tutorials can be found below.

Step 1 – Download & Install Ogre SDK 1.7.3 for iPhone & iOS Dependencies

Much like my OSX Ogre tutorial, I’m sticking to the prebuilt release of the Ogre SDK for iPhone. Perhaps in the future I’ll write up a doc on building the Ogre SDK from source, but now is not the time. First thing is we’ll do is download the Ogre SDK for iPhone. This guide is written for the version 1.7.3 of Ogre3D which is the current release at this time. Visit the Ogre website to download the Ogre 1.7.3 SDK for iPhone. Follow the link for the Ogre iPhone SDK. Download the iPhone SDK to your computer (it’ll be a DMG disk image called OgreSDK_iOS_v1-7-3.dmg) and mount it (double-click it).

After the disk image mounts, a mock iPhone window appears. There is a folder called OgreSDK that you’ll need to copy to your hard drive. This contains [almost] everything you need to build iPhone Ogre apps. In this tutorial we’ll drop the Ogre SDK into the hard drive root. Now if you followed my Ogre Mac OSX tutorial then we’ll have a name conflict because there is already a /OgreSDK, so copy the OgreSDK folder from the iPhone window to somewhere like your Desktop. Rename it to OgreSDK_iOS and move it to /OgreSDK_iOS (i.e. open a Finder window and drag it over to the hard drive root). So now we have the Ogre iOS SDK installed, the next step is to install the Ogre SDK iPhone iOS Dependencies.

The Ogre iOS dependencies DMG file can be found at SourceForge. Follow the ogre-dependencies-mac -> 1.7 path to get to the Ogre iOS precompiled dependencies DMG file. Download Ogre_iOS_4.3_Dependencies_20110411.dmg and mount the disk image. You’ll see a iPhoneDependencies folder. Copy it and paste it inside of the iPhone SDK folder /OgreSDK_iOS.

That’s all there is to getting the Ogre SDK for iPhone set up on Mac OS X. The next task we’ll move on to is building the Ogre iPhone Samples Browser and running it in the iPhone iOS Simulator.

Step 2 – Generate a Xcode Project for the iPhone Samples Browser

Building the Ogre Samples Browser for the iPhone is very similar to how it’s built for OSX. Both procedures utilize CMake to create a new [working] copy of a Xcode project. However, in regards to making a new Xcode iPhone project, we do have to add one extra step to the CMake process, and that’s adding a new boolean name/value property called OGRE_BUILD_PLATFORM_IPHONE.

Fire up CMake. Set the location of the Ogre iOS SDK with the Browse Source button (/OgreSDK_iOS) and set the location of where to build the binaries with the Browse Build button (/OgreSDK_iOS). Click the Configure button, set the project generator as Xcode, and choose Use default native compilers. Once the process has finished you’ll see a lot of red. Click the Add Entry button up top. In the Add Cache Entry dialog box, for the Name field enter OGRE_BUILD_PLATFORM_IPHONE, set the Type to BOOL, and make sure Value is checked, then click OK. Finally, click Configure twice (once after each configuration process completes) and then the Generate button. The new Xcode project OGRE.xcodeproj for building the Ogre iOS SDK Samples Browser is ready to use.

Step 3 – Build the Ogre SDK iPhone Samples Browser Project in Xcode

With our Ogre iOS project in hand we’re ready to build the Samples Browser. The Ogre Xcode project for iPhone is located in the root of your OgreSDK iOS install directory (/OgreSDK_iOS). It’s called OGRE.xcodeproj (same as the OSX version of the project). Launch Xcode and open the project or just double-click the .xcodeproj file. Unlike the OSX project where we had to make some changes to compile without error, the Ogre iPhone project works out of the box without modification. Click the Build and Run icon in the toolbar (or click the Build menu and select Build and Run). It’ll take some time for the Ogre iPhone Project to compile. Once it’s done compiling the iOS Simulator will open and the Ogre iPhone Samples Browser demo will launch.

To the right is a screenshot of one the demo samples from the project. Using the demo from the simulator is somewhat difficult. To return back to the main screen, click on the Hardware menu and select Shake Gesture. Pat yourself on the back, you’ve made your first Ogre iPhone application. Our last task for this tutorial will be to modify the Xcode iPhone project template so we can have a basic framework available for when we want to start new Ogre SDK projects for the iPhone iOS platform.

Note: What we have done is build the iPhone project so it works on the iOS Simulator. If you try to deploy to an actual iPhone device, you’ll receive an error message [Code Sign error: The identity 'iPhone Developer' doesn't match any valid certificate/private key pair in the default keychain]. Deploying your app(s) to an iPhone requires signing up for the Apple iOS Developer Program which costs $99/yr. The alternative would be to jail-break our iPhone, but I wouldn’t recommend that. I don’t have an iPhone so I won’t be able to go into the details of deploying to a physical device, however there are plenty of resources on the Internet that explain the steps. If I do get an iPhone in the future, I’ll revisit this topic and post a follow-up tutorial.

Step 4 – Install & Edit the Ogre Xcode Project Template for iPhone iOS

If you followed my tutorial for the Ogre SDK on Mac OS X then you’ll already have the Ogre Xcode Templates installed and can skip the next two paragraphs. To install the Xcode templates, you’ll need to download and install a package found on SourceForge.

Download the Ogre_Xcode_Templates_20101211.pkg.zip file to your Desktop or some other location on your Mac, extract the Ogre Xcode Templates Package from the zip file, and launch the installer by double-clicking on the package.

On Step 5 of the installer you’ll be asked for the paths to the OSX and iOS Ogre SDK locations. Ignore the OS X portion of the screen and choose the Find Ogre button for the iPhone option. Point to the /OgreSDK_iOS path (or to the location where you decided to install the Ogre SDK for iPhone). Finish the installation by clicking Continue and finally Close.

To edit the Ogre iPhone Xcode template, we need to modify the file project.pbxproj. We’ll need root privileges to do this so we’ll need sudo and it’ll be easier to do it through the Terminal using nano rather than the Text Editor. Open a Terminal window (commonly found under Applications -> Utilities). Issue the following commands.

computer:~ tony$ cd /Library/Application\ Support/Developer/Shared/Xcode/Project\ Templates/Ogre/iPhone\ OS/
computer:~ tony$ cd ___PROJECTNAME___.xcodeproj/
computer:~ tony$ sudo nano project.pbxproj

There are two changes we’ll be making to the to the project.pbxproj settings file, just in many different locations. It’s a good thing nano has search & replace otherwise this could because extremely tedious. To use the search & replace feature,
press ctrl-\ [ Control-Backslash ]

We’re going to search for the string _OGRESDK_ROOT_ and replace it with the location of where our Ogre iOS SDK is installed (/OgreSDK_iOS). So after pressing ctrl-\ [ Control-Backslash ], in the first prompt enter _OGRESDK_ROOT_ and press enter, then enter /OgreSDK_iOS (or wherever you put your Ogre iOS SDK) for the second prompt. You can press the ‘y’ key (Yes) to replace each instance one at a time or press the ‘a’ key (All) to do them all at once. Here are the line numbers that the changes occur on.
[ Lines 43-50, 52-54, 263-272, 276-279, 295-304, 308-311 ]

Next we need to add a linker flag to both our Debug & Release configurations so after compilation our Ogre iPhone program gets linked against a specific dynamic library (otherwise you’ll get linker errors for undefined symbols such as “_inflateInit_” “_inflateEnd” “_inflate” and others). Scroll down to line number 323 (you can press ctrl-c [ Control-C ] to determine what line number you’re on in nano).

Add a new line and enter the text OTHER_LDFLAGS = /usr/lib/libz.dylib; then scroll to line number 335 and a new line and enter that same text again. You can see how the changes look in the screenshot to the right. Save the Ogre Xcode Template project.pbxproj settings file by pressing ctrl-o [ Control-O ]. Exit with ctrl-x [ Control-X ].

Step 5 – Build & Run a Demo Project from the Ogre Xcode iPhone Template

The end of this Ogre iPhone SDK tutorial is here. There’s just one last thing to do – build and run a demo from our Xcode iPhone template. Open Xcode and create a new project, choose Ogre under User Templates, and click on the iPhone OS option. Click the Choose button and give your project a name (e.g. OgreDemo_iPhone). Click the Build and Run button from the toolbar or use the Build menu if you prefer.

If all goes well (which it should) your demo project from the Xcode iPhone template will be running in the iOS iPhone Simulator (as can be seen to the right). It’ll look exactly like the demo project as found in the Mac OS X version (a Green Ogre Head enclosed by the Space Skybox). You can rotate the camera view by click-holding down your mouse on the screen and moving it around. Good job! You’ve built an Ogre iPhone application and viewed it in the iOS Simulator.

In conclusion, you’ve learned how to install the Ogre 1.7.3 SDK for iPhone on Mac OSX and built the Samples Browser that comes with the SDK by using CMake. Expanding upon that you also learned how to install the Ogre Xcode Templates, tweaked the iPhone settings file for your development machine, and built a demo project from that iPhone OS version. Now that you’re familiar with setting up Ogre on a Mac the next thing would be to learn how to make some custom Ogre apps. I recommend checking out the tutorials on the Ogre3D website since you now have a working Ogre development environment.

Building the Ogre3D SDK Samples on Mac OS X

Tony Bhimani — Wed, 06 Jul 2011 06:37:22 +0000

In my previous Ogre3D tutorial for the Mac I showed you how to set up your Mac OSX development environment with the Ogre SDK 1.7.3, install the Xcode templates, and create a sample Ogre project. That’s a great start but what if you wanted to build the samples that came with the Ogre SDK? If you try and use the default Xcode project you’ll receive build errors. To remedy this we have to install a new application called CMake.

Step 1 – Install CMake 2.8.3

The Ogre SDK framework makes use of CMake for creating build scripts (or projects) for the chosen target platform. If you were to build the Ogre3D render engine from source, you’d use CMake to generate a project for Xcode or a Unix Makefile. For building the SDK samples that come with Ogre, it’s the same process in using CMake to generate a working Xcode project to build those samples. To sum it up, we need CMake.

To download CMake 2.8.3 you can click that link you just read over. It’s a Mac DMG disk image. Save it to your Desktop or another location of your choice. Launch the DMG by double-clicking it. Follow the instructions and install CMake to your Mac computer. Check your Applications folder. You should now have CMake 2.8-3 icon. Launch CMake. The User Interface (UI) is to the point (set the source code location, where to build the binaries, and configure the name/value pairs, then build). Next we generate a new Xcode project for the Ogre SDK Samples.

Step 2 – Generate a New Ogre SDK Samples Xcode Project

You’ll need to know where you installed your copy of the Ogre SDK to. Mine is located in the root /OgreSDK. Follow the steps below to generate a new Xcode Project for the Ogre SDK Samples.

Click the Browse Source button and browse to the location of your Ogre SDK installation (/OgreSDK).
Click the Browse Build button and choose a location where you’d like the build binaries to be saved to. I use the same location as my SDK install (/OgreSDK).
Click on the Configure button. Another window will popup asking for what type of project generator (Xcode) and compilers (Use default native compilers) to use.
CMake will run through the motions and show some Ogre SDK build variables in red. Click the Configure button one more time. After another set of motions you’ll see more concrete CMake variables.
Click the CMake Generate button to create the Xcode project for building the Ogre SDK Samples. That’s it for CMake. You can close it now.

Step 3 – Modify Settings in the Ogre3D SDK Samples Project

Before we can build the Ogre Samples we need to make a few modifications to our Xcode Ogre Project. Inside /OgreSDK there is a Xcode project called OGRE.xcodeproj. Double-click the Ogre project to launch Xcode. Go ahead and start the build process. You’ll encounter hundreds (if not thousands) of errors. To correct this issue we need to change the build architecture to i386. The Ogre.framework SDK we’re using is prebuilt for i386 so building for any other architecture will fail (unless you build from the source code). Okay, so let’s make the needed changes so we can compile the Ogre Samples.

In Xcode, click on the Project menu, select Edit Active Target “ALL_BUILD”, a dialog window will appear. Make sure you’re on the Build tab and that the Configuration is All Configurations and Show is All Settings. Under the User-Defined Settings, the first property is ARCHS. Double-click and edit the value $(ARCHS_STANDARD_32_BIT). i.e. Take the _64 out of the property value. Save the change and exit the Info window.

Next, click on the Project menu and select Edit Project Settings, the Project Info window appears. Make sure you’re on the Build tab and that the Configuration is All Configurations and Show is All Settings. Under Architecture Settings, the second option Architecture, set the property value to 32-bit Universal. Remove all the other architectures except i386 for the Valid Architectures property. You can now close the Project Info window.

Step 4 – Compile the Ogre3D SDK Samples Project in Xcode

At last, the final step, which is the easiest. Build the Ogre project! Click the Build and Run toolbar button or select it from the Build menu. There are 34 samples to compile so the Ogre Samples Xcode Project will take some time to build. If all goes well (which it should) you’ll have the Ogre Samples running. Explore the Ogre samples. If you encountered compile errors, double-check your project settings.

Say Hello to the Penguin from one of the Ogre Samples Browser. There are 33 more to check out, everything from BSP Scenes, to Shadows, to Skydomes, and more.

Creating Multi-Volume Archives and Checksums

Tony Bhimani — Thu, 01 May 2008 03:59:08 +0000

The goal of this article is to help you create multi-volume archives and generate checksums to validate integrity. Why? You have data larger than any single CD-R disc or DVD and you need to split it into pieces, or you have to transfer gigabytes of data over the net and would rather send smaller segments instead of a giant glob. As an example, I’ll create a multi-volume gzip archive of /home with a MD5 checksum using tar, gzip, split, and md5sum.

Creating Volumes from your Data

1. Create a single TAR archive of all your data using tar to preserve permissions, directory structures, etc.

[root@linux archive]# tar -cf home.tar /home
tar: Removing leading `/' from member names
[root@linux archive]# ls -la home.tar
-rw-r--r-- 1 root root 304220160 Apr 30 13:34 home.tar

2. Compress your TAR archive using gzip (or any other compressing program of your choice).

[root@linux archive]# gzip home.tar
[root@linux archive]# ls -la home.tar.gz
-rw-r--r-- 1 root root 284859091 Apr 30 13:34 home.tar.gz

3. Use the split command to chop the compressed archive into smaller segments (I’ll be using 100MB pieces).

[root@linux archive]# split -d -b100m home.tar.gz home.tar.gz.
[root@linux archive]# ls -la
total 556940
drwxr-xr-x 2 root root      4096 Apr 30 13:56 .
drwxr-x--- 6 root root      4096 Apr 30 13:31 ..
-rw-r--r-- 1 root root 284859091 Apr 30 13:34 home.tar.gz
-rw-r--r-- 1 root root 104857600 Apr 30 13:56 home.tar.gz.00
-rw-r--r-- 1 root root 104857600 Apr 30 13:56 home.tar.gz.01
-rw-r--r-- 1 root root  75143891 Apr 30 13:57 home.tar.gz.02

4. Create a MD5 checksum (or a SHA1 checksum).

[root@linux archive]# md5sum home.tar.gz* > MD5SUM
[root@linux archive]# cat MD5SUM
cb16175f4acad02f977f74d5c142879b  home.tar.gz
33c745ca49ab6e63b727658ec148cf67  home.tar.gz.00
14e6952b632fbb7f4c0731067afdb46c  home.tar.gz.01
386655357f8553c7730fd792c22fde2a  home.tar.gz.02

Same thing but creating a SHA1 checksum instead (you don’t need two checksums, I just illustrate to use both types — pick one).

[root@linux archive]# sha1sum home.tar.gz* > SHA1SUM
[root@linux archive]# cat SHA1SUM
3858b51622dc9135c192a7c98dec24ccd35c63d6  home.tar.gz
6bc12b26dc1388d70d1a7cc0290dc6c9e8e0f97e  home.tar.gz.00
0683a44538ac65330fe103440e4f2a4a3a652be5  home.tar.gz.01
eb0f65fd0f4b3d98221e3ae8600f1691b536ad1d  home.tar.gz.02

Restoring your Data from the Volumes

You’ve burned or transferred your volumes and now want to restore them to the original. Here are the steps.

1. Verify the checksum against the volumes (ignore the error on the original file).

[root@linux resurrection]# md5sum --check MD5SUM
md5sum: home.tar.gz: No such file or directory
home.tar.gz: FAILED open or read
home.tar.gz.00: OK
home.tar.gz.01: OK
home.tar.gz.02: OK
md5sum: WARNING: 1 of 4 listed files could not be read

Once again, same deal but with the SHA1SUM file.

[root@linux resurrection]# sha1sum --check SHA1SUM
sha1sum: home.tar.gz: No such file or directory
home.tar.gz: FAILED open or read
home.tar.gz.00: OK
home.tar.gz.01: OK
home.tar.gz.02: OK
sha1sum: WARNING: 1 of 4 listed files could not be read

2. Join the volume pieces together using cat (after you finish you can validate the checksum *again* to see if the original file passes an integrity check).

[root@node2 resurrection]# cat home.tar.gz.* > home.tar.gz
[root@node2 resurrection]# ls -la home.tar.gz
-rw-r--r-- 1 root root 284859091 Apr 30 15:23 home.tar.gz

3. Decompress and extract the tar.gz file contents and you’re done.

[root@linux resurrection]# tar zxvf home.tar.gz
... verbose file list ...
[root@linux resurrection]# ls -la
total 556952
drwxr-xr-x 3 root root      4096 Apr 30 15:33 .
drwxr-x--- 7 root root      4096 Apr 30 15:02 ..
drwxr-xr-x 4 root root      4096 Apr 30 13:06 home
-rw-r--r-- 1 root root 284859091 Apr 30 15:23 home.tar.gz
-rw-r--r-- 1 root root 104857600 Apr 30 15:04 home.tar.gz.00
-rw-r--r-- 1 root root 104857600 Apr 30 15:04 home.tar.gz.01
-rw-r--r-- 1 root root  75143891 Apr 30 15:04 home.tar.gz.02
-rw-r--r-- 1 root root       193 Apr 30 15:05 MD5SUM
-rw-r--r-- 1 root root       225 Apr 30 15:05 SHA1SUM

Contents extracted and there is the home directory. The End.

I got the idea of using the split command from this post on the Ubuntu Forum (how to create multi zip files) because I couldn’t get tar or gzip to create multi-volume archives.

Creating Captcha Images with PHP and the GD Library

Tony Bhimani — Sat, 02 Feb 2008 06:34:01 +0000

A long time ago I wrote some code to create captcha images using PHP. The goal was to create similar or exact representations of the captcha’s used on Yahoo’s Overture. I really don’t have an answer why I chose their style except that it’s possible I liked the way they looked. I am sharing this code for creating the images but it’s up to you to create some logic in applying their use with HTML forms (I’ll give some hints at the end of this post).

This is the code to create the image. It returns an image resource identifier. Note the use of a custom TrueType font — you’ll need to change that line to the path of a font on your system.

 1=black, 2=white, 3=grey (more colors can be added)
  // lines -> black bg (1=white or 2=grey), white bg (1=black or 2=grey), grey bg (black only)
  $randval = rand(1, 3);
  if ($randval == 1) {
    $bgcolor = $black;
    $fontcolor = $white;
    $linecolor = ((rand(0, 1) == 0) ? $black : $white);
  } elseif ($randval == 2) {
    $bgcolor = $white;
    $fontcolor = $black;
    $linecolor = ((rand(0, 1) == 0) ? $black : $white);
  } else {
    $bgcolor = $grey;
    $fontcolor = $black;
    $linecolor = ((rand(0, 1) == 0) ? $black : $grey);
  }

  // line positioning and increment
  $x_start = rand(0, 10);
  $x_size = rand(5, 10);
  $y_start = rand(0, 10);
  $y_size = rand(5, 10);

  // fill with background color
  imagefill($im, 0, 0, $bgcolor);

  // initial x position
  $font_x = 10;

  // write text
  for ($i = 0; $i < strlen($security_code); $i++) {
    // font size -> 20 to 35
    $font_size = rand(25, 35);
    // font angle -> -20 to +20
    $font_angle = rand(0, 20);
    if ($font_angle != 0) { if (rand(0, 1) == 0) { $font_angle = -$fone_angle; } }
    // font y position -> if font_size <= 27 then 30 to 35, if font_size > 27 then 30 to 35
    if ($font_size <= 27) { $font_y = rand(25, 30); } else { $font_y = rand(30, 35); }
    // write the text
    imagettftext($im, $font_size, $font_angle, $font_x, $font_y, $fontcolor, $font, $security_code{$i});
    // one more time to make it bolder
    imagettftext($im, $font_size, $font_angle, $font_x+1, $font_y+1, $fontcolor, $font, $security_code{$i});
    // next font x position
    $font_x += ($font_size + 5);
  }

  // draw horizontal lines
  for ($y = $y_start; $y < $img_height; $y += $y_size) {
    imageline($im, 0, $y, $img_width, $y, $linecolor);
  }
  // draw vertical lines
  for ($x = $x_start; $x < $img_width; $x += $x_size) {
    imageline($im, $x, 0, $x, $img_height, $linecolor);
  }

  // return captcha image handle
  return $im;
}
?>

We need a method for generating random four character strings when the captcha is created and displayed to the user. This function will do the trick.

With everything in place, we can generate the secret key, create the captcha, and finally display it to the user using this code.

Here is an example of the code in action. The style looks very similar to the images used on Yahoo’s Overture.

Captcha Demo »

Now you know how to create a captcha, so what about verifying the input against the captcha value? This can be accomplished a variety of ways and everyone tends to have their preference.

One method is to save the secret key in a session variable. As the image is created, store the key in a session variable and once the form is submitted, check the user’s value against the one stored in the session. If they match, proceed but if they fail, return an error and don’t process the form data.
If you don’t want to use sessions, you could try using temp files. Store the key in a temp file and pass some value as a query string identifying to the script that the key is in that file. Read in the key and MD5 or SHA1 crypt the key and save it in a hidden form field. When the form is submitted, compare the hashed key against the user input (which you will also hash). Process the form data if the keys match.

You can download the provided source file. Use the PHP file as an image source in your HTML IMG tag.

http://www.yourdomain.com/captcha.php">

Don’t forget to edit the path to the TrueType font you want to use in the captcha_image function. Failure to do so will lead to missing image characters.

Source Files: captcha.zip

Domain Redirection using Apache mod_rewrite and .htaccess

Tony Bhimani — Sun, 27 Jan 2008 04:21:49 +0000

I recently acquired more XenoCafe domains (xenocafe.info, xenocafe.net, and xenocafe.org) and finally got around to adding them to my server. Instead of them being their own sites (well, point to my primary site, but the URL in the browser address bar is taken over by the new domain name), I wanted them to redirect to my primary domain (xenocafe.com).

If you want to achieve the same effect, here is how I did it (to see it in action, click on the first three XenoCafe links above). All you need is Apache, mod_rewrite, and htaccess. I’m going to skip the step-by-step configuration stuff to cut down the length of this article. If you need help, you can register for an account and post a question to the comments section for this post.

In this mock setup, I’ll use 10.10.100.34 as the IP address of my web server, example.com as the primary domain I want to redirect to, and ourexamples.com as the domain I want to redirect from (to example.com). This is a three step process that involves creating the zone file(s), adding the redirect domains to your Apache httpd.conf VirtualHost configuration, and finally creating the htaccess mod_rewrite rules to redirect all requests for the new domains to your desired domain.

Create a New Zone File for each Domain you Acquired

The primary domain example.com already has a zone file and is a functioning web site, but for ourexamples.com to work we need to create a zone file for it. Here is an example (we only need the minimum – SOA, NS, and the host for web).

$TTL   21600
$ORIGIN ourexamples.com.
@       IN      SOA     ns1.example.com. hostmaster.example.com. (
                        2008012601      ; serial
                        3600            ; refresh
                        600             ; retry
                        86400           ; expiry
                        21600 )         ; minimum

        IN      NS      ns1.example.com.
        IN      NS      ns2.example.com.

        IN      A       10.10.100.34
www     IN      A       10.10.100.34

Now reload the zone(s) for changes to take effect.

Add the Redirect Domains to the Primary Domain’s VirtualHost Definition (using the ServerAlias directive)

Edit your primary domain’s virtual host entry and add the new domain(s) using the ServerAlias directive. Below is an example of editing the example.com virtual host and adding the new redirection domain ourexamples.com (highlighted line).


    ServerAdmin hostmaster@example.com
    ServerName example.com
    ServerAlias www.example.com
    ServerAlias ourexamples.com www.ourexamples.com
    DocumentRoot /web/example/html
    ScriptAlias /cgi-bin/ /web/example/html/cgi-bin/
    ErrorLog /web/example/logs/error_log
    CustomLog /web/example/logs/access_log combined
    
        AllowOverride All

Restart Apache to reload the virtual host changes. Next we’ll need to create the htaccess file to configure domain redirection.

Using mod_rewrite to Redirect the Domain Requests

If we were to stop here, the new domain would work, however there is no redirection to your primary domain name. It will simply use the same document root and serve the files without any changes to the URL in the browser address bar. If this is what you desire, then stop here, otherwise continue on to bounce all requests from ourexamples.com to example.com.

In the document root of where your HTML files are stored (where DocumentRoot points to in your Apache VirtualHost definition), create a .htaccess with a text editor. Here is the example.


RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\.example\.com [NC]
RewriteCond %{HTTP_HOST} !^$
RewriteRule (.*) http://www.example.com/$1 [L,R=301]

In short, what this code does is turn on mod_rewrite’s engine, check the HTTP host to see if it matches www.example.com and also checks for empty references; if either case is a yes it rewrites the URL to http://www.example.com using a permanent redirect (HTTP 301 Redirection header). The $1 appends any portion trailing the domain name from the original (directories and/or pages being accessed). This code also forces the ‘www’ prefix on all requests — http://example.com => http://www.example.com and http://ourexamples.com => http://www.example.com and so on.

Openfire Jabber/XMPP Server on CentOS mini-Howto

Tony Bhimani — Tue, 01 Jan 2008 06:13:38 +0000

So you want to set up your own private chat network for friends or family, or maybe your company uses the major chat providers like AIM, Yahoo, MSN, or Google for interoffice communication, but you want more control and to keep the network traffic inside your LAN. Whatever your case may be, this guide will show you how to do it with Ignite Realtime’s Openfire Jabber Server for Linux.

Before we get started…

There are two preliminary steps to complete before we install Openfire. They aren’t essential to its functionality (you can skip them if you’d like), but they’ll make things easier when it comes to managing the administration for you and your users. Those two steps are setting up a DNS alias for the server host name and creating a MySQL database for the backend instead of using the included embedded database.

» Create a DNS Host Name for your Jabber Server

For this guide I’ll use the host name ‘jabber’ for my Openfire server. I run my own DNS server so I’ll be editing my zone file to add the new alias. If you use a third party service for DNS on your domain then you should know how to add new aliases. If you don’t then you should consult their Support documentation for more information.

Open your zone file in a text editor and add your new alias. Yours may look something like this example when you’re done. The highlighted line is what I added.

$TTL    21600
$ORIGIN mydomain.com.

@       IN      SOA     ns1.my-name-server.com. admin.my-name-server.com. (
                        2007122301      ; serial
                        3600            ; refresh
                        600             ; retry
                        86400           ; expiry
                        21600 )         ; minimum

                IN      NS      ns1.my-name-server.com.
                IN      NS      ns2.my-name-server.com.

                IN      MX      10      mx1.my-mail-server.com.
                IN      MX      20      mx2.my-mail-server.com.

                IN      A       10.0.0.100

www             IN      A       10.0.0.100
ftp             IN      A       10.0.0.100
jabber          IN      A       10.0.0.100

Save your changes, flush the cache and reload the zone.

[root@node1 ~]# rndc flush
[root@node1 ~]# rndc reload

» Create the MySQL Database for Openfire Data

Sometimes a tool like phpMyAdmin comes in handy for managing MySQL databases, however I don’t have it installed on this server. Instead I’ll be adding my Openfire database from the MySQL console. All we need to do is create the database, add an user account that has full control over that database, and reload (flush) the privileges.

[root@node1 ~]# mysql -u root -p
Enter password:
Welcome to the MySQL monitor.  Commands end with ; or g.
Your MySQL connection id is 3 to server version: 5.0.22

Type 'help;' or 'h' for help. Type 'c' to clear the buffer.

mysql> CREATE DATABASE `openfire`;
Query OK, 1 row affected (0.00 sec)

mysql> CREATE USER 'openfire'@'localhost' IDENTIFIED BY 'password';
Query OK, 0 rows affected (0.01 sec)

mysql> GRANT USAGE ON *.* TO 'openfire'@'localhost' IDENTIFIED BY 'password' WITH MAX_QUERIES_PER_HOUR 0 MAX_CONNECTIONS_PER_HOUR 0 MAX_UPDATES_PER_HOUR 0 MAX_USER_CONNECTIONS 0;
Query OK, 0 rows affected (0.00 sec)

mysql> GRANT SELECT, INSERT, UPDATE, DELETE, CREATE, DROP, INDEX, ALTER, CREATE TEMPORARY TABLES ON `openfire`.* TO 'openfire'@'localhost';
Query OK, 0 rows affected (0.01 sec)

mysql> FLUSH PRIVILEGES;
Query OK, 0 rows affected (0.02 sec)

mysql> quit
Bye
[root@node1 ~]#

Now that all the preliminaries are out of the way, we can move onto installing Openfire.

Download and Install the Openfire Software

Openfire can be downloaded from the Ignite Realtime web site. As of this writing, the latest version available for download is Openfire 3.4.2 for Linux.

We’ll start by downloading the Openfire RPM via wget.

[root@node1 ~]# wget -O openfire-3.4.2-1.i386.rpm http://www.igniterealtime.org/downloadServlet?filename=openfire/openfire-3.4.2-1.i386.rpm
--12:18:13-- http://www.igniterealtime.org/downloadServlet?filename=openfire/openfire-3.4.2-1.i386.rpm
Resolving www.igniterealtime.org... 63.246.20.125
Connecting to www.igniterealtime.org|63.246.20.125|:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: 40451331 (39M) [application/x-rpm]
Saving to: `openfire-3.4.2-1.i386.rpm'

100%[=====================================================================>] 40,451,331   368K/s   in 1m 52s

12:20:05 (354 KB/s) - `openfire-3.4.2-1.i386.rpm' saved [40451331/40451331]

[root@node1 ~]#

Now install the RPM, start the Openfire service, verify it is actively running, and set it to auto-start whenever your server is rebooted.

[root@node1 ~]# rpm -ivh openfire-3.4.2-1.i386.rpm
Preparing...                ########################################### [100%]
   1:openfire               ########################################### [100%]
[root@node1 ~]# /etc/init.d/openfire start
Starting openfire:
[root@node1 ~]# ps -ef | grep -i openfire
root      2508     1  0 07:35 pts/0    00:00:00 su -s /bin/sh -c /opt/openfire/jre/bin/java -server  -DopenfireHome=/opt/openfire -Dopenfire.lib.dir=/opt/openfire/lib -classpath "/opt/openfire/lib/startup.jar" -jar "/opt/openfire/lib/startup.jar" daemon
daemon    2511  2508 37 07:35 ?        00:00:07 /opt/openfire/jre/bin/java -server -DopenfireHome=/opt/openfire -Dopenfire.lib.dir=/opt/openfire/lib -classpath /opt/openfire/lib/startup.jar -jar /opt/openfire/lib/startup.jar
root      2526  2414  1 07:35 pts/0    00:00:00 grep -i openfire
[root@node1 ~]# chkconfig --level 235 openfire on
[root@node1 ~]#

Open Ports in your Firewall

If you have a firewall in place you’ll need to open some ports before we can start configuring Openfire through its web interface. Openfire uses ports 5222, 7777, 9090, 9091 for client connections, file transfer proxy, http web administration and the secured administration respectively. If you use iptables tables like I do, add these lines to your /etc/sysconfig/iptables rules file and reload. See my RedHat IPTables Tutorial on XenoCafe for more information on configuring iptables from the ground up.

-A INPUT -p tcp -i eth0 --dport 5222 -j ACCEPT
-A INPUT -p udp -i eth0 --dport 5222 -j ACCEPT
-A INPUT -p tcp -i eth0 --dport 7777 -j ACCEPT
-A INPUT -p udp -i eth0 --dport 7777 -j ACCEPT
-A INPUT -p tcp -i eth0 --dport 9090 -j ACCEPT
-A INPUT -p udp -i eth0 --dport 9090 -j ACCEPT
-A INPUT -p tcp -i eth0 --dport 9091 -j ACCEPT
-A INPUT -p udp -i eth0 --dport 9091 -j ACCEPT

Then reload iptables to accept the new directives.

[root@node1 ~]# iptables-restore < /etc/sysconfig/iptables

Configure Openfire through its Web Interface

1. Launch your favorite browser and go to http://your_jabber_server_ip_address:9090 or if you set up a DNS alias http://jabber.mydomain.com:9090 to go to the Openfire web interface. You’ll be greeted by Openfire’s setup tool. In the first step, select your language. Here we choose English.

2. The next step is to set the server domain. If you opted for an IP address name, enter your server’s IP. If you opted to create a DNS alias, enter the DNS server domain. Here we created jabber.mydomain.com so we’ll enter that. By default the Openfire web interface console ports are 9090 and 9091 for standard and secure respectively. You can use other ports if you wish (NOTE: you’ll have to change your firewall settings if you use different ports), but for this guide we’re sticking with the default values.

3. You have two choices regarding which database to use for Openfire to store its data: an external database like MySQL, MSSQL, PostgreSQL, etc… or to use the bundled embedded database. If you setup a MySQL database like we did in this guide then select the Standard Database Connection option. If you didn’t, the only choice is to use the Embedded Database.

4. To set up your database connection, select the appropriate driver from the Database Driver Presets list (we set up a MySQL database so we’ll select MySQL). The page will refresh and you need to fill in the necessary information (the database host, name, username, and password). You should have this information from when you setup your MySQL database. Per this guide, MySQL is on the same server as my Openfire installation (localhost) and I created a database called ‘openfire’ with a username of ‘openfire’ and set a password.

5. The profile step has to do with the users and groups of chat members and where Openfire will store that information (new users, user groups, etc…). We won’t opt for LDAP to store this information. It is much more convenient to save it in our in our database.

6. We’re almost done. Enter the administrator email address (your email address) and set a password for your Openfire server.

7. Now you’re done! Pat yourself on the back. Click the Login to admin console button.

8. Type in the Openfire admin password you entered in Step 6 and click the Login button.

Welcome to the Openfire Administration Console. Take a look around and get familiar with the layout.

Time to Make Some Openfire Configuration Changes

Your Openfire installation will work out of the box and you can skip this section if you want, but for this tutorial I wanted to make some changes. Namely, I want my server to follow some rules so there is no chaos.

I don’t want any other servers to be able to communicate with mine (it’s private and self sufficient)
I define the member base so anonymous users cannot create accounts (ideal for an office environment)
Finally, all communication between clients and the server is encrypted (force jabber clients to use SSL)

Follow along if you want to use any of these features or jump ahead to the Creating Users and Groups for Jabber Clients section.

1. On the left under Server Settings, click the Server to Server link. In the top panel Service Enabled, choose the Disabled option and click Save Settings.

2. Click the Registration & Login link in the left side menu. Disable both options under Inband Account Registration and Anonymous Login. We’ll leave the Change Password option alone to let users update their passwords as they see fit. Click the Save Settings button at the bottom of the page.

3. Click the Security Settings link on the left. Under Client Connection Security, choose the Required option to force jabber clients to use SSL (NOTE: If the client doesn’t support SSL and this option is enabled, the client will not be able to connect to the server). Click the Save Settings button.

Openfire SSL Certificates

Openfire creates self-signed SSL Certificates by default. Remember the port 9091 from before? If you ever want to access this administration console from a Secure Connection, then you’ll need to restart the Openfire HTTP Server.

Click the Server Certificates link on the left menu.

Click the link in the highlight section.

Openfire will restart the HTTP Web Server and kick you back to the login screen. Log back in and the SSL Certificate should now be in use and you can access the console from SSL.

Creating Users and Groups for Jabber Clients

Since we’re creating a jabber server for a mock office environment, we prohibit anonymous users from creating accounts. Because of this, we will manage all users and groups on a global scale through our Openfire server. This means, all groups and users will be pushed to the clients that log in so they don’t have to add every single user account or group to their client. Also, any changes happen in real-time on the client (new users or groups added, removed, etc…). Kind of cool, huh? This is accomplished through Contact Group List Sharing.

We’ll be creating a mock Developer “Devel” group and add some users to it. Click on the Users/Groups tab on the top.

1. Go to Create New User under the Users section on the left. Fill in the Username, Password, and Confirm Password fields and click the Create User button.

Repeat this process to add all the users you want on your server.

2. Go to Create New Group under the Groups section on the left. Fill in the Group Name and an optional Description. Click the Create Group button.

3. The group has been added. Now we’ll share the contact list so it’s global to all jabber clients that connect to our server. Under the Contact List (Roster) Sharing section, click the Enable contact list group sharing option. In the name field, type in the same name as set for the group. Click the Save Contact List Settings button.

4. Scroll down the page and type in an user name to the Add User field and click the Add button.

Now we have one member in our group. Repeat this for each user you want assigned to this group.

Setting up a Jabber Client (Spark 2.5.8 for Windows)

Our Openfire Jabber Server is useless unless we have clients connect to it and communicate through it. We’ll use Spark from Ignite Realtime. If that doesn’t suit you then you are open to use another jabber client since there are many of them out there (see the client from jabber.org).

1. Download Spark, install it, and launch it.

2. Type in your Openfire user credentials (Username and Password). In the Server field, type in the Openfire Servers IP address or DNS alias. Click the Login button.

3. The contact list will appear once you have successfully logged in. The shared group(s) will be visible (NOTE: groups with no online users will be hidden unless you select the Show empty groups option from the Contacts menu) along with the users of those groups. My contacts are not online as you can see from the picture below.

You’re done. You now have the essentials of configuring your own Jabber server and clients.

This is my last tutorial, guide, howto, whatever you want to call it for 2007. Happy New Year!