Monday Jun 21, 2010

Integrating Google Maps with ADF

This is a simple example how to integrate Google Maps to your ADF application.

1.  In order to run this application you must subscribe to the Google Map API. This can be done from the following web site.

http://code.google.com/apis/maps/signup.html

This will provide you with a key to access the API at run time.

2. Before we can start our ADF application we need to create a data source. In this example I create a HOUSES table, this table provide the longitude and latitude coordinates required for Google Maps.

Use the following file to create the HOUSES table:

Use the following file for the data:

Use the following for the SQL Loader control file:

3. Execute the create_houses.sql is a SQLPlus session to a schema of your choice. I have used the HR schema.

4. Copy the HOUSES.csv and load_houses.ctl into the same directory somewhere on you OS, e.g. c:\temp.

5. From that location execute the following command, all on one line.

sqlldr userid=hr/hr control=load_houses.ctl log=load_houses.log bad=load_houses.bad data=HOUSES.csv discard=load_houses.discard

6. Check that the HOUSES table has been loaded

SQL> select count(*) from houses;

  COUNT(*)
----------
        34

7. You are now ready to create your ADF Application. Create a new Fusion Web Application (ADF) called GoogleMap and click Next

image

image

8. Accept the defaults and click Finish

image

9. Right-click the model project and select New. From the gallery select Business Tier -> ADF Business Components -> Business Components from Tables

image

10. Create a new database connection based on the schema where you loaded the HOUSES table.

image

11. Query the schema and select the HOUSES table and click Next.

image

 

 

 

 

 

 

 

12. Move the HOUSES table to be selected and click Finish

image

13. Now the data source has been created we can implement the user interface, Right-click the ViewController project and select New

image

14. Select JSF Page, found in the Gallery under Web Tier -> JSF

image

15. Call the JSF page HouseLocation.jspx, ensure that the Blank Page radio button has been selected. Click OK

image

16. From the Component Pallet, drag Panel Splitter into the middle of the JSF page.

image

17. From the Data Control drag the HousesView1 into the First Panel. Choose Table -> ADF Read-Only Table

image

18. Check the Row Selection, Filtering, and Sorting checkboxes, and click OK

image

19. To integrate Google Maps to ADF we must customise the source to add the Google Maps APIs. Click the source tab of your jspx page.

20.  The first bit of code we will implement is the Google Map functions. There are 2 functions we create, an initialisation function, and a an implementation function so when the user selects a row it will pass the coordinates to Google Maps.

Copy this code into your jspx source, just after </af:form> and before </af:document> at the bottom of the source.

Also change the key=ABCD to the key you got when you subscribed to the Google API.

      <f:facet name="metaContainer">
        <af:resource type="javascript" source="
http://www.google.com/jsapi?key=ABCD"/>
        <af:resource type="javascript"> google.load("maps", "2.x");
                    // Call this function when the page has been loaded
                    function initialize() {
                    var map = new google.maps.Map2(document.getElementById("map"));
                    map.setCenter(new google.maps.LatLng(0,0), 1);
                    map.addControl(new GLargeMapControl());
                    map.addControl(new GMapTypeControl());
                    }
                    google.setOnLoadCallback(initialize);
        </af:resource>
        <af:resource type="javascript">
                          function doNavigate(evt)
                          { long = evt.getSource().getProperty("long");
                            lat = evt.getSource().getProperty("lat");

                            var latlng = new GLatLng(lat,long);
                            var map = new google.maps.Map2(document.getElementById("map"));             

                            map.addControl(new GLargeMapControl());
                            map.addControl(new GMapTypeControl());

                            map.setCenter(new GLatLng(lat,long), 16);
                            map.addOverlay(new GMarker(latlng));
                          }
        </af:resource>
      </f:facet>

21. Replace the code <f:facet name="second"/> with the following

             <f:facet name="second">
                <af:group>
                  <div id="map" style="width: 800px; height: 800px"></div>
                </af:group>
              </f:facet>

 

 

 

 

 

 

 

This code draws the map in the second splitter.

22. The final code is implementing the client listeners for user interaction so when the use selects an ID the location will be shown on the map. To do this we must edit the ID field to listen for user interaction and pass the parameters to the functions implemented in step 20.

Find the code:

                <af:outputText value="#{row.Id}" id="ot2">
                  <af:convertNumber groupingUsed="false"
                                    pattern="#{bindings.HousesView1.hints.Id.format}"/>
                </af:outputText>

And replace to look like this

                      <af:outputText value="#{row.Id}">
                        <af:convertNumber groupingUsed="false"
                                          pattern="#{bindings.HousesView1.hints.Id.format}"/>
                        <af:clientAttribute name="lat" value="#{row.Latitude}"/>
                        <af:clientAttribute name="long" value="#{row.Longitude}"/>
                        <af:clientListener method="doNavigate" type="click"/>
                      </af:outputText>

Save you work

23. Now it is time to test, Right-click on the HouseLocation.jspx and select Run

When the application starts in your browser, click on any ID in the ID column. The location should show on the map as shown below.

image

Thursday Jun 03, 2010

Calling Web Services using ADF 11g

One of the benefits of ADF is that fact that it can use multiple data sources. With SOA playing a big part in today’s IT landscape, applications need to be able to utilise this SOA framework to leverage functionality from multiple systems to provide a composite application.

ADF provides functionality to expose web services via the ADF Business Component so if you know how to use Business Components for a database. Configuring ADF for web services is much the same.

In this example I use an OSB web service that gets a customer.

  1. Create a new Fusion Web Application (ADF) Application and click OK

    image
  2. Provide an Application Name, GetCustomerADF and click Next

    image
  3. From the Project Technologies move Web Services into the Selected box. Accept the defaults and click Finish.

    image
  4. Right-click the Model project and select New

    image
  5. In the Gallery select Web Services –> Web Service Data Control then click OK.

    image
  6. Provide a name GetCustomerDC and give the URL endpoint for the Web Service, then click Next

    image
  7. Select the web service operation you want to use for the ADF application. In my example my web service only has one operation.

    image
  8. Click Finish
  9. Save your work, File –> Save
  10. The data control has now been created, the next steps create the UI components.
  11. In your application created in step 1 find the ViewController project, right-click and choose New

    image
  12. In the Gallery select JSF –> JSF Page

    image
  13. Provide a name for the jsp page, GetCustomer, Also ensure that the ‘Create as XML Document (*.jsp) check box is checked. I have selected the page template, Oracle Three Column Layout but you can create a layout of your choice.

    image
  14. I only want 2 columns so I delete the last column but right-clicking the right had panel and selecting Delete

    image
  15. Drag the fields you require from the web service data control to the left pannel. In my example I only require the Customer ID. When you drag to the panel select Texts –>ADF Input Text w/Label

    image
  16. In this example I want to search on a customer based on the ID. So Once I select the ID I want to execute the request. To do this I need a button.
    Drag the operation object under the fields created in step 15. Select Methods –> ADF Button.

    image
  17. You now need to provide the mappings, Choose the ‘Show EI Expression Builder’

    image
  18. Navigate to the bindings, ADFBindings –> bindings –> parametersIterator –> currentRow

    image
  19. Click OK
  20. Drag and drop the return information

    image
  21. I just want the results shown in a form. I want to show all fields

    image
  22. Now it is time to test, Right-click the jspx page created in steps 11 – 21 and select Run

    image
  23. A browser should start, enter valid values and test

    image
About

Discussions and Examples using Oracle Fusion Middleware. Some image links are broken when using Firefox, Safari, and Chrome. If you want to see the full image please use IE.

Twitter:@james8001

tumblr hit counter vistors, thanks for your support

Search

Archives
« July 2015
SunMonTueWedThuFriSat
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
       
Today