Most of the articles I post here are at least somewhat related to my job as a software engineer.  As a result, I end up posting a fair bit of code.  I use Joomla! to manage this site, and I have never really been happy with the way it handles snippets of code in my articles.  The TinyMCE editor was installed in my Joomla site, and I never really investigated replacing it.  Lacking a better option, I've been using my theme's "preformatted" style whenever I want to insert code into an article.  It preserves my indents and provides a nice visual distinction of what is code and what is text.  But, it's a bit limited.  I want a nice, simple way to embed code in my articles that supports a few key features like line numbers and syntax highlighting. 

Joomla appears to have a few options.  There is a Highlight code with Jumi plugin that adds a button to TinyMCE, but the installation failed when I tried to install it.  Another plugin called SyntaxHighlighter looked promising, but it is very simple and is not much better than my existing "preformatted" solution.  There are also a few other options like CodePress and GeshiBot that come up as the top Google results, but both are unpublished because they aren't 1.5.x compatible.  Finally, I found an article that pointed me to JCE and RJ_InsertCode by Ryan Juckett.  It supports all the languages I commonly work with, including Java, JavaScript, Python, SQL and even ActionScript!.

1
2
3
4
5
6
7
8

function drawChart() {
    var data = new google.visualization.DataTable;
    data.addColumn('date', 'spotDate'); //date column
    data.addColumn('number', 'eur'); // column for Euro
    data.addColumn('number', 'jpy'); // column for Japanese Yen
    data.addColumn('number', 'cny'); // column for Chinese Renminbi
    data.addColumn('number', 'oil'); //column for oil (bbl)
}

Looks good, right?  Will I go back and update all my old articles?  No.  Will I use this from now on to make my code samples more readable?  You bet.

It's no secret that Google offers some great free tools for content publishers and developers.  Most bloggers I know use AdSense and Google Analytics.  GWT and the App Engine both have good adoption among web developers, and Google Code hosts a ton of other useful projects.  One of these projects is Google Charts.  Google Charts provides a palette of static and dynamic data visualization components that you can easily embed in your applications.  With just a few lines of JavaScript and HTML, you can add rich, interactive charts and diagrams to any web app.  To get started, make sure you include the Google JavaScript API in your page

<script type='text/javascript' src='http://www.google.com/jsapi'/>

I recently had a project come up that requires comparing the price of several currencies and commodities in USD.  The source of data for this chart is a MySQL database that contains one table populated with time series data.  Basically, it's a big list of currency and commodity prices by date.  An annotated time line is a great choice for displaying this type of data, and Google Charts delivers.  It only takes a few lines of JavaScript to create, populate and render a chart.  The first steps are to load the particular visualization that is required, and to set the callback method that will actually populate and draw the cart.

google.load('visualization', '1', {
 'packages' : [ 'annotatedtimeline' ]
});
google.setOnLoadCallback(drawChart);

In this example the 'drawChart' function will create the underlying DataTable and draw the chart.  Populating any Google Chart is done using a DataTable.  A DataTable is basically just a wrapper for JavaScript arrays, which make up the underlying data stored in the table.  In this example, I'm creating a DataTable to hold EUR, JPY and CNY currency values, as well as the price of oil by the barrel.  Creating and defining a DataTable is simple:

function drawChart() {

    var data = new google.visualization.DataTable;
    data.addColumn('date', 'spotDate'); //date column
    data.addColumn('number', 'eur'); // column for Euro
    data.addColumn('number, 'jpy'); // column for Japanese Yen
    data.addColumn('number', 'cny'); // column for Chinese Renminbi
    data.addColumn('number', 'oil'); //column for oil (bbl)
}

Now that your DataTable is created and defined, it can be populated with data.  The Google Charts API expects this data as JavaScript arrays.  In the case of the annotated line chart, a two-dimensional array is expected.  Each row in the data table is an array of vars that match the types defined when you built the DataTable.  So, in the case above, each row should be a JavaScript array that looks something like this:

var chartData = [
    [new Date(2010, 07, 24), 1.27, 87.60, 0.15, 79.60],
    [new Date(2010, 07, 25), 1.25, 87.68, 0.15, 78.94]
]

If the data types of your array don't match what you have set in the DataTable, an error will be raised.  To generate this array, you have a ton of options.  You could create a public data source, or, you can use just about any tool of your choosing to spit out JSON data that can be de-serialized into the two dimensional array expected by the Charts API.  Since I am integrating this particular chart into an existing Liferay Portal environment, I wrote up a quick Java Servlet to deliver the required data.  Using the GSON library, serializing Java objects to JSON is a snap.  Using an ArrayList<Object> makes it simple to group together heterogeneous objects into a collection that can be properly serialized by GSON to the required JavaScript array.  In my case, I use jQuery to retrieve the JSON string from the server, but any method will do.  Call eval() with the serialized JSON string to convert it back to JavaScript objects.  Adding the array to the DataTable is just a function call.

function drawChart() {
...

    data.addRows(chartData);
}

Finally, once the data is retrieved and added to the DataTable, the table can be used to populate the chart.  A div must be created to hold the chart, and this div element must be passed in when the chart object is created.  One peculiarity of the Google Charts API:  you must explicitly set the width and height of the div that will hold the chart.

function drawChart() {
...

    var chart = new google.visualization.AnnotatedTimeLine(
        document.getElementById('chart_div'));
    chart.draw(data, {displayAnnotations : true});
}

The end result is a nicely rendered line graph, drawn in 'chart_div'.  This particular graph is rendered in Flash.  This is not the case for all Google Charts visualizations, some of which render as static images or pure HTML.  If you need quick, easy charts for your web application, it's probably worth your time to check out Google Charts.

In part 2 of this article, I will cover DataViews, annotations and how to tie it all up with jQuery.

Unless you have been living in a cave, you have probably seen all the hype about the iPad.  It's a neat tablet, if a bit underwhelming from a technical perspective.  I, for one, would have liked to see a device based on the full OSX, not just the iOS.  I would have also liked to see the platform be a bit more open, not absolutely beholden to the iTunes store for app installation.

With that little complaint out of the way, it is still a great device for reading documents.  It's compact, has a beautiful screen, good battery life and supports most of the common doc formats in use at my company.  With the explosive growth of Alfresco for document management, it was a natural fit to try and get our stored documents over to the iPad platform.  At the last Alfresco event I attended, I met Dan Hopkins from Zia Consulting.  He was giving a demo of Zia's new iPhone/iPad application (also available on Android, BTW) that integrates with Alfresco.  Working via the CMIS interface, Fresh Docs connects to your Alfresco instance and allows you to browse spaces, search for documents and set favorites, as well as the obvious function of viewing Alfresco documents on the device.  Outstanding.  So far I have tested it with Alfresco Enterprise 3.1, 3.2 and 3.3, and it works perfectly across all three.  It is available for free on the App Store, just search for "Zia" or "Alfresco".

Zia's offering would be stellar even if they simply stopped with what I have already seen.  But, Zia went a step further.  They released the app as open source.  While this might not mean anything to your average iPhone/iPad user (since you can't build and install it yourself due to Apple's approach to iOS application installation), it does mean something to Apple Enterprise developers.  Enterprise developers are able to build and deploy applications directly to the device through iTunes.  This makes sense, as many enterprise developers are likely developing proprietary, domain-specific applications for in-house consumption.  These types of applications won't find an audience on the App Store, and are likely not the type of thing an enterprise would release to the general public anyway.

So, Enterprise developer account in hand, I went out and pulled down Zia's source code.  The project is called freshdocsalfrescoiphone and is hosted on Google Code.  The actual code is available via Subversion.  You'll need a Mac and XCode to build the project, which can be opened by clicking the Alfresco.xcodeproj file in the project directory.  Why would you want to build your own version instead of using the version on the App Store?  Well, several reasons.  In my case, we are building a version that carries our corporate branding (while still giving Zia their due credit on the "About" page) as well as our corporate server information plugged in as the configuration defaults.  Finally, we plan to extend the application.  The current plan calls for adding offline caching of documents, making content available even when a data connection is not.  Hopefully these functional changes will find their way back into the mainline source code.  Kudos to Zia for releasing a project that Apple Enterprise developers can use to get Alfresco + iPad integration up and running right away!  Thanks!

If you are developing your own portlets for Liferay, you have surely noticed that your portlet log statements don't show up in the logs by default.  Or, like me, you may have moved a portlet from test to production only to have it fail.  When you are running with a debugger attached, it's a simple matter to set a breakpoint and see where things are going wrong.  On a production server, this isn't really an option.  You need detailed, fine-grained control over your log configuration.  Liferay can output logging as detailed as you want, class by class or package by package.  These can either be set using portal-log4j.xml, an extension file or (my preference), the server administration console.  Changes made via the administrative interface can be applied immediately, without a server restart, making it the best choice for troubleshooting in a live environment.

To get started, open the main portal menu and select "Control Panel".  At the bottom of the left side menu there is a "Server Administration" option which takes you to the following screen:

At the top of this page is a "Log Levels" option.  This tab allows the user to set the log level for various classes and packages.  Each "category" can consist of either a package name (at any level) or even a specific class.

To enable logging for a specific custom portlet, click the "Add Category" tab.

In the text box, enter the package name of your portlet class.  In this example I am using the package "com.um", which is the base package for the Alfresco Web Script Portlet.  This will turn on logging for any classes that reside in the package hierarchy beginning with "com.um", including the main portlet class com.um.portlets.alfresco.WebscriptPortlet and the proxy servlet class com.um.portlets.alfresco.servlets.ProxyServlet.  Next, select your log level.  These correspond with the log levels defined by Log4j.  Click "Save" to create the new category and apply the change.

Once the category is saved, it can be seen in the category list.  From this list you can adjust the log level.  When you are done debugging, go back in and set it to "Info" or another category.

More info on this topic can be found in the Liferay Wiki.