This is project demonstrates how to build maintainable UI elements or widgets in your map.apps bundles. You may use this project as a blueprint for starting your own map.apps project.
This Maven project includes some of the core concepts for developing UI driven bundles in map.apps. Use this readme as a guide for what to discover in this project. After studying this project, you should be able to answer the following questions:
- How can I use Vue.js to build widgets following the MVVM pattern?
- How does the MVVM pattern help to make UI components and models testable?
- How do I build widgets with ready-to-use UI components from Vuetify.js?
- How do I build a custom theme (theme-custom)?
- How can the view-model interact via bindings with (Accessor) models from the ESRI ArcGIS API for JavaScript?
- How is my layout integrated into map.apps templates?
- How do gulp processes modify my source code?
- map.apps 4.5.0 (or above)
- all resources from
CD-Contents/sdk/m2-repository
need to be copied manually to your local maven repository (e.g.%UserProfile%/.m2/repository
for Windows,~/.m2/repository
for MacOS).
The project supports a 'remote project' and 'standalone project' mode.
In this mode a map.apps installation is available elsewhere and most JavaScript resources are fetched from this installation. This mode is recommended.
The URL of the mapapps server can be declared in the pom.xml. Replace:
<mapapps.remote.base>.</mapapps.remote.base>
with
<mapapps.remote.base>http://yourserver/mapapps</mapapps.remote.base>
As alternative the URL can be declared in a file called build.properties
with the content
mapapps.remote.base=http://yourserver/mapapps
and enabling the "env-dev" maven profile.
Append -P env-dev
to any maven execution or declare the profile as activated by default in your maven settings.xml.
In this mode all JavaScript sources are included to this project during development. The drawback of this mode is that you can not test authentication and that the default settings are not read from the remote instance.
This mode requires that the profile include-mapapps-deps
is activated.
Append -P include-mapapps-deps
to any maven execution or declare the profile as activated by default in your maven settings.xml.
Start the integrated jetty server with:
mvn jetty:run -P watch-all
Make sure that the watch-all
maven profile is activated.
The profile will start a gulp task that watches for changes in your source code.
After a successfull start, the jetty server ist available at http://localhost:9090.
For detailed development documentation have a look at conterra's developer network (account required).
To ensure that all files are compressed/minified and a dependencies.json is calculated execute:
mvn clean install -P compress
To upload your apps and bundles after compression append the upload
profile.
mvn clean install -P compress,upload
To execute the unit tests inside the project, run http://localhost:9090/js/tests/runTests.html.
If you run the project in 'remote project' mode, you will have to edit the
test-init.js
file located in the/src/test/webapp/js/tests/
folder.
- Interaction with ESRI map
- Use of Binding (e.g. with Accessor)
- Sample of minimum fileset needed to create a custom theme.
- Make sure bundle is loaded instead of theme-everlasting in sample app
- When renaming/copying the theme-custom bundle to e.g. theme-[projectname] make sure the adjustments (theme-name) have refelected to the following files.
- gulpfile.js
- theme-name/manifest.json
- theme-name/styles/styles.less
- The gulpfile that determines the build process can be found in the root directory:
/gulpfile.js
- package.json / npm