of 20
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
8/9/2019 Debugging Your First Web Application in Microsofft Visual Studio
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
8/9/2019 Debugging Your First Web Application in Microsofft Visual Studio
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/developers8/9/2019 Debugging Your First Web Application in Microsofft Visual Studio
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/developers8/9/2019 Debugging Your First Web Application in Microsofft Visual Studio
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
8/9/2019 Debugging Your First Web Application in Microsofft Visual Studio
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
8/9/2019 Debugging Your First Web Application in Microsofft Visual Studio
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/9/2019 Debugging Your First Web Application in Microsofft Visual Studio
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
8/9/2019 Debugging Your First Web Application in Microsofft Visual Studio
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
8/9/2019 Debugging Your First Web Application in Microsofft Visual Studio
10/20
10 | P a g e
Figure 8
8/9/2019 Debugging Your First Web Application in Microsofft Visual Studio
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
8/9/2019 Debugging Your First Web Application in Microsofft Visual Studio
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.
8/9/2019 Debugging Your First Web Application in Microsofft Visual Studio
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
8/9/2019 Debugging Your First Web Application in Microsofft Visual Studio
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.
8/9/2019 Debugging Your First Web Application in Microsofft Visual Studio
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.
8/9/2019 Debugging Your First Web Application in Microsofft Visual Studio
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
8/9/2019 Debugging Your First Web Application in Microsofft Visual Studio
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
8/9/2019 Debugging Your First Web Application in Microsofft Visual Studio
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
8/9/2019 Debugging Your First Web Application in Microsofft Visual Studio
19/20
8/9/2019 Debugging Your First Web Application in Microsofft Visual Studio
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/