Tony Bhimani's Blog

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

Welcome Home MacBook Pro, I Missed You!

Tony Bhimani — Sat, 24 Sep 2011 16:44:11 +0000

Last Friday, the 16th, my MacBook went off to be repaired. I got it back yesterday (a week later). They replaced the LCD and did something to the video. My MacBook Pro is running like a champ again. This repair job cost me $350 that I didn’t have, but I needed it fixed so I could get back to learning Apple development. My fingers are crossed the video doesn’t go out again, but if you must die on me Mac hardware, please be so kind as to do it before the 90-day warranty expires.

New Mac OS Content Will Have To Wait…

Tony Bhimani — Wed, 14 Sep 2011 17:05:13 +0000

I had written a few Mac related posts and was going to continue with that theme for a while, however my MacBook Pro took a dump. This is old news to me, but new news to you because it actually all went down over a month ago and I’ve been too lazy to write about it.

The night it began I was fiddling with Unity3D and all of a sudden my screen did something I had never seen before on any of my computers. Putting this into words is very difficult as what I saw is hard to explain. It looked as if tiny pieces of my screen were cutout and replaced with black emptiness – similar to a patch pattern or something like that. Think of taking a finely knit blanket, stretching it out so the little holes are slightly enlarged, then overlay that on your screen. Visualize it being inverted, being the solid part transparent and the holes will be black. That in a nutshell is what my screen looked like. Anyway, I rebooted and the same deal happened when it came back up. I gave up and turned the laptop off for the night. The next day it was fine and was running normal for a week until one night the screen turned off. I powered it off and tried it again. Now it’s finally toast. It gets power (keyboard lights up, hard drive revs up, etc) but just no screen.

I Googled some things to try but nothing has worked. Diagnosing hardware isn’t my area of expertise, but from what I can gather either the screen is bad or the video card crapped out. I’ve been told this is a common problem with first generation MacBook laptops(?). I also called a few places and apparently it’ll cost between $250-$400 to have my MacBook repaired. I hooked up a DVI cable and I didn’t get anything on my external monitor so I’m leaning more towards the video card dying.

I’m not in a rush to have my MacBook fixed. My future articles are going to cover Linux. I was thinking of writing Linux versions of my Ogre3D posts.

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.

More Ogre3D guides to read:

Guide to Installing Ogre3D on Mac OS X (Xcode + Ogre SDK 1.7.3)

Tony Bhimani — Sun, 26 Jun 2011 01:20:12 +0000

This guide serves as an introduction to getting started with Ogre3D on Mac OS X, namely setting up the development environment and building a basic application. It’ll serve as the first in several series of blog posts I intend to write on the subject. Let me say this first. I am not an expert on Ogre, 3D graphics development or theory, or Macs. I may get the jargon wrong and my instructions may not work for very system, so contacting me for help may not the best thing to do, however I’ll do what I can to assist if you do.

There is a lot of information on Ogre in general on the Internet, but not too much on configuring it on Mac or Linux. I will write a document for installing Ogre on Linux at a later date, but for now it’s OSX time. Also, you should definitely visit the Ogre Wiki after reading this tutorial for even more information.

Step 1 – Download & Install Apple Xcode IDE

To get started, you should first get the Xcode IDE if you don’t already have it. Apple makes it available as a free download after you create an account on their website (the 3.x version is free at the time of this writing). Visit the Apple Developer Website to download a copy of the Xcode 3 IDE. After you download Xcode, then install it. I’m not going into detail for this step as it’s very straightforward to install the Xcode IDE.

Step 2 – Download & Install NVIDIA Cg Toolkit

The NVIDIA CG Toolkit isn’t required but is needed for the Ogre Cg Program Manager. To install the toolkit, you’ll need to go to the NVIDIA developer website, create a login if you don’t already have one, then download the Mac OS X DMG image. To do this, visit the NVIDIA Developer Cg Toolkit Page and scroll to the bottom of the page. Click on the download link. On the Access Denied page, click on the Login link. Proceed to create an account by clicking on the Create new account tab. Go back to the download page and fetch the Mac OS X file image. Install the NVIDIA Cg Toolkit it like you would any other Mac setup package.

Step 3 – Download & Install Ogre SDK 1.7.3 & OSX Dependencies

At the time of this article the current version of Ogre3D is 1.7.3. To keep things simple we’ll be installing the prebuilt release of Ogre SDK for OS X instead of compiling from source. To get started, we have to visit the Ogre3D website and download the Ogre 1.7.3 SDK for Mac OS X. On that page there is a link to the latest Mac OS X Ogre3D release. Download the Ogre SDK to your computer (it’ll be a .DMG Apple Disk Image File). Double-click the Ogre SDK DMG to mount the disk image.

You’ll be greeted with an Ogre SDK window (as shown on the left). There is a blue folder called OgreSDK in that window, ctrl-click (aka right-click) on that folder and select the Copy “OgreSDK” menu option. Paste the folder to your hard drive (I recommend the root, that being /OgreSDK). Open a Finder window, select your hard drive under Devices, ctrl-click and Paste the OgreSDK folder.

As you can see from the image to the right, the OgreSDK folder is quite large so the copy process may take a moment. When it’s done we move on to the next step, that being installing the Ogre dependency files. There is a zip file containing dependencies we’ll need to be able to build our own Ogre Mac OSX applications, and these dependencies are boost, FreeImage, freetype, OIS, and zzip.

The Ogre Mac OSX dependencies zip file is located on SourceForge. When you get there, follow the ogre-dependencies-mac -> 1.7 folder path. Download the file OgreDependencies_OSX_20110208.zip and extract its contents. You’ll get a folder called Dependencies. Move that folder into the /OgreSDK folder (or wherever you put yours).

Step 4 – Download & Install Ogre Xcode Templates

Xcode templates are available for creating minimal Ogre3D Mac Projects. The Mac OS X Universal Precompiled Dependencies for OSX and iOS can be found of the SourceForge website. There are two installer versions available: the one that has Ogre templates for Xcode 3 and the other for Xcode 4. My directions are made for Xcode 3 so that is the Ogre template installer I’ll be using. I can’t tell you if my directions will work for Xcode 4 since I don’t have it to test against.

Okay, so first thing is to download the Ogre Xcode template installer package. Visit the Ogre SourceForge Files website. 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. I haven’t discussed the iOS iPhone SDK release of Ogre and we’ve only installed the OSX version, so for now choose the Find Ogre button for the OSX option. Point to the /OgreSDK path (or to the location where you decided to install the Ogre SDK). Wrap up the rest of the installation by clicking Continue and finally Close.

Step 5 – Create a Mac OSX Ogre Project From The Xcode Template

Fire up Xcode and create a new Ogre3D project. You’ll notice on the left side there is now an Ogre section under User Templates. Click on Ogre and there are two template to choose from: iPhone OS and Mac OS X. I’m going to save the iPhone stuff for my next Ogre tutorial, so for now pick Mac OS X and click the Choose button. When the Xcode popup dialog appears point it to the location where you’d like to save your Ogre project and give it a name (e.g. OgreDemo).

You should now be looking at your Ogre Xcode Project. You may notice that there is some text in red (it indicates a problem). Basically, these files are broken, the paths don’t resolve. This is caused by a bug in the Ogre Xcode Templates. Step 6 below will resolve this issue. If you attempt to build the project, you’ll receive over 200 errors.

I recommend you familiarize with Xcode if you’ve never used it before. You can find documentation on the Apple Developer Website. Follow this link for the User Guide – Xcode 4 User Guide: About Xcode 4.

Step 6 – Resolving the Ogre Xcode Template Bugs

This next phase deals with fixing some bugs that exist within the Ogre Xcode Templates. What we need to do is correct some Framework and .dylib paths, change the Mac Base SDK, Xcode project format, GCC compiler version, alter the header and library search paths, and make these changes permanent for future projects. Let’s get started.

1) Correct the Framework and .dylib paths – We’ll start with Cg.framework. Ctrl-click it and select Get Info. When the info box displays you’ll see the path is red. There is a Choose button to the far right of the window, click that and navigate to this file system path /Library/Frameworks and select Cg.framework then click the Choose button. On the info screen the path is now black. Hit the close button in the upper left of the window.

Follow this same procedure for the following files:

Ogre.framework – /OgreSDK/lib/release/Ogre.framework
libOIS.a – /OgreSDK/lib/release/libOIS.a
Plugin_CgProgramManager.dylib – /OgreSDK/lib/Plugin_CgProgramManager.dylib
Plugin_OctreeSceneManager.dylib – /OgreSDK/lib/Plugin_OctreeSceneManager.dylib
RenderSystem_GL.dylib – /OgreSDK/lib/RenderSystem_GL.dylib

2) Change the Mac Base SDK, Xcode project format, and GCC compiler version – Go to the Project menu and select Edit Project Settings option. On the info screen’s General tab, change the Xcode Project Format to Xcode 3.1-compatible and Base SDK for All Configurations to Mac OS X 10.6. Click on the Build tab, All Configurations, scroll down to the Compiler Version section, and for C/C++ Compiler Version change the value to System default (GCC 4.2). Close the info window.

3) Alter the Header and Library Search Paths – Go back to the Project menu and select the Edit Active Target “Project Name” option (Project Name will be what you chose to name your project when you created it). Click on the Build tab, All Configurations, and scroll down to the Search Paths section. There are three lines we’re interested in: Framework Search Paths, Header Search Paths, and Library Search Paths. You’ll see that the paths prefix with _OGRESDK_ROOT_. This was supposed to be replaced with the Ogre SDK install location (aka /OgreSDK) you selected during the Xcode Template installation. To correct this we’ll edit each entry and replace _OGRESDK_ROOT_ with /OgreSDK. Close the window when you’re done.

Amendment – July 4, 2011

Change the boost headers directory from boost_1_42 to boost_1_46_1 in the header Search Paths. Thanks to Guido for pointing this out.

That’s it for the changes. Build your project (Build menu -> Build and Run option). You shouldn’t receive any build errors (if you did, check all the setting changes from above and make sure you didn’t miss something). When the demo launches there will be a settings window, accept the defaults and click the OK button. Tada! It’s an Ogre!

Press the Escape key to exit the Ogre3D program. There is still one last thing to do.

4) Make the Changes Permanent for Future Projects – The changes we’ve made are for this project only, so how do we apply them to any future projects created from the Ogre Xcode template? Luckily the solution is rather simple. Our modified project contains a settings file called project.pbxproj that holds the paths of all the frameworks, headers, libraries, and etc we applied as well as more information that isn’t relevant to our topic. ~~All we have to do is copy the project.pbxproj file and overwrite the version that came with the Ogre Xcode Templates.~~

Open your Ogre project folder. Inside there is an item called PROJECT.xcodeproj (where PROJECT is the name of the project you created). Ctrl-click the xcodeproj and select Show Package Contents. Next copy the project.pbxproj file (ctrl-click, copy) and open a new Finder window. Navigate to the Ogre Xcode Templates file system path shown below.

~~/Library/Application Support/Developer/Shared/Xcode/Project Templates/Ogre/Mac OS X~~

Here you’ll find the project template files that Xcode uses to create your Ogre3D projects. Move into the xcodeproj folder (ctrl-click, Show Package Contents) and paste the project.pbxproj you copied earlier. Replace the existing version. Technically we are done but we should change the file’s permissions to match.

Open a Terminal window (Applications -> Utilities -> Terminal). Navigate to the same Ogre Xcode Templates path from above. Change ownership of the project.pbxproj using the chown command. The full list of commands are show in the image.

computer:~ tony$ cd /Library/Application\ Support/Developer/Shared/Xcode/Project\ Templates/Ogre/Mac\ OS\ X/
computer:~ tony$ cd ___PROJECTNAME___.xcodeproj/
computer:~ tony$ sudo chown root:admin project.pbxproj

Amendment – July 4, 2011

In my haste of making this tutorial I didn’t completely test every aspect. The stricken out text above was for copying the OgreDemo project’s project.pbxproj settings file on top of the Ogre Xcode Project template’s version. The problem is that some settings then become hard-coded to use a file name of OgreDemo and the project won’t build unless it has the same exact name. Obviously that won’t work. You could rename but that defeats the purpose of a template. So we’ll be making modifications to the Ogre Xcode project template project.pbxproj directly this time around. We’re also going to bypass the copy, paste, ownership stuff, and use nano for editing to make the changes. Open a Terminal and issue the commands below.

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

Make the following changes to the Ogre Xcode Template project.pbxproj settings file. I’ve included the line numbers for your information. To see what line number you’re on in nano, press ctrl-c. [ Control-C ]

Replace libois.a with libOIS.a
[ Lines 16, 73, 98, 126 ]

Replace boost_1_42 with boost_1_46_1
[ Lines 311, 342 ]

Replace the path to Cg.framework _OGRESDK_ROOT_/Dependencies with /Library/Frameworks
[ Line 71 ]

Replace all _OGRESDK_ROOT_ with your Ogre SDK path /OgreSDK
[ Lines 72-73, 76-78, 299-300, 309-312, 318-320, 333-334, 340-343, 349-351 ]

Fix the Build Configurations (Debug & Release)
Change ARCHS = “$(ONLY_ACTIVE_ARCH_PRE_XCODE_3_1)”; to ARCHS = “$(ARCHS_STANDARD_32_BIT)”;
Change GCC_VERSION = 4.0; to GCC_VERSION = “”;
Change ONLY_ACTIVE_ARCH_PRE_XCODE_3_1 = “$(NATIVE_ARCH)”; to ONLY_ACTIVE_ARCH = YES;
Change SDKROOT = /Developer/SDKs/MacOSX10.4u.sdk; to SDKROOT = /Developer/SDKs/MacOSX10.6.sdk;
[ Lines 360, 363, 366, 368 ] and [ Lines 375, 377, 380, 382 ]

Once you’ve made all the changes to the Ogre Xcode Template project.pbxproj, save the file by pressing ctrl-o. [ Control-O ] and ctrl-x [ Control-X ] to exit nano. Now any project created from the Ogre Xcode Templates will compile and from any name you save your project as.

That concludes this tutorial on installing the Ogre SDK 1.7.3 on a Mac OS X system. Any future Xcode projects you create using the Ogre Xcode Template won’t need changes to compile out the door. Stay tuned for more Ogre3D Mac articles from me.

Proud Owner of a MacBook Pro, Seriously!

Tony Bhimani — Mon, 07 Mar 2011 07:28:18 +0000

The MacBook I’ve been waiting for has been delivered. Thanks Timo!

Tony + Mac = Joke you say?
I’ve never used Macs, not because I don’t like them, but because I’ve never had the need for one. The only Mac I fiddled with was the one that EarthLink had for tech support calls (iMac I believe – the triangle shaped TV looking one). The hockey puck shaped mouse was too cute. Anyway, I’m a Linux guy and using a Mac is well, not too far off I guess – the ones they make these days that is.

Why do I have a Mac now?
My friend Timo can take all the credit for this since it was his idea. He made a strong suggestion that I get into developing iPhone apps and cash in on the action. I’d like to think I’m a capitalist at heart and figured, what the hell, why not. Here’s the problem, I need to learn the operating system and how to actually do the development part. I’m not too worried, I mean if I can get a handle on Linux then a Mac shouldn’t been too difficult. I started absorbing the UI and navigating around earlier. I’ll play with the OS more after work tomorrow.

Apple SDK (Xcode IDE, et al)
I managed to get the Apple SDK loaded on the MacBook. It took around 30 minutes for it to download (3+ GB SDK, yikes!) and installed in roughly 15 minutes. Hmmm, no easily accessible launcher icon appeared on the desktop or in the Applications menu. I happened to find the SDK in the Developer directory in the root of the hard drive. To make life easier I added Xcode to the Dock. There is a LOT of documentation to read and plenty of sample code to fiddle with and I feel I need to spend a couple days looking it all over before I do anything bold like build an app of my own (and will need idea first).

MacBook hardware is very cool
The first thing I noticed about the MacBook is its AC adapter. The thing reminds me of a universal power plug adapter, with its prongs that flip down and its square white body. Okay, now this is probably the best thing about it, the power connector doesn’t plug into the Mac, it sits on the side magnetically in a little rectangular groove. Timo called it a break-away connection. This is type of connectivity is extremely useful for people that trip over their (or strangers) PC laptop AC adapter line cord and break the pin it sits over.

The MacBook also has a Firewire connection, DVI video interface, and Webcam. Standard stuff so I’m not going to say anything more about it.

I’ll end with this: I like the Mac, it’s nice. No complaints.

The Big Switch to Ubuntu Linux

Tony Bhimani — Sun, 30 Jan 2011 09:47:33 +0000

For several years I had Windows XP as the operating system on my laptop. It’s been mostly out of necessity as my laptop is primarily used for work and I’ve been used to using specific applications for productivity, such as Dreamweaver for HTML and PHP coding, PuTTY for SSH, WinSCP for SFTP file transfers, TortoiseSVN for source code version control, Paint Shop Pro for graphics editing, OpenVPN GUI for my VPN connection, and Visual Studio for this one Windows program I have to maintain. It’s always been Windows for desktops and Linux for servers with me, as you can see from all the tutorials I’ve written on how to make Linux your server platform. In the past I haven’t had much luck with a Linux desktop. I’ve gone through old versions SUSE, Fedora, CentOS, and even Ubuntu. Keep in mind all this was going on between 2004 to 2008. Driver support has been an issue as well as functionality, so I have fallen back to Windows quite a few times. As much as I enjoy tweaking stuff to get it to work, it gets old really fast — ndiswrapper to get my WiFi card working. Come on, seriously?

Moving forward, I wanted to try a Linux desktop again, so on December 31, 2010 I downloaded and burned the Ubuntu 10.10 ISO. With my fingers crossed, I loaded it on a new hard drive (just in case I would have to fall back yet again). From the start it detected my WiFi card and picked up on my network. Ubuntu also gave me my standard 1680×1050 resolution. I was feeling optimistic in that I made the right choice. 10 to 15 minutes later, I had a new operating system. Next came the fun part of learning it.

Okay, so I never use a Linux desktop and I need to try and find equivalents of the applications I used on Windows. I hit up Google and after a little research on each topic I started installing the programs I’d need to be able to work. This was accomplished using the Ubuntu Software Center. To break it down, these are the apps I needed.

	Windows	Ubuntu
Coding	Dreamweaver	gPHPEdit
SSH	PuTTY	PuTTY
SFTP	WinSCP	FileZilla
Version Control	TortoiseSVN	RabbitVCS
Graphics	Paint Shop Pro	GIMP
VPN	OpenVPN GUI	Network Manager OpenVPN
Web Browser	FireFox	FireFox
Email	Thunderbird	Evolution / Thunderbird
Documents	MS Office	OpenOffice

In regards to Visual Studio, I haven’t tried installing it under WINE to see if it would work. Whenever I get around to doing so, I’ll share my results.

For the last 30 days I have been using Ubuntu and am loving it. There was a learning curve at first but as with everything, the more you use the faster you adapt. Ubuntu boots and shuts down faster than WinXP. I haven’t had a single crash or lockup since I started using it. The Compiz Fusion is windows manager is absolutely awesome! I love the 3D desktop eye candy — burning windows upon exit, rotating cube view with skydome, window wobble, opacify, etc.

For anyone looking to switch to Linux for their desktop operating system, I highly recommend Ubuntu. I’ve included a short video of my Ubuntu laptop in action.