GEOG 863:
Web Application Development for Geospatial Professionals

7.4.1 Page Layout


7.4.1 Page Layout

So far in the course, the majority of our apps have had the map fill the entire browser window. Earlier in this lesson, we saw how to overlay UI elements on top of the map. However, there may be times when you want to draw the map in a smaller area of the page and surround it with other types of content. This can certainly be done with plain HTML and CSS, but JS frameworks like Dojo typically offer widgets to simplify the process.

This example shows a layout with a sidebar and header built using Dojo’s Layout dijits BorderContainer and ContentPane. While the example has just placeholder text, you should be able to imagine content that you’d include in your own app. For example, the header could include the app’s title and maybe an organization logo. The sidebar could contain a listing of map features like we saw in the previous section. Note that the border between the map and sidebar is resizable, a nice feature for users that is made much easier to implement using a framework.

Let’s walk through the code that produced this page. While dijits can be added to a page dynamically using JS code, in this example they are defined using HTML. (In the Dojo documentation, adding dijits with JS is referred to as the programmatic approach, while using HTML is the declarative approach.)

The first difference in the HTML of this example as compared to earlier examples is the linkage to the stylesheet associated with Dojo’s claro theme. Dojo’s reference site provides more information on the implementation of their themes, but the basic idea is that they produce a consistent look and feel to the Dojo elements placed on the page. The other step in implementing the theme is adding the theme’s class name to the body element.

The page’s body contains a div (with id of appLayout) that has its data-dojo-type attribute set to dijit/layout/BorderContainer, a dijit used to divide a page into as many as five regions. Here the appLayout div contains three child divs. The child divs are defined as ContentPane dijits and have their regions defined through the data-dojo-props attribute. The first (classed as centerPanel) is assigned to the center region and contains the viewDiv div you’ve seen used in earlier examples to hold the MapView or SceneView. The second div (classed as edgePanel) produces the narrow strip in the top region and the third div (also classed as edgePanel) produces the sidebar in the left region. Note also that the left region div includes a splitter: true property setting. This is what makes it possible to drag the border between the left and center divs to resize them.

The last important point to note regarding the implementation of these dijits is the script element on lines 16-20. This code includes an AMD require() block just like we’ve seen for getting access to Esri’s API classes, except this one provides access to the Dojo dijit classes we just discussed above. Importantly, the require block includes the dojo/parser module, defines a matching class named parser, then uses the parser class to execute the parse() method. This finds all of the elements decorated with a data-dojo-type attribute and converts them into the slick widget the user sees on the page.