Hexagon Geospatial
MENU

Developers Knowledge Base

WebGIS enables powerful geospatial web applications and services that securely share your organization’s rich geospatial data, and provides tools to deeply examine spatial data and create value added products, on demand.
Showing results for 
Search instead for 
Do you mean 

Custom toolbar control

by Technical Evangelist on ‎09-02-2015 06:43 AM - edited on ‎04-06-2017 06:32 AM by Technical Evangelist (884 Views)

Add new class

  • Creating controls in this way requires some boilerplate code.
  • Fortunately we have Visual Studio code snippets! Available to download in attachements below.

toolbar_1.png

C# Part

  • Remove all the generated code
  • Start typing: toolbar...
  • Press tab two times
  • Fill the necessary snippet variables

toolbar_2.png

  • MyLibrary can stay as it is since this is our namespace name.
  • Replace MyControl with HelloToolbar.
  • Visual Studio generates the code.

toolbar_3.png

 

We are:

  • Registering embedded resource MyLibrary.HelloToolbar.js in the assembly.
  • Using ClientScriptResource attribute to make a contract on our JavaScript implementation.
  • Implementing IMapToolbar interface:
    • Inheriting from ExtJS Component.
    • Control will be rendered within HTML span tag.
    • MapToolbarCategoryID property

JavaScript Part

  • Add new Javascript file and set HelloToolbar as its name.
  • Name must be the same as registered in the WebResource contract.
  • Name must be the same as registered in the ClientScriptResource contract.
  • Remember to set new Javascript file’s compilation action as Embedded Resource (not as Content).

toolbar_5.png

 

toolbar_6.png

 

  • Fortunately we have Visual Studio snippet also for the Javascript part.
  • Start typing: control...
  • MyLibrary namespace can stay as it is our namespace.
  • Use HelloToolbar as the control’s name (as it was contracted in the C# part).
  • Use ExtJS.Controls.Component as the base class for registration of the control.

toolbar_7.png

  • Add very simple implementation inside of the getExtConfig empty javascript object:
    • xtype: button
    • text...
    • handler...
  • Code is wrapped in !(function(){})(); to avoid
    • global namespace pollution
    • concatenation errors.

toolbar_8.png

 

Remember to set the Build Action to Embedded Resource!

 

Otherwise ASP.NET won’t know about this code. Since it is registered in the C# part, not having an embedded resource like that would produce an error.

 

toolbar_9.png

 

Make an instance of your control in the Toolbar

 

  • Examples.aspx.cs file or MyPage.aspx.cs if ready!
  • Find SetUpMyToolbar method
  • Add your control MyLibrary.HelloToolbar in the same manner as other controls are added
    t.Add(MapToolbarCategory.Tools, new MyLibrary.HelloToolbar());
  • Build the solution
  • Your portal is ready to run!

toolbar_10.png

 

Summary

 

  • Creating toolbar control in this way seems to be much more complicated in comparison with adding it through $GP API...
  • For simple customizations it is not recommended but for heavier controls and for control sets that require translations, possibility to be enabled or disabled from the admin console, it is recommended.
  • Actually... it is not really the old-school ASP.NET where server-side code is mixed with JS code.
  • We are using ASP.NET and AjaxControlToolkit for script dependency management.

sidebar_11.png

Overview