How to create a Web application with Web controls

Summary The Web Application Developer Framework (ADF) includes predefined controls that you can add to existing Web applications or use to create new Web applications quickly and efficiently. The Web ADF controls are integrated with the visual design-time environment provided by Visual Studio 2008.

This topic shows how to create a Web application from scratch using the Web ADF controls.

Creating a Web application with Web controls

  1. Start Visual Studio 2008 and create a new project.
  2. Click the file menu, click New, and select Web Site. The New Web Site dialog box opens as shown in the following screen shot:
  1. Set the Location value to HTTP and the Language value to your language of choice.
  2. Under Visual Studio installed templates, click ASP.NET Web Site.
  3. Type a name and location for the Web application and click OK. Visual Studio 2008 opens a blank Default.aspx page in design view.
  4. Open the Visual Studio Toolbox, expand the ArcGIS Web Controls tab, and drag a MapResourceManager control and a Map control onto the Default.aspx page.
  5. Set the ResourceItems property on the MapResourceManager control by clicking the Edit Resources verb on the control in the design view. Alternatively you can also click on the ellipsis next to the ResourceItems property on the MapResourceManager property page to display the MapResourceItem Collection Editor dialog box. See screenshot below.
 
 
  1. Click Add to add a new MapResourceItem. Set its Definition property by clicking the ellipsis on the property page to display the Map Resource Definition Editor. Select a resource type and define the appropriate properties. See the Add Resources section in the MapResourceManager control topic for more information. In general, you can use any resource type that generates a map image.
  2. Close the MapResourceItem Collection Editor.
  3. Set the MapResourceManager property on the Map control by selecting the Map control in design view or in the Properties window, clicking the drop-down list for the MapResourceManager property, and selecting the name of the MapResourceManager control added in step 6 (the default is MapResourceManager1).
  4. Change the size of the Map control to at least 300x300 pixels. This is not required; however, it will make the Map easier to visualize on the page.
  5. Add a Toc control to the Default.aspx page.
  6. Change the positioning of the control to be absolute, which enables the control to be placed anywhere on the page. By default, Visual Studio 2008 adds controls in flow layout. To change the position do the following:
    1. In design view, click the Toc control.
    2. Click the Format menu and click Position. The following Position dialog box appears:


    3. On the Position dialog box, click Absolute under the "Positioning style" section, then click OK.
  7. Select the Toc control in design view and drag it to another location on the page. It will immediately display in the upper left corner of the page. This is default behavior associated with Web control positioning in Visual Studio 2008. Select the Toc control again and drag it to the right of the Map control.
  8. Set the BuddyControl property on the Toc control by selecting the Toc control in design view or in the Properties window and clicking the drop-down list for the BuddyControl property. The list includes the names of Map controls available on the page. Select the name of the Map control added in step 6 (the default is Map1). This buddies the Toc with the Map control.
  9. Add a Toolbar control to the Default.aspx page.
  10. Set the BuddyControls property on the Toolbar control by selecting the Toolbar control in design view or in the Properties window and clicking the ellipsis for the BuddyControls property. The BuddyControl Collection Editor dialog box opens.
  11. Add a new item and set its Name property to the name of the Map control added in step 6 (the default is Map1).
  12. Set the ToolbarItems property on the Toolbar control by selecting the Toolbar control in design view or in the Properties window and clicking the ellipsis for the ToolbarItems property.  The ToolbarItems Collection Editor dialog box opens.
  13. Add all tools under the Navigation Tools node. See the Add Toolbar Items section in the Toolbar control topic for more information. 
  14. Click OK to exit the ToolbarItems Collection Editor dialog box editor and save all changes to the Web site. In design view, the site should appear as follows:

  1. Click Start to run the application. Explore the interface of the Web application. For example, click the Zoom In tool on the toolbar and drag a rectangle over the map.
  2. Click Stop to stop the application and close the browser window.