Developing Custom Web Tasks Using the.net Web ADF. Sentha Sivabalan and Rex Hansen

Size: px

Start display at page:

Download "Developing Custom Web Tasks Using the.net Web ADF. Sentha Sivabalan and Rex Hansen"

Megan Clarke
5 years ago
Views:

1 Developing Custom Web Tasks Using the NET Web ADF Sentha Sivabalan and Rex Hansen

2 Session Topics Overview of the Web ADF Task Framework Task Runtime Customization Visual Studio Integration Manager Integration Task Deployment Debugging

3 Our assumptions Proficiency in Technology ASPNET Web Development techniques HTML/JavaScript Understanding of ESRI Server Products ArcGIS Server Web ADF Examples and discussion will use Visual StudioNET 2005 SP1 ASPNET 20 C# ArcGIS Server for Microsoft NET Web ADF Developer Summit

4 ArcGIS Server Web ADF Overview AJAX enabled GIS Web controls Extend, distribute custom functionality Multi-source support Web-tier graphics, geometry, rendering

5 Web ADF Task Framework Build custom Web Tasks Web tasks are visual components designed to perform a set of related actions and generate a common result Out-of of-the-box Tasks SearchAttributes FindAddress FindPlace QueryAttributes Geoprocessing Editor Extensible framework to support creating and deploying custom tasks

6 Custom Web Task Implementation Basic task implements ITask Create a custom Web control Extend Task or FloatingPanelTask abstract base classes CustomTask ESRIArcGISADFWebUIWebControls FloatingPanelTask ICallbackEventHandler IBuddyControlSupport ITask ESRIArcGISADFWebUIWebControls FloatingPanel ASPNET Web Controls

7 Why use the Task Framework? Distributable UI components Can be used by any Manager User Framework provides for: Organization of tasks Feedback when a task is executing Management of results Display Visualization on Map Delete, Refresh, Re-run

8 Custom Task Classes in this Session NET Class Library Project ITask Task Required Optional TaskDesigner DevTask Designer Floating PanelTask IWebConfigurator DevTask WebConfigurator DevTask ITaskResultsContainer TaskResults Custom TaskResults

9 Key methods and properties Methods CreateChildControls create the visual interface GetCallbackResult process callback content ExecuteTask execute the task and generate results Properties Input store input data from the user Results after task execution, generate results for use in a TaskResults control CallbackResults collection of results designed to update browser content using Web ADF JavaScript

10 Design Task Runtime Interface for user input Override CreateChildControls Create content user will interact with in the browser Called on every postback\callback callback during Page Load DevTaskcs [SystemWebUIToolboxData("<0}:DevTask [SystemWebUIToolboxData("<0}:DevTask runat\"server\" runat\"server\" > > </0}:DevTask>")] </0}:DevTask>")] class class DevTask: DevTask: ESRIArcGISADFWebUIWebControlsFloatingPanelTask ESRIArcGISADFWebUIWebControlsFloatingPanelTask private private SystemWebUIWebControlsTextBox SystemWebUIWebControlsTextBox textbox textbox null; null; protected protected CreateChildControls() CreateChildControls() basecreatechildcontrols(); basecreatechildcontrols(); textbox textbox SystemWebUIWebControlsTextBox(); SystemWebUIWebControlsTextBox(); textboxid textboxid "textbox"; "textbox"; ControlsAdd(textBox); ControlsAdd(textBox);

11 Utilize ADF JavaScript to execute task Task and FloatingPanelTask include Web ADF JavaScript to support task execution Manage events in browser to execute task display_taskjs function function executetask( executetask( DevTaskcs function function startactivityindicator startactivityindicator protected protected CreateChildControls() CreateChildControls() function function startjob startjob getargumentjs getargumentjs Format("'textBoxValue' Format("'textBoxValue' + + documentgetelementbyid('0}')value", documentgetelementbyid('0}')value", textboxclientid); textboxclientid); onclick onclick Format("executeTask(0},\"1}\");", Format("executeTask(0},\"1}\");", getargumentjs, getargumentjs, CallbackFunctionString); CallbackFunctionString); buttonattributesadd("onclick", buttonattributesadd("onclick", onclick); onclick); } }

12 Task execution in the browser At runtime, a browser event triggers task execution User input is passed as argument\value pairs to the executetask JavaScript function MyPageaspx (includes DevTask control) onclick onclick"executetask onclick"executetask ('textboxvalue' ('textboxvalue' + + documentgetelementbyid('devtask1_textbox')value, documentgetelementbyid('devtask1_textbox')value, "WebForm_DoCallback('DevTask1',argument,processCallbackResult,context,postBackError "WebForm_DoCallback('DevTask1',argument,processCallbackResult,context,postBackError,true)");",true)");" display_taskjs function function executetask( executetask(

13 Processing user input Task and FloatingPanelTask designed to work with callbacks by implementing ICallbackEventHandler RaiseCallbackEvent captures event arguments (_callbackarg callbackarg) GetCallbackResult processes inputs, executes task Input property stores user input Storage format determined by developer DevTaskcs GetCallbackResult() GetCallbackResult() SystemCollectionsSpecializedNameValueCollection SystemCollectionsSpecializedNameValueCollection keyvalcoll keyvalcoll CallbackUtilityParseStringIntoNameValueCollection(_callbackArg); CallbackUtilityParseStringIntoNameValueCollection(_callbackArg); Input Input keyvalcoll["textboxvalue"]; keyvalcoll["textboxvalue"]; return return basegetcallbackresult(); basegetcallbackresult(); } }

14 Executing the Task Implement the ExecuteTask method FloatingPanelTask calls ExecuteTask from GetCallbackResult method DevTaskcs GetCallbackResult() GetCallbackResult() ExecuteTask() ExecuteTask() FloatingPanelTaskcs GetCallbackResult() GetCallbackResult() eventarg eventarg keyvalcoll["eventarg"]; keyvalcoll["eventarg"]; else else if if (eventarg (eventarg "executetask") "executetask") ExecuteTask(); ExecuteTask(); DisplayResults(taskJobID, DisplayResults(taskJobID, Input, Input, Results); Results); } } return return CallbackResultsToString(); CallbackResultsToString(); } }

15 Generating Results Results property stores content to be displayed in a TaskResults control TaskResultsDisplayResults method works with: SimpleTaskResult Dataset TaskResultNode DevTaskcs ExecuteTask() ExecuteTask() textboxvalue textboxvalue Input Input as as ; ; ESRIArcGISADFWebUIWebControlsSimpleTaskResult ESRIArcGISADFWebUIWebControlsSimpleTaskResult simpleresult simpleresult ESRIArcGISADFWebUIWebControlsSimpleTaskResult(heading, ESRIArcGISADFWebUIWebControlsSimpleTaskResult(heading, detail); detail); Results Results simpleresult; simpleresult;

16 Working with Task Results Use methods on the TaskResults container to prepare content Use TaskResultNodes to package Web ADF graphics results DevTaskcs ExecuteTask() ExecuteTask() SystemDataDataSet SystemDataDataSet dataset dataset SystemDataDataSet(); SystemDataDataSet(); datasettablesadd(graphicslayer); datasettablesadd(graphicslayer); TaskResultNode TaskResultNode trn trn TaskResultNode(datasetDataSetName); TaskResultNode(datasetDataSetName); taskresultssetuptaskresultnode(null, taskresultssetuptaskresultnode(null, null, null, null, null, trn); trn); TreeViewPlusNode TreeViewPlusNode tvpn tvpn taskresultscreatedatatablenode(graphicslayer, taskresultscreatedatatablenode(graphicslayer, true, true, true, true, true, true, "graphicsid", "graphicsid", "Parcel "Parcel Numbers"); Numbers"); trnnodesadd(tvpn); trnnodesadd(tvpn); Results Results tvpn; tvpn;

17 Working with CallbackResults Upon task execution, callback response is returned from custom task GetCallbackResult method CallbackResults are callback messages formatted to be processed by Web ADF JavaScript All Web ADF controls maintain a CallbackResults collection DevTaskcs ExecuteTask() ExecuteTask() mapcenterat(mypoint); mapcenterat(mypoint); CallbackResultsCopyFrom(mapCallbackResults); CallbackResultsCopyFrom(mapCallbackResults); } } Push Web ADF control and custom callback results into task callback results

18 Task Runtime Workflow Task Execution Start Activity Indicator Execute Task

19 Enhance Task Usability in the Browser Include multiple arguments and values in callback request getargumentjs getargumentjs Format(" Format(" 'textboxvalue' 'textboxvalue' + + documentgetelementbyid('0}')value documentgetelementbyid('0}')value + + '&dropdownlistvalue' '&dropdownlistvalue' + + documentgetelementbyid('1}')value", documentgetelementbyid('1}')value", textboxclientid, textboxclientid, dropdownlistclientid); dropdownlistclientid); Set FloatingPanel properties protected protected OnPreRender(EventArgs OnPreRender(EventArgs e) e) baseonprerender(e); baseonprerender(e); Title Title "DevTask "DevTask Example"; Example"; BackColor BackColor SystemDrawingColorCornflowerBlue; SystemDrawingColorCornflowerBlue; BorderColor BorderColor SystemDrawingColorDarkBlue; SystemDrawingColorDarkBlue; BorderStyle BorderStyle SystemWebUIWebControlsBorderStyleSolid; SystemWebUIWebControlsBorderStyleSolid; BorderWidth BorderWidth SystemWebUIWebControlsUnitPixel(1); SystemWebUIWebControlsUnitPixel(1); Style[SystemWebUIHtmlTextWriterStyleWidth] Style[SystemWebUIHtmlTextWriterStyleWidth] "200px"; "200px";

Embedded Resources Embed resources used by the task Images and JavaScript Easy to deploy, included in the task assembly AssemblyInfocs [assembly: WebResource("DevTaskProjectdevsummit_logo07gif",

20 Embedded Resources Embed resources used by the task Images and JavaScript Easy to deploy, included in the task assembly AssemblyInfocs [assembly: WebResource("DevTaskProjectdevsummit_logo07gif", "image/gif")] [assembly: WebResource("DevTaskProjectdevsummit_logo07gif", "image/gif")] [assembly: WebResource("DevTaskProjectDevTaskjs", "text/javascript")] [assembly: WebResource("DevTaskProjectDevTaskjs", "text/javascript")] DevTaskcs protected protected CreateChildControls() CreateChildControls() SystemWebUIHtmlControlsHtmlImage SystemWebUIHtmlControlsHtmlImage image image SystemWebUIHtmlControlsHtmlImage(); SystemWebUIHtmlControlsHtmlImage(); imagesrc imagesrc PageClientScriptGetWebResourceUrl(typeof(DevTask), PageClientScriptGetWebResourceUrl(typeof(DevTask), "DevTaskProjectdevsummit_logo07gif"); "DevTaskProjectdevsummit_logo07gif");

21 Manage Non-executing callbacks Initiate callbacks to update task control in preparation to execute May use embedded JavaScript DevTaskjs DevTaskcs function function sendrequest( sendrequest( protected protected OnPreRender(EventArgs OnPreRender(EventArgs e) e) scriptlocation scriptlocation PageClientScriptGetWebResourceUrl(typeof(DevTask), PageClientScriptGetWebResourceUrl(typeof(DevTask), "DevTaskProjectDevTaskjs"); "DevTaskProjectDevTaskjs"); PageClientScriptRegisterClientScriptInclude("DevTaskProject", PageClientScriptRegisterClientScriptInclude("DevTaskProject", scriptlocation); scriptlocation); protected protected CreateChildControls() CreateChildControls() onclick onclick Format("sendRequest(0}, Format("sendRequest(0}, \"1}\");", \"1}\");", getargumentjs, getargumentjs, CustomCallbackFunction); CustomCallbackFunction);

22 Accessing Web ADF Resources at Runtime Only needed during initial load? Use PreRender Needed during every callback? Use CreateChildControls or Load DevTaskcs protected protected OnPreRender(EventArgs OnPreRender(EventArgs e) e) baseonprerender(e); baseonprerender(e); UpdateResources(); UpdateResources(); } } private private UpdateResources() UpdateResources() MapResourceManager MapResourceManager rm rm (MapResourceManager)PageFindControl(mrmID); (MapResourceManager)PageFindControl(mrmID); if if (!rminitialized) (!rminitialized) rminitialize(); rminitialize();

23 Refine custom task control Add a custom tag prefix Define a version AssemblyInfocs [assembly: [assembly: SystemWebUITagPrefix("DevTaskProject", SystemWebUITagPrefix("DevTaskProject", "devtask")] "devtask")] [assembly: [assembly: AssemblyVersion("1100")] AssemblyVersion("1100")] [assembly: [assembly: AssemblyFileVersion("1100")] AssemblyFileVersion("1100")] MyPageaspx or WebConfig <%@ <%@ Register Register Assembly"DevTaskProject, Assembly"DevTaskProject, Version1100, Version1100, Cultureneutral, Cultureneutral, PublicKeyTokena b9d17c" PublicKeyTokena b9d17c" Namespace"DevTaskProject" Namespace"DevTaskProject" TagPrefix"devTask" TagPrefix"devTask" %> %>

24 Visual Studio Integration Custom attributes Extend TaskDesigner to manage smart tags Enable Web ADF resource access Custom toolbox image VS 2005 Custom Task

25 Custom task attributes Set properties at design-time, change runtime behavior DevTaskcs ButtonText ButtonText get get object object o o StateManagerGetProperty("buttonText"); StateManagerGetProperty("buttonText"); return return (o (o null) null)?? "Execute "Execute Task" Task" : : o o as as ; ; } } set set StateManagerSetProperty("buttonText", StateManagerSetProperty("buttonText", value); value); } } } } MyPageaspx (design-time) <devtask:devtask <devtask:devtask ID"DevTask1" ID"DevTask1" runat"server" runat"server" ButtonText"Custom ButtonText"Custom Text"> Text"> </devtask:devtask> </devtask:devtask>

Extend TaskDesigner Visual interface for modifying task properties at design- time DevTaskcs [SystemComponentModelDesigner(typeof(DevTaskDesigner))]

26 Extend TaskDesigner Visual interface for modifying task properties at design- time DevTaskcs [SystemComponentModelDesigner(typeof(DevTaskDesigner))] [SystemComponentModelDesigner(typeof(DevTaskDesigner))] class class DevTask: DevTask: ESRIArcGISADFWebUIWebControlsFloatingPanelTask ESRIArcGISADFWebUIWebControlsFloatingPanelTask DevTaskDesignercs class class DevTaskDesigner DevTaskDesigner : : TaskDesigner TaskDesigner DevTaskDesigner() DevTaskDesigner() : : base() base() verbsadd( verbsadd( DesignerVerb("Edit DesignerVerb("Edit the the button button text", text", EventHandler(OnEditButtonText))); EventHandler(OnEditButtonText))); } }

Refine visual display of control in Visual Studio Toolbox image for custom task Web control DevTaskcs [SystemDrawingToolboxBitmap(typeof(DevTask))]

27 Refine visual display of control in Visual Studio Toolbox image for custom task Web control DevTaskcs [SystemDrawingToolboxBitmap(typeof(DevTask))] [SystemDrawingToolboxBitmap(typeof(DevTask))] class class DevTask: DevTask: ESRIArcGISADFWebUIWebControlsFloatingPanelTask ESRIArcGISADFWebUIWebControlsFloatingPanelTask

28 Manager Integration Runtime rendering in Manager Custom Task Implement IWebConfigurator interface Resource dependencies and validation Managing output to Web Mapping Application Manager

Design Web control to modify custom task To configure a task in Manager requires a custom Web control DevTaskWebConfiguratorcs class class DevTaskWebConfigurator: DevTaskWebConfigurator:

29 Design Web control to modify custom task To configure a task in Manager requires a custom Web control DevTaskWebConfiguratorcs class class DevTaskWebConfigurator: DevTaskWebConfigurator: ESRIArcGISADFWebUIWebControlsCompositeControl ESRIArcGISADFWebUIWebControlsCompositeControl private private SystemWebUIWebControlsButton SystemWebUIWebControlsButton okbutton; okbutton; protected protected CreateChildControls() CreateChildControls() okbutton okbutton SystemWebUIWebControlsButton(); SystemWebUIWebControlsButton(); okbuttonclick okbuttonclick + + EventHandler(okButton_Click); EventHandler(okButton_Click);

30 IWebConfigurator implementation Manager events and properties available by implementing interface Properties ControlToConfigure: : returns an instance of the Task AdditionalControls: : returns other controls in same Page as the Task ValidateResources: : determine if a required resource is available Event Handlers WebConfigurationCompleteEventHandler: : use to handle events when finished configuring the Task WebConfigurationCancelledEventHandler: : use to handle events when configuring the Task is cancelled

31 Configure custom task properties ControlToConfigure returns an instance of the custom task Handle OnWebConfigurationComplete event DevTaskWebConfiguratorcs class class DevTaskWebConfigurator: DevTaskWebConfigurator: ESRIArcGISADFWebUIWebControlsIWebConfigurator ESRIArcGISADFWebUIWebControlsIWebConfigurator private private DevTask DevTask TaskInstance TaskInstance null; null; private private okbutton_click(object okbutton_click(object sender, sender, EventArgs EventArgs e) e) TaskInstanceButtonText TaskInstanceButtonText buttontexttext; buttontexttext; OnWebConfigurationComplete( OnWebConfigurationComplete( WebConfigurationCompleteEventArgs WebConfigurationCompleteEventArgs (TaskInstance, (TaskInstance, getdesigntimetag())); getdesigntimetag()));

32 Resource validation in Manager Implement ValidateResources to determine if a valid resource is available DevTaskWebConfiguratorcs bool bool ValidateResources(out ValidateResources(out message) message) ArrayList ArrayList mrms mrms ArrayList(); ArrayList(); UtilityFindControls(typeof(MapResourceManager), UtilityFindControls(typeof(MapResourceManager), AdditionalControls, AdditionalControls, ref ref mrms); mrms); Implement GetGISResourceItemDependencies to reset task when dependent resource is removed DevTaskcs List<GISResourceItemDependency> List<GISResourceItemDependency> GetGISResourceItemDependencies() GetGISResourceItemDependencies() List<GISResourceItemDependency> List<GISResourceItemDependency> list list List<GISResourceItemDependency>(); List<GISResourceItemDependency>(); listadd( listadd( GISResourceItemDependency(typeof(MapResourceItem), GISResourceItemDependency(typeof(MapResourceItem), mritem, mritem, typeof(mapresourcemanager), typeof(mapresourcemanager), mrmanager)); mrmanager));

33 Generating Web Mapping Application output Create output of declarative content for the Web Mapping Application DevTaskWebConfiguratorcs private private getdesigntimetag() getdesigntimetag() opentag opentag Format("<devTask:DevTask Format("<devTask:DevTask ID\"0}\" ID\"0}\" runat\"server\", runat\"server\", TaskInstanceID); TaskInstanceID); StringBuilder StringBuilder trctag trctag StringBuilder(); StringBuilder(); trctagappend("<taskresultscontainers>"); trctagappend("<taskresultscontainers>"); trctagappend("<esri:buddycontrol trctagappend("<esri:buddycontrol Name\"TaskResults1\" Name\"TaskResults1\" />"); />"); trctagappend("</taskresultscontainers>"); trctagappend("</taskresultscontainers>"); endtag endtag "</devtask:devtask>"; "</devtask:devtask>"; return return alltagstostring(); alltagstostring();

34 Register with custom task and Manager Add attribute to custom task DevTaskcs [WebConfigurator(typeof(DevTaskWebConfigurator))] [WebConfigurator(typeof(DevTaskWebConfigurator))] class class DevTask: DevTask: ESRIArcGISADFWebUIWebControlsFloatingPanelTask ESRIArcGISADFWebUIWebControlsFloatingPanelTask Modify Tasksxml Located in <ArcGIS< Instance>\Manager Manager\Applications\App_DataApp_Data Tasksxml <Task <Task Name"DevTask" Name"DevTask" DisplayName"DevSummit DisplayName"DevSummit Task" Task" Type"DevTaskProjectDevTask, Type"DevTaskProjectDevTask, DevTaskProject, DevTaskProject, Version1100, Version1100, Cultureneutral, Cultureneutral, PublicKeyTokena b9d17c" PublicKeyTokena b9d17c" TagPrefix"devTask" TagPrefix"devTask" /> />

35 Task Deployment Best Practices Start with Task or FloatingPanelTask base classes Already provides some implementation code Define a standard and unique tag prefix Abitrary tag prefix may conflict with other custom tasks Embed resources - images, JavaScript Sign and register (GAC) Use an Installer!

36 Debugging Web Application runtime Manager runtime IIS - ASPNET worker process XP: aspnet_wpexe 2003: w3wpexe Attach to process Visual Studio design-time VS2005 Task Source VS2005 Web Application devenvexe

37 Custom Task Demo Developer Summit

38 Presentation materials PowerPoint presentation and code are posted on the conference web site EDN downloads and videos Developer Summit

39 Microsoft Keynote Wednesday 6:00pm Oasis 2 Eddie Amos Senior Director, Developer & Platform Evangelism

40 Further questions? TECH-TALK TALK AREAS What: Further opportunity to discuss questions and concerns with presenters and subject matter experts Where: When: during the next 30 minutes ESRI Showcase Meet the teams ESRI Developers Network (EDN) website Developer Summit

41 Thank you

Schedule. 75 minute session. Cell phones and pagers. Please complete the session survey we take your feedback very seriously!

Schedule. 75 minute session. Cell phones and pagers. Please complete the session survey we take your feedback very seriously! Building and Extending Tasks for ArcGIS Server.NET Web Applications Rex Hansen, Sentha Sivabalan ESRI Developer Summit 2008 1 Schedule 75 minute session 60 65 minute lecture 10 15 minutes Q & A following