Pages

Tuesday, December 23, 2008

Google Maps Task Flow

I made a stand alone google maps Task Flow which you can use as region in your jsf pages. This Task Flow is based on GMaps4JSF and you only have to fill the input parameters and the Task Flow will display you the location and popup the description of this location.
Here you see some examples where I use the department table of the HR schema as input.

This Task Flow has the following four input parameters.
1) inputParameterTitle: Display the Title
2) inputParameterLocation: The google maps location like London, UK
3) inputParameterDescription: Popup description of the location
4) inputParameterZoomLevel

Here the steps to integrate this Google maps Task Flow in your own Application.
1) Add the Task Flow jar to your own viewcontroller project. The jar is located in the deploy folder GmapsTaskFlow project.
2) Drag the task flow from the component palette to your page. This will add the region component to the jsf page and a task flow binding in the Page definition.

3) We need to add your own google maps api key to your jsf page. We need to do this in the metacontainer of af:document

<af:document>
<f:facet name="metaContainer">
<f:verbatim>
<![CDATA[
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAM7FSGSscPTbXiOt1No2LPRSLP72-OZgzlwHUle6cA--KWDlXYxSMtxkbiwjRJ9xjiVAYHIVo1d0VkA">
</script>
]]>
</f:verbatim>
</f:facet>

4) Fill the input parameters of this Task Flow and change the refresh condition to ifNeeded
Open the PageDef of your page and add some values to the inputparameters.


that's all. Here is the google maps workspace with the Task Flow and a test project where I use this TF. ( It works on the HR schema ).

Here some code how to fill the location parameter in an ADF rich table by using your own selection listener.

public static Object invokeMethod(String expr, Class[] paramTypes,
Object[] params) {
FacesContext fc = FacesContext.getCurrentInstance();
ELContext elc = fc.getELContext();
ExpressionFactory ef = fc.getApplication().getExpressionFactory();
MethodExpression me =
ef.createMethodExpression(elc, expr, Object.class, paramTypes);
return me.invoke(elc, params);
}

public static Object invokeMethod(String expr, Class paramType,
Object param) {
return invokeMethod(expr, new Class[] { paramType },
new Object[] { param });
}

public void departmentSelectionListener(SelectionEvent selectionEvent) {
// Add event code here...
invokeMethod("#{bindings.DepartmentsView1.collectionModel.makeCurrent}",
SelectionEvent.class, selectionEvent);

DCBindingContainer bc = (DCBindingContainer) BindingContext.getCurrent().getCurrentBindingsEntry();
DCIteratorBinding iter = bc.findIteratorBinding("DepartmentsView1Iterator");
Row rw = iter.getCurrentRow();
location = rw.getAttribute("City").toString()+","+
rw.getAttribute("CountryId").toString();
if ( rw.getAttribute("StateProvince") != null ) {
location = location +","+rw.getAttribute("StateProvince").toString();
}
description = rw.getAttribute("DepartmentName").toString()+","+
rw.getAttribute("StreetAddress").toString();
}

3 comments:

  1. hi Edwin

    I got a question about your GoogleMapsTF.zip example application.
    see http://forums.oracle.com/forums/thread.jspa?threadID=842936

    regards
    Jan Vervecken

    ReplyDelete
  2. Hi,
    How could I show on maps more then one location. For example all the location from left table?
    Regards Corneliu

    ReplyDelete
  3. Hi,

    Did you get this working in the latest Jdeveloper version.

    and for all the details you can take a look at the gmaps4jsh website for all the details and examples

    thanks

    ReplyDelete