Clients: Fed/state/local gov agencies, commercial agriculture, utilities
ArcGIS Online apps and templates
Clients: Electric utilities, local government
Technology: JavaScript, ASP.Net, Oracle Spatial
// I <3 JavaScript
Brings "builder" experience from Flex/Silverlight to JavaScript
Techniques and Tools to help you:
A standalone Node/Express app with a specific folder structure:
This probably should NOT be in your suorce control.
Work in your source control tree and use scripts to copy files
module.exports = function(grunt) {
var appDir = 'C:\\code\\test\\arcgis-web-appbuilder-1.0beta2\\server\\apps\\2';
var stemappDir = 'C:\\code\\test\\arcgis-web-appbuilder-1.0beta2\\client\\stemapp';
grunt.initConfig({
watch: {
main: {
files: ['src/**'],
tasks: ['sync'],
options: {
spawn: false
}
}
},
sync: {
main: {
files: [{
cwd: 'src',
src: ['**'],
dest: appDir
}, {
cwd: 'src',
src: ['**'],
dest: stemappDir
}],
verbose: true // Display log messages when copying files
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sync');
grunt.registerTask('default', ['sync', 'watch']);
};
Add refernces to init.js
resources
arraydojoConfig.packages
and/or require
call
Typically done in an app (as opposed to the stem app)
resources
arraydojoConfig.packages
for interactive components (tabs, dropdowns, etc)See: https://github.com/tomwayson/web-appbuilder-bootstrap
...
resources = resources.concat([
window.apiUrl + 'dojo/resources/dojo.css',
window.apiUrl + 'dijit/themes/claro/claro.css',
window.apiUrl + 'esri/css/esri.css',
window.path + 'jimu.js/css/jimu.css',
// add a reference to the Bootstrap CSS
'//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'
]);
...
dojoConfig = {
...
packages: [{
name: "widgets",
location: window.path + "widgets"
}, {
name: "jimu",
location: window.path + "jimu.js"
}, {
name: "themes",
location: window.path + "themes"
}, {
...
}, {
// add Dojo-Bootstrap if you want to use bootstrap comontents
// like tabs, dropdowns, modals, collapses, tooltips, etc
name: "bootstrap",
location: "//rawgit.com/xsokev/Dojo-Bootstrap/master"
}]
};
Copy or scaffold widget files:
BaseWidget
is the interface between your widget(s) and the rest of the app (the panel, dialog windows, other widgets, etc)... and only your code
BaseWidget
code
// add jimu classes for consisten look and feel
query('input[type=text], textarea, select', this.domNode).addClass('jimu-input');
query('button, input[type=button]', this.domNode).addClass('jimu-btn');
Sometimes the Jimu widget is the right tool for the job
Here are some resources to get you started: