Differences

This shows you the differences between two versions of the page.

Link to this comparison view

controllers:gmapcontroller [2015/10/05 17:52] (current)
Line 1: Line 1:
 +==== Controller for GMap ====
 +The GMapController gives a simple way to display a map provided by google according to coordinates or address.
 +This is  a FieldController that means that it can be linked to the databinding service.
 +
 +==== Control ====
 +The control <wrap adicode>​org.adichatz.engine.widgets.gmaps.GMap</​wrap>​ was developped by Adichatz based on Tim Buschtöns'​s work:​[[https://​github.com/​tbuschto|https://​github.com/​tbuschto]].
 +
 +GMap is a composite control which contains a browser. A http request is send to google and map result is displayed.
 +
 +==== Usage: ​ ====
 +
 +=== Example 1: Store coordinates as String ​ ===
 +In this example, field <wrap adicode>​coordinates</​wrap>​ is stored in the database as a string with following syntax ​
 +<wrap adicode><​lat : lng></​wrap>​ where <wrap adicode>​latitude</​wrap>​ and <wrap adicode>​longitude</​wrap> ​
 +use format <wrap adicode>##​.##</​wrap>​ (in this example value is <​html><</​html><​wrap adicode>​45.75 : 4.85</​wrap>>​).\\
 +Two controllers are linked to the model field <wrap adicode>​coordinates</​wrap>:​
 +  -  **coordinates** which display value in Text control.
 +  -  **map** which display value as a map in a GMap control.
 +Both controls are databound: If value changes in a control, modification is reported to the other control or anywhere in the application. That is a standard behavior.
 +
 +== Code ==
 +<sxh xml; highlight: [10,11,12]; title: Code: store coordinates as String.>
 +<?xml version="​1.0"​ encoding="​UTF-8"​ standalone="​yes"?>​
 +<​includeTree xmlns:​xsi="​http://​www.w3.org/​2001/​XMLSchema-instance"​ entityURI="​adi://​org.mycompany.myproject/​model.gmap/​GmapMM"​ generationType="​DETAIL"​ xsi:​noNamespaceSchemaLocation="​http://​www.adichatz.org/​xsd/​v0.8.4/​generator/​includeTree.xsd">​
 +    <section text="#​MSG(gmap,​ detailSectionText)"​ style="​Section.TWISTIE | Section.TITLE_BAR | Section.EXPANDED"​ id="​detailSection">​
 +        <layout layoutConstraints="​wrap 2" columnConstraints="​[fill]25[fill,​grow]"​ rowConstraints="​[fill,​grow]"/>​
 +        <​composite>​
 +            <layout layoutConstraints="​wrap 2" columnConstraints="​[fill,​ align right]10[fill,​grow]"​ rowConstraints="​20[]20[][]"/>​
 +            <​formattedText editPattern="######"​ format="​Integer"​ property="​id"​ enabled="​false"​ id="​id"/>​
 +            <text property="​coordinates"​ id="​coordinates"/>​
 +        </​composite>​
 +        <gMap coordPattern="##​.##"​ mapType="​RoadMap"​ noLabel="​true"​ toolBarStyle="​AdiSWT.COORDINATES | AdiSWT.EDITABLE | AdiSWT.TYPE_SELECTION | AdiSWT.EXPANDABLE"​ zoom="​12"​ property="​coordinates"​ id="​map">​
 +            <​convertTargetToModel>​return null == getControl().getCenter() ? null : getControl().getCenter().toString();</​convertTargetToModel>​
 +        </​gMap>​
 +    </​section>​
 +</​includeTree>​
 +</​sxh>​
 +
 +== Overview ==
 +{{:​controllers:​gmap_coordinates.png |GMap - Store coordinates as String}}
 +\\
 +== Explanations ==
 +^  **coorPattern**:​ |Coordinates pattern here is <wrap adicode><​lat : lng></​wrap>​ using <wrap adicode>##​.##</​wrap>​ format.|
 +^  **mapType**:​|Choose between <wrap adicode>​RoadMap</​wrap>,​ <wrap adicode>​Satellite</​wrap>,​ <wrap adicode>​Hybrid</​wrap>,​ <wrap adicode>​Terrain</​wrap>​.|
 +^  **noLabel**:​|No label are affected to control <wrap adicode>​map</​wrap>​. By default, when a field control is linked to a model field (here <wrap adicode>​property="​coordinates"</​wrap>​),​ a label control is automatically created.|
 +^  **toolBarStyle**:​|<​wrap adicode>​AdiSWT.COORDINATES</​wrap>:​ Use coordinates text control, <wrap adicode>​AdiSWT.EDITABLE</​wrap>:​ Coordinates control is editable, <wrap adicode>​AdiSWT.TYPE_SELECTION</​wrap>:​ map type can be selected.| ​
 +^  **zoom**:​|Give a value between <wrap adicode>​0</​wrap>​ and <wrap adicode>​20</​wrap>​ (default is <wrap adicode>​12</​wrap>​).|
 +^  **<​convertTargetToModel>​**:​|Value from target is a <wrap adicode>​LatLng</​wrap>​ type and must be converted to a <wrap adicode>​String</​wrap>​.|
 +
 +
 +
 +\\ \\
 +=== Example 2: Store coordinates as two float fields: Latitude and Longitude ​ ===
 +In this example, fields <wrap adicode>​latitude</​wrap>​ and <wrap adicode>​longitude</​wrap>​ are stored in the database as floats.\\
 +So control <wrap adicode>​map</​wrap>​ cannot be link to the database because one control cannot be databound to 2 model fields. So programming must be used. 
 +
 +Synchronization of map control following to database fields is done in <wrap adicode>​displayMap</​wrap>​ function (lines 6 and 9-19). This function is called thru 3 listeners of <wrap adicode>​detailSection</​wrap>​ controller:
 +  * AFTER_SYNCHRONIZE:​ <wrap adicode>​synchronize</​wrap>​ is a step in the life cycle of controller when data from entity are injected in fields controllers.
 +  * AFTER_PROPERTY_CHANGE:​ After a change was sent to a property of the Entity by the databinding service.
 +  * POST_REFRESH:​ If the entity is refreshed from database.
 +
 +In the other hand, changes made thru GMap control are broadcast to   <​wrap adicode>​latitude</​wrap>​ and <wrap adicode>​longitude</​wrap>​ controllers.
 +
 +This way to manage synchronization between controllers is compatible with databinding service: Changes are synchronized in other editors if needed.  ​
 +
 +== Code ==
 +<sxh xml; highlight: [6,​9,​10,​11,​12,​13,​14,​15,​16,​17,​18,​19,​29,​30,​31,​32,​32,​33,​34,​35,​36];​ title: Code: store coordinates as String.>
 +<?xml version="​1.0"​ encoding="​UTF-8"​ standalone="​yes"?>​
 +<​includeTree xmlns:​xsi="​http://​www.w3.org/​2001/​XMLSchema-instance"​ entityURI="​adi://​org.mycompany.myproject/​model.gmap/​GmapMM"​ generationType="​DETAIL"​ xsi:​noNamespaceSchemaLocation="​http://​www.adichatz.org/​xsd/​v0.8.4/​generator/​includeTree.xsd">​
 +    <section text="#​MSG(gmap,​ detailSectionText)"​ style="​Section.TWISTIE | Section.TITLE_BAR | Section.EXPANDED"​ id="​detailSection">​
 +        <​listeners>​
 +            <​listener listenerTypes="​AFTER_SYNCHRONIZE | AFTER_PROPERTY_CHANGE | POST_REFRESH">​
 +                <​code>​displayGMap();</​code>​
 +            </​listener>​
 +        </​listeners>​
 +        <​additionalCode>​import org.adichatz.engine.widgets.gmaps.GMap;​
 +private boolean doit = true;
 +private void displayGMap() {
 +    if (doit) {
 +    doit = false;
 +    GMap gmapControl = #​CONTROL(map);​
 +    Gmap gmap = #BEAN();
 +     gmapControl.setValue(gmap.getLatitude() + &quot; : &quot; + gmap.getLongitude());​
 +    doit = true;
 + }
 +}</​additionalCode>​
 +        <layout layoutConstraints="​wrap 2" columnConstraints="​[fill]25[fill,​grow]"​ rowConstraints="​[fill,​grow]"/>​
 +        <​composite layoutData="​wmin 200">​
 +            <layout layoutConstraints="​wrap 2" columnConstraints="​[fill,​ align right]10[grow,​fill]"​ rowConstraints="​20[]20[][]"/>​
 +            <​formattedText editPattern="######"​ format="​Integer"​ property="​id"​ enabled="​false"​ id="​id"/>​
 +         <​formattedText editPattern="##​.##"​ format="​Float"​ property="​latitude"​ id="​latitude"/>​
 +         <​formattedText editPattern="##​.##"​ format="​Float"​ property="​longitude"​ id="​longitude"/>​
 +        </​composite>​
 +        <gMap coordPattern="##​.##"​ toolBarStyle="​AdiSWT.COORDINATES | AdiSWT.EDITABLE | AdiSWT.TYPE_SELECTION | AdiSWT.EXPANDABLE"​ zoom="​14"​ id="​map">​
 +            <​listeners>​
 +                <​listener listenerTypes="​MODIFY_TEXT">​
 +                    <​code>​if (doit) {
 + doit = false;
 + #​CONTROLLER(latitude).broadCastedSetValue(gmap.getCenter().getLatitude());​
 + #​CONTROLLER(longitude).broadCastedSetValue(gmap.getCenter().getLongitude());​
 + doit = true;
 +}</​code>​
 +                </​listener>​
 +            </​listeners>​
 +        </​gMap>​
 +    </​section>​
 +</​includeTree>​
 +</​sxh>​
 +
 +== Overview ==
 +{{:​controllers:​gmap_lat_lng.png |GMap - Store coordinates as Latitude and Longitude}}
 +
 +\\
 +== Explanations ==
 +^  **doit**:​|Allows to avoid tha change done by programming .|
 +^  **#​BEAN()**:​|The bean of the current entity.|
 +^  **#​CONTROLLER(latitude)**:​|Reference to the controller containing a <wrap adicode>​FormattedText</​wrap>​ control and bound to <wrap adicode>​latitude</​wrap>​ model field of bean <wrap adicode>​Gmap</​wrap>​.|
 +^  **<​controller>​.broadCastedSetValue(...)**:​|Sets a value in the control of ther controller and launches the databinding mecchanism.|
 +
 +
 +
 +
 +\\ \\
 +=== Example 3: Store address as string ​ ===
 +Two controllers are linked to the model field <wrap adicode>​address</​wrap>:​
 +  -  **address** which display value in Text control.
 +  -  **map** which display value as a map in a GMap control.
 +Both controls are databound: If value changes in a control, modification is reported to the other control or anywhere in the application. That is a standard behavior.
 +
 +== Code ==
 +<sxh xml; highlight: [10]; title: Code: store coordinates as String.>
 +<?xml version="​1.0"​ encoding="​UTF-8"​ standalone="​yes"?>​
 +<​includeTree xmlns:​xsi="​http://​www.w3.org/​2001/​XMLSchema-instance"​ entityURI="​adi://​org.mycompany.myproject/​model.gmap/​GmapMM"​ generationType="​DETAIL"​ xsi:​noNamespaceSchemaLocation="​http://​www.adichatz.org/​xsd/​v0.8.4/​generator/​includeTree.xsd">​
 +    <section text="#​MSG(gmap,​ detailSectionText)"​ style="​Section.TWISTIE | Section.TITLE_BAR | Section.EXPANDED"​ id="​detailSection">​
 +        <layout layoutConstraints="​wrap 2" columnConstraints="​[fill]25[fill,​grow]"​ rowConstraints="​[fill,​grow]"/>​
 +        <​composite>​
 +            <layout layoutConstraints="​wrap 2" columnConstraints="​[fill,​ align right]10[fill,​grow]"​ rowConstraints="​20[]20[][]"/>​
 +            <​formattedText editPattern="######"​ format="​Integer"​ property="​id"​ enabled="​false"​ id="​id"/>​
 +         <text textLimit="​255"​ property="​address"​ id="​address"/>​
 +        </​composite>​
 +        <gMap mapType="​Terrain"​ noLabel="​true"​ toolBarStyle="​AdiSWT.ADDRESS | AdiSWT.EDITABLE | AdiSWT.TYPE_SELECTION | AdiSWT.EXPANDABLE"​ zoom="​10"​ property="​address"​ id="​map"/>​
 +    </​section>​
 +</​includeTree>​
 +</​sxh>​
 +
 +== Overview ==
 +{{:​controllers:​gmap_address.png |GMap - Store Address as String}}
 +\\
 +== Explanations ==
 +^  **mapType**:​|<​wrap adicode>​Terrain</​wrap>​is selected.|
 +^  **toolBarStyle**|<​wrap adicode>​AdiSWT.ADDRESS</​wrap>:​ Use Adress text control, <wrap adicode>​AdiSWT.EDITABLE</​wrap>:​ Address control is editable, <wrap adicode>​AdiSWT.TYPE_SELECTION</​wrap>:​ map type can be selected.| ​
 +^  **noLabel**:​|No label are affected to control <wrap adicode>​map</​wrap>​.|
 +
 +
 +
  
controllers/gmapcontroller.txt · Last modified: 2015/10/05 17:52 (external edit)