You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by pe...@apache.org on 2016/06/22 16:02:06 UTC
git commit: [flex-asjs] [refs/heads/develop] - Added MobileMap
example which combines Google Maps with Cordova Geolocation plugin.
Repository: flex-asjs
Updated Branches:
refs/heads/develop ad9db1373 -> 33636e75d
Added MobileMap example which combines Google Maps with Cordova Geolocation plugin.
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/33636e75
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/33636e75
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/33636e75
Branch: refs/heads/develop
Commit: 33636e75d2e929e367a6a460bff982a9ffeed201
Parents: ad9db13
Author: Peter Ent <pe...@apache.org>
Authored: Wed Jun 22 12:02:01 2016 -0400
Committer: Peter Ent <pe...@apache.org>
Committed: Wed Jun 22 12:02:01 2016 -0400
----------------------------------------------------------------------
examples/build.xml | 2 +
examples/flexjs/MobileMap/README.txt | 42 +++++++++++++
examples/flexjs/MobileMap/build.xml | 72 +++++++++++++++++++++++
examples/flexjs/MobileMap/src/MobileMap.mxml | 53 +++++++++++++++++
4 files changed, 169 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/33636e75/examples/build.xml
----------------------------------------------------------------------
diff --git a/examples/build.xml b/examples/build.xml
index 27d1816..de5e928 100644
--- a/examples/build.xml
+++ b/examples/build.xml
@@ -83,6 +83,7 @@
<ant dir="${basedir}/flexjs/FlexJSStore"/>
<ant dir="${basedir}/flexjs/FlexJSStore_jquery"/>
<ant dir="${basedir}/flexjs/MapSearch"/>
+ <ant dir="${basedir}/flexjs/MobileMap"/>
<ant dir="${basedir}/flexjs/MobileTrader"/>
<ant dir="${basedir}/flexjs/ChartExample"/>
<ant dir="${basedir}/flexjs/StorageExample"/>
@@ -113,6 +114,7 @@
<ant dir="${basedir}/flexjs/FlexJSStore_jquery" target="clean"/>
<ant dir="${basedir}/flexjs/MapSearch" target="clean"/>
<ant dir="${basedir}/flexjs/MobileTrader" target="clean"/>
+ <ant dir="${basedir}/flexjs/MobileMap" target="clean"/>
<ant dir="${basedir}/flexjs/ChartExample" target="clean"/>
<ant dir="${basedir}/flexjs/StorageExample" target="clean"/>
<ant dir="${basedir}/flexjs/TodoListSampleApp" target="clean"/>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/33636e75/examples/flexjs/MobileMap/README.txt
----------------------------------------------------------------------
diff --git a/examples/flexjs/MobileMap/README.txt b/examples/flexjs/MobileMap/README.txt
new file mode 100644
index 0000000..eae58c1
--- /dev/null
+++ b/examples/flexjs/MobileMap/README.txt
@@ -0,0 +1,42 @@
+The MobileMap example shows how you can use FlexJS to create a mobile app experience using both Google Maps and Cordova plugins.
+
+The app itself is very simple: it has a label for status and a map. The application simply shows your current position in the center of the map.
+
+The app uses the Cordova Geolocation plugin to get the device's current location. The map is displayed using the FlexJS Google Maps wrapper component.
+
+To get this example to work, you must first make sure you have all of the necessary FlexJS SDK and associated parts (eg, ANT, Falcon) downloaded and installed. If you have pulled this example from the examples directory of the FlexJS SDK, you probably have it all set up now.
+
+You will also need Apache Cordova. You can about the FlexJS Cordova connection on these Wiki pages which will direct you to the page with instructions for getting Cordova onto your system:
+
+https://cwiki.apache.org/confluence/pages/viewpage.action?pageId=62690320
+https://cwiki.apache.org/confluence/pages/viewpage.action?pageId=63406558
+
+Whichever way you want to go: using an IDE like Flash Builder or using the command line, you will still need to install the Cordova Geolocation plugin. The first thing you need to do is build the Cordova application template.
+
+% cd flex-asjs/examples/flexjs/MobileMap
+% ant all
+
+The ANT script will build the application and then create the Cordova template in the app/MobileMap directory.
+
+Now install the plugin:
+
+% cd app/MobileMap
+% cordova plugin add cordova-plugin-geolocation
+
+Once this is complete, you can connect your Android device to your computer and run it:
+
+EITHER (if still in the Cordova app/MobileMap directory):
+% cordova run
+
+OR (return to top-level example directory):
+% cd flex-asjs/examples/flexjs/MobileMap
+% ant run
+
+The Cordova app will be built and deployed to the device and started. Note that according to the Cordova documentation, nothing of importance should be done until the app receives the "deviceReady" event. So while the app will display an initial map, it will not center on your current location until receiving this event.
+
+The Google Maps API is contained in the flex-asjs/frameworks/projects/GoogleMaps directory. This API is really only usable by the JavaScript platform output of the example build (eg, flex-asjs/examples/flexjs/MobileMap/bin/js-debug) as there is no SWF equivalent; the ActionScript API library are just stub calls for SWF but real calls for JavaScript.
+
+Likewise, there is an API for the Cordova Geolocation plugin located in flex-asjs/frameworks/projects/Mobile directory. You will find a geolocation.Geolocation class with stub calls for SWF and code for JavaScript.
+
+Whenever you want to use a Cordova plugin with ActionScript and FlexJS, you must make an ActionScript library so the compiler knows about it. Use the Geolocation package and class as a template.
+
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/33636e75/examples/flexjs/MobileMap/build.xml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MobileMap/build.xml b/examples/flexjs/MobileMap/build.xml
new file mode 100644
index 0000000..9b0109f
--- /dev/null
+++ b/examples/flexjs/MobileMap/build.xml
@@ -0,0 +1,72 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<project name="mobilemap" default="main" basedir=".">
+ <property name="FLEXJS_HOME" location="../../.."/>
+ <property name="example" value="MobileMap" />
+
+ <property environment="env"/>
+ <property file="${FLEXJS_HOME}/build.properties"/>
+ <property name="FLEX_HOME" value="${FLEXJS_HOME}"/>
+ <property name="opt1_arg" value="-remove-circulars" />
+
+ <include file="${basedir}/../../build_example.xml" />
+
+ <condition property="extlib_arg" value="-external-library-path=${FLEXJS_HOME}/js/libs/js.swc" >
+ <and>
+ <not>
+ <isset property="extlib_arg" />
+ </not>
+ <available file="${FLEXJS_HOME}/js/libs/js.swc" type="file" />
+ </and>
+ </condition>
+ <condition property="extlib_arg" value="-external-library-path=${FALCONJX_HOME}/../js/libs/js.swc" >
+ <and>
+ <not>
+ <isset property="extlib_arg" />
+ </not>
+ <available file="${FALCONJX_HOME}/../js/libs/js.swc" type="file" />
+ </and>
+ </condition>
+ <property name="extlib_arg" value="-external-library-path=${FALCONJX_HOME}/../externs/js/out/bin/js.swc"/>
+
+ <target name="main" depends="clean,build_example.compile,build_example.compilejs" description="Clean build of ${example}">
+ </target>
+
+ <target name="cordova" description="Executes the Cordova build script to create Cordova app">
+ <ant antfile="../../../cordova-build.xml" />
+ </target>
+
+ <target name="run" description="Executes the Cordova build script to run the app on a device.">
+ <ant antfile="../../../cordova-build.xml" target="run" />
+ </target>
+
+ <target name="all" depends="main, cordova" description="Builds the app then runs the Cordova script">
+ </target>
+
+ <target name="clean">
+ <delete dir="${basedir}/bin" failonerror="false" />
+ <delete dir="${basedir}/bin-debug" failonerror="false" />
+ <delete dir="${basedir}/bin-release" failonerror="false" />
+ <delete dir="${basedir}/app" failonerror="false" />
+ </target>
+
+</project>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/33636e75/examples/flexjs/MobileMap/src/MobileMap.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MobileMap/src/MobileMap.mxml b/examples/flexjs/MobileMap/src/MobileMap.mxml
new file mode 100644
index 0000000..9729ef3
--- /dev/null
+++ b/examples/flexjs/MobileMap/src/MobileMap.mxml
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="utf-8"?>
+<mjs:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:js="library://ns.apache.org/flexjs/basic"
+ xmlns:mjs="library://ns.apache.org/flexjs/cordova"
+ xmlns:google="library://ns.apache.org/flexjs/google"
+ applicationComplete="onDeviceReady()">
+ <js:valuesImpl>
+ <js:SimpleCSSValuesImpl />
+ </js:valuesImpl>
+ <fx:Script>
+ <![CDATA[
+ import org.apache.cordova.geolocation.Geolocation;
+ import google.maps.LatLng;
+
+ private function onDeviceReady():void {
+ label.text = "The device ready, loading map...";
+
+ var location:Geolocation = new Geolocation();
+ location.getCurrentPosition(onSuccess, onError);
+ }
+
+ private function onSuccess(position:Object):void
+ {
+ // Extract the latitude and longitude from the position
+ // given and covert it to GoogleMaps LatLng object so
+ // the map can be centered on it.
+
+ var lat:Number = Number(position["coords"]["latitude"]);
+ var lng:Number = Number(position["coords"]["longitude"]);
+
+ label.text = String(lat) + ", " + String(lng);
+ map.setCenter(new LatLng(lat, lng));
+ }
+
+ private function onError(error:*):void
+ {
+ label.text = "Location failure";
+ }
+ ]]>
+ </fx:Script>
+ <js:initialView>
+ <js:View>
+ <js:VContainer width="450" height="640">
+ <js:HContainer width="100%" height="40">
+ <js:Label text="Current Location: " width="25%" />
+ <js:Label id="label" text="" width="75%" />
+ </js:HContainer>
+ <google:Map id="map" width="100%" height="600"
+ token="AIzaSyDkQgg2iojLCYeuW6hK7DkuAHD-SwJJhdE" />
+ </js:VContainer>
+ </js:View>
+ </js:initialView>
+</mjs:Application>