[How to]Integrating Maven with Eclipse

An updated version of this post is available here.

If you are coming to this post this means you know enough about Eclispe and Maven. For those who don’t know about Maven, (from maven.apache.org) Maven, a Yiddish word meaning accumulator of knowledge, was originally started as an attempt to simplify the build processes.

Now a days most of the projects build through Maven. I use Maven2Eclispe (m2e) plug-in for using maven with Eclispe. To add this to your Eclipse follow these simple steps-

1. Go to Help(in Eclispe) click on Install New Software. Add this link http://m2eclipse.sonatype.org/sites/m2e in work with option. Tick Maven Integration for Eclipse from the check-box given below.

2. Don’t forget to tick the Contact all update sites during install to find required software
3. Click finish to complete the installation.

You might get an error saying

“Cannot complete the install because one or more required items could not be found. Software being installed: Maven Integration for Eclipse (Required) (org.maven.ide.eclipse.feature.feature.group Missing requirement: Maven Integration for Eclipse (Required) (org.maven.ide.eclipse.feature.feature.group requires ‘org.eclipse.emf.ecore.edit 0.0.0’ but it could not be found.”

This is due to it requires Eclispe Modelling Framework (EMF) for its installation but ir comes from different update site than M2Eclispe and therefore you need to add EMF framework too. To do so add download.eclipse.org/releases/helios site also and tick EMF for installation, click finish and you are DONE with it.

Using Twitter4j with SSL connection

This morning my Twitter Data Collection project suddenly stopped working. Suddenly, it failed to connect to the Twitter servers. It is as a result of the recent announcement made by twitter that it would allow only SSL connections starting from 29.09.2011.

I had been using twitter4j to connect to twitter stream. Even after setting the twitter4j.http.useSSL property to true, it failed to connect.The apparent solution to this was to update the twitter4j API to version 2.2.5-SNAPSHOT as announced through this tweet by twitter4j. But even after updating my project’s pom.xml to the new version, the problem wasn’t resolved. I figured out that the SNAPSHOT version wasn’t getting downloaded for twitter4j-core. Here’s how I fixed the problem:

      <name>twitter4j.org Repository</name>

This fixed the problem. Finally my data collection is back on track! 🙂

Firefox Takeout: Take your Firefox data with you

This post comes after a long time as I was busy in traveling. This summer I was working as Google Summer of Code Student’s for Fluid. After completing it successfully, when I was leaving the PC at my office on which I was working for my project I realized that I will lose track of all the technologies, sites and blogs etc. I had bookmarked as well as my browsing history, which Firefox uses to show suggestion while user types something in address bar. On googling a bit about this, I found out a solution for this. But there wasn’t any software available to assist me with the process. So I decided to build one for me so that I wouldn’t have to search again whenever I move my system. I then decided to build a software by which I would be able to see all suggestions from previous system as well as suggestions which was already present in the second system, and named it Firefox Takeout which can be found at here. This software works only on those Windows system on which English as Language is installed.

So, what does the software actually do? This software works in 2 steps. First screen provides user to choose from 2 options as shown-

Firefox Takeout

Firefox Takeout

When user chooses 1st option that is Takeout Firefox data from first system; file used by Firefox for showing suggestion to the user while typing, is copied inside Firefox Transform folder located on desktop (It creates the folder if it doesn’t exist). This completes 1st step. Now user can copy this folder and paste it on desktop of 2nd system. This is pre-requisite for the 2nd step. Now on the 2nd system, user can select 2nd option, i.e., Bring in Firefox data, this will send the file to the destination.

This software was not difficult to build but it simplifies the life of the user to a great extent when user switches from one system to another specially to those uses which uses bookmarks and are not able to keep track of site visited by them. I think you will enjoy using this software. I will be improving the software’s functions, look and feel in the future. Feel free to follow the development on the project page at sourceforge. If you face any problems, I would be glad to help.

Javascript Image Manipulation using HTML5 canvas element [Tutorial]

An updated version of this post is available here.

I have been working with HTML5 and Javascript for my Google summer of code project for the Fluid Project. This post is the first of a series of tutorials which I would be posting related to Javascript, HTML5 (especially canvas element) and Fluid Infusion.

I have been exploring ways to get image pixels from an image object using Javascript. As far as I know, the only way of doing this so far is by using the HTML5 canvas element. So, you can either build a canvas element yourself and get the pixels or use some nice Image Processing library such as Pixastic. I would now be describing more about image processing using canvas element. I assume that you know a bit about the HTML5 canvas element beforehand. For knowing more about canvas, I recommend going through these tutorials by Mozilla. I also assume that you have got an Image object for which you want to manipulate pixels.

Top obtain the pixels for a given image, you first have to draw that image on canvas and then get the pixels using the getImageData method on canvas context.

var imageManipulationCanvas = document.createElement('canvas');
imageManipulationCanvas.height = image.height;
imageManipulationCanvas.width = image.width;
var imageManipulationCtx = imageManipulationCanvas.getContext('2d');
imageManipulationCtx.drawImage(image, 0, 0); // Draw image on temporary canvas
var myImageData = imageManipulationCtx.getImageData(0, 0, image.width, image.height); // Parameters are left, top, width and height

The image data object has three fields: width, height and data where data is the CanvasPixelArray object which contains pixel data for image.

The CanvasPixelArray object can be accessed to look at the raw pixel data; each pixel is represented by four one-byte values (red, green, blue, and alpha, in that order; that is, “RGBA” format). Each color component is represented by an integer between 0 and 255. Each component is assigned a consecutive index within the array, with the top left pixel’s red component being at index 0 within the array. Pixels then proceed from left to right, then downward, throughout the array.

The CanvasPixelArray contains height x width x 4 bytes of data, with index values ranging from 0 to (height x width x 4)-1.

Now you can manipulate the pixels as you want for any image. However for simple operations like resizing and cropping, I prefer using different variations of the drawImage function rather than manipulating the pixels myself. Here’s how to resize an image using drawImage:

var imageManipulationCanvas = document.createElement('canvas');
imageManipulationCanvas.width = newW;
imageManipulationCanvas.height = newH;

var imageManipulationCtx = imageManipulationCanvas.getContext('2d');
imageManipulationCtx.drawImage(that.image, 0, 0, resizeW, resizeH); // Draw resized image on temporary canvas
var resizedImageDataURL = imageManipulationCanvas.toDataURL();	//get DataURL for cropped image
return resizedImageDataURL;	//DataURL can be directly used to make new image pbject by using image.src

And, the following for cropping an image:

var imageManipulationCanvas = document.createElement('canvas');
imageManipulationCanvas.height = newH;
imageManipulationCanvas.width = newW;
var imageManipulationCtx = imageManipulationCanvas.getContext('2d');

//use drawImage(Object image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh)
imageManipulationCtx.drawImage(image, croppingDimensionX, croppingDimensionY, croppingDimensionW, croppingDimensionH, 0, 0, croppingDimensionW, croppingDimensionH); // Draw cropped image on temporary canvas
var croppedImageDataURL = imageManipulationCanvas.toDataURL();	//get DataURL for cropped image
return croppedImageDataURL;

Tutorial 4: Building the Yellow Pages Application

Go through Tutorial 3 first.

In this tutorial, we would build a Yellow Pages Application. We will continue it from the last tutorial and extend it to have one more form and another dialog, the MessageQueryDialog to display the required data. We will also look into Symbian File Handling to retrieve the data about businesses.

First, add another form in the resource file in a similar fashion as the earlier form(define a resource in resource file and class to handle the form events) to provide for selection of category. Go through the previous tutorial if you have any problems in adding another form. Once the form is added, we need to execute the form after the city is successfuly selected in the first form. To do this, we make a new form object in the SaveFormDataL() method of the first form(just like we did in HandleCommand for the first form). Once, we have extracted the city and categories, we will now extract the corresponding information about the businesses in the city for the category from te file that we have stored in the phone’s memory.(You need to make those files(or copy them from the YPages folder) and place them in the memory) For running the application on the emulator, just place the folder YPages from the current directory to the SDK’s winscw folder-
Default Path: “C:\S60\devices\S60_5th_Edition_SDK_v1.0\epoc32\winscw\d”

File Handling in Symbian:

First, you need to obtain a handle to File Server session and connect to it. You can do this by:

RFs fileServer;
User :: LeaveIfError (fileServer.Connect());

Now, we will use the RFile class to read data. Open the file for reading. The EFileStreamText flag denotes that the file opened is a text file. The EOF is indicated by the return value of TTextFile::Read(), which is KErrEof.

RFile file;
User::LeaveIfError(file.Open(fileServer, KMyTextFile, EFileRead|EFileStreamText));

The class to read a text file is TFileText. It is declared in f32file.h header file and a library named efsrv.lib(add this to the mmp file). Before using TFileText, we have to open a file using RFile because TFileText does not have an Open method. TTextFile has Read() method which requires a 16 bit descriptor parameter because Symbian OS stores text files in unicode format. Do not use TFileText to open a file other than unicode. we will get garbage characters if trying to access non Unicode files, such as ASCII files. Go through the source code to understand clearly.

Close the file server session after the reading is completed.

After successfuly reading data from the file, we will now print the read data in a MessageQueryDialog. We must first define the resoruce for this dialog. We have defined a r_about_heading_pane resource in the resource file. It is similar to previous dialogs, define the flags, cba function, and items. the difference here is that we do not define a for for this dialog. Instead we define 2 items, heading pane, and a CAknMessageQuery to hold the text.

After defining the resource in the resource file, we must execute the resource in the SaveFormDataL() after reading the data from file. For this, create a new object of type CAknMessageQueryDialog and Prepare it with the resource defined in the resource file. Then, set the header text and finally call RunLD() on dialog to display it. The text to be displayed in the dialog was passed alongwith the dialog’s constructor while making the new object.

Download Source code for this tutorial here.

Tutorial 3: Creating Forms & Supporting Multiple Languages

Go through tutorial 2 first.

In this tutorial, we look into more complex dialogs. For our application, we use the form dialog. A form displays a set of data fields in the form of a list, with each data field in the list consisting of a label and a control. The label can be on the same line as the control, or it can be on a separate line, with the control below it. In addition, a form dialog is automatically associated with a standard menu that supplies the options:
Add field, Edit label, Delete field, Save and, optionally, Edit.

Selecting one of the first four of these options results in a call to the appropriate one of the CAknForm functions: AddItemL(), EditCurrentLabel(), DeleteCurrentItem() and SaveFormDataL(). In our application, we use only the save option which in turn calls the SaveFormDataL() function.
An S60 form has two modes: in ‘view’ mode it acts as an application view that displays a list of data items, and in ‘edit’ mode it can be used to modify the data items displayed. By default, it starts up in ‘view’ mode and you can switch to ‘edit’ mode by selecting the Edit menu option. When you have finished editing the data, you press the right softkey (temporarily labeled Done)to return to the ‘view’ mode. A form is actually more powerful than a dialog. If, for example, the data items it is displaying are the fields of a database record, you can implement the commands described above to add, delete, or modify entire records.
You can specify that the form should be edit-only (via a fiag in the FORM resource), so that the form is always in ‘edit’ mode, and in this case, the Edit menu option does not appear.

You can also override its DynInitMenuPaneL() to disable some or all of the other menu options. You specify a form in the resource file by creating a FORM resource and assigning it to the form attribute of a DIALOG resource (or a PAGE resource for multipage dialogs). The FORM resource contains the list of DLG LINES that specify the label and control for each field in the form’s list.

We can also provide support for multiple languages in the application through the rls file. While you can put text strings directly within the resource file, this is not recommended if you need your application to support different languages. Symbian recommends that you put all your strings into a RLS file, and then include this string file using #includein your RSS file. There should be a separate RLS file for each language you support.
Each string in the RLS file is defined using the rls string keyword. For example:

rls_string STRING_r_gui_start "Start";  

As you can see, the DIALOG resource defines the flags and softkeys, and the form attribute points to a FORM resource. This resource specifies the dialog’s content which, in this case, consists of one dialog line: a S60-specific control, known as a pop-up field (type EAknCtPopupFieldText and control structure POPUP FIELD), which is used to select the city. The FORM resource has an additional flags attribute, which is used here to set each control and its prompt to be displayed on separate lines, and to set the ‘edit only’ mode that was mentioned earlier. We also define the list of cities to appear in the popup field using a RESOURCE ARRAY r_city_list.

PreLayoutDynInit() is overridden to set the initial values of the controls in the form. We also override the SaveFormDataL() method to perform the save operations. For our application, we obtain the index of the selected city from the popup menu using the CurrentValueIndex() method in popupFieldText. we then print a dialog similar to the one printed in the second app to display the selected city index. The descriptor method Format() does this. The format string supplied to Format() is very similar to the format string in C, supporting %d, %s, %f, etc.

This wont display the form on the screen. To make the form appear on the screen once we select the start menu item, we need to handle the command in HandleCommand() method in Application Ui Class. We create a new form object and execute R_THIRDAPP_DIALOG which was defined in the resource file.

Download Source code for this tutorial here.
Go through tutorial 4 now.

Tutorial 2 : First Dialog

Go through tutorial 1 first.

Now that you know how to print text on the screen, lets go to a little more complex application. We aregoing to add a menu to the application, how to handle commands in a little more detail, and finally create an alert dialog.

Here are the changes that it makes to the first tutorial.

  • Add the menu bar resource in the resource file to display the menu. The menubar attribute of EIK APP INFO is assigned a resource of type MENU BAR, which specifies the application’s default menu. Menu bar resources have one or more menu titles (type MENU TITLE)and each menu title points to a menu pane (type MENU PANE). The menu bar in the example, r_SecondApp_menubar, has a single menu title and this points to menu pane r_SecondApp_menu. Menu panes define the actual menu items (type MENU ITEM), whichthe user selects to invoke some operation in the application. r_SecondApp_menu defines a menu item labeled ‘Start’ that sends the command ESecondAppCommand to the GUI command handler code when the user selects it (so the code can display the Application’s dialog).

  • Now, we need to define the command codes used in the resource file. These are defined in the .hrh file. The file SecondApp.hrh contains the command values that the controls send (specified in the resource file) for the application code to handle. In this case we have only one, used when Start is selected:
    enum TSecondAppIds
        ESecondAppCommand = 1
  • the menu item ‘Start’ is selected, the GUI framework invokes the HandleCommandL() method, passing it the command ESecondAppCommand (the command specified in the menu resource in the SecondApp.rss file). HandleCommandL() responds to this command by popping up an alert window with the message ‘Your First Dialog!’.We can use the iEikonEnv->AlertWin() function for the pop-up since this is a core GUI method available to all platforms. This function takes one arguement which is a descriptor.

    • Descriptors are classes that represent data buffers and allow you to safely access them. Symbian OS uses descriptors to store and manipulate strings (as opposed to NULL-terminated C strings), as well as to manage binary data. Descriptor classes, although containing many features, are optimized for minimal overhead, since they are designed to run on memory-constrained devices. There are multiple descriptor classes available in Symbian. You’ll need to use descriptors to call many of the Symbian OS API functions.

    • A String Literal(Descriptor) in Symbian is declared as:
              _LIT(KMessage,"My First Dialog!");

      The LIT macro is called to take the string “My First Dialog!” and stores both the string and the string’s size in the descriptor literal KMessage.

Download Source code for this tutorial here.
Go through tutorial 3 now.

Tutorial 1 : Learning the basics

Now that you have downloaded the SDK and know how to make projects in Carbide, we will now look into our first GUI Application which prints a line of text in the center of the screen. The main goal of this tutorial is to get a feel for developing a basic application by actually building and running one on the emulator.

Application Architecture

A minimal Symbian GUI Application must contain the following 4 classes:

Application View: The view class implements the application’s screen display, including drawing the window and the creation of the initial screen controls. The class is inherited from CCoeControl which is fine for Applications with just one view class. We would only be discussing a single view class for now.

Application UI: This class instantiates the application view and handles the commands sent from the application’s GUI controls.

Application document: This class handles the non-GUI data aspects of the application – the application data. It also instantiates the application’s UI class.

Application: This class is used to identify the application (by returning the application’s UID) and to instantiate, and return a pointer to, your application’s document class.

Now let us discuss these classes one by one.

Application View Class:

The application view class handles the presentation of your application on the smartphone’s screen, as well as allowing the user to interact with your program. In Symbian OS all objects drawn to a screen are controls – including the application view, which is a custom control. It has the following methods:

NewL, NewLC and ConstructL: These methods construct a new object of the view class. We will discuss about why we took these 3 methods and not just the constructor to construct the new object later in error handling.

Draw(): Draw() is a method called by the framework for every control in order to draw it to the screen. The application view is a control, and, we implement the Draw() function to output the text ‘First Application’ in the center of the window. The drawing is performed by opening a graphics context (GC), getting a font, and calling the context’s DrawText() function. Cleanup is performed on the font upon

completion.(Cleanup will be explained in error handling.)

Application UI Class:

Your application’s UI class is responsible, upon construction, for creating the application’s default view. In S60, for basic one-view applications (i.e., the view is a simple control), the UI class contains the command handler that handles all the commands the users initiate via the GUI. If you are using multiple views, however, this command handler would be in the view class. It has the following methods:

ConstructL(): This function does the work of construction of an object of View Class.
HandleCommandL(): This function handles the commands passed from the Application’s GUI controls. In this application, we just need to handle the commands for exiting the application.

Application Document Class:

The document class has two purposes, the first of which is to represent the application’s persistent data(Data that needs to remain after application is exited). The other is to create the application UI instance in which this data (if any) can be manipulated. For applications that have no persistent data, and therefore are not file-based, the document class simply implements the CreateAppUiL() function to return the application’s UI object.

Application Class:

This is the first thing the GUI framework creates. It has the following methods:
CreateDocumentL(): This function creates an object of Document class and returns a pointer to it.
AppDllUid(): This function returns the Application’s Uid.

E32Main()Entrypoint and NewApplication()

A Symbian OS GUI application is a process executable (EXE file) and therefore must contain an E32Main() entrypoint function. For a GUI application this just calls EikStart::RunApplication(), passing it a pointer to a function that returns the application object to run.

Resource Files:

The application resource defines a significant part of how the application will appear and function. The resource file is a text file whose name ends in .rss, and is compiled into a binary form by the SDK’s resource compiler. This compiled version of the resource file is loaded onto the phone along with the application executable and is accessed during application execution.

The RSS_SIGNATURE resource is used to validate the file and must appear, exactly as shown below, as the first resource in every appliation’s resource file.


TBUF Resource defines the default document name. As a document is not used in the application, it is left blank.
The EIK_APP_INFO Resource defines a Control Button Array(cba) resource that defines the function of the left and right softkeys. We define the cba as "R_AVKON_SOFTKEYS_EXIT". This defines the right softkey as exit and generates the command "EAknSoftkeyBack" when activated which is in turn handled by the Application UI class.

Application Registration Resource File:

GUI applications are EXE files in the sys\bin directory and in order for the device to recognize an executable as a GUI application, and to display them on the desktop for user selection, the application must be registered via a special resource file known as a
registration resource file. The source file names are typically <application name> reg.rss. Walkthrough the reg_rss file for more details.

Project Build Files:

These are the files that define how to build a project:

FirstApp.mmp: It defines what source and resource files should be compiled and what libraries should be used for linking. The locations to search for project-defined and system include files, and source files and locations, are also defined

bld.inf: The file bld.inf points the build tools to the correct project definition
(MMP) file.

Download Source code for this tutorial here.
Go to tutorial 2 now.

Building the Yellow Pages Application

Read the following chapters of the book, Developing Software for Symbian OS by Steve Babin. :

  1. Chapter 1: Smartphones and Symbian OS
  2. Chapter 2: Symbian OS Quick Start
  3. Chapter 4: Symbian OS Programming Basics
  4. Chapter 6: Strings, Buffers, and Data Collection (Important)
  5. Chapter 12: GUI Application Programming

This would require about 8-10 days.

In addition to this, we also referred to Nokia Forums, NewLC and the book, "Quick Recipes on Symbian OS Mastering C++ Smartphone Development" by Michael Aubert. (Section 4.1 : File Handling)

After reading the book we started off with a top-down design of the App (Use case analysis, class design, realization etc).

 Application Use Case Analysis

  1. User selects City from a list.
  2. User selects Category from a list.
  3. System presents the list of Companies and their phone numbers to the user.

Application Architecture

A Symbian GUI App contains 4 classes:

  • Application View: The root GUI control, this class implements the main window and acts as a container for the other application controls.

  • Application UI: This class instantiates the application view and handles the commands sent from the application’s GUI controls.

  • Application document: This class handles the non-GUI data aspects of the application – the application data. It also instantiates the application’s UI class.

  • Application: The main application class starts the application by instantiating and starting the document class. It also sets the application’s UID.

The application resource defines a significant part of how the application will appear and function. The resource file is a text file whose name ends in .rss, and is compiled into a binary form by the SDK’s resource compiler. This compiled version of the resource file is loaded onto the phone along with the application executable and is accessed during application execution.

For making the GUI components, we must first define the GUI components in the resource file. For our Yellow Pages, we first define a MenuBar. We defined a menubar with just one item, "Select City". It should then display a dialog with a form to select the city-

Selecting a City and saving then creates another form which provides options for selecting the category-

After that, the data is read from a file and the names of companies and their phone numbers are dispayed in a MessageQueryDialog.


The UI class handles the commands from these GUI resources, whereas the CYPagesForm & CYPagesForm1 handle the dialog forms defined in the resource as follows. CYPagesForm & CYpagesForm1 have methods like DynInitMenuPane which initializes the resource defined in the resource files using the resource id, and other methods to handle the forms.

Google Summer of Code with Fluid Infusion

People who are waiting for my Symbian tutorials would have to wait. In the past couple of weeks, I haven’t had the time to write those tutorials as I have been working on a Google Summer of Code Project for the Inclusive Design Institute. For those who are unfamiliar with Google Summer of Code, it is a program that offers student developers the opportunity to write code for various open source projects. The project that I am working on is Image Editor which will be developed as a component for the fluid infusion framework. Fluid Infusion is a Javascript library that provides several components for building awesome interfaces for the web. I will be talking about a lot of things related to GSoC in this post. Lets get started.

Google announces GSoC every year sometime in January. It then accepts applications from several organizations who wish to work under the program and hire student developers for the summer. Few organizations get selected which then propose several projects on which the students would work on during the summer. This is when the students start their journey. I looked at several organizations and listed a few whose projects matched with my field of interest. The next step is to learn more about these organizations and make sure that you would like to work with them in the summer. It is very important to identify the correct organization and the correct project that you want to be working on. We can get to know more about the organizations by hanging out in their IRC channels or joining their mailing lists.

After this, I started writing proposals for the projects which I was interested to work on. This is probably the most important step of the application process. This is where the organizations can know about whether you have understood about the project and how much work do you propose to do. At this step, one could get feedback about the proposal from the mentor organization as to what they expect from the proposal. There is no such thing like a set of guidelines for writing a proposal because different organizations look for different things in the proposal. But, in general, a proposal should be realistic and to the point with at least a basic timeline of the work that you expect to complete every 15 days. One can submit upto 20 proposals to Google. Again this is an upper limit and is not at all recommended. Proposals should be submitted only to organizations which really interest you. Also one should focus on the quality of proposal rather than the quantity.

After this phase, one can either choose to relax till the declaration of results or study about the projects that he submitted proposals for. A few lucky ones make it to GSoC and it is an opportunity to get to know more about how large open source organizations work as well as contribute back to the open source community. This was just the beginning. The real work starts after being selected for GSoC. I guess, this is a long enough list of suggestions for the GSoC Applicants. I will now talk about my GSoC proposal and the wonderful organization that I have started working with.

You can find my proposal on Image Editor here. This is the final version of the proposal which I came up with after a few discussion with the mentor for Image Editor, Michelle D’Souza. I was very excited after I came to know that I had been accepted for Goolge Summer of Code. Frankly, it came to me as a shock. Thanks again to Fluid for giving me this wonderful opportunity.

During the community bonding period, I started looking up documentation on Fluid Infusion and remained in the IRC channel. This was the first time that I was working on a big open source project involving several developers. But, the Fluid community is really wonderful everyone is more than willing to help. With the help and support from my mentor as well as the developers, I was able to pickup the framework quickly and started developing simple components. I am working using github and all the code that I develop is available here. I am doing the development using JavaScript, HTML5, PHP and am working on Aptana Studio. I will be talking more about developing components for fluid and how to use fluid to develop good interfaces in my next posts.

In the meantime, I also received the Welcome Package for Google Summer of Code students. I was very excited to receive the package as it was from Google. Well, I guess that’s enough for today. I should probably get back to coding :). Have a look at my welcome package: