Archive for August, 2010

User Interface Creation Made Easy with ArcGIS Server JavaScript API and Dojo

Posted on August 19, 2010. Filed under: ArcGIS Server, ESRI, GeoSpatial Training Services, JavaScript |

One of the most difficult tasks for many web developers building GIS applications is designing and creating the user interface.  The ArcGIS Server API for JavaScript and Dojo greatly simplifies this task.  Dojo’s layout dijits provide a simple, efficient way to create application layouts and ESRI has provided a number of sample application layouts that you can use to get up and running quickly.   The AGIS JavaScript API also provides Draw, Edit, and Navigation toolbars that you can use to quickly embed commonly used tools in your application.  In this post we’ll examine how you can quickly build your application layout using these tools.

BorderContainer Dijit
Since the AGIS API for JavaScript is built directly on top of Dojo you automatically have access to the user interface libraries including layout dijits such as BorderContainer.  BorderContainer serves primarily as a container for other child containers and can be one of two design types: headline or sidebar.  You define the design type using the ‘design’ attribute as seen in the code examples below.  In either case, whether you define a design type of headline or sidebar is split into as many as 5 different regions: top, bottom, right, left, and center.  Each region is normally filled by a Dojo layout element.

Note: Not every region has to be filled by a layout element.

In the first code example, we are defining the design to be of type ‘headline’ which results in the general configuration that you see below with the ‘top’ and ‘bottom’ regions stretching across the entire width of the screen space.  In this case you only need to set the ‘height’ property for the top and bottom regions.

In the second code example we define the design as ‘sidebar’.  With the sidebar design the left and right regions expand to take up 100% of the height of the window, sacrificing the area available to the top and bottom regions.  In this case you only need to define the width style property since the height will always be 100%.

In either case the center region will conform to fit the amount of space available based on the sizing of the other regions.

Child Elements of BorderContainer
Each region of a BorderContainer (top, bottom, left, right, center) can be filled by a Dojo layout element.  These elements are AccordionContainer, ContentPane, SplitContainer, StackContainer, and TabContainer.  You can also created nested BorderContainers to further divide the available layout space.

Child elements are placed inside a region through the use of the ‘region’ attribute as seen below.  Notice in the yellow highlighted section that the ‘region’ attribute is set to ‘left’.  This will create a ContentPane in the left region.  A ContentPane is a very basic layout element and is used as a container for other widgets.  In this case it is going to hold a TabContainer (green highlighted code).

The other child layout elements that can be placed inside a BorderContainer include AccordionContainer, SplitContainer, and StackContainer.

AccordionContainers hold a set of panes whose titles are visible, but only one pane’s content is visible at a time.  As the user clicks a title, the pane contents become visible.  These are excellent user interface containers that can hold a lot of information in a small area.

StackContainers resemble books where only a single pane of information is available at a time.  Users can page through various panes of information.

Finally, a SplitContainer is a container that contains multiple children.  All the children are displayed side by side either horizontally or vertically with a bar in between.  The bars can be dragged to change the relative size of the child areas.

There are a number of other design considerations which you should take into account.  ESRI has done a great job of defining those here near the bottom of the page.

Sample Layouts from ESRI
ESRI has provided a number of sample layouts that you can use to get started in the layout of your application.  Go to the ArcGIS API for JavaScript Samples and click Layouts on the left hand side to see the available layouts.  If you see one you like you can easily copy and paste the code into your application files to get started.  Spend some time getting to know the various options provided by BorderContainer and its child layout elements.

ESRI also provides toolbar helper classes that enable you to easily add in navigation, drawing, or editing functionality.  These toolbars aren’t user interface components that you simply drop into your application, but are instead helper classes that make creating the toolbars a snap to create and add to your interface.  For now we’ll just take a look at adding a navigation toolbar to your application.  There are several steps to adding the toolbar, but all are quite simple.

First you’ll want to add in the references that you’ll need to implement this functionality.

You need a reference to the navigation toolbar along with a reference to dijit.Toolbar and dijit.form.Button.  Each of the tools in the toolbar is actually a Dojo Dijit Button that is contained within a Dojo Dijit Toolbar.

Next we’ll define the icons that will be used for each of our buttons.  This can be done through CSS styling as seen below.  Here we are defining the images to be used along with their width and height.

Finally, we create the toolbar through the use of dijit.Toolbar which is defined inside a ContentPane in the ‘top’ region of our BorderContainer.  You can see this in the code below.  In the yellow highlighted code we are creating an instance of dijit.Toolbar called ‘navToolbar’.  This new toolbar is located inside a ContentPane called ‘toolbar-container’ which is a child layout element of BorderContainer.  This code is highlighted in green.

Inside our toolbar (‘navToolbar’) we create a series of dijit.form.Button objects that correspond to the type of function that should be performed by that tool.  I’ve highlighted one example of this in the code below.  This is the Zoom In tool that a user can click and then drag a rectangle on the map to zoom to a new extent.  This tool is defined as type dijit.form.Button.  The ‘onClick’ event is particularly important here because it references back to the esri.toolbars.navigation reference that we defined earlier.  This actually defines what type of functionality should be provided by this button.  In this case, esri.toolbars.Navigation.ZOOM_IN.  The ‘iconClass’ attribute is used to reference back to the style we created earlier which contains the icon that will be used for the button.

So, all of that results in a toolbar.

It’s really quite simple.  You no longer have to worry about writing basic navigation code such as creating the rectangular zoom box, zooming to the extent defined by the user, and other basic navigation functionality that most web mapping applications need.  The AGIS JavaScript API handles all that.  You just need to worry about hooking everything up.

More information about the ArcGIS Server JavaScript API?  The next session of our Mastering the ArcGIS Server JavaScript API course begins October 4th, 2010.  Only $567 when you register before August 31st.

Read Full Post | Make a Comment ( None so far )

Working with Layout Elements in the ArcPy Mapping Module

Posted on August 9, 2010. Filed under: ESRI, Geoprocessing, Python |

In my last post I introduced the ArcPy Mapping module, released with ArcGIS 10, which provides a number of capabilities including the management of map documents and layers, printing, exporting, ArcGIS Server publishing, map automation, and the creation of PDF map books.  Today we’re going to take a closer look at the Layout classes provided by the module.

The ListLayoutElements() function returns a list of Layout elements in the form of various Layout classes.  Each element can be one of: GraphicElement, LegendElement, PictureElement, TextElement, MapSurroundElement, or PictureElement as seen in the graphic below.

ListLayoutElements() is a versatile function which in its most basic form is used to return a list of all the layout elements on the page layout of a map document.  However, there are two optional parameters that you can supply to filter this list.  The first type of filter is an element type filter in which you specify that you only want to return one of the layout element types.  You can also apply a wildcard to filter the returned list.  These two types of filters can be used in combination.  For example, in the code below we are specifying that we only want to return LEGEND_ELEMENT objects with the name “Legend Crime”.  This would likely result in a highly filtered list, and as we can see only a single item was returned.

Each graphic on a layout has a ‘name’ property that you can view in ArcMap by right clicking the element and selecting Properties.  Most elements are assigned a default name if you don’t specifically supply one.  You should make it a best practice to assign a unique ‘name’ to each element on your page layout.  This will make it easier for you to access particular elements from your Python scripts.

Each element on the page layout has various properties that can be set through your Python code.  For example, in the code block below we are accessing a specific Legend element (“Legend Crime”) and assigning a new title to the legend.

In this case we are only changing the Legend title.  However, LegendElement provides other properties that enable it to be repositioned on the page layout as well as getting legend items and the parent data frame.

Below is a brief description of each of the layout elements accessible through Python.

The DataFrame class provides access to data frame properties in the map document file.  This object can work with both map units and page layout units depending upon the property being used.  Page layout properties such as positioning and sizing can be applied to the properties on this slide including elementPositionX, elementPositionY, elementWidth, and elementHeight.

The GraphicElement object is a generic object for various graphics that can be added to the page layout including tables, graphs, neatlines, markers, lines, and area shapes.  You’ll want to make sure that you set the ‘name’ property for each graphic element (and any other element for that matter) if you intend to access it through a Python script.

The LegendElement provides operations for positioning of the legend on the page layout, modification of the legend title, and also provides access to the legend items and the parent data frame.  A LegendElement can be associated with only a single data frame.

The MapsurroundElement can refer to north arrows, scale bars, and scale text and like LegendElement is associated with a single data frame.  Properties on this object enable repositioning on the page.

PictureElement represents a raster or image on the page layout.  The most useful property on this object allows for getting and setting the data source which can be extremely helpful when you need to change out a picture such as logo in multiple map documents.  For example, you could write a script that iterates through all your map document files and replaces the current logo with a new logo.  You can also reposition the object.

TextElement represents text on a page layout including inserted text, callouts, rectangle text and titles, but does not include legend titles or text that is part of a table or chart.  Properties enable modifying the text string which can be extremely useful in situations where you need to make the same text string change in multiple places in the page layout or over multiple map documents, and of course repositioning of the object is also available.

The next session of our Internet based, instructor led course, GIS Programming 101: Mastering Python for Geoprocessing in ArcGIS begins October 25th.  This course is only $499 when you register by August 31st.  The regular price of this course is $667.

Read Full Post | Make a Comment ( None so far )

Liked it here?
Why not try sites on the blogroll...