Debugging Your First Web Application in Microsofft Visual Studio

8/9/2019 Debugging Your First Web Application in Microsofft Visual Studio

1/20

Research In Motion

09

Debugging Your First WebApplication In Microsoft

Visual StudioFor BlackBerry SmartPhones

Prosanta Bhattacherjee


2/20

2 | P a g e

Contents

Debugging Your First Web Application ................................................................................................... 3

Introduction ............................................................................................................................................ 4

Development........................................................................................................................................... 4

Creating a new web site ...................................................................................................................... 4

Making Changes to the Page ............................................................................................................ 14

Debugging your application .............................................................................................................. 17

Debugging Windows ......................................................................................................................... 19

Links ...................................................................................................................................................... 19


3/20

3 | P a g e

Debugging Your First Web Application

This tutorial will show you how to write a basic web application, and debug the client side script

using the BlackBerry Plug-in for Microsoft Visual Studio. The application will display the GPS

coordinates of a spot in the city of Waterloo.

The following is required to be able to use this tutorial:

MS Visual Studio Standard/Professional 2008 with Service Pack 1

Windows XP or Windows Vista (32-bit)

1GHz Processor or above

1Gb RAM or above

BlackBerry Plug-in for Microsoft Visual Studio

For help with setting up your environment please look at the tutorial How to set up Microsoft Visual

Studio for Mobile Devleopment found on the BlackBerry Developers Web Site

(http://www.blackberry.com/developers).

If you are ready to proceed, launch Microsoft Visual Studio.

Figure 1
http://www.blackberry.com/developershttp://www.blackberry.com/developershttp://www.blackberry.com/developershttp://www.blackberry.com/developers


4/20

4 | P a g e

Introduction

In this tutorial, we will go over the following:

How to create a new web site

How to set the BlackBerry Simulator to be your default browser

Debugging your web site using the BlackBerry Simulator

Please note that you can find more information about the BlackBerry Plug-in for Microsoft Visual

Studio in the developer video section and the documentation found online at the BlackBerry

Developer web site (http://www.blackberry.com/developers). Further documentation on MicrosoftVisual Studio can be found through Microsofts web site.

Development

Creating a new web site

1) From the file menu, select New then Web Site

Figure 2
http://www.blackberry.com/developershttp://www.blackberry.com/developershttp://www.blackberry.com/developershttp://www.blackberry.com/developers


5/20

5 | P a g e

2) Choose the type of Web Site you wish to create (for the purposes of this tutorial, we willbegin with an empty web site)

3) Select the location of the web site (this will be the location on your computer that the actualfiles are stored on)

4) Click OK

Figure 3


6/20

6 | P a g e

5) In the solution explorer, youll notice that a new project has been created. Right click onthat project and select Add New Item

Figure 4


7/20

7 | P a g e

6) Select HTML Page and then name the page, for now lets call it index.htm and then clickAdd

Figure 5


8/20

8 | P a g e

7) On the newly created page, type Hello, the current date is: inside the body tags as shownbelow

Figure 6


9/20

9 | P a g e

8) Set the default browser to be the BlackBerry Browser, by right clicking on the project andselecting Browse With

Figure 7


10/20

10 | P a g e

Figure 8


11/20

11 | P a g e

9) Right click on the index.htm file in the project and select Set As Start Page

Figure 9


12/20

12 | P a g e

10)Select BlackBerry Browser and then click Set as Default and then Browsea. Note: The first time you run the debugger, the BlackBerry simulator and MDS

Simulator take some time to load up properly, on subsequent runs, you will notneed to close either simulator and the load time will be significantly quicker

Figure 10

The page you created should now be displayed in the BlackBerry Simulator through the Browser. To

make any changes to the page, you dont need to close the simulator. You can make your changes in

the front end code and then save them. This will deploy the changes onto the Microsoft Visual

Studio server, and you will only need to refresh the BlackBerry Simulator browser page.


13/20

13 | P a g e

You will now need to enable JavaScript on the BlackBerry Simulators browser.

1) Push the BlackBerry menu key on the simulator and select options

Figure 11


14/20

14 | P a g e

2) In the Browser Configuration options, ensure that Support JavaScript and AllowJavaScript popups are selected

Figure 12

3) Exit out of the options and accept the changes being saved

Making Changes to the Page

1) In the solution explorer, youll now notice that there are two projects. One being a proxyproject and the other being your own local copy. You can leave the simulator running and

make changes to your local. The remote project will automatically be updated when you

save and the internal server that Visual Studio is running will be updated with the latestcode.


15/20

15 | P a g e

2) Open the index.htm from your local copy of the project and write the front end code for theweb page. In order for the sample code below to work, you will need to enable JavaScript

Location support which can be found in the General Properites section in the options

menu on the BlackBerry Simulator browser. Below is the sample code that I will use for my

page:

Visual Studio Plug-in Tutorial

function updateDate() {

var date = new Date();

document.getElementById("divDate").innerHTML = date.toDateString();

}

function locationUpdated() {//display the new location

var latitude = "unknown";

var longitude = "unknown";

var pf = navigator.platform;

if(pf == "BlackBerry") {

var support = blackberry.location.GPSSupported;

if(support) {//refresh the location

blackberry.location.refreshLocation();

latitude = blackberry.location.latitude;

longitude = blackberry.location.longitude;

}

}

document.getElementById("latitude").innerHTML = "Latitude: " + latitude;

document.getElementById("longitude").innerHTML = "Longitude: " + longitude;

}

Hello, the current date is:

Note: You can set the GPS location of your simulator through the simulate menu on the simulator.


16/20

16 | P a g e

3) When this code is run and the button to show the current GPS location is clicked on thesimulator it will produce the results below:

Figure 13


17/20

17 | P a g e

Debugging your application

Debugging your BlackBerry web application is very similar to debugging any other project using

Microsoft Visual Studio. You can debug both local and remote websites using the plug-in. To debug

a remote web site you will need to point your simulator browser to that remote site and follow the

same steps outlined below.

1) Open the JavaScript or html file you wish to debug from the Script Documents project

Figure 14


18/20

18 | P a g e

2) Youll notice, when you open the window that index.htm [dynamic] has been opened inyour code view. This view of the code represents the current live view that has been pulled

from the web server:

Figure 15

3) You can now place a breakpoint anywhere inside the JavaScript just as you would with anybackend code

Figure 16

4) Once the breakpoints are placed, youll need to invoke the JavaScript code to hit thebreakpoints and step through your code. Assuming you placed the breakpoint in the same

location as the image above, youll just need to refresh your page on the simulator to hit the

breakpoint


19/20


20/20

20 | P a g e

BlackBerry Enterprise Server:

http://na.blackberry.com/eng/services/server/

BlackBerry Web Loader:

http://www.blackberry.com/developers/downloads/webloader/

Developer Video Library:

http://na.blackberry.com/eng/developers/resources/videolibrary.jsp

Documentation:

http://na.blackberry.com/eng/support/docs/developers/?userType=21

Knowledge Base Articles:

http://www.blackberry.com/knowledgecenterpublic/livelink.exe/fetch/2000/348583/custo

mview.html?func=ll&objId=348583

Forums:

http://supportforums.blackberry.com/rim/?category.id=BlackBerryDevelopment
http://na.blackberry.com/eng/services/server/http://na.blackberry.com/eng/services/server/http://www.blackberry.com/developers/downloads/webloader/http://www.blackberry.com/developers/downloads/webloader/http://na.blackberry.com/eng/developers/resources/videolibrary.jsphttp://na.blackberry.com/eng/developers/resources/videolibrary.jsphttp://na.blackberry.com/eng/support/docs/developers/?userType=21http://na.blackberry.com/eng/support/docs/developers/?userType=21http://www.blackberry.com/knowledgecenterpublic/livelink.exe/fetch/2000/348583/customview.html?func=ll&objId=348583http://www.blackberry.com/knowledgecenterpublic/livelink.exe/fetch/2000/348583/customview.html?func=ll&objId=348583http://www.blackberry.com/knowledgecenterpublic/livelink.exe/fetch/2000/348583/customview.html?func=ll&objId=348583http://supportforums.blackberry.com/rim/?category.id=BlackBerryDevelopmenthttp://supportforums.blackberry.com/rim/?category.id=BlackBerryDevelopmenthttp://supportforums.blackberry.com/rim/?category.id=BlackBerryDevelopmenthttp://www.blackberry.com/knowledgecenterpublic/livelink.exe/fetch/2000/348583/customview.html?func=ll&objId=348583http://www.blackberry.com/knowledgecenterpublic/livelink.exe/fetch/2000/348583/customview.html?func=ll&objId=348583http://na.blackberry.com/eng/support/docs/developers/?userType=21http://na.blackberry.com/eng/developers/resources/videolibrary.jsphttp://www.blackberry.com/developers/downloads/webloader/http://na.blackberry.com/eng/services/server/