Apax Software Blog

Site search is becoming an expected functionality for any website. Fortunately, Google provides an API that makes adding site search trivial. With a few lines of code you can take advantage of Google and provide search results directly on your site.

The question then becomes, how do you display the results? By combining jQuery with the Google search you can quickly create a dynamic and user friendly search system for your site.

In this solution, we will be adding the Google site search directly to a pop up box on the page. This allows the user to search for content on your site without ever leaving the site.

The first step is displaying a dialog box using jQuery, and the jQuery UI (both are available at http://jquery.com/). The following code allows a link on a page to a dialog box:

    $(function(){
        // Dialog Box			
        $('#dioalog_box').dialog({
            autoOpen: false,
            width: 600,
            position: 'top',
            resizable: false,
            draggable: false
        });


        $('#open_dialog_link').click(function(){
            $('#dialog_box').dialog('open');
         });

    });

“dialog_box” is a div layer on the html page that becomes the popup dialog. The .dialog method in jQuery UI, sets up the div layer to become the popup. After the div layer has been setup, the .dialog('open') just needs to be called to display the dialog box.

“open_dialog_link” is the ID of a link on the web page that is clicked to display the dialog box. The .click simply provides us with the ability to open the dialog whenever the button is clicked.

Now that we have the dialog box opening, we just need to add the Google search to the dialog box. You can get the code for the Google AJAX search API at: http://www.google.com/jsapi?key=yourkeyhere, where you replace “yourkeyhere” with a Google Search API key that you can obtain from http://code.google.com/apis/ajaxsearch/signup.html.

Below is an example of the code to setup the Google search control on your website:

// Create a search control
        var searchControl = new google.search.SearchControl();

        // Add in a full set of searchers
        var siteSearch = new google.search.WebSearch();
    
        // Set the Search Control to get the most number of results
        searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);  
        var searchOptions = new google.search.SearcherOptions();
        searchOptions.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
        siteSearch.setUserDefinedLabel("");
        siteSearch.setSiteRestriction('www.yourdomain.com');
        searchControl.addSearcher(siteSearch, searchOptions);

        // tell the searcher to draw itself and tell it where to attach
        searchControl.draw(document.getElementById('dialog_box'));

This code sets up the search, and draws the search control to the web page. SiteSearch.setSiteRestriction('www.yourdomain.com') causes this control to be a site search. If we just omitted this line it would search all of Google. searchControl.draw(document.getElementById('dialog_box')); actually draws the Google Search control to the pop up dialog.

Make sure you add the above code inside a jQuery OnReady function, so the control is drawn after the page has loaded:

$(function(){
		// Google search code here
	}

One nice thing to note about this is that it uses the jQuery UI. This allows you to use jQuery's themeroller to design the interface of the dialog box to fit the look and feel of the rest of the site.

A packaged version of this code can be found below. If you have any questions, or need help implementing, or modifying this solution please feel free to contact us.

Matt Smith VP Operations Apax Software Development

apax_googlesearch.zip (61.76 KB)

Learning to develop iPhone applications can be a frightening undertaking. However, if you let it, it can be a very enjoyable experience. Assuming you are, like me, a PC user first, you will be overwhelmed by the small differences between developing on the PC platform, and developing on the MAC platform. Heck, just using the MAC operating system can be a challenge at first! Eventually, though, you should discover that the new environment is fun.

The key here is to approach the MAC OS, also known as Leopard (or lynx, or wildcat, or whatever cat they are using these days), without focusing on the differences between it and Windows. These little differences can really get on your nerves if you let them. But let’s face it, Windows is not exactly a perfect platform…I’m not saying that Leopard IS perfect, but if you don’t get caught up in the small differences, you can see that it really does have a lot to offer. I suggest trying out “Spaces”, a way of virtually extending your screen size. Also, try the function keys; they have some really cool functionality for moving your application windows around, making it easier for you to find the window you are looking for.

So, once you are confident with the MAC OS, you are ready to begin developing your very own iPhone application. Apple offers a very nice SDK for this, called XCode. To download XCode (plus lots of other development resources), visit developer.apple.com. XCode provides several “build-ready” application templates that really jump start your development. Simply choose one of these templates and click “Build and Go”, and you should already have a working application running in the iPhone simulator (another tool within XCode).

Once you have a working template running, you should take some time to get to know the language. iPhone development is done using Objective-C, or as some of my colleagues were fond of calling it, C[] (pronounced “C-bracket”). Objective-C is obviously an OOP language, and the syntax resembles other “C” languages. The differences are pretty clear right away, however. All object methods are contained within brackets.

(example: [myObject doSomething])

This may seem odd at first, but it has some benefits. It keeps your objects and their methods organized, while doing away with the excessive use of parenthesis that some other languages use. Another nice feature of the syntax is calling methods with multiple parameters. Each parameter (except the first) is preceded with its name, which keeps the programmer from losing track of the order of the parameters.

(example: [myObject doSomething:firstParameter secondParameterName:secondParameter])

This allows the code to be easily read by someone who does not necessarily know the format of the methods.

(example: [myBaseball throwWithSpeed:80 withAngle:45

So, while the syntax may be different, it definitely has its advantages.

If you are serious about learning to develop iPhone applications, I recommend trying out some online tutorials. Apax Software will also be offering workshops in the near future.

Justin Raney
VP Development
jraney[at]apaxsoftware[dot]com

In the rapidly changing landscape of information technology, new methodologies can often be looked at with skepticism when compared next to the classic processes that have been industry tried and tested. While there exists some merit to concerns of adopting new technologies, developers can often stunt their potential by not utilizing fresh tools. Unified Modeling Language isn’t exactly a new technology, but among fellow developers it appears to be largely ignored in spite of the powerful tool that it is.

UML is a powerful modeling tool designed to automate many elements of software development using related diagrams. After creating the various diagrams, one can then export their models directly into their programming language of choice. The most recent iteration of UML (2.0) contains 13 types of diagrams; each classified under three major categories – Structure diagrams, behavior diagrams, and interaction diagrams. Each category emphasizes different aspects of the software development life cycle.

Structure Diagrams
One can think of structure diagrams as they would a SQL database model. While not strictly limited to databases, these diagrams outline the static components of a project in addition to their relationships with each other. Classes, databases, and even the hardware in implementation can be modeled by these diagrams.

Behavior Diagrams
Although structure diagrams show relationships, they do not provide much detail on what the various components actually do. Behavior diagrams outline specifically what happens in the system between actors (users and their role) and the innards of the system.

Interaction Diagrams
Interaction diagrams are a subset of behavior diagrams, but have a more narrow purpose. They emphasize flow of control and data among the components in the system.

designing the various diagrams, one can then automatically generate source code from their skeleton bodies. This comes with a few advantages. For one, software developers are only human. We make mistakes and with conventional software design, the risk of misinterpreting what another developer was trying to achieve exists. With UML, as long as the system is designed correctly, the classes and database information will be generated accurately and quickly. The swiftness of the development time is another advantage. By utilizing it, one is automatically merging design time with development time, cutting down on the overall time spent on the project.

Class Diagram Example
Code Export Example 1 (User.cs)
Code Export Example 1 (UserInfo.cs)

Andy Callebs
Software Developer
Apax Software Development

Blueprint is Yahoo's platform for building mobile sites and platforms. The platform facilitates creation of device-independent mobile applications. Similar to Java, a runtime environment is installed on the device, allowing developers to design apps without worrying about screen resolution, device features such as GPS, and other common mobile development issues.

Using Blueprint, developers can deliver content in three ways:
1. Mobile Widgets under Yahoo! Go, Yahoo's app browser application where users can subscribe to apps like Apple's app store
2. Mobile sites available via any standard web browser (Note: some important features such as GPS are not available using this method)
3. Mobile apps that are configured to run specifically on a standalone version of the Blueprint runtime

All applications use an XML markup set called Blueprint (loosely based on XForms). The markup is served up through Yahoo's Blueprint servers to the individual devices (in the case of 1 or 2 above). The great thing about the XML markup is that your server-side code can be developed in any language. Yahoo provides documentation and files on using PHP to generate the XML, but I have found other sites that have .NET classes for automatically generating the XML elements as well. Of course, for static data, you can always just create an XML file with the proper elements and serve this up. Our site was delivered via method #2 above simply because it was the most efficient for debugging.

All in all, the technology is very straightforward to learn. My team at Startup Weekend was able to start from scratch with this technology and have a functional investment property search application in a few days. The most difficult portion is understanding the flow of information from the device to a web server to yahoo, etc. Yahoo provides some great documentation at http://mobile.yahoo.com/developers.

Here's a diagram explaining the flow of information from device, to Yahoo Blueprint server, to your own web server --

Ryan Hunter
President
Apax Software Development

Project management software is a necessity when trying to build maintainable applications. There is often just too much to track without a system in place to keep your work organized. Unfortunately, project management software tends to be a pain. Most systems want to do so much that you end spend as much time tracking your project as developing for it (yes I am looking at you Dotproject). Fortunately that is where Trac comes in.

Trac is a minimalistic approach to web-based project management. It is designed to help developers write great software and stay out of their way. Basically, what this means is that you get get the essentials of tracking a project and not much else. It also means that you get to spend less time using your project management software and more time developing your project. Fortunately, Trac is also very extensible with a pretty large user base, so you can generally customize it to have the features that you need.

Ticket System

Creating a ticket in Trac couldn't be any easier. You simply go to the “New Ticket” on the navigation at the top and fill out the fields to submit the ticket. There are about a dozen or so default fields, all of which can be turned on or off, so that the user submitting the ticket only has to use the fields that he or she really needs.

Once the ticket is created, people can add comments, change the properties of the ticket (like modify the description) or perform actions on the ticket. The actions are things like accepting, resolving, or assigning the ticket and are defined by the work flow used by the project

Trac Reports

One really nice feature about Trac is how you find the tickets. If you click on “View Tickets” you are taken to a screen that lists available reports. The reports are basically just different ways of finding tickets in the system. The nice thing is that it is really easy to create new reports, so that you can lookup tickets in whatever manner is best for you and the project.

You can also go to the custom query section. This allows you to quickly specify one or more filters to query the tickets. You can save these queries as a new report if you plan on using them in the future.

Hours Tracking

Our team needs the ability to Trac their hours when working on projects. Trac does not do this by default. Fortunately, this functionality can be added by using the TracHoursPlugin (http://trac-hacks.org/wiki/TracHoursPlugin).

It adds a ”Total Hours” field to the ticket. Clicking on this field brings up a new screen that lets you fill out when and how long you worked on the ticket. I really like that is separate from the comments on the ticket too. This allows you to use the comments for discussion of the ticket, while keeping track of how long and what you have done to the ticket separate.

It also adds a new tab to the navigation called “hours.” This tab lets you run reports on the hours spent on the tickets.

Searching

One last thing I wanted to mention is the searching in Trac. The search system in Trac will search your change sets, the wiki and tickets. However the really nice feature with searching in Trac is the quick jumps. Below are a list of example quick jumps.

• [42] -- Opens change set 42

• #42 -- Opens ticket number 42

• {1} -- Opens report 1

• /trunk -- Opens the browser for the trunk directory

Anyways, that is a quick preview of using Trac. No project management system is ever going to be perfect and even Trac leaves me pulling at my hair, but I would strongly recommend it to anyone looking for a project management solution or that can't stand their current one.

Useful Links

• http://trac.edgewall.org/ - Trac home page

• http://trac-hacks.org – Available plugins for Trac

• http://trac.edgewall.org/wiki/TracGuide - Documentation on setting up and using Trac

Matt Smith
VP Operations
Apax Software Development