GEOG 863:
Web Application Development for Geospatial Professionals

8.4.2 TabContainer

PrintPrint

8.4.2 TabContainer

The next dijit type we’ll discuss is the TabContainer, which can be used to present page content through a series of tabs. In the example below, I’ve built an app that displays three maps of the 2010 U.S. population by race, each under a different tab.

See the Pen Dojo Tabs by Jim Detwiler (@jimdetwiler) on CodePen.

The HTML of this app is similar to the previous example in the use of the claro theme and the BorderContainer and ContentPane dijits. In this case, I’ve embedded a div with a data-dojo-type of dijit/layout/TabContainer within the center region ContentPane. From there, the tabs are created by adding ContentPane divs as children of the TabContainer div. Each of the tab divs has its title attribute set to the label that should appear on the UI. Then inside each of those divs is an empty div that serves as a placeholder for three different MapViews. Note that the first of the three tab divs has a data-dojo-props setting of selected: true. This causes that tab to be the one that’s selected when the app first loads.

Moving to the JS code, a WebMap and MapView are created for each of the three divs embedded within the tabs (whiteDiv, blackDiv and hispDiv). The WebMaps display 2010 Census population data and were authored by an Esri staffer. They are associated with the appropriate div in the HTML through the setting of the MapView’s container property, as we saw earlier in the course.