Campaign Management System
This
system enables the users to set up campaigns by organizing the content for the
campaign and adding a list of subscribers to it.
SUMMARY
This project was implemented
using GWT-Ext technology. To develop a web
application that can will support GWT Client presentation layer and intercept
the calls to back end enterprise beans.
TECHNOLOGIES
1. GWT (Google Web Tool Kit)
2. Eclipse 3.3.1 IDE for development, debugging.
3. JBoss-4.0.4.GA as the web server.
4. Programming Language: Java (jdk 1.5)
5. Spring 2.0
6. Open Flash Chart
7. Ant for our build and remote deploy.
8. SVN version control for versioning and code delivery.
PROJECTS IMPLEMENTATION DETAILS
Technical Requirements
1.
Develop the WebApps as an
2.
Web Server and GWT
layers shall be integrated through RPC
3.
Application should run
in any J2EE complaint Application Server.
4.
Application should
support back end Enterprise Bean calls.
System Architecture
Figure 1 shows the architecture diagram of this
application. It has three major separations:
1. GWT layer
Responsible for UI presentation to the end
users, it internally has components created to display the UI elements. It was
build using GWT-ext and GWT libraries. It also has a common layer that
coordinates all the RPC calls between the Web server and the Java script.
For
meeting the requirements exactly what client is expecting, we have followed a
technique using html wrappers for this project.Html wrappers are nothing but
GWT controls like Html panels, using this we have to wrap pure html in to GWT
directly. So using html we have to provide styling and alignment directly and
after that we have to embed it in to the GWT using controls.
2. Web Server
Responsible for accepting the incoming RPC
requests from GWT client. It was built using Spring GWT controllers. It also
has another common layer that makes the EJB client calls to the remote
enterprise beans. All the Remote Objects are cached in this layer.
The client code is
deployed in to the web server as a war file; the GWT compiler will generate
lots of unnecessary files while creating the script. For skipping all these
unwanted files we have generate a complex build file using
3. EJB server
Responsible for accepting the web requests,
this was hosted by the client. It is basically a set of stateless EJBs.
Figure 1
Functionality Implementation
1.
Content Creation
This
module lets the user to view the contents and create Content. This screen has
the filtering options that the user can user to filter the contents. This uses
a common table implemented across the project. This table displayed here is
build out of a GWT library, including the pagination.
Create content is a three
step process and is having options like using editor, using file upload and
Type in free form etc. If you are going to editor option then the system will
provide an editor for the user. Again user has an option to select a template for
creating content.
Figure 2
We have used a data grid (Shown in figure 2) for the
entire project, which is having all default behavior what is needed for a
listing page including sorting, pagination, move forward, move backward etc. Check
boxes are provided for selecting individual records and the first row is a
link. Users can change the number of records displayed in to the grid using the
drop down shows just right to the text “Display”. User have one more option to
move to a different page, for that type a number in to the text box shown in to
the footer of the table in between the pagination buttons and press enter key.
For each of these changes we are making an RPC call and fetching data from the
backend appropriately.
Apart from the default behavior of the table we have customized
the table to satisfy the requirements shown bellow (figure 3). We have given a
color to the selected row and given a different color to the row where the
mouse cursor is now. We have also implemented a word wrapper popup to maintain
the layout of the grid columns. For that we have provide a css popup which will
display if the mouse cursor point on the text. For example we have implemented
it for subject field (figure 3) if the text length is more than twenty characters.
Figure3
We have done one more customization to the
table as shown bellow (Figure 4).
If
user selects a row the selected rows will display to the left hand side of the
table. If user wants to deselect it he has to click in to red ‘X’ button which
will remove selected list form the table as well as from the left hand side.
This will work if the user moves to the next page also that means if he clicked
on pagination button and then remove the selected list then also the selected
one will remove from the selected. Rest everyone will remain there after the
pagination and sorting.
Figure 4
2.
Content Creation
Content
can be created in three modes. Using a WYSIWG editor to create the content on
the web page itself or you can upload a content already created else were and
last would be that if you are a expert HTML author you can code the HTML
directly.
Figure 5
WYSIWG is a text editor having all capabilities of a
modern editor shown bellow. WYSIWG editor is created with java script, so we
want to integrate the editor to the application. The entire control shown in
figure 6 is a component we have created using GWT. If user clicked on Preview
tab it will render the content as html. The control has also an option to
change the editor. If user click on the “Text Version” radio button the system
will provide a simple editor instead of WYIWG.
Figure 6
For uploading files we have created a GWT control, which
will take two files and upload it in to the server. The file upload widget is
embedded it in to a model popup panel. We have created a model popup panel and is
used system wide where ever we want a popup panel. This panel will cover the
entire screen so user can’t do any other action with out closing the panel (Shown
in figure 7).
Figure 7
3.
Content Creation
Once
the content is created, users can do a preview by sending a test e-mail. User
has four combinations to send a mail as shown in to the bellow diagram.
Figure 8
The above screen has some dynamic nature. If
user select radio buttons “Mail merge preview” and “Send it to seed list” the
system will display a data grid to the page that contain the user seed list. If
user clicked on “send preview” button based on the option he has selected the
system will fetch data and will pass to the back end.
4.
List Creation
All the meager sections
like Content, List and Campaign having a home page which will list each
sections data using the data grid. We have already explained about the data
grid in content section it is not repeating here.
This section will let the users to create a list of
subscribers for a campaign. The list is displayed in a tabular manner in to the
grid. User can select the checkboxes in the first column to duplicate, delete
or add recipients to a list.
5.
List Creation
Select
recipients for a list: For a list user
can select a list of recipients. The system will provide a filtering option for
also to filter recipients. By default all the recipient selected for a list
will display. If user wants to add more recipients he/she can go for the option
“Add Recipient”. If user clicks on save button the list will save its new
state.
For creating a list we have two
options, one of that is “create a list using uploading a file”. The process of
creating a list using uploading a file will takes few minutes if we have
thousands of lists in to the file. So we have provided a progress bar to the
user to show how much percentage is completed. The data for this is coming from
the backend and it is fetching using repeated RPC calls. The progress bars we
have used are shown in figure 10.
Figure 9
The filtering option we have provided here is entirely
different from other screens. The requirement is to provide text boxes in the
header part of our data grid. Data grid is not having any option to satisfy the
requirement. So we fixed it using html div tags. Just added a div tags on to
the table header like a layer.
Figure 10
6.
List Creation
Create
a recipient and associate the recipient to a list if necessary:
User
can create a recipient and associate a collection of lists for that recipient.
For this screen user has an option for add custom fields. If clicked on button
“Add this recipient” the recipient will add in to the database.
We have created a GWT tool tip control
for the entire project and is used as system wide control. The toll tip is
shown in to the figure 11.
Figure 11
7.
Campaign Creation
Create
a campaign and select a content and list:
The core functionality of this project
is to create a campaign. Create a campaign having two stages. First one is
create/select content and the second one is create/select list for a campaign.
For sending the mails to the selected
subscribers user is having three options as “Send it now”,” Send it a specific
date and time” and “hold for now”. Based on the user selection mail will send.
8.
Campaign Creation
Select
a content and list for a campaign: While creating campaign user has to select
an existing content or he has to create a new content. If user select the radio
button existing the system will display his existing contents in to a data grid
as shown in figure.
Figure 12