Expedition Post

After a long hiatus from blogging, I am going jump start posting with a post series on Adobe Flex. Flex is very useful to create a web application. In the age of software as a service where more and more web applications are required to look like desktop applications flex is becoming increasingly important.

When you are done with this tutorial you will be able to:

• Spend less time coding user interface behavior which means you can get more done in less time.
• Create user interfaces that look uniform regardless of the browser or operating system
• Save time by not writing browser specific work-arounds
• Create user interfaces that consume less bandwidth and do more with fewer lines of code
• Convert your existing web applications into a desktop application with the same user interface.

Why would you use flex?

• To create user interfaces for your software as a service applications.
• Create web applications which will also have a desktop version that can run in Windows, Linux and Macintosh.
• To create animations in Flash without learning to use Flash CS4.

Flex is a tool used to create user interfaces for applications in Flash. These applications can be desktop applications (like Google Talk) or web applications (like GMail). It is a xml file format like HTML in which you specify where your user interface elements go. Flex programs are written using MXML and Actionscript.

To make a useful flex application that does something when the buttons are clicked, the user’s input has to be processed and an output has to be generated. In web pages this is done using Javascript. In flex applications Actionscript does this. Actionscript does for MXML what Javascript does for HTML – adds behavior to your user interface.

MXML is a convenience language. You can write your flex programs entirely in actionscript. Instead of typing dozens of lines of actionscript code that create the widgets and inserts them under the appropriate parents you can use mxml to layout elements in a logical hierarchy that is easier to read and understand.

Why learn Flex?

Learning flex is advantageous to you because:

• Flex interfaces provide better user experience.
• It is easier to make complex user interfaces like a DataGrid/Accordion in Flex than making them in HTML and Javascript.

Advantages Of Flex Interfaces

In addition to the usual form controls, flex offers additional form controls like rich text editor, color picker, date picker, slider etc.

The flex SDK allows you to create your own form controls. You can add your own customized events and trigger them based on some input condition. It may not sound like much but it is a very useful feature when you want to create complex user interfaces in big projects.

Flex has layout components that give much better control over the size and position of layout controls on a web page. For example – you can position elements and set their dimension relative to the size of the flash canvas.

What can be done with flex?

Here are some examples:

• Create web applications that looks and feels like a desktop application
• Create simple animations and games

What cannot be done with flex?

• Flex produces SWF files that run on your browser in the Flash player so they won’t run in the web server so you can’t create software that runs on the web server using flex.
• Flex programs cannot access files on the user’s computer (when used in the browser). They cannot be used to make applications that store data on the visitors computer.

(However adobe AIR apps made using Flex can)

What do you use to write Flex applications?

Notepad.  You can write your flex applications in Notepad or any other text editor. The programs can be compiled using the Flex SDK which is available for download at no cost here:

http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3

IDE for Adobe Flex
Adobe has created an IDE called Adobe Flex Builder which provides many features such as code completion, drag and drop visual editing, GUI for editing the attributes of the components on the screen.

I recommend investing in a license of Flex builder if you plan to use Flex extensively to make user interfaces as it improves productivity and saves effort. This course will not cover Flex builder so that most readers can benefit from it.

FYI – Adobe provides a free 60 day try-out period for Flex builder. I assume that you installed the Flex SDK.

Creating Flex Applications

Flex applications are written in MXML and actionscript. MXML is a convenience language. When the program is compiled by the Flex SDK, it is converted into equivalent Actionscript code. This resultant actionscript code is compiled into the resultant binary swf file.

Writing the application in MXML is a choice. It is possible to write flex programs entirely in Actionscript too.

Below is a sample MXML file:

   <?xml version="1.0" encoding="utf-8"><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"></mx:Application>

This file when compiled creates an empty flash file. To compile this file, we use the following command in the command prompt in your operating system.

> mxmlc firstProgram.mxml

This will create firstProgram.swf which we can run to get our result.

In the next article, we will discuss the MXML syntax and the various tags that are available to create a flex application.

For a recent project I needed to customize the feed icon in the Drupal theme I was creating. This wasn’t as straight forward as I thought it would be. Being the drupal newbie that I am I went looking for it in the core templates and suggestions page only to come empty handed.

Previously I found the solution to theming a search form by using the search-block-form.tpl.php template file and thought there would be one for the feed icon too. I found the solution to this in the function reference in the form of a theme hook.

theme_feed_icon($url, $title)

This function is internally called by drupal to generate the feed icon in the Syndicate block. Our Job is to override this function.

Customizing the feed icon

We cannot redefine the same function in our theme so we must define a phptemplate function to override the default implementation.

function phptemplate_feed_icon($url,$title)

What It Must Do?

This function must return the code of the feed icon. Therefore instead of using a image, you may also use a text link as well as hard code a few options such as Subscribe via Twitter and E-Mail.

Therefore, to use your own subscribe by RSS icon, you may use a function similar to the following:

function phptemplate_feed_icon($url,$title)
{
	global $base_path;
	$path = path_to_theme();
 $feed_icon = '<a href=" '. check_url($url).'" class="feed-icon"><img src="'. $path.'/images/rss-header.png" /></a>';
        return $feed_icon;
}

This function is very simple . It just returns a image which is linked to the $url parameter of the function. This function is to be placed in the template.php file.

Summary

• Syndicate feed icon is customized using the theme_feed_icon template function.
• We use phptemplate_feed_icon($url,$title)  in our function to customize the syndicate feed icon block.
• The function should return the code of the syndicate feed block. This code may also include links to other services such as twitter and subscribing by e-mail.
• The function should be placed in your template.php file.

The success of any blog depends on the number of people who are actively reading your blog at any time. To help you get more blog subscribers and monetize your blog, I have been hard at work to create this plugin for the past 15 or so to make it what it is now.

There are many blog subscription plugins available but none of them did what I wanted them to do. They were all limited in features or were paid software, possibly violating the wordpress license which prohibits creating proprietary wordpress plugins.

You might be wondering why would you offer e-mail subscriptions when most people would rather use RSS. Aren’t emails annoying? Not if you do it right.

Why provide E-Mail Subscription when you can just offer RSS?

All blogs on the internet today brovide rss subscriptions. For the top blogs such as Techcrunch and mashable, RSS is the primary channel through which their readers read the blog. However, RSS has some limitations. The most important one I see is control. Being able to customize who gets what message.

• RSS Isn’t Suited To Every Blog’s Audience Outside the world of technology blogs and other blogs that have a tech-savvy audience, providing RSS feeds is simply not enough. Asking them to find and learn to configure a RSS feed reader may be too much of a learning curve just to stay updated with your blog. The medium should not stand between you and your subscribers. E-mail is a very basic application. Anyone who knows how to user the Internet knows how to use e-mail.
• RSS Feed E-Mail Services Aren’t EnoughServices like FeedBlitz and FeedBurner provide e-mail subscriptions for a blog’s content via E-Mail. They allow blog subscribers to subscribe to your blog via email. But these services cannot be used to send email to your subscribers without making a post on your blog. Although Feedblitz provides the e-mail broadcast feature on a paid subscription. This is essential if you would like to market your products and services to your blog readers.
• RSS Can’t Filter Recipients – As your readership increases, you will find yourself writing on general topics. The blog becomes less and less relevant to an individual with a specific interest as the reader. This subscriber may only be interested in posts that you file under a specific category. Some posts are better given delivered by e-mail to a small subset of your subscribers.
• RSS is just one channel to reach you – RSS is just one channel through which people can reach you. You can’t make a posting about
  

  Prospects Need Repeated Exposure To Your Message To Become Customers

Most prospects (who in this case are blog susbcribers) will not buy from you on the very first exposure to your advertisement or sales pitch. They must be exposed to your message 5-7 times before they buy from you.We cannot send these repeated messages through blog posts as our blog will begin to feel like a sales pitch and will make us lose subscribers.

This is the motivation to create WP Responder.

What is WP Responder?

Below is the features of this plugin:

• Create Unlimited Number Of Newsletters – Apart from delivering blog posts to subscribers, you can create newsletters that are meant to be exclusively used for building a audience.
• Create Unlimited Followup Autoresponders – Usually newsletter subscription plugins support only creating newsletters to which you must send broadcasts manually. With the WP Responder, you can create followup messages to get your prospects ready to buy your product or build a loyal following via E-Mail.
• Create Post Series – For the longest time, creating a post series has been the way to increase blog subscribers. But most bloggers don’t promote their post series after they have finished up the series. This feature allows you to offer subscribing to a post series (posts filed under a certain category) by e-mail delivered at regular intervals such as once in 2 days.
• Much More – There are many more features you should look at that will be help you build a readership for your blog if you have one. This blog is currently using this plugin for e-mail subscriptions. The plugin is available for free download here: Click here to download.

Until now the only way to create your own forms was by creating a plugin or hack the core of the content management system. Drupal however has a community created module that allows anyone to create a form on a website. The form can either send the entered data to your email address or save it in a database or both. There are a number of reasons why you will need to create a form. Here are some examples:

• Create a Bug Report form for your buyers or users for your software
• Register for an upcoming event.
• Submit content to the website
• Add a help desk to your drupal website

When the form is filled out, we may want the entries to be

• Sent to us by e-mail
• Save to the database

One can create a form in drupal without any coding knowledge. This tutorial shows how to create a registration form using drupal. In this tutorial we will be creating a academic research paper registration form. The form will take the name, number of participants, the event they want to attend, the name of their college, number of participants, brief abstract, and the files that show the full paper of the event.

I have chosen this form because this demonstrates the many commonly needed form field elements – one line text fields, multiple selection fields, radio buttons, multi line text areas and file upload fields. I assume that you already have a installation of drupal somewhere. If not, read my earlier article on the steps to install drupal on your shared hosting server. Our form will have the following fields

Step 1: Download webform module from drupal.org.

Webform is the module we are going to use to create forms. This module adds a new content type of “webform” which will be our form. The webform module can be downloaded here..

Step 2: Enable the webform module.

Upload the modules files to the [website root]/sites/all/modules directory. The modules directory may need to be created if it doesn’t already exist. To learn how to install drupal modules, read my artilce on the same topic here.

Step 3: Create New Form

Enter the menu settings for the form where you can specify in which menu you want a link to this form to appear along with its link text. Then specify the form name, public description that appears above the form, and the text to show after the form has been filled.

Click to enlarge

Next specify to which e-mail address the content of this form is to be sent along with the subject, from address that is seen in the e-mail received. If the form will be used by registered users you can also specify how many times a user is allowed to register the form.

Click to enlarge

Finally specify the text that is on the button such as “Register” or “Save” or “Submit”. Under comment settings, make sure you disable the form as it would look awkward and confusing to have a comment field below the registration form.

Create New Web Form

Click on Create Content link on the navigation menu click on Web Form

Enter the form’s information such as name and the email address where the form’s information is to be sent when it is submitted by the user. It is also possible to customize the validation of the form.

Click on image to enlarge

Step 4: Create the form fields

When you click save, you will now see a empty list. You can now start adding form fields to the form. Enter the appropriate field name in the name field, select the appropriate type in the type column, specify it it is an email and if this field takes an email address and click Add.

Click to see enlarge

Having created the form’s page, now you can add its form fields

In the resulting form, enter the name, default value if any, the description to be given for the and optionally the width, maxlength, label to be placed before the textbox and after the textbox. There is a section for advanced settings if you want to customize the field further.

Click to enlarge

Enter the name, select the type of field, specify if the field is mandatory and specify if this field is an email address.

Create form field form. Enter name, brief description, a default value if applicable.

Do the same for the name, email, title and college name fields.

The participants field is given a limit of 1-3 participants so we should make it a drop down selection box allowing the user to select the number of participants. For the number of participants field, select the field as the type. Once you click Add, you will see a textarea labeled ‘Options’. Enter the options one in each line.

Enter the options you want to display in the drop down field. Make sure you check the

Listbox check box to display the options as a select item instead of a set of radio boxes.

In this case we are going to enter 1,2 and 3 each in its own line.

For the research paper files field we choose a field of type file and click Add.

Click to enlarge

Now we’re presented we have an option to specify the acceptable file types of this field. I have selected doc, pdf, odf, html, rar, bz2, gz and zip and specified a upload limit of 800kb. Save the form field.

Now click publish to see the form. When you fill the form out and click submit, sends the following e-mail to the e-mail address we specified in step 3.

Closing Notes

Using the webform module anyone can create a webform. Even non-programmers can create forms for their website using this method.

Google rolled out the latest version of Google Chrome few days ago. This release is still in the beta. The features in the new version are amazing.

Apart from the theming system the browser is very stable. Click here to try it out.

Although this doesn’t look like a lot of changes in the number of features. The team behind Google Chrome must have made many changes to attain the 30% improvement in speed. This is yet another step in Google’s efforts to make the next big operating system which they announced a few weeks ago.

When adding new features to a wordpress website you may have to create a configuration page for the feature you created.

For example, the twitter plugin (which adds your twitter feed to the sidebar) should be configurable to specify the username and the number of tweets to display. This is important in cases where the plugin will be distributed and be used by non-technical users.

This article will show you:

1. How to create an admin section like the one shown in the image on the right.

2. How to create sub pages for each of those sections

3. Show the content (usually a form) you want when the sub page link is clicked.

What We’ll Create:

This is a part of a module that I am working on right now. This module adds an autoresponder that has most of the features of Aweber.com.

Step 1: Add An Admin Menu Hook

Add an admin_menu callback function in your main PHP file. If you don’t know what a hook is, it is simply a special function that you ask wordpress to call at a particular stage of initializing the output. In this case the stage is building the administration menu.

add_action('admin_menu','wpr_admin_menu');

Step 2: Adding menu items

Adding Admin Section

First we add a separate section called “Newsletters” which can be expanded to show some more links to sub sections (Home, Subscribers in the above picture). To add a section we use this function:

add_menu_page(page_title, menu_title, access_level/capability, file, [function], [icon_url]);

So in our plugin we use:

add_menu_page('Newsletters','Newsletters',8,__FILE__);

If you leave out the [function] parameter, wordpress will display the first sub page under the section when the section is clicked (and not expanded using the small arrow on the right). Click here to read the detailed documentation of the function.

Access Capability

I need this section to be visible only to the admin user therefore I have used access_level as 8. Click here to see other access level values.

Adding Sub Sections

The sub sections – Home, Newsletter, Subscribers, Messages and Reports are added using the following function.

add_submenu_page(parent, page_title, menu_title, access_level/capability, file, [function]);

In our plugin we use:

add_submenu_page(__FILE__,'Newsletters','Newsletters', 8, "newsletter", "wpr_newsletter");

The first parameter is the parent file. This should be the same as the top level menu’s file parameter. Click here to read the detailed documentation of the function. In the parameters, add the parent, page title, menu title and access level capability and then add any unique value for the file attribute

Customizing the first sub section’s link text

When you add sub sections using the add_submenu_page function as shown above, the first section always takes the name of the top-level section itself. To change that to something you want, call the add_submenu_page function as shown below immediately after the add_menu_page function.

add_submenu_page(__FILE__,'Dashboard', 'Home', 8, __FILE__, "wpr_dashboard");

The only difference is the parent attribute and the file attribute in the function are et to the same file. Above function will set the link of the first section to ‘Home’. The wpr_dashboard function will be called when this page is to be displayed.

function wpr_dashbaord()
{
     echo "Dashboard Content Goes here!";
}

Below is the code for the menu in the picture :

add_action('admin_menu','wpr_admin_menu');

function wpr_admin_menu()
{
     add_menu_page('Newsletters', 'Newsletters',8,__FILE__);
     add_submenu_page(__FILE__, 'Dashboard', 'Home', 8, __FILE__,"wpr_dashboard");
     add_submenu_page(__FILE__, 'Newsletters', 'Newsletters', 8, "newsletter","wpr_newsletter");
     add_submenu_page(__FILE__, 'Subscribers', 'Subscribers', 8, "subscribers", "wpr_subscribers");
     add_submenu_page(__FILE__, 'Messages', 'Messages', 8, "messages", "wpr_messages");
     add_submenu_page(__FILE__, 'Reports', 'Reports', 8, "reports", "wpr_reports");
}

One of the most difficult tasks when moving from table based layouts to css based layouts is creating equal height columns. Many newcomers to web design will find these frustrating to create.

I’ve written a guest post at one of my favourite web development blogs – BuildInternet on how to create just that. The article discusses four methods to create equal height column layouts in HTML/CSS. I’m very excited about this article because this is my first guest post on another blog. I will be making many others like this. Please take a look:

Four Methods to Create Equal Height Columns

Why don’t you show how relevant you are to your site visitors and get more followers on twitter? Once they start following you, you can start pointing them to your website again and again now that you have their attention.

Unfortunately there isn’t a simple way to create this block from the existing drupal modules. The procedure to create a Twitter block is very convoluted using Views and what not.

But first, a little rant. It seems like a lot of developers are more focused on being ’standards complaint’ (politically correct) than create easy to use software as if they create software for other developers.

“Oh! let’s not rehash the code here, that’s not good core re-use. Let’s ask users of our module to download and install 10 other modules on which we will base this module!”

This block is installed through the module (download below).

The block is highly customizable. Check out the options you have in the administrator’s interface.

This interface is found in Administer > Sites Building > Blocks > Twitter Block [configure]

The blocks can be theme using css as each element is enclosed in a <div> of appropriate name.

Download

Click here to download the module.

Installation Steps

1. Install the Module: Just place the module in the modules directory of your drupal site or sites/all/modules/ directory if you have multiple installations. Log in as administrator and go to Site Building > Modules. Scroll to the bottom and find “Other” package. Expand it, check the TwitterBlock one and click Save Changes.

2. Place The Block In A Region: Now go to Administer > Site Building > Blocks. At the bottom of the list you will find Twitter Block. Drag it to the required region and click Save Changes.

3. Enter Username/Password: Once you click save, you will still not see the block, you must enter the username and password. So click on ‘configure’ next to Twitter block and enter your username and password. Choose a appropriate update frequency and click Save.

You’re all done. Your module should be working now. Leave a comment on this post regarding bug fixes and other issues.

License

This module is provided under the GPL license. Read the full version here.

One of coolest featuers in Google is the ability to find the definition of a word using the “define:” prefix. The advantage of the Google dictionary is that it also lists the definitions that are not official and “approved by oxford” – the kind of words that a publisher of a dead-wood dictionary will not add it its book.

Just because it isn’t on the dictionary doesn’t mean the word doesn’t exist right? That’s why I created this tool. You can get the definition of any word on the desktop. Perfect for finding up and coming fads and lingo.

Gefine dictionary viewer is available for Windows and Linux.

In the next version, I will be adding Urban Dictionary support and possibly automatic word completion.

License

This tool is provided under the GPL license.

Download

Download For Windows – Click Here

Download For Linux – (Coming Soon)!

Source Code

Gefine is written in Qt C++. It is a GUI Library for creating applications for Windows, Macintosh and Linux. The code is in C++.

Click here to download the source code

Need Gefine For Your Macintosh?

I don’t have a executable file for Mac but if you have a Mac and would like to help create a Mac version of gefine please download the source code, install the Qt C++ framework and compile the source. Send me an e-mail if you need help. Please give me the binaries so I may distribute it to others.

One of the most common questions that new drupal users come across is finding out how to create a new block.

Blocks are sections of a page that can be placed in any one of the regions supported by the theme that is currently active. A block usually gives some special features such as a log in form, a poll, a list of links to a section of your page or something similar. Some special modules add new blocks that you can place in your website.

Why Would You Add A Block?

You may want to add a new block for adding some HTML code for your such as for an advertisement block or a website hit counter. The block may need to have some text or HTML code that should be displayed in all (or selected) pages of your website.

You may even add a block to execute some PHP code in your web page. In this example I will show you how to add a block that displays the current time and date. Although I am using PHP code, you can even use HTML or even plain text.

How Would You Add A Block?

There are two methods to create a custom block for drupal. This article will discuss both methods. The first method can be used by anyone. The second method is better suited to you if you have to distribute the code to someone else.

There are two methods to create a custom block for drupal. This article will discuss both methods. The first method can be used by anyone. The second method is better suited to you if you have to distribute the code to someone else.

Important Note: If you are going to add some PHP code in the block, then you must enable the PHP input type. In drupal 6 this is done by enabling the PHP Filter core module. In drupal 5 this is done by going to Administer > Site Configuration > Input Formats and adding PHP Input type.

Step 1: Go To The Administration Panel > Blocks and click on the Add Block link (tab).

Step 2. Fill in the form along with the necessary PHP code. And click on the ‘Save Block’ button.

Advantage : The advantage of this method is that it is very simple. It can be done quickly and easily by anyone. Even a non-programmer can do it in a matter of minutes.

Disadvantage: For non-programmers this is a minor disadvantage – that you cannot distribute the block as a small piece of code that another person can place in their modules folder, enable it and arrange the new block on their website. For developers this method means they cannot distribute the functions of the block without giving long instructions on how to enable it (which is usually error-prone).

The Developer’s Method: Meant for creating a block for distribution

This method is ideal if you want to create special functionality that goes with your theme or just generally a new block for any drupal website.

In this method we will create a new module which will add a “Time And Date” module to the Administer > Site Building > Blocks section.

1. Create a new directory under sites/all/modules called timeanddate.


2. Under timeanddate directory, create a file called timeanddate.info and enter the following code in it as it is:

; $Id$
name = timeanddate
version = 1.0
description =This module adds an advertisement block. This is to be used with the authorist theme
core = 6.x
PHP = 4.3

2. Under the same directory, create another file called timeanddate.module.


Firstly we have let drupal know that we want to create a new block. We do this by defining a function called _block(). Modulename here is timeanddate, so our function will be:

<?php
function timeanddate_block($op='list',$delta=array(),$edit=array())
{
      switch ($op)
     {

     	case 'list':
                       $blocks[0]['info'] = t('Time And Date');
                       return $blocks;
                       break;
      }

}

Save it and go to Adminsiter > Site Building > Blocks. Defining this function in the timeandmodule.module file will add a new block named ‘Time And Date’ to your Administer > Site Building > Blocks section. Don’t try to add this to a region yet. You will not see a new region if you do so.

function timeanddate_block($op='list',$delta=array(),$edit=array())
{
      switch ($op)
     {

     	case 'list':
                       $blocks[0]['info'] = t('Time And Date');
                       return $blocks;
                       break;
      case 'view':
           ob_start();

//start block content
?>

enter your plain text or html here.

<?php
//end block content
          $content = ob_get_clean();
          $blocks['subject'] = t('Time And Date');
          $blocks['content'] = $content;
       break;
      }
}

Enter your HTML code in place of “enter your plain text or html here”. If you are using PHP code to generate some output to the browser, replace the code that is in between ‘ob_start();’ and ‘$content = ob_get_clean();

In our example, we will be using php code, so our function, with the addtion of “echo date(‘gi:i d D m Y”);” which prints the current date and time, becomes this:

function timeanddate_block($op='list',$delta=array(),$edit=array())
{
      switch ($op)
     {

     	case 'list':
                       $blocks[0]['info'] = t('Time And Date');
                       return $blocks;
                       break;
      case 'view':
           ob_start();

           echo date('gi:i d D m Y');

          $content = ob_get_clean();
          $blocks['subject'] = t('Time And Date');
          $blocks['content'] = $content;
       break;
      }
}

That’s it. Now we have a block that shows the time. This module can be distributed to other website owners as well.

Time And Date Module