Challenge Overview
Note - please see that this challenge has an accelerated submission timeline.
Challenge Objectives
-
HTML Web app, targeting Dojo, JQuery, and all the latest browser versions (Firefox, Safari, IE, Chrome)
-
ArcGIS will also be used (https://developers.arcgis.com/javascript/)
-
This challenge will begin the conversion of a large set of storyboards to a full HTML prototype
Project Background
-
The customer has an existing web application that is relatively unskinned. We have worked to build them storyboards that implement a better UI
-
This challenge will start the conversion process with a basic header and side menu, and one side menu option, around an ArcGIS view. This will allow the customer to evaluate how difficult it will be to integrate the existing app functionality into the converted prototype.
-
If this challenge goes well, there are multiple other prototype conversions planned to convert the rest of the screens.
Technology Stack
-
For this challenge, we are targeting static HTML that will work in all modern browsers, including Firefox, Safari, IE, and Chrome.
-
In production, the code will run as JSP files on Apache Tomcat, but for this challenge, we are just building out the HTML
-
We want to keep the deployment environment server as lightweight as possible. The simpler the better. Something like http://fenixwebserver.com/ would be fine.
-
ArcGIS integration will be required. We will provide a small sample app for reference, but the app will be built around an ArcGIS window. We won’t be interacting with ArcGIS for this challenge, but we need to know that it works as part of the integration because ArcGIS has some quirks.
-
ArcGIS requires Dojo (https://dojotoolkit.org/). We can also use jQuery and related plugins, like jQuery UI and jQuery Date Picker. The client has specifically asked that we do NOT use Bootstrap for this challenge, so Bootstrap usage is explicitly prohibited.
-
For these prototype conversion challenges, you should use standard ArcGIS controls, where appropriate, skinning them through CSS. This applies to things like the legend, layers, and filters. Do NOT recreate an ArcGIS control in HTML, as that will just make merging the design into the existing application harder.
Specific versions include:
-
ESRI ArcGIS JS API 3.24 https://developers.arcgis.com/javascript/
-
Dojo Toolkit that is imported into the page through the above mentioned ArcGIS JS API
Storyboards
The forum will contain a link to grant yourself access to the storyboard files, and a Marvel app link will also be available showing the web UI storyboards.
Individual requirements
These MarvelApp links are in scope:
For right now, all we’re looking for is the side menu and header, around an ArcGIS map view.
The header should be implemented, as should the side menu, but keep in mind these scope reductions. Note that even though these items are outside the scope, they will likely be implemented in a later challenge, so we expect them to be converted, just with empty callback implementations for clicks.
-
The “List View” button doesn’t have to do anything
-
The “Search” text view should be clickable, but it doesn’t have to do anything
-
The “NEW” drop down doesn’t have to do anything
-
On the side menu, only the “Legend” will expand and contract. The rest of the side menu buttons don’t have to do anything right now
-
We don’t have to show the pins on the map, just the sample layers that exist in the sample in the forum.
Legend view
ArcGIS provides a legend component : https://developers.arcgis.com/javascript/3/jssamples/widget_legend.html
Please use that in the legend side menu option to show the legend for the actual ArcGIS view, skinning it to match the storyboard through CSS. The existing code looks a bit like this:
if(layerInfo.length > 0) {
let legendDijit=new Legend({
map:dwMap,
layerInfos:layerInfo
}, "legendDiv");
legendDijit.startup();
}
And the div:
<div id="legendPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="iconClass:'legendIcon'" title="Legend">
<div id="legendDiv"></div>
</div>
ArcGIS
A very simple ArcGIS example will be provided in the forum. For the conversion, we expect the map view shown in the storyboards to be an actual ArcGIS window, similar to what is shown in the example. It is important to show this to ensure that we don’t use any plugins or tools that conflict with the ArcGIS requirements.
Componentize
The HTML will eventually be split up into JSP files hosted on Apache Tomcat. Please ensure that common elements like the header and side menu can be moved to a generic layout in the JSP without much issue for the final deployment. Please try to keep the code and HTML layouts extremely clean and easy to understand to allow for easy splitting into the real application.
CSS and HTML
We won’t be doing the actual implementation of the functionality for the final app. We are only doing the prototype conversion. Because of this, we need to ensure that the HTML is extremely well laid out, easily split into pieces for JSP conversion, and the CSS has to be portable, DRY (don’t repeat yourself), and easily editable / applied to new prototype elements as we convert further.
Images
Any images converted from the storyboard should support 2x resolution, in addition to 1x resolution.
Deployment guide and validation document
These files are required as part of your submission:
A README.md that covers:
-
Basic deployment - how to run the app and view the results in a browser. Plan on the reviewers having Windows or Mac.
Validation video / screencast
-
Please show as many browsers working with the app as possible, ideally all 4 major ones: Firefox, Safari, Chrome, and IE.
What To Submit
Please submit:
-
The converted HTML, JS, and CSS
-
A README.md
-
A link to the validation video