Differences
This shows you the differences between two versions of the page.
|
controllers:gmapcontroller [2015/10/05 17:52] |
controllers:gmapcontroller [2020/04/16 10:56] (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.GMap</wrap> was developped by Adichatz. | ||
| + | |||
| + | 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,13,14,15,16]; 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" XMLSchema-instance" coreClassName="org.adichatz.engine.core.ASectionCore" entityURI="adi:/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, detailContainerText)" style="Section.TWISTIE | Section.TITLE_BAR | Section.EXPANDED" id="detailContainer"> | ||
| + | <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="##.##" mapTypeId="roadmap" mapDataType="COORDINATES" toolBarStyle="AdiSWT.EXPANDABLE" zoom="10" property="coordinates" noLabel="true" id="map"> | ||
| + | <convertModelToTarget>import adichatzJboss7E4.GeometryUtil; | ||
| + | import com.vividsolutions.jts.geom.Point; | ||
| + | import org.adichatz.engine.widgets.supplement.LatLng; | ||
| + | Point point = (Point) GeometryUtil.getGeometryFromInputStream(value); | ||
| + | return new LatLng(point.getX(), point.getY(), getControl().getPattern());</convertModelToTarget> | ||
| + | </gMap> | ||
| + | </section> | ||
| + | </includeTree> | ||
| + | </sxh> | ||
| + | |||
| + | == Overview == | ||
| + | {{:controllers:gmap_coordinates.png |GMap - Store coordinates as String}} | ||
| + | \\ | ||
| + | == Explanations == | ||
| + | ^ **coordPattern**: |Coordinates pattern here is <wrap adicode><lat : lng></wrap> using <wrap adicode>##.##</wrap> format.| | ||
| + | ^ **mapTypeId**:|Choose between <wrap adicode>roadmap</wrap>, <wrap adicode>satellite</wrap>, <wrap adicode>hybrid</wrap>, <wrap adicode>terrain</wrap>.| | ||
| + | ^ **mapDataType**:|Choose between <wrap adicode>COORDINATES</wrap> ( value is a point) and <wrap adicode>ADDRESS</wrap> (value is a postal address).| | ||
| + | ^ **mapTypeControl**:<wrap adicode>true</wrap>|Add control for choosing Map Type (roadmap, satellite...) in the map .| | ||
| + | ^ **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.EDITABLE</wrap>: Coordinates control is editable.| | ||
| + | ^ **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>Point</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>detailContainer</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" XMLSchema-instance" coreClassName="org.adichatz.engine.core.ASectionCore" entityURI="adi:/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, detailContainerText)" style="Section.TWISTIE | Section.TITLE_BAR | Section.EXPANDED" id="detailContainer"> | ||
| + | <listeners> | ||
| + | <listener listenerTypes="AFTER_SYNCHRONIZE | AFTER_PROPERTY_CHANGE | POST_REFRESH"> | ||
| + | <code>displayGMap();</code> | ||
| + | </listener> | ||
| + | </listeners> | ||
| + | <additionalCode>import org.adichatz.engine.widgets.GMap; | ||
| + | private boolean doit = true; | ||
| + | private void displayGMap() { | ||
| + | if (doit) { | ||
| + | doit = false; | ||
| + | GMap gmapControl = #CONTROL(map); | ||
| + | Gmap gmap = #BEAN(); | ||
| + | gmapControl.setValue(gmap.getLatitude() + " : " + 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.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" XMLSchema-instance" coreClassName="org.adichatz.engine.core.ASectionCore" entityURI="adi:/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, detailContainerText)" style="Section.TWISTIE | Section.TITLE_BAR | Section.EXPANDED" id="detailContainer"> | ||
| + | <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.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.| | ||
| + | ^ **noLabel**:|No label are affected to control <wrap adicode>map</wrap>.| | ||
| + | |||
| + | |||
| + | |||