Month: January 2013

Revamping Web Applications Part-2

Posted by

7

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.

clip_image002

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

clip_image004

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

clip_image006

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

clip_image008

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

clip_image010

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.

clip_image012

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

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

Advertisement

How to show current location on Google Map in Icenium

Posted by

1

In this post we will take a look on working with Google map in Icenium. We will display Google map pinned with current location in a mobile view.

image

On creating Cross-Platform mobile application (Kendo UI Mobile) in Icenium, you will find by default references to work with Google map added in the project.

clip_image002

Next we need to create a view. In this view map will be rendered,


<div data-role="view" id="map" data-title="Map" data-show="showMap" data-stretch="true">
<div>
<div id="map_canvas" style="width: 100%; height: 100%; position: absolute;">
</div>

</div>
</div>

There are certain points worth discussing about the view.

  • showMap function will be called whenever user is navigating to view.
  • Style of map-canvas div is set to 100% width and height such that map will be displayed in whole view.

Now we need to write showMap function. In this function we will call PhoneGap navigatior.geolocation.getCurrentPosition function to get the longitude and latitude of current location of the user.


function showMap() {

navigator.geolocation.getCurrentPosition(
onSuccessShowMap,
onErrorShowMap
);

}

navigatior.geolocation.getCurrentPosition will call onSuccessShowMap function on success and onErrorShowMap on any exception in finding users current location. In onSuccessShowMap function we will render Google map in the view created previously.

Rendering of Google map can be done in three steps,

Very first we need to find longitude and latitude of the current location and that can be done as following,

image

Once longitude and latitude has been determined next we want to create the map option. You can read more about Google map options in Google map API documentation. So we are creating map option as following,

image

After creating map option we need to create the map. It takes two parameters. First HTML element on which you want to render the map and then map options. We have created a div with id map-canvas in map mobile view to render the map and in previous step, we created the map option.

image

At the last step we need to set the marker on the map with the current location. That can be done as following,

image

To render map you need to consolidate all the steps discussed above in onSuccessShowMap(position) function. After consolidating function should look like below,


function onSuccessShowMap(position) {

var latlng = new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude);

var mapOptions = {

sensor: true,
center: latlng,
panControl: false,
zoomControl: true,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: true,

};

var map = new google.maps.Map(
document.getElementById('map_canvas'),
mapOptions
);

var marker = new google.maps.Marker({
position: latlng,
map: map
});
console.log(marker);
console.log("map rendering");
}
</script>

In last we need to write onErrorShowMap function. In this function handle all the errors may encounter while reading current location of the user. I am leaving function like following


function onErrorShowMap(error) {

alert("error");
}

Now when you run application you should get map with user current location in the map view.

image

I hope you find this post useful. Thank for reading.

Few Queries on Test Studio : Answered

Posted by

0

Recently I was giving demo on Test Studio. While demo there were few questions popped up . In this blog I am consolidating those questions such that it would be useful for all Test Studio users.

image

Does it work with Telerik SL CONTROLS

Yes Test Studio support SL controls. For demo, please see Telerik TV and look at the videos listed under the Silverlight tag:

http://tv.telerik.com/products/automated-testing-tools?FilterByTags=Silverlight

How would it integrate into a CI ENVIRONMENT

You can find more details about CI integration at

http://www.telerik.com/automated-testing-tools/support/documentation/user-guide/command-line-test-execution.aspx

How Test Studio works with MS LAB

We don’t have anything specific with how we integrate with the TFS/VS lab environment.

How does it run tests? Does it require agents to installed

If you want the tests run via the scheduler or remotely then you do need an agent installed. You can find more details here

http://www.telerik.com/automated-testing-tools/support/documentation/user-guide/scheduling-test-runs.aspx

Does it support SL 4 +

Yes Test Studio supports Silverlight 4+

Does it support mobile platforms like Windows Phone, Android and iPhone

Test Studio supports IOS but as a separate product. Currently Test Studio do not support Windows Phone and Android

Can Test Studio Framework API can be used from MS TEST

Yes it can be used with MS Test.  You can find more details at

http://www.telerik.com/automated-testing-tools/support/documentation/user-guide/command-line-test-execution/mstest.aspx

http://www.telerik.com/automated-testing-tools/support/documentation/user-guide/write-tests-in-code/intermediate-topics/settings-and-configuration/settings-class.aspx

I hope you find this post useful. Thanks for reading.

Revamping Web Applications Part-1

Posted by

8

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.

image

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:

  1. Improving User Experience
  2. Improving Functionality
  3. Improving Performance
  4. 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

  1. Upgrading to RadListView
  2. Converting GridView to RadGrid
  3. Working With RadWindow
  4. Implement RadScheduler
  5. Implement RadAutoCompleteBox

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

Three steps of working with JavaScript Array and Kendo UI Mobile ListView

Posted by

1

In this post we will learn working with JavaScript array and KendoUI Mobile ListView in three simple steps.

Step 1: Create Data Source

Very first you need to create data source. Application can read data from various sources. Some of the source can be as following

  • Reading data from remote data source
  • Reading data from local memory
  • Reading static data from local array.

Let us create a data source by reading data from local array.


var speakers = [
{

SpeakerName: "Chris Sells",
SpeakerTitle: "Author, Ex- Microsoft and ardent community contributor",
SpeakerPhoto: "speakerimages/cs.jpg"

},
{

SpeakerName: "Steve Smith",
SpeakerTitle: "Speaker, Author, Microsoft Regional Director and MVP",
SpeakerPhoto: "speakerimages/ss.JPG"

},
{

SpeakerName: "Dr.Michelle Smith",
SpeakerTitle: "Enterprise Consultant",
SpeakerPhoto: "speakerimages/ms.jpg"

},
{

SpeakerName: "Gaurav Mantri",
SpeakerTitle: "Founder Cerebrata & Windows Azure MVP",
SpeakerPhoto: "speakerimages/gm.JPG"

}

];

Step 2: Create Template

Template is the way to tell the platform the way you want to display data. You already have data and next you need to decide the way you want to display or render data. In Kendo UI Mobile you can create template as following,


<script type= "text/x-kendo-template" id="speakersTemplate">
<div>
<img src=#=SpeakerPhoto# alt="#= SpeakerName #" />
#= SpeakerName #</br>
<span>
#=SpeakerTitle#
</span>
</div>
</script>

To create Kendo Template, You need to create a script with type text/x-kendo-template. Values from data source will be rendered by putting property name as following

image

In above case source of an image can be set as following. SpeakerPhoto and SpeakerName are properties of data array.

image

To make data rendering more immersive you need to set the style of data in CSS. You will notice in above template that we are setting class attribute of img and span tag. These classes are defines in CSS as following,


.pullImage {
width: 64px;
height: 64px;
border-radius: 3px;
float: left;
margin-right: 10px;
}

.listTime
{
font-size: .8em;
font-weight: 100;
}

Step 3: Create ListView

By step 2 you have created data source and template. Next you need to create ListView. Creating ListView is very simple and can be created as following,


<div data-role="view" id="dataview" data-title="Data">

<div>
<ul id="speakerslist"
data-template="speakersTemplate"
data-source="speakers"
data-endlessScroll="true"
data-role="listview"
data-style="inset">
</ul>
</div>

</div>

To create ListView you need to set data-role attribute of <ul> element as listview. To define how data should be displayed in the ListView set data-template attribute and data source can defined by setting data-source attribute.

Note: if we have put speaker’s photos locally in spakerimages folder. Since we are setting speaker photo attribute in Speaker JavaScript array.

Running the Application

On running of the application you should get ListView with speaker’s details as following

image

In this way you can work with data from JavaScript array and Kendo UI mobile ListView. I hope you find this post useful. Thanks for reading.