Working with the Toolbar control

In this topic

• Creating and configuring custom tools, commands, and drop-down items
• Configuring custom tools
• Setting a tool's client action
• Setting a tool's server action
• Configuring custom commands
• Toolbar control
• Controlling the toolbar's appearance
• Grouping toolbars

Creating and configuring custom tools, commands, and drop-down items

• End-user interacts with the Map control on the client—Client-side action is controlled by a set of JavaScript functions on the client. For example, the zoom box is a client-side graphic created in a Cascading Style Sheets (CSS) layer by JavaScript code and displayed on the map. The Web ADF includes a set of prewritten JavaScript libraries to manage client-side interaction with Web ADF controls. When the client-side action is completed, the client sends a request to the server to execute server-side actions. 
• Server executes an action based on client interaction—When the server receives a request from the client, it executes a server-side action. For example, if the server-side action is to zoom in, the server calculates the new extent for a map based on the user defined box and instructs a map service to draw using the new extent. This occurs on the server because it has access to the Map control and a set of classes that support interaction with map contents. 

Configuring custom tools

Setting a tool's client action

MapDragRectangle('Map1', '%toolbarItem%', false, 'hand');

var map = $find('Map1');
map.set_clientToolGraphicsColor('red');
map.set_clientToolGraphicsWidth('3px');
ESRI.ADF.MapTools.fillColor = 'green';
MapDragRectangle('Map1', '%toolbarItem%', true, 'hand');

var map = $find('Map1');
var onComplete = Function.createDelegate(map, function(geom){
    var env = new ESRI.ADF.Geometries.Envelope(geom.get_xmin(), geom.get_ymin(),
        geom.get_xmax(), geom.get_ymax()); map.zoomToBox(env); 
}

);
map.set_mouseMode(ESRI.ADF.UI.MouseMode.Custom);
map.getGeometry(ESRI.ADF.Graphics.ShapeType.Envelope, onComplete, null, 'green',
    'red', 'crosshair', true);

Setting a tool's server action

• ServerActionAssembly—Fully qualified display name of the assembly containing the code for the server-side action. This can be the name of a class library that you added to a Visual Studio solution or if you added a class to your current project, it is the name of your current project. If you added the code in the App_Code directory of your Web site, the ServerActionAssembly is App_Code.
• ServerActionClass—Fully qualified name of the class that contains the server-side action code. When you enter a valid ServerActionAssembly name, all of the available classes in the assembly become available in the ServerActionClass drop-down list (select a class from this list). You can manually enter the fully qualified class name. If the class is in a namespace, <namespace>.<classname> is the format.

• Make sure the class implements IMapServerToolAction or IPageServerToolAction, depending on the buddy control the tool uses.
• Build the solution immediately after adding the class to ensure the ServerActionAssembly and ServerActionClass names are recognized as valid.
• For more information, see Common Add Custom tool, Common Select Buffer tool, and Using the common data source API in a Web application.

Configuring custom commands

Toolbar control

public class CustomTool: IMapServerToolAction
{
    public void ServerAction(ToolEventArgs args)
    {
        Map map = (Map)args.Control;
        MapPointEventArgs pea = (MapPointEventArgs)args;
    }
}

public class CustomCommand: IMapServerCommandAction
{
    public void ServerAction(ToolbarItemInfo info)
    {
        Map map = (Map)info.BuddyControls[0];
    }
}

public class CustomDropDownBox: IMapServerDropDownBoxAction
{
    public void ServerAction(ToolbarItemInfo info)
    {
        DropDownBox dropDownBox = (DropDownBox)info.Toolbar.ToolbarItems.Find(
            "DropDownBoxId");
        string dropDownBoxValue = dropDownBox.SelectedValue;
    }
}

[C 
# ]
protected void Toolbar1_CommandClick(object sender, ToolbarCommandClickEventArgs
    args)
{
    switch (args.CommandName)
    {
        case ("CustomCommand1"): 
        {
            // Do something.
            break;
        }
        case ("CustomCommand2"): 
        {
            // Do something.
            break;
        }
    }
}

Controlling the toolbar's appearance

• ImageAndText
• TextOnly
• ImageOnly

• ToolbarItemDefaultStyle—Style applied to commands and tools when they are not disabled, hovered upon, or in the case of tools, selected.
• ToolbarItemHoverStyle—Style applied to commands and tools when hovered upon.
• ToolbarItemDisabledStyle—Style applied to commands and tools when the Disabled property is set to true.
• ToolbarItemSelectedStyle—Style applied to the CurrentTool of the toolbar. It is also applied to a command when clicked and until the page refreshes.  

Grouping toolbars

See Also: