In a previous thread we showed an example Alpha Five Version 8 desktop form with an embedded web browser for providing live Google Maps and UPS tracking based on data in the form. This example will be included in the Alpha Five Version 8 shipping product
The Sunrise Realty Sample Form Explained
This is a sample form for a fictitious real-estate agency, Sunrise Realty. The form is built against a single table called Clients. The bottom two thirds of the form contains a tabbed object. And on three of the tabs are web browser ActiveX controls.
The first tab, Roadmap, displays a Google Map using data from the current client record. This was done using an ActiveX control and a custom function with a few lines of Xbasic code.
On this page you will see how this was done.
Placing an ActiveX Component on a Form
Starting in the Form Editor, click on the ActiveX tool in the toolbox.
Then click and drag over the area on which you want to place the browser.
In this case we dragged it over the Roadmap tab so that it filled the entire tabbed area. When we released the mouse button, Alpha Five prompted us for the ActiveX object to insert. We choose the Microsoft Web Browser component, which is included with Windows.
Once the ActiveX component is in place, we assign it a name, so that we can reference it in our Xbasic script later on. To do this, we right clicked on the object and selected Properties. In the Setup tab, we replaced what was in the Object name box with the text roadmap. By giving it a descriptive name, it will make it easy to tell the difference between the ActiveX objects later on when we have placed several of them on the form.
If you were to run the form right now, you would see the web browser component you placed, but it would be blank. That's because we haven't told the component which URL (http:// address) it should display. To do this, we will create a short Xbasic function. We'll call the function and pass it the URL we want displayed and the function will do the rest.
Creating a Function to Set the URL of the ActiveX Component
So, let's write an Xbasic function to set the URL. In the Control Panel, click the Code tab, then click New and choose Function.
Call the new function Roadmap and define one argument called Addr as type character. In the Code Editor, enter the following code between the FUNCTION and END FUNCTION lines.
The finished script should look like this:
In English, the script reads something like this:
Confused? Don't worry. If you are new to pointer variables, objects, methods and properties, they are a bit tricky at first. But once you get the hang of them, they are quite powerful. Here are some things to keep in mind. All ActiveX controls have different properties and methods. In this example, Navigate() was a property that was defined by the Microsoft Browser URL we placed earlier (the one we named "roadmap").
To see other properties and methods that are available, you can use the Alpha Five Code Editor. Here we have typed the name of the object into the Interactive Window, and Alpha Five shows the properties and methods for us in a list.
OK. The function is complete and ready to be called from the form. So we return to the Form Editor.
Calling the ROADMAP() Function in the Sunrise Form
We are almost done adding the Google Map feature to our form, but there are two design questions left to be answered. We know that if we call the function Roadmap() and pass it a valid URL, it will display the resulting web page on our form. So the two questions are, how do we call this function and what URL should we pass it?
The first question is simple: since we want the map to reload each time a new record is retrieved, we can use the form's OnFetch Event. In the Form Editor, choose Events>OnFetch from the Form menu
When prompted, choose Xbasic as the method for creating the script.
This script is going to be very simple. In fact it can just be one line.
roadmap(The URL we want to display)
The trick is knowing what URL we want to display...
Determining the URL for the Map
Before we can call our new function ROADMAP(), we need to know what the URL should be. So let's figure that out first.
Google maps will display a map if you call a URL that has the address of the location embedded in it. Here's an example:
Alpha Software's Headquarters are at:
70 Blanchard Rd., Burlington, MA 01803 USA
The URL to use to display the address in Google is:
http://maps.google.com/maps?f=q&hl=e...ngton+MA+01803
Do you see how the address is contained right in the URL? You might also notice that there are spaces in the URL. Technically spaces are not allowed in URLs, however the ActiveX component takes care of this for us by automatically by inserting "%20" for each space. You could also use the Alpha Five function URLENCODE(). But for this example, it is not necessary.
OK, now we need to build the URL. Here's how:
Note: even though this wraps in the window here, the expression should all be on one line when it is entered.
We set a variable called addr equal to the expression above. If you look carefully you'll see that value to which the variable is being set is a combination of static text, like the "http://maps.google.com" part and fields from our table like the address field "clients->addr1". When added together, this creates a URL that will display a map of the location of the address for the current record.
Now all that is left to do is call ROADMAP() and pass it the value in addr. So the completed script looks like this:
How to Determine the URL for the Satellite Image and Aerial View
So, now you see how the roadmap was done. Displaying the aerial view and the UPS tracking screens follow the same logic.
In the case of the aerial view image, you just add the following to the end of the URL:
"&spn=0.01421,0.027122&t=h&om=1&iwloc=addr"
That tells Google to show an aerial view instead of a plain map.
In the case of UPS Tracking tab, the format of the URL is:
Where TrackingID is the field that contains the UPS tracking number. Also, this needs to be all on one line. So you can copy this code to Notepad, remove the carriage returns and paste it into your own application.
(c) 2007 Alpha Software, Inc.
The Sunrise Realty Sample Form Explained
This is a sample form for a fictitious real-estate agency, Sunrise Realty. The form is built against a single table called Clients. The bottom two thirds of the form contains a tabbed object. And on three of the tabs are web browser ActiveX controls.
The first tab, Roadmap, displays a Google Map using data from the current client record. This was done using an ActiveX control and a custom function with a few lines of Xbasic code.
On this page you will see how this was done.
Placing an ActiveX Component on a Form
Starting in the Form Editor, click on the ActiveX tool in the toolbox.
Then click and drag over the area on which you want to place the browser.
In this case we dragged it over the Roadmap tab so that it filled the entire tabbed area. When we released the mouse button, Alpha Five prompted us for the ActiveX object to insert. We choose the Microsoft Web Browser component, which is included with Windows.
Once the ActiveX component is in place, we assign it a name, so that we can reference it in our Xbasic script later on. To do this, we right clicked on the object and selected Properties. In the Setup tab, we replaced what was in the Object name box with the text roadmap. By giving it a descriptive name, it will make it easy to tell the difference between the ActiveX objects later on when we have placed several of them on the form.
If you were to run the form right now, you would see the web browser component you placed, but it would be blank. That's because we haven't told the component which URL (http:// address) it should display. To do this, we will create a short Xbasic function. We'll call the function and pass it the URL we want displayed and the function will do the rest.
Creating a Function to Set the URL of the ActiveX Component
So, let's write an Xbasic function to set the URL. In the Control Panel, click the Code tab, then click New and choose Function.
Call the new function Roadmap and define one argument called Addr as type character. In the Code Editor, enter the following code between the FUNCTION and END FUNCTION lines.
Code:
dim wb as p wb = sunrise_form.roadmap.activex wb.navigate(addr)
In English, the script reads something like this:
- Create a variable called WB as type Pointer (see help for more information on pointer variables).
- Assign this pointer to the ActiveX attributes of the object called roadmap on the Sunrise_Form.
- Set the variable's Navigate property to the address that was passed to this function when the function was called.
Confused? Don't worry. If you are new to pointer variables, objects, methods and properties, they are a bit tricky at first. But once you get the hang of them, they are quite powerful. Here are some things to keep in mind. All ActiveX controls have different properties and methods. In this example, Navigate() was a property that was defined by the Microsoft Browser URL we placed earlier (the one we named "roadmap").
To see other properties and methods that are available, you can use the Alpha Five Code Editor. Here we have typed the name of the object into the Interactive Window, and Alpha Five shows the properties and methods for us in a list.
OK. The function is complete and ready to be called from the form. So we return to the Form Editor.
Calling the ROADMAP() Function in the Sunrise Form
We are almost done adding the Google Map feature to our form, but there are two design questions left to be answered. We know that if we call the function Roadmap() and pass it a valid URL, it will display the resulting web page on our form. So the two questions are, how do we call this function and what URL should we pass it?
The first question is simple: since we want the map to reload each time a new record is retrieved, we can use the form's OnFetch Event. In the Form Editor, choose Events>OnFetch from the Form menu
When prompted, choose Xbasic as the method for creating the script.
This script is going to be very simple. In fact it can just be one line.
roadmap(The URL we want to display)
The trick is knowing what URL we want to display...
Determining the URL for the Map
Before we can call our new function ROADMAP(), we need to know what the URL should be. So let's figure that out first.
Google maps will display a map if you call a URL that has the address of the location embedded in it. Here's an example:
Alpha Software's Headquarters are at:
70 Blanchard Rd., Burlington, MA 01803 USA
The URL to use to display the address in Google is:
http://maps.google.com/maps?f=q&hl=e...ngton+MA+01803
Do you see how the address is contained right in the URL? You might also notice that there are spaces in the URL. Technically spaces are not allowed in URLs, however the ActiveX component takes care of this for us by automatically by inserting "%20" for each space. You could also use the Alpha Five function URLENCODE(). But for this example, it is not necessary.
OK, now we need to build the URL. Here's how:
Code:
addr="http://maps.google.com/maps?f=q&hl=en&q="+trim(clients->addr1)+"+"+trim(clients->city)+"+"+trim(clients->state)+"+"+trim(clients->zip)
We set a variable called addr equal to the expression above. If you look carefully you'll see that value to which the variable is being set is a combination of static text, like the "http://maps.google.com" part and fields from our table like the address field "clients->addr1". When added together, this creates a URL that will display a map of the location of the address for the current record.
Now all that is left to do is call ROADMAP() and pass it the value in addr. So the completed script looks like this:
Code:
dim addr as c addr="http://maps.google.com/maps?f=q&hl=en&q="+trim(clients->addr1)+"+"+trim(clients->city)+"+"+trim(clients->state)+"+"+trim(clients->zip)" roadmap(addr)
How to Determine the URL for the Satellite Image and Aerial View
So, now you see how the roadmap was done. Displaying the aerial view and the UPS tracking screens follow the same logic.
In the case of the aerial view image, you just add the following to the end of the URL:
"&spn=0.01421,0.027122&t=h&om=1&iwloc=addr"
That tells Google to show an aerial view instead of a plain map.
In the case of UPS Tracking tab, the format of the URL is:
Code:
http://wwwapps.ups.com/WebTracking/processInputRequest?sort_by=status&tracknums_displayed=1&TypeOfInquiryNumber=T&loc=en_US&InquiryNumber1="+trim(clients->trackingid)+"&track.x=0&track.y=0
(c) 2007 Alpha Software, Inc.