Working with RadWindows & Converting GridView to RadGrid

Lets first talk about the Grid. Many developers face problem while implementing the GridView in the ASP.Net technology. Either the implementation of the design is too cumbersome or the display of the data as required is difficult. Hence, we replace GridView with RadGrid. Here, we have replaced the GridView of “Inbox” from our event networking application. Initially, the grid view look like the following:

A few controls needed to support the RadGrid are

1. RadAjaxManager

Here, we define the event where the loading symbol need to be popped as a modal window. For example, when you refresh your inbox. We need to define only one LoadingPanel which can be reused every-time we need one.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="ReceivedMessagesGrid" LoadingPanelID="LoadingPanel"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="ReceivedMessagesGrid">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="ReceivedMessagesGrid" LoadingPanelID="LoadingPanel"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>

2. RadAjaxPanel

The rest of the rad controls are placed within the RadAjaxPanel which acts very similar to the Ajax Panel. Here, we have RadWindowManager, RadAjaxLoadingPanel, RadCodeBlock and RadGrid,

2.1 RadWindowsManager

RadWindow is used like a popup on the screen and the complete message is displayed in this window. We can either set the screen to be modal or not. This is called a child window the page which calls it is called a parent window. This windows will be called from the RadCodeBlock once the message row is selected/clicked.

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">
<Windows>
<telerik:RadWindow ID="DisplayRead" runat="server" Title="Read and Reply"
Left="150px" ReloadOnShow="true" ShowContentDuringLoad="true" AutoSize="true"
Modal="true">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>

2.2 RadAjaxLoadingPanel

This is where we define the loading panel which is explained in the RadAjaxManager.

<telerik:RadAjaxLoadingPanel ID="LoadingPanel" Skin="Windows7" runat="server"></telerik:RadAjaxLoadingPanel>

2.3 RadCodeBlock

RadCodeBlock helps define javascript which can be called from within a RadWindow or the parent window. It defines the functions with various parameters. Here we have DisplayReadReply function which opens the RadWindow with a different page defined as “ViewMessage.aspx” and a few parameters being sent through URL. The refreshGrid function is used to refresh the binding of grid so that the data gets updated.

<telerik:RadCodeBlock ID="CodeBlock" runat="server">
<script type="text/javascript">
//not used here...to be used by hyperlink
function DisplayReadReply(id, rowIndex) {
var grid = $find("<%=ReceivedMessagesGrid.ClientID%>");

var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
grid.get_masterTableView().selectItem(rowControl, true);

window.radopen("ViewMessage.aspx?RequestID=" + id, "DisplayRead");
return false;
}

function refreshGrid(arg) {
if (!arg) {
$find("<%=RadAjaxManager1.ClientID %>").ajaxRequest("Rebind");
}
else {
$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("RebindAndNavigate");
}
}

function RowDblClick(sender, eventArgs) {
window.radopen("ViewMessage.aspx?RequestID=" + eventArgs.getDataKeyValue("ContactRequestID"), "DisplayRead");
}
</script>
</telerik:RadCodeBlock>

2.4 RadGrid

This is the actual control which is going to enhance your experience.

<telerik:RadGrid ID="ReceivedMessagesGrid" runat="server" CellSpacing="0" AutoGenerateColumns="false"
GridLines="None" AllowPaging="True" AllowSorting="True" PageSize="15" AllowMultiRowSelection="True" Skin="Windows7"
ShowGroupPanel="True" AllowFilteringByColumn="True" ViewStateMode="Enabled"
OnItemCommand="ReceivedMessagesGrid_ItemCommand" DataMember="Member">

<ClientSettings AllowDragToGroup="True" AllowColumnsReorder="True" ReorderColumnsOnClient="True">
<Selecting AllowRowSelect="True"></Selecting>
<ClientEvents OnRowClick="RowDblClick" />
</ClientSettings>

<PagerStyle Mode="NextPrevAndNumeric" />

<MasterTableView DataKeyNames="ContactRequestID" ClientDataKeyNames="ContactRequestID" DataMember="Member"
AllowMultiColumnSorting="true">
<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>
<ExpandCollapseColumn Visible="True" Created="True" FilterControlAltText="Filter ExpandColumn column" />
<GroupByExpressions>
<telerik:GridGroupByExpression>
<SelectFields>
<telerik:GridGroupByField FieldAlias="MessageStatus" FieldName="MessageStatus1.MessageStatusText"
HeaderValueSeparator=" : " />
</SelectFields>
<GroupByFields>
<telerik:GridGroupByField SortOrder="Descending" FieldName="MessageStatus1.MessageStatusText"
HeaderText="Header for Group" />
</GroupByFields>
</telerik:GridGroupByExpression>
</GroupByExpressions>
<Columns>
<telerik:GridTemplateColumn UniqueName="Sender" DataField="UserProfile.Username" Groupable="false"
HeaderText="From/ Subject" HeaderStyle-Width="300px" SortExpression="ContactRequestID">
<ItemTemplate>
<br />
<asp:Label CssClass="MailSubject" ID="abstractLabel" runat="server" Text='<%# String2Extract(String.Format("{0}{1}{2}",Eval("Message1"),"|",Eval("MessageType")))%>'></asp:Label>;
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn HeaderStyle-Width="100px" UniqueName="Type" HeaderText="Type" DataField="MessageType1.MessageTypeDesc" SortExpression="MessageType"></telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderStyle-Width="100px" UniqueName="Status" HeaderText="Status" DataField="MessageStatus1.MessageStatusText" SortExpression="MessageStatus"></telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderStyle-Width="80px" ItemStyle-Width="60px" UniqueName="SentOn" HeaderText="Sent On" DataField="SentDate" SortExpression="SentDate" />
</Columns>
</MasterTableView>
</telerik:RadGrid>

Under RadGrid we have further defined the following:

2.4.1 ClientSettings

This defines all the client side events, if any. Here, we have defined OnRowClick event which is fired at the client side when we click any of the RadGrid row. This fires the function defined in the RadCodeBlock.

2.4.2 PagerStyle

This gives us an option for the type of paging. Types available are:

Advanced
NextPrev
NextPrevAndNumeric
NextPrevNumericAndAdvanced
NumericPages
Sliders

2.4.3 MasterTableView

This is where we define all the columns, their appearance and their sorting as well as grouping expressions. Few of the column types we have used are GridTemplateColumn and GridBoundColumn.
GridBoundColumn can directly be bound by specifying the column name of the table in the data field property.

Whereas, to implement a complex query, we use GridTemplateColumn. As the name suggests, we create a template and define our own values. Under grid template we have item template where we can have other ASP.Net controls like Label, Hyperlink, etc. We can even call a function from within a property like

Text='<%# String2Extract(String.Format("{0}{1}{2}",Eval("Message1"),"|",Eval("MessageType")))%>'

This String2Extract function is defined in the code behind. . The code above also explains how to call a function from code behind into a control and using some parameters.

3. Page_Load()

Prior to writing the page load event we include the Eventnetworking.Data and Telerik.Web.UI references in our code behind and then create a context NetworkingDataContext ndx = new NetworkingDataContext();

In the page load event we create a context for Sent messages, and then we bind the data with our RadGrid.

var InboxMessageDX = from im in ndx.Messages
where im.ReceiverUserId == Convert.ToInt32(UserIDValue.Value) && im.MessageStatus <= 4 && im.UserProfile1.Active== true
orderby im.SentDate descending
select im;

ReceivedMessagesGrid.DataSource = InboxMessageDX;
ReceivedMessagesGrid.DataBind();

4. String2Extract(string str)

This function is used to display the first 100 characters of the message as the subject in the list of the inbox.

protected string String2Extract(string str)
{
if (str != null)
{
string[] strArray = str.Split('|');
if (Convert.ToInt16(strArray[1]) == 1)
if (str.Length > 100)
return strArray[0].Substring(0, 100);   //.TrimEnd(';');
else
return strArray[0];
else return "";
}
else
return "";
}

5. Ajax Request

This event is fired each time the page is ajax-ified.
If there is an AjaxRequest calling either “Rebind” or “RebindAndNavigate”.

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
if (e.Argument == "Rebind")
{
ReceivedMessagesGrid.MasterTableView.SortExpressions.Clear();
ReceivedMessagesGrid.MasterTableView.GroupByExpressions.Clear();
ReceivedMessagesGrid.Rebind();
}
else if (e.Argument == "RebindAndNavigate")
{
ReceivedMessagesGrid.MasterTableView.SortExpressions.Clear();
ReceivedMessagesGrid.MasterTableView.GroupByExpressions.Clear();
ReceivedMessagesGrid.MasterTableView.CurrentPageIndex = ReceivedMessagesGrid.MasterTableView.PageCount - 1;
ReceivedMessagesGrid.Rebind();
}
}

After all we are done with all the changes, the new page looks like the following:

And once you click any of the message a child window open which displays the message and you have the option to respond to the message depending on the message type.

Read- Revamping Web Application Part-10 : Implementing RadScheduler

Revamping Web Applications: Adding DAL (Data Access Layer)

Posted by ShantanuChandra

Read – Revamping Web Applications part 5: Proposed Enhancements

As a part of following best practice we need to separate the data access from our existing project. Here, we talk about how we create an ORM (Object-Relational Mapping) and create a separate DAL.

Prerequisites

Remove any Projects which might be unavailable.
We must reconfigure our Connection String to the localhost within Web.Config file.
Any connections to the TFS server shall be currently closed, because our development will be focused initially on local server.
Build the Solution and execute it to check for any errors exist prior to the changes.

To begin with the process we add a class library to the existing EventNetworking (EN) web application.

In the Solution Explorer tab, right click on ‘Solution’ and Add -> New Project
Create a new ‘Class Library’ and name it “EventNetworking.Data”Make sure to change the target framework similar to the same version as the existing project. This is a very common mistake that a developer encounters.
Right click on EventNetworking.Data->Properties. In our case we need to change the Target framework to 4.5Next we need to add an App.Config file and set the “ConnectionStrings”.
We might get the following Output when adding the App.Config
“Could not parse the configuration file. The error message is: ‘Could not find file ‘D:\Telerik\ZipFiles\EventNetworkCS\EventAdmin\Web.config’.’. Try editing the file manually and then saving it.”
We should copy the connection string from Web.Config file of the existing project.
Once we have done that, we again need to go to the Properties of new project and check the “Settings” tab to see if the connection string has been validated.
Now we will transfer the existing data layer file to our new project. Transfer the “Networking.dbml” from “EventNetworking” project to EventNetworking.Data. DBML stands for DataBase Markup Language. The DBML file represents the data model for a LINQ to SQL project – it’s used to generate the C# code for the various entities. And build the “EventNetworking” project to get a list of errors. These errors have occurred because we have moved the DBML file to another project.
To resolve the above errors, first we need to add a reference to the EN project.
Right click the “EventNetworking” and Add Reference -> Projects -> Select “EventNetworking.Data”.
Next, we will have to refactor the code as all the data links have been shifted from its current location to a new project.
Select “using EventNetworking.Data;” for all such errors.
Rebuild the project to remove errors depending on the above dependency.
We create a new class within “EventNetworking.Data” named “ENData.cs” and copied all the dependent files from “Utilities.cs” within “EventNetworking”.
We also have to add references in the project for the following assemblies:
```
using System.Data.Services.Client;
using System.Data.Entity;
```
Remove Utilities from the EN project. Don’t forget to build the project and check for silly errors. Shortcut to build the “current project” is Ctrl+Shift+B. We would still see some error. These errors are produced because there is a discrepancy between the TaskList as a class and a file. So wherever we get an error saying such an element does not exist. Append the using statements with:using EventNetworking.Data;
using DataEntities = EventNetworking.Data;What these two lines would do is help differentiate between the TypeCollision caused by TaskList as file from the current project and TaskList as class from EventNetworking.Data. How to do that:
Instead of
```
TaskList[] tl = new TaskList[2];
```
we alias
```
DataEntities.TaskList[] tl = new DataEntities.TaskList[2];
```
and make the above changes at all places where TaskList is being referred as class. Now we are left with around 20 errors and all of them having the same construct.
We will have to make these changes in more than one aspx file.
Finally, we have resolved all the build time errors. The build is a success but there is a runtime error which still lingers.

This occurs because, we have moved the data access layer to a new project and modified the direct references. But we are still left with the most important reference which is mapping Linq to SQL.
To do so, change the property “ContextTypeName” from the “asp:LinqDataSource” control which is defined as:

ContextTypeName="EventNetworking.NetworkingDataContext"

ContextTypeName="EventNetworking.Data.NetworkingDataContext"

Make changes to all the LinqDataSource control in all the aspx files. Build the project and we should be left with neither compile time nor runtime errors.

Conclusion

We have managed to create a separate DAL (Data Access Layer) and reproduce it into a new project named “EventNetworking.Data”. This blog post explains the various errors we faced while we moved the data layer from one project to another and how to resolve these issues.

Read-Revamping Web Applications Part-7 : Adding DAL (Data Access Layer) Part 2

Revamping Web Applications: Proposed Enhancements

Posted by ShantanuChandra

Read – Revamping Web Applications Part-4 Performance testing

Read – Revamping Web Applications Part-3 Software Architecture

Read – Revamping Web Applications Part-2 Features

Read – Revamping Web Applications Part-1 Overview

This post talks about enriching the Event-Networking web application. The enhancements have been categorised into following:

1. Improving UX (User Experience)

2. Improving Functions

3. Improving Performance

4. Multi-Platform

UX Improvements

From my point of view the current user experience is too voluminous. The css needs to be restructured to use latest standards. All the margins have to be changed from fixed to dynamic so that no space is left unused on the user screen, when the web application is shared amongst different devices. The webpage will be enhanced to Responsive Design.

The input controls like buttons, drop-down list and others need to be smartened and made noticeable. To be specific let’s begin page wise:

Directory
1. The photos need to be of the same size for all the delegates. For people who do not set their pic will have different default image for men and women.
Session
1. The data is currently being filtered in the ListView. We will replace this control with the RadListView which is a part of a bundled form of “RadControls for ASP.Net AJAX” toolkit.
2. We will provide paging option in the list view.
Inbox
1. Inbox will carry any updates and notifications for the events delegate has subscribed to.
2. Add a link to Tasks so that contents of a message can be directly filled in the tasks and create an instant task for that.
Tasks
1. Empower user to add priority to tasks with different symbols to give a better visual appeal.
2. Modify the calendar controls for better presentable view.
My Profile
1. Currently this page is too long with the options to “Add Your Blogs”, Personal details, etc. all in extended view. This page needs better layout.
Login and Signup
1. The basic functionality of Forgot My Password needs to be added.
2. While Signup, option of filling in your complete profile should be provided and whether the delegate wants to be displayed as public.

Functionality Improvements

This Event-Networking is presently made for just one event. We have to extend it for non-singular event. One of the major changes will be ajax-ifying the data controls. This would help us improve drastically on performance as now only partial-page rendering will happen.

Directory
1. The aspect of social gaming in the web application is not fool-proof. A person can easily figure out the method of scoring. Thus it should be based on more general parameters and updates to each delegate should be fired only once a day.
Session
1. Provide filtering on date, duration, title and venue columns. Currently, only sorting is possible.
2. Add a pager index so that a user can track his movements. This can be implemented using Telerik AJAX Navigation Components.
Inbox
1. Currently, there is no paging as expected. We should make it more intuitive. There are two ideas to remodel.
First, to have a tab in the left and message being displayed in the right pane. Second, whichever message is selected, that will get expanded and a new control will be added to the existing list generated.
2. We will put following in the navigation menu such as Message, Contact Request, Meeting Request, Sent and Draft as sub-menu added instead of clustering all of them in the inbox.
Tasks
1. The task-list should have filtering and sorting capabilities and Add New Task should be another navigational tab under Tasks. This page has the maximum white space when you create a task.
My Profile
1. We will provide tabs like View, Update, Remove and Change Password.
2. Currently, we do not have “delete” option once you add links to your blogs. There is only an update option. This needs to be changed.

Improving Performance

We have already done the functional testing of our existing web application in our previous post. It defines the benchmark for our application. As we improve the UX and functionalities we keep comparing our modifications. This will help us explain whether we have improved just on user experience or also gained on time constraint. Two important features we are looking forward to implementing minification and bundling which would help the speeding.
– We will minify the style sheets and scripts. We will also bundle the style sheets and scripts.

Object Relational Mapping (ORM).
We are currently using Linq to SQL as our partial ORM. But it has a greater overhead. We will deploy OpenAccess ORM which will provide us a Data Application Layer (DAL).
ORM Caching.
Another improvement would be to cache static data. This can be achieved using L2-Caching which is a part of OpenAccess itself. It increases data fetch drastically.
Caching.
We will be using page caching or output caching as per the need.

Multi-Platform

We will generate companion hybrid app for different platforms. There is potential to generate Windows 8 and Windows Phone 8 application.

Conclusion

This post concentrates on improvements, enhancements and extensions for the Event-Networking web application. We will look at each one of these aspects and explore further.

Read-Revamping Web Applications Part-6 : Adding DAL (Data Access Layer)

Revamping Web Applications: Performance Test

Posted by ShantanuChandra

Read – Revamping Web Applications Part-3 Software Architecture

Read – Revamping Web Applications Part-2 Features

Read – Revamping Web Applications Part-1 Overview

We are in a process of revamping the application. To understand whether we have developed a better application than already existing, we need to set benchmark on the functional aspect and performance of the application. To set the benchmark, we need to perform various kind of tests like functional test, performance test etc.

We will start with setting performance benchmark. For that we need to do PERFORMANCE TESTING of existing application. We are going to use Telerik Automated Testing tool “Test Studio “for this purpose.

Test studio can perform following types of testing

Automated functional test of web application
Performance test
Load test
WPF test

Learn more about Test Studio here

Using Test Studio Performance benchmark can be set in three steps

Create a valid functional test
Configure performance counter
Execute performance test

Here is the screenshot of how the Test Studio defines it.

Step 1: Automated functional test of web application

In order to create valid functional test, we recorded the test on existing application as following,

1. Open Test Studio

2. Configure whether its trial and purchased.

3. Now let’s create a new project for our Event-Networking (EN) application
Go to File -> New
or just click Create New Project in the centre of the screen

4. New Project Pop-Up window would appear
specify the Project Name. Here we have named it “ENTest”
specify the Location to store the Projects. Here we have chosen the default path which is “C:\Users\Shantanu\Documents\Test Studio Projects”

5. Getting started window would appear. To explore more about Test Studio click here.

6. Now we are under Project tab.
Right click the project node created by default and click Add New Test.

7. Next we are on Select Test Type window. We will select Web Test option because we are creating a performance testing module for testing of our web application. Here let’s name it “AttendeeProfile_IE&Chrome” as we will be doing the performance testing on both the browsers.

8. Once the Web Test has been added to Project, hover over it. This will show a menu with Record and Play button. Press Record button. This will open Internet Explorer. Here we enter the URL of our website needed for testing. Then perform all the tasks to be recorded and tested. Here we have taken the attendee-list which is the default page of the web-application.

9. After recording all the steps close the Internet Explorer and all events will be recorded and now we will enter the Test tab.

10. From the Quick Execution toolbar select a browser and Run the testing environment. This process will let you know whether all your event are being executed successfully in that particular browser. Here Internet Explorer browser is used.

11. Once the testing is done it will prompt you to save it. If all the events have passed, a check sign would appear left to all the events. If the process has terminated without completing then a cross sign will appear at the event where the execution has stopped and the rest of the events would have a negative sign depicting that part is untouched. To save the Web Test or not depend on the developer but I recommend saving it.

12. While recording, we sometimes need to simulate some of the events to be real, like clicking button, selecting options from drop-down lists, typing etc. We can do so by selecting SimulateRealTyping for texts and SimulateRealClick for buttons. These are the two simulations we have used in our current test.

Step 2: Configure Performance Counters

Within the Test Studio in the menu bar you will see the Performance tab. Here we need to configure the setup parameters and performance counters.

1. Click Configure button.

2. Give you settings a name. I have named it“My Computer”. Check the Gather Performance Data and click Add Computer. In the Computer section, enter the IP address of your website which you want to test and click connect. Here 127.0.0.1 is used because my web application is on the localhost. 127.0.0.1 which defines the IP of my own PC. You should get a confirmation in red, left to the button.

The most important part is to select the parameters which is under the Performance Counters tab. The counters used in this project are shown below. You even have the functionality to calculate the Time To First Byte (TTFB).

Step 3: Execute Performance Test

1. The next and final step is to start the Performance testing by clicking the Quick Run button.

Internet explorer will open again but this time you do not have to type or click anything as the Web Test is automated. Once the IE closes we will see the following window.

This is an intermediate screen and will disappear in few seconds.

2. Next up is the actual overview of all the events. On execution we can see time taken by each test step or user actions. This view only shows the Total time taken at server and client side and the size of the packets of each event. To get the details of each event you can either click the Details button in the Ribbon categorized under Views or simply click the event to get individual data.

3. To see graph of all the event we need to click on Select All tab. We could also get performance over a range of restricted timeframe.

4. Here the performance testing is executed for all the functions from the application. The right-pane shows the performance counters. These parameters are plotted on X-Y (Red-Orange) axes graph with X being the ‘Seconds from beginning of the test’ and Y being “Percentage”. The plotted graph remains static on the screen whereas the function in the left-pane are scrollable. This will help depict the functions which are causing spikes by synchronizing the timeline with the graph; as X axis is same for both constraints.

5. Next we have a History tab which keeps a track of all the testing done till date and all the reports generated. Here, we can see different Test Time and a graph plotted with X-Y axis being Profile timeline and Test Time. This gives us a general idea of how our existing application is behaving.

We can also compare two Profiles at different times and look for the common loopholes to be solved.

We could set one of the profiles as the benchmark for all the other profiles just by clicking the hour-glass symbol on the left.

Conclusion

In this post we set a benchmark by executing Performance Testing of the web application and in the next blog we will talk about possible enhancements and extensions which can be made in the existing web application.

Read – Revamping Web Applications Part-5 Proposed Enhancements

Revamping Web Applications: Software Architecture

Posted by ShantanuChandra

Read part one- Revamping Web Applications Part-1 Overview

Read part two- Revamping Web Applications Part-2 Features

We have talked about the Event Networking web application. To start revamping we need to understand the architecture of the existing web application.The current implementation does not follow any architectural patterns like Separation of Concerns, Single Responsibility, Layered approach etc. No planning was done before building the application. We can say that top down approach was followed to develop the current web application. Top down means that the features were added as and when the developer thought it was required. The current application is like a forest of tangled codes.

The current architecture of the application is shown below. The architecture may look like 3 tier in the beginning but really is a 2 tier due to the absence of the Business Objects.

The layers are defines as follows:

1. Presentation Layer: A user can directly access this layer. It comprises of the ASP.Net Web Forms files i.e. aspx. The look and feel and user interface of the web application is also built here.

2. Business Access Layer: BAL encapsulates the business rules and data validation. All the code behind files which we have in our project along with the WCF Data Service are included in this layer. It comprises of the aspx.cs files.

3. Data Access Layer: DAL is the layer to access external data and interact with it. It executes as per the need of the BAL. This layer is the interface between the user and the real Data. The ORMs here include Entity Framework and Linq to SQL.

4. Data: The last layer represents the physical data with which the application interacts. We use SQL Database here. Both Linq and Entity Framework stores and retrieves the data from SQL.

A distinguishing feature of the application is the presence of the WCF Data Service. The Data Service serves to expose the application data to external clients e.g. mobile devices. The Data Service is a read only service and operates independently of the web application. However, it still uses the same database for its data.

The web application doesn’t have the critical functionality of logging, local storage, monitoring and caching.

Conclusion

In this post we have understood the existing architecture. Next, we will perform a web test and discuss various counters and results of the test.

Read- Revamping Web Applications Part-4 : Performance Test

Revamping Web Applications Part-2

Posted by ShantanuChandra

Read part one here – Revamping Web Applications Part-1

The web application we have chosen is about social networking at events.

This post briefs about the existing features of the application.

1. Directory– Displays all members attending a particular event
2. Sessions- Displays various event-schedules and their track
3. Inbox- Displays messages and request you receive
4. Tasks- Displays all the tasks
5. My Profile- Displays personal information

Directory

All the delegates registered are visible in a list form. A specific genre of audience can be filtered on the basis of different parameters such as City, Country, Tag, Designation, Company, Role and experience.

You can view the profile of a delegate and connect to them. In their public profile you could see job description and links to their various social networks. Once you are connected to another delegate you will also have the privilege to see their personal details.

The web application has a feature of social gaming and the top five scorers are displayed on the home screen.

Sessions

All the events/talks/workshops along with their date, time, venue and track are shown. Further information about speakers and other attendees can be viewed based on individual talks.

You can explore an event and add it to your personal list of event. There is a sub-tab “Cart” under sessions’ tab which displays the events you have registered for. The Cart would help notify the attendees about last minute changes or pre-requirements for the event (if any).

Inbox

Other than receiving text-messages you interact with other delegates by sending meeting requests. Other types also include contact request.

The person can view sent items along with the timestamp if needed.

Tasks

The tasks are meant to create a list of jobs or reminders for self. A task can be categorised with options like task created, completed, cancelled or deferred. Task url specifies the micro formats.

My Profile

A person can view and update his profile. The profile includes name, DOB, address, designation, years of experience, personal contact details. You can change your account password. Set your url feeds for your blogs and social networking websites to connect with delegates.

You can also define tags which would help delegates find you easily based on various technologies.

Conclusion

In this post we have discussed on the key features of the application. Next we are going to elaborate on the testing results and its architecture.

Read – Revamping Web Applications Part-3 Software Architecture

Revamping Web Applications Part-1

Posted by ShantanuChandra

Web applications have been around for quite some time. Generally, developers have been handed applications to enhance and extend with new functionality. This series of blog posts aims to showcase revamping/enhancing an existing web application.

The web application that we are going to select is a simple application that has been used for creating ad hoc social networks at events. The application enhances the utility of an in person event by providing opportunities of structured networking amongst attendees. The application presents a searchable directory of attendees. Sessions being conducted at the event are listed for delegates to build their personalised schedules. Once an attendee logs-in the application with the verified credentials he can communicate with other attendees and setup meetings with them. The organisers can benefit by making last minute changes to the sessions/ speakers at the event. Aspects of social gaming are included in the application to make it more interesting for the attendees.

Enhancements to the application can be categorized as follows:

Improving User Experience
Improving Functionality
Improving Performance
Multi-platform Support

The enhancements to the website will be done over 4 months in the following phases:

Phase 1:
Preparing a local working copy of the web application with connectivity to the database
Document the web application with the current features
Propose enhancements and secure sign off on the same

Phase 2:
Select Tools to use for enhancements
Document the performance of web application by:

Application Profiling
Performance Testing

It will be important to select the correct metrics for the web application

Phase 3:
Implementing the modifications proposed in the previous phases

Make sure that modifications don’t introduce new bugs in the applications

Phase 4:
Run test suites and remove bugs if any
Document the performance of the enhanced web application by:

Application Profiling
Performance Testing

Highlight the changes in the selected metrics.

By using this application, the attendees benefit from interacting with targeted audience and building their professional circle more effectively.

Conclusion

In this post we have seen objective of the application and in next part we will discuss the possible enhancements and new features which can be added.

Read – Revamping Web Applications Part-2 Features

Helping Ninja Technologists

Developer Experiences powered by GTM Catalyst

Enhancements

Working with RadWindows & Converting GridView to RadGrid

1. RadAjaxManager

2. RadAjaxPanel

2.1 RadWindowsManager

2.2 RadAjaxLoadingPanel

2.3 RadCodeBlock

2.4 RadGrid

2.4.1 ClientSettings

2.4.2 PagerStyle

2.4.3 MasterTableView

3. Page_Load()

4. String2Extract(string str)

5. Ajax Request

Revamping Web Applications: Adding DAL (Data Access Layer)

Revamping Web Applications: Proposed Enhancements

Revamping Web Applications: Performance Test

Revamping Web Applications: Software Architecture

Revamping Web Applications Part-2

Revamping Web Applications Part-1