As I told in the previous post on this subject, the best way to learn Drupal is installing and playing around with it!

Let’s go then…

Installing Drupal (version 6.6 at posting time)

In won’t go into details about how to install Drupal, all you need is PHP (I’m with PHP 5, MySQL or SQLite, and of course, a web-server). If you are thinking about running Drupal in localhost you’ll be more than happy with the amount of videos and tutorials on how to do this installation (WAMP on a windows Machine, MAMP on a Mac and LAMP if you’re with Linux. (never mind if all the links are leading you to the Lullabot website… It’s just that I like them a lot )

In my case I have Drupal running with WAMP on my local machine.

Drupal Installed! – Now for some headaches.

Headache #1: Setting up clean URLs

First thing to do is to enable mod_rewrite on your Apache installation, the second is to allow override in your Drupal directory. Then… everything should be running. Well, not always. If you’re using an alias (or a subdirectory in your www) you must also change the rewrite base. Here are the examples from my instalation:

I setup Drupal folder outside www on a folder named drupal. Next step was to create an alias… Here is my alias code:

Alias /drupal "c:/wamp/drupal/"
<Directory "c:/wamp/drupal/">
   Options Indexes FollowSymLinks
   AllowOverride all
   Order allow,deny
   Allow from all
</Directory>

The next step is to change my rewrite base to /drupal (which is my alias name) . This in done in the .htaccess file that you’ll find in your drupal folder. This is a snipset of what you’ll find:

  # Modify the RewriteBase if you are using Drupal in a subdirectory or in a
  # VirtualDocumentRoot and the rewrite rules are not working properly.
  # For example if your site is at http://example.com/drupal uncomment and
  # modify the following line:
  # RewriteBase /drupal (MY CASE)
  RewriteBase /drupal
  #
  # If your site is running in a VirtualDocumentRoot at http://example.com/,
  # uncomment the following line:
  # RewriteBase /

Urrayy – clean URLs are ON

Headache #2: Performance on the site administration area

Another headache was the poor performance I was getting on the sites administration area! After some readind I found that most of this was due to WAMP itself… One solution would be to play around WAMP configuration to improve it’s performance… Maybe on another ocasion!!

Performance break down occurs specially when you are trying to enable and disable modules or setting up permissions (permissions it self would give a great post… On another day)! So, the best you can do is to enable only the (contributed) modules you’ll be using… Even more.. don’t keep installations of the modules you’re not using (use the uninstall feature when available and delete from /sites/all/modules). Why? Because all the modules in this folder are loaded by Drupal. The less modules you have the less querys and the less hooks are necessary!

Headache #3: MySQL timeouts

The main cause for this headache was headache number one… Poor performance! When enabling modules or setting permissions I was getting this pretty ugly blank screen with a timeout message! The soluition for this is pretty simple: Just add the following code to your settings.php (sites/default/settings.php):

ini_set('max_execution_time', 0);

Where? I would recommend the bottom of the page!

Headache #4: Setting up cron

What would be an easy task on Linux could become I real pain in Windows. In fact windows doesn’t know what cron tasks are. A solution would be to setup a scheduled task. The other solution is to install the Poormanscron module. Basically what this module does is to check (after each page load) if the last cron run was more than a pre defined (configurable) period of time!

If you don’t know, or are not allowed to setup cron tasks I would definitly say that this is a must have module! Drupal really needs cron to run very often, one good example is the (core) Aggregator module, try to setup an external feed widthout running the cron job :p

Enought of headaches!

I really hope this was helpfull!

If being a newbie is so much (not) fun where should I start?

Websites:

1. drupal.org (I won’t even try to describe this website… )
2. lullabot.com (Well, Lullabot was my starting point… You wouldn’t wanna miss the Lullabot Podcast series…)
3. drupalmodules.com | drupal.org/project/Modules (Both your Drupal modules bibles!)
4. drupalmuseum.com (View and experience the power of Drupal!)
5. mustardseedmedia.com (Another source of inspiration! Bob’s video podcast series is a must see…)
6. drupaldojo.com (Yep… it’s really a dojo )
7. drupaltherapy.com (Another very good source!)

Books:

1. Apress – Pro Drupal Development 2nd Edition
2. Packt – Learning Drupal 6 Module Development
3. Packt – Drupal 6 Themes
4. O’ Reilly – Using Drupal (Not released yet… But I kinda like the fact that it’s not called “Using Drupal 6″)

(Quick note 1: I’ve recently read some comments (I empathize read some comments) that the Packt books are geared towards non developers, and that if your a developer maybe Pro Drupal Development is the best option.
Quick note 2: Still, if you look at Packt’s website you’ll find more drupal books than anywhere else. So, maybe they are doing it the right way.
Quick note 3: Ever read a packt book on Drupal? Drop me a comment…)

Videos:

1. Lullabot – Understanding Drupal (Trailler and Sample at Lullabot’s website)
2. Lynda – Drupal Essential Trainning

The problem with books and videos is that you’ll be spending a few (euros | dollars | … ). The other problem, I think, is the fact that Drupal evolves quite fast… This is why I like the title of the O’Reilly book…

And for the “grande final” the best source of them all: “Install Drupal and play around with it…”

Do know know other good sources?  Drop a comment

Today was my 3rd day using Drupal…

As you might know, Drupal is an Open Source Content Management System… Well, Open Source AND Free (very important) and with this very active community (my first drupal install was version 6.2 just a few months ago while my current version is 6.6 (by few months I mean no more than four!).

First of all… My first steps:

1. I needed an open source CMS to create a website
2. Went looking for Open Source CMS…
3. Results: this

Why PHP and why Drupal?

1. PHP is cool! PHP 5 – is great… Love MySQLi
2. Lullabot.com was an inspiration
3. Drupal seems, by far, more robust / flexible than most of the other solutions
4. The community – I’ve never seen something like that!
5. In Portugal most of the people haven’t heard of Drupal!
6. It was love at first time :p

I’ve been without posting for a little time. Meanwhile I started (and finished) reading Daniel Woolston’s “Pro Ajax and the .net 2.0 platform” book.

In the end I’ve learned quite a lot about ASP .net 2.0, but most important, I was quite impressed with chapter 7 (well, not the chapter itself, but with the different set of libraries and frameworks for implementing AJAX in ASP.net 2.0).

From all the different libraries, maybe, Michael Schwarz’s Ajax.NET is the most famous. But there are also Jason Diamond’s Anthem (I’ll be covering it on this post), Daniel Zeiss’s ComfortASP.NET, MagicAjax.NET and Microsoft’s Atlas (especially useful for those wanting to bring some of the Ajax’s magic to the former ASP websites (please note that I’m not calling them ASP applications).

Using Anthem library it’s very straight forward, and it can be told in four major steps.

1. Register the server-side page with the Anthem Library.
   -This is done in the Page_Load() method of the (C# or VB.Net) code-behind file.

private void Page_Load()
{
   Anthem.Manager.Register(this);
}

2. Identify the server-side methods that are AJAX-aware.
   -This is done by adding the [Anthem.Method] metatag before each AJAX-aware method signature.

   [Anthem.Method]
   public String myAJAXmethod():void
   {
      return “I’m an AJAX – aware method”;
   }

3. Invoke server-side functions through Anthem from the client
   -This is done using the Anthem_InvokePageMethod(String serverSideMethod, parameters [], function callBackMethod) method.

4. Handle the results returned from the server
   -This is done using the result object returned from the server

My last project was to build a dashboard where the main goal was to prove that it was possible to build Decision Support System using sparklines as the main data visualization component.
So I went searching for sparkline implementations and I found it on several programming languages such as PHP, Ruby and even VB.net. Here is what I consider a good implementation in PHP. Nonetheless, I had to build then using Flex 2 or Flash 9, so I went Flex 2 + Flex Charting API.
Just before getting in more details about the implementation there are a few issues that must be kept in mind when building Sparklines:

• Sparklines are to represent large collections of data, but yet, sparklines are small, intense, word-sized graphics;

The truth is that it doesn’t make much sense to represent 20 or less values in a sparkline, in fact, the resulting chart would be more like a standard line chart. Still, representing to many values, say 300, in a small space doesn’t make much sense either.
This means that when coding sparklines we must be extremely careful with the length of our data and the amount of screen real estate that we can use.
About being word-sized, this means that in terms of height they should be easily added to a string of text (just like figure A that shows a word-wrapped sparkline)

• Sparklines also provide supporting analytics

Sparklines are more than lines representing values. They can be enhanced with the usage of supporting analytics that should be displayed directly over the sparkline. In this case supporting analytics usually shows the extreme values (high / low, least / most recent values) and the normal range of the values at stake.

Figure B shows a sparkline with supporting analytics representing a little less than 150 values.

• Sparklines are intended for fast data comparisons

The ability to show large collections of multivariate data in a very small space turned sparklines into a great tool for performing fast comparisons. But when comparing visual information the subjects of comparison must be represented in the same scale and this is because visual information represented on a specific scale can point out relevant issues that other scales don’t.
Figure C shows the sames values in figure A but in a different width and vertical scale. Figure D on the other hand shows 300 values in a very small space.

Figure C

Figure D

Implementation:

I’ve implemented the sparklines using Flex charting API.
First, I picked a Line Chart with a line series to represent the data points. Then the next step was to limit the data points length and find a formula to limit also the line height – remember that sparklines are suppose to be word-sized. This was done by setting the max and min limits on the chart vertical axis.
Second step was to add the bar with the normal range values. This could be done using the annotation elements, but I choose to add another series, this time an area series. And this proved to have some advantages over the first option.
Finally I had to add the extreme values. And here I had 3 options, one was again annotation elements, second was rendering each item in the line series (this proved to be a slow and tedious approach) and that’s why I choose the third approach that was to add a plot series and render each item on it. Since we only had to render 3 items at a time rendering the items was very fast.

In the end I had the sparklines that you can see on the figure. But of course that I faced a lot of challenges, specially those related to data binding. Tip: If you are to use data binding using the MXML <binding> tag proves to be much more efficient that using the ActionScript binding functions.

Sadly I’m not allowed to release any source code (they are being used in a commercial application), but if you liked my implementation or have any tips to improve them feel free to comments this post.

Note: If you want to see a small video from the final application it is available here.

When programming in Object Oriented Languages, in this case ActionScript 3.0, having different copies of the same object is sometimes a common need.
For many, the most obvious approach would be to simply assign one object to another, like this:

myObj2 = myObj1;

But this approach would not copy the objects. Instead this approach would only copy the object references. In the end there will be only one object, which would be referenced from two places, meaning that changing myObj1 is the same as changing myObj2 and vice-versa.
By the way, in Flex everything is a reference!

The question is how do we clone an object in ActionScript 3.0?

ActionScript 3.0 has several utility functions, and one of them is the ObjectUtil.copy(Obj) which can be found in the package mx.utils;

This function will perform a deep copy of the object that is given as argument. And this is done by using the built in flash player AMF capabilities (yes, in Flex you will find really odd and original solutions for problems). What happens here is that the entire object is serialized into an array of bytes, and when the bytes are deserialized, a brand new object is created copying all of the original contents.
Still, you won’t be able to type cast most of the resulting objects (in fact, only primitive types can be type casted). And this is because when an object is deserialized from AMF, although it haves all the properties of a class instance, it will not be a true class instance nor will hold any references to the original class.
This is solved by adding type information about the object to the AMF packet. This can be done by using the registerClassAlias() method which is available in the flash.net package. This method will allow to preserve the class (type) of an object when the object is encoded in Action Message Format (AMF).

Let’s take a look to the following source code:

Sample code A:

public var myObj:MyObject = new MyObject();
myObj.someProperty = “myProperty”;

public var myObjCopy:Object = ObjectUtil.copy(myObj);
trace(myObj.someProperty): // “myProperty”
trace(myObjCopy.someProperty): // “myProperty”
myObjCopy.someProperty = “myChangedProperty”;
trace(myObj.someProperty); // “myProperty”
trace(myObjCopy.someProperty); // “myChangedProperty”

Sample code B:

public var myObj:MyObject = new MyObject();
myObj.someProperty = “myProperty”;
public var myObjCopy:MyObject = ObjectUtil.copy(myObj) as MyObject;
trace(myObj.someProperty): // “myProperty”
trace(myObjCopy.someProperty);

//FAULT: cannot access object with null reference.
//Execution stops!

Sample code C:

public var myObj:MyObject = new MyObject();
myObj.someProperty = “myProperty”;
registerClassAlias("my.package.myObject",MyObject);
public var myObjCopy:MyObject = ObjectUtil.copy(myObj) as MyObject;
trace(myObj.someProperty):   // “myProperty”
trace(myObjCopy.someProperty):  // “myProperty”
myObjCopy.someProperty = “myChangedProperty”;
trace(myObj.someProperty);  // “myProperty”
trace(myObjCopy.someProperty); // “myChangedProperty”

Why does it work on A and C and not on B?

Well, in A it works because we are using the type Object. And it would also for other primitive types such as Array.
In C it works because we are passing (registerClassAlias) the object type before it gets encoded, which will result in a successful type cast.
In B we don’t preserve the objects type, meaning that after the object gets deserialized it will hold no references to the MyObject class. The result will be a failed type cast which will result in pointing out to a null object reference.

But… ObjectUtil.copy(obj) it’s not bullet proof. I will not address to this situation because Darron schall has already a great post on this issue.

[Edited on April 10, 2008]

Two weeks ago (counting from this post date), while talking to a colleague, I found myself trying to find out reasons to say that Flex easily outcomes Ajax. The truth is that it’s much easier for me to talk about Flex than Ajax, in fact, I’ve been programming on Flex 2 for the last 9 to 10 months.
Still, I claim my self has being technology agnostic… So I went searching about Ajax and how it is related to Flex. And the main conclusion is that both of them aim at something… the Web 2.0. How they do it it’s a different story.
Ajax its a set of technologies that allows the incremental update of website pages without having to refresh the whole page every time the user makes a request. If you’ve read my Web 2.0 post, this is how Ajax makes websites more responsive. Still, if users want rich GUI they will have to rely on JavaScript (which in fact can be very tedious!).
Flex, on the other hand, is a presentation tier and server which allows the development of Desktop-Like web applications. In fact, Flex developers claim that they don’t develop websites but yes web applications. And this is easily proved because websites are a sequence of pages (static or dynamic) while Flex applications only (this only is more like everything) reflect the values of each variable in every state… and that’s what Flex applications are.. a sequence of states!

Lets then compare Flex and Ajax…

• Great for rich interaction
• Great for accessing multimedia components
• Effective use of caching for improved speed
• Client side debugging
• Flash player insures cross browser compatibility (and it’s free)
• Open Source SDK and IDE
• Better performance – code is compiled – better handling of large result sets
• Collaboration/Real-time natively supported
• Offline /desktop operation supported
• E4X makes XML handling very easy.
• The Flex components can be easily extended, and new ones written. The Eclipse based Flex Builder is also significantly extensible.
• Charting API (although not free) it’s just amazingly great!
• Native support for vector graphics

• Back button, but specially, right click require lots of enhanced coding;
• [Flex 3 has great support to HTML - no longer a weakness ] HTML usage… As far as I know, all that Flex allows, regarding HTML, is to overlap HTML pages making it look like if they were in fact embedded in the application itself. – using for that JavaScript calls;
• [No longer a weakness] ]MXML and ActionsScript, although powerful, are not so common – learnig curve is obligatory bigger;

• Great for large text based content;
• Allows strong caching using HTTP protocol for it;
• Graphically good.. although tedious JavaScript is powerful, specially if you happen to master it;
• Open Ajax Initiative. Lot’s of open source solutions;
• Collaboration/Real-time can be emulated;
• Very popular. A lot of community drive;
• HTML fully supported (nobody would expect something else!!);

• [Still a big problem in my opinion] Back button and refresh button can lead to really awkward and uncomfortable situations when using Ajax;
• Lots of generated code – difficult to debug client side;
• Performance can be an issue – code is interpreted – DOM-handling is tedious;
• No offline/desktop operation possible;
• [Most due to JavaScript issues] ]Browser compatibility – requires lots of hacking to ensure that everything works.;

Better together?

Well, the answer to this question is the same for the Flex or Ajax question. In fact, it is the answer for many questions! It depends.
If you’re not willing to make a 180º turn, Ajax is really great if you are looking to increase the user interactivity of your website. Ajax its not technology, but still it can make websites much more responsive. And if you have great HTML and JavaScript expertise you can also have very rich User Interfaces. A good example is wordpress itself, that is in fact very responsive.
If what you really need is to develop an application where you require sophisticated and interactive data visualization, such as a decision support tool, or that requires video & playback or web camera / microphone capture, such as a video conference application then probably Flex would be the best option.
Finally, if what you need is to combine large amounts of text based content with rich interaction components, such maps or charts, the best option is to user both as one. And this can be achieve by using the open source FABridge (Flex – Ajax Bridge) that was developed by Abode. An example of such situation is Google Finance.

Common Client-Server web applications no longer fulfill user demands on distributed applications. In fact, with current networking infrastructures, the usage of Standard Client-Server applications does not only slow down users intentions – resulting in loss of context, it also forces users to follow a rigid workflow if they ever want to get things done.

As a result of new user needs relating web applications, a new concept emerged – The Web 2.0. Web 2.0 applications, also know as Rich Internet Applications (RIAs), are emerging. These applications make use of a variety of techniques, such as Web services, Asyncronous JavaScript and XML (Ajax), Flex, Really Simple [Web] Syndication (RSS), and others to break the rigid workflow created by standard Client-Server infrastructures.

Since its first days, web has been evolving. Web 2.0 is the third (and current) stage of that evolution process that started with Web 1.0.

Web 1.0 – Content delivery and communication
It’s known as the era of HTML and email. Information that was hard to reach became easy to get, and local contents became available at national or international level.

Web 1.5 – Content personalization and multilevel communication
The era of search engines, chat rooms, and instant messaging. Web 1.5 is all about real time communication. Examples: Google Search Engine, Yahoo Messaging, AOL.

Web 2.0 – Authoring and collaboration
At this stage the goal is no longer to disseminate information, it’s all about productivity. Accomplish work-related tasks with tools that are available every time at any time, and can be shared collaboratively. Examples: Google spreadsheet, BitTorrent.

The Web evolution has been a cumulative process. And the proof of that cumulative evolution is that email and chat rooms are still largely used. Also, increasing needs on productivity resulted on bigger demands in terms of user interface richness.

Most desktop applications make use of two important capabilities to turn them more intuitive and user friendly than web applications.

Richness
By (correctly) combining a robust set of UI components desktop applications became natural, informative and intuitive to use.

Responsiveness
The ability of the desktop application user interface to quickly adapt to user actions creates a truly interactive experience.

Web applications, on the other hand, make use of their capability to be accessed from every where.

Broad reach
The ability to access pieces of information from virtually any point in the world turned web applications into “must have” for the users and major corporations.

Hence, web 2.0 applications face the challenge of bringing together desktop applications richness and responsiveness along with web applications broad reach.