Developing Web Applications with the Web ADF - Web controls  

Web Control Overview


The Web ADF includes a set of Web controls to enhance the Web developer experience and provide a rapid application development environment.  All Web ADF controls are designed to work asynchronously within a Web application by utilizing AJAX capabilities and the Callback Manager included with ASP.NET 2.0.    The Web ADF includes a set of embedded resources (e.g. JavaScript libraries, images, CSS files) to manage asynchronous callbacks in the browser.  Likewise, these resources work with Web ADF controls that implement the ASP.NET 2.0 System.Web.UI.ICallbackEventHandler interface to process out-of-band callbacks and generate results on the server.   Web ADF JavaScript  resources are discussed in greater detail below.  

Web ADF controls leverage the Common Data Source API to interact with multiple sources of data as resources.  In most cases, resources are managed by a set of "resource manager" controls.  Other controls consume the managed resources  directly or via another control.  The diagram below illustrates the property relationships between Web ADF Core and Task framework controls and data sources supported out-of-the-box.  For example, the MapTips control uses the MapResourceManager to select a resource and layer on which to construct map tips and can be buddied with a Map control to display the map tips.   Likewise, the SearchAttributesTask uses the MapResourceManager to select the resources, layers, and fields in which to search.  The task can be buddied with a TaskResults control to display tabular results and the TaskResults control can be buddied with a Map control to display graphic results. 
    


The following sections provide a brief description of each Web control included with the Web ADF. 


MapResourceManager
The MapResourceManager control is often the first control added to a Web application.  The design-time interface allows you to add, remove, and set properties for any resource that provides mapped output, for example an ArcIMS Image Service or an ArcGIS Server map service.   Since the control is designed to manage multiple resources at the same time, it provides properties to define how the resources interact, such as the order of layers and transparency of map image output.   Multiple controls can use the same MapResourceManager to access the same set of resources.   As a result, changes to a resource by one control can be reflected in other controls associated with the same MapResourceManager.    

Map
The Map control is designed to display geographic data from one or more resources provided by different data source types.   It must be associated with a MapResourceManager to define the resources displayed within the map.   Multiple resources displayed in the same map are blended together and rendered as a single image.  Since each service is treated as a separate layer within the map, you can use the MapResourceManager to set transparency levels for each resource.  Advanced map tool functionality enables continuous panning and zooming capabilities without reloading the Web page that contains the map, and a full postback is not required.  In addition, game style navigation provides scroll-wheel zoom and keyboard navigation options at runtime.  A number of other Web ADF controls buddy with the map control to enhance the user experience with the map, such as the Toolbar, Navigation, MapTips, and ZoomLevel controls.   

Toc
The table of contents, or Toc control, lists the layers on the map and shows what the features represent.  A toc is buddied with a map control.  As a result, checking a layer in the toc control will draw it in the map control.  Each resource associated with a map control may contain one or more layers, thus the toc control represents each resource as a grouplayer; essentially a layer that contains layers.    

Toolbar
The Toolbar control can be associated with one or more map controls.  Toolbars contain functions for working with a map, such as common navigation tools like pan and zoom.  Custom tools can be added to the toolbar to enhance the capabilities of a Web application. 

Navigation
The Navigation control is associated with a single map control.  It provides common map navigation functions (pan and zoom) in a single control.  The control can also be moved dynamically on the Web page at runtime, thus an application user can choose the location of the control. 

ZoomLevel
The ZoomLevel control provides a set of levels, or map scales, representing different static extents the map control can zoom to.  The map control must reference a resource that contains at least one static layer, for example, an ArcGIS Server MapServer with a cached data layer.  When created, the cached data layer defines a set of levels, or scales, at which cached data was generated.  The ZoomLevel control uses these levels to define the number of segments displayed by the control. 

MapTips
The MapTips control provides the ability, at runtime, to hover the mouse over a point feature in a map and instantly display attribute information about the specific feature.   The control uses client-side logic in the browser to display features on top of the map control.   The MapTips control uses attribute information in a point feature layer, accessed via a resource in a MapResourceManager.  MapTips can retrieve information from a resource in one MapResourceManager and display it in another unrelated Map control.

OverviewMap
The OverviewMap control is similar to the Map control in that it displays geographic data.  However, the purpose of an overview map is to provide a point of reference for the area displayed on its associated Map control.  The OverviewMap control always displays greater extent than its associated map control.  An area of interest box on the overview map represents the currently displayed area on its associated Map control.   Note that the OverviewMap and Map control can use two different MapResourceManagers, thus different sources of data.     

FloatingPanel
The FloatingPanel control provides a floating window within a Web page that can contain other controls.  You can drag-and-drop, resize, and minimize the window within the browser.  Often FloatingPanels are used to enhance the usability and appearance of a Web page. When you add an OverviewMap or Toolbar to a floating panel, it can be minimized when not in use or dragged to a new location on the screen.

ScaleBar
The ScaleBar control provides a simple scalebar for the map.  It uses ArcGIS Server or ArcIMS resources in a Map control to calculate relative scale and construct the control.  

Magnifier
The Magnifier control extends the FloatingPanel control to provide a floating window which contains a map of a resource in the buddied Map control.  The map in the Magnifier control zooms in on the underlying Map control to show more detail without changing the extent of the map in the Map control.   A crosshair in the center of the Magnifier control enables the user to position the control over the Map to select an area to view.  A scale factor drop down list (from 2x to 10x the current Map extent) enables the user to select how much they want to zoom in on the Map.   

GeocodeResourceManager
The GeocodeResourceManager control allows a developer to add, remove, and set properties for any resource that provides geocoding services.   ArcGIS Server, ArcIMS and ArcWeb data sources can be utilized.  The FindAddressTask control is designed to use the resources provided by the GeocodeResourceManager to geocode address inputs. 

GeoprocessingResourceManager
The GeoprocessingResourceManager control allows a developer to add, remove and set properties for any resource that provides geoprocessing services.   Only ArcGIS Server geoprocessing services are supported at this time.  The GeoprocessingTask control is designed to use the resources provided by the GeoprocessingResourceManager to work with geoprocessing tasks on the server.    

TaskManager
The TaskManager control is designed to organize tasks in a Web application.   The TaskManager control generates hierarchical XML data that can be used by an ASP.NET navigation control such as a Menu or TreeView.  At runtime, nodes in the ASP.NET Menu or TreeView can be used to display the floating panel for a task.  It is only visible at design-time. 

TaskResults
The TaskResults control is designed to store the results of tasks that produce ADO.NET DataSet output.  The results are presented as nodes in a TreeView.  The TaskResults control also enables the ability to zoom or pan to a feature, highlight a feature in a result set, re-run a task, or remove task results.  

SearchAttributesTask
The SearchAttributesTask control enables a developer to select a set of fields, provided by resources, in which to search for the occurrence of a user provided value.  At runtime, each field is queried for the occurrence of a value provided by the user.  Partial values are permitted.  Only feature layers in resources provided by a MapResourceManager can be used.  The results are provided as an ADO.NET DataSet to be displayed in a TaskResults control. 

QueryAttributesTask
The QueryAttributesTask control enables a developer to explicitly define the parameters used to query values in a field.  This control enhances the basic query capability of the SearchAttributesTask.  At runtime, the a QueryAttributesTask query can provide a drop down list of preset choices or a textbox for general text entry.  Each query can also utilize a validator to restrict the values entered.  In addition, multiple queries can be grouped together to produce a single result.  Only feature layers in resources provided by a MapResourceManager can be used.  The results are provided as an ADO.NET DataSet to be displayed in a TaskResults control.        

FindPlaceTask
The FindPlaceTask control is designed to use ArcWeb services that provide searchable place name layers.  The control interface includes a simple textbox to enter a place name.  The results are provided as an ADO.NET DataSet to be displayed in a TaskResults control.  

FindAddressTask
The FindAddressTask control utilizes resources in the GeocodeResourceManager to perform geocode operations.  The control interface is created dynamically at runtime based on the inputs required by the geocode resource it will use.  The results are provided as an ADO.NET DataSet to be displayed in a TaskResults control. 

GeoprocessingTask
The GeoprocessingTask control utilizes resources in the GeoprocessingResourceManager to execute geoprocessing tasks.   The control interface is created dynamically at runtime based on the inputs required by the geoprocessing resource and task it will use.  The results, which include input and output parameters as well as progress messages, are provided as an ADO.NET DataSet to be displayed in a TaskResults control.

EditorTask
The EditorTask control provides a suite of tools for Web-based editing of features in both versioned and non-versioned enterprise geodatabases.   If configured, specific versions can be selected for editing.  The runtime dialog provides tool to modify, add, and remove feature geometry and attributes.     

PageLayout
The PageLayout control displays the layout of a map and is analogous to layout view in ArcMap.  It displays all of the map elements, including data frames and any map surrounds, such as north arrows and scale bars.  The PageLayout control is only supported for use with ArcGIS Server Local data sources. 


Web ADF JavaScript Libraries

By default, Web ADF JavaScript libraries are embedded in Web ADF controls and streamed via the ASP.NET HTTP Handler WebResource.axd to the client browser as needed.  ASP.NET 2.0 provides the ability to embed resources with Web controls to easily encapsulate and distribute server and client components in the same assembly. 

The Web ADF utilizes embedded resources to support client-side interaction with server-side controls.  Most notably, a set of Web ADF JavaScript files are embedded and streamed to a client browser at runtime to support client interaction with the server control.  The following table lists the JavaScript files included with the Web ADF.    The discussion page for each Web ADF control includes a list of JavaScript libraries required on the client to use the control.

JavaScript File  Description
display_common.js Required for all Web ADF controls.  Contains standard JavaScript functions for CSS layer display, element positioning, conversion and debugging.   
display_contextmenu.js Required for Web ADF controls that use the ContextMenu control.  Supports the display and selection of items within a context menu.
display_dotnetadf.js Required for all Web ADF controls.  Manages initial postback or callback requests and responses.   
display_editorSnapTip.js Manages snapping interaction and display properties for the EditorTask control.
display_editortask.js Manages client functions to edit spatial and attribute data with the EditorTask control.
display_floatingpanel.js Required for all Web ADF controls that use the FloatingPanel control.  Supports the display, movement and content of a floating panel. 
display_magnify.js Manages the display and navigation of the Magnifier control. 
display_map.js Manages the display of Map control contents (resources) and map actions.
display_maptips.js Contains functions to generate interactive map tips in a browser.  
display_navigation.js Manages the display and user interaction with the Navigation control. 
display_overview.js Manages map content and area of interest details for an OverviewMap control.
display_pagelayout.js Manages the display of PageLayout control contents (resources) and page layout actions.
display_task.js Required to support task execution and activity indicators.  
display_taskresults.js Manages the display and interaction with the TaskResults control.
display_toolbar.js Manages tool, command and drop down interaction in a Toolbar control. 
display_treeviewplus.js Required for all Web ADF controls that use the TreeViewPlus control, such as the Toc and TaskResults controls.  Manages node order and interaction.  
display_vector.js Manages vector based drawing tools and interaction with Map and PageLayout controls.  Utilizes VML and CSS.

Modifying Web ADF JavaScript files is not explicitly supported since all of the Web ADF controls depend on their content to function as expected.   However, you do have the option to configure Web ADF controls at design-time to use JavaScript files on disk instead of embedded resources.  Two properties are used to configure this capability for all Web ADF controls: UseDefaultWebResources and WebResourceLocation.   

UseDefaultWebResources defines whether a control will request embedded JavaScript or not.  True (embedded) is the default.   If false, the WebResourceLocation property will be used to locate JavaScript files on disk. 

WebResourceLocation must be set to a valid location from the perspective of the Web application.  The default value is "/aspnet_client/ESRI/WebADF/" which references the JavaScript files in the standard <IISROOT> folder (for example, c:\Inetpub\wwwroot\aspnet_client\ESRI\WebADF\JavaScript).  If WebResourceLocation is empty, the default value will be used.   In every case, the text "JavaScript/" will always be appended to the property value.   For example, if you copy a set of Web ADF JavaScript files to a "scripts/JavaScript" folder under the Web application root folder, the WebResourceLocation property value will be "scripts/".  

Note that each Web ADF control maintains its own set of properties, so it is possible that a single Web page contains some Web ADF controls that use embedded resources and some that do not.  With this in mind, Web ADF controls may disregard resource settings if the resource they need is already available to the browser.   For example, at runtime one Web ADF control loads in a Web page and requests an embedded JavaScript file which is streamed to the client browser.  Another Web ADF control, which is set to use non-embedded resources, loads in the page and needs the JavaScript file that was just streamed to the client.  This control will use the JavaScript already available instead of requesting the non-embedded file on disk.  This means that even though you set UseDefaultWebResources to false, the control may use the embedded resource retrieved by another control.  At the moment, these properties must be set individually for each control - they cannot be set once for an entire page or application. 


Using Web ADF Controls in Custom User Controls or Composite Controls

Web ADF controls are supported for use within custom Composite and Web User controls. Composite controls are created and managed in a separate class library project. Web User controls are items managed within a Web project. Composite controls provide the following advantages over Web User controls: 

  1. Better integration with VS2005. Class library projects that contain Composite controls are automatically referenced and added to the VS2005 toolbox.
  2. Richer design-time support. Control developers can create wizards and property editors for end developers to use when setting up a Composite control.
  3. Embedding resources in assembly. Resources (images, JavaScript files, etc.) can be embedded in the Composite control assembly so it's easy to distribute.

Unfortunately Composite controls do not have a graphic designer for control developers to visually create the control, like Web User controls do, but the tradeoffs are apparent.   In general, use Composite controls if you want to distribute a custom Web control that contains Web controls; use Web User controls for an application specific custom Web control that contains Web controls.