CONSUMER PORTAL SDK OVERVIEW etraining

Transcription

1 CONSUMER PORTAL SDK OVERVIEW etraining Introduction See what s available in the new Consumer Portal SDK by trying a few code examples with the embedded source code editor, and then access the product documentation. Software Consumer Portal SDK Data Open Street Map Tiles DEMIS WorldMS Transcript 0:10 0:25 0:31 Thank you for watching Consumer Portal SDK from Hexagon Geospatial etraining. In this video we ll see what s available in the new Consumer Portal SDK. We ll also try a few code examples with the embedded source code editor, and then access the product documentation. This video assumes you are a developer and are proficient in JavaScript and C# (C sharp). Let s look at the tools available in the Consumer Portal SDK. These tools allow us to customize the product or to build new tools. We can do this using the same public API and the same style, familiar playground page with code examples, and the source code editor as in previous versions of Consumer Portal. 0:51 We ll begin with Consumer Portal open to the examples.html layout. This layout allows us to show the possibilities for customizing the product. 1:00 On the right side of the Consumer Portal, there is a set of icons that opens the sidebar panel with examples. We ll select several of these icons, beginning with Code Examples. 1. Click the Code Examples icon to open a list of available code examples. 1:15 This set of code examples and custom ExJS library mockups show how easy it is to build a new user interface and features. 1:23

2 For now, we ll just see what s available. Later, we ll work with these code examples in the embedded source code editor for rapid prototyping. 2. Click the Tab Panel icon to open Active, Inactive, and Disabled tabs to show examples of implementing custom user interface using the ExtJS 4 library. 1:42 The content of the Active tab can point to several external sources or to the ExtJS library examples page documentation. 3. Click the hyperlink in the Active tab to show the external source, an external URL with documentation and third-party examples. 1:59 Now we ll look at the Check Tree, which is also an example mockup of a custom user interface. 4. Click the Check Tree icon to open its contents. 2:08 Notice that in the To Do list Read the documentation is selected, reminding us to check what we have already done. 5. Click Get checked nodes to open the Selected Nodes dialog. 2:20 This presents a third-party user interface library able to easily manipulate user interface elements and get responsive information of the application state. 6. Click X to close the Selected Nodes dialog. 2:33 This is a mockup of processing the information from the dialog in the user interface. 7. Uncheck Read the documentation in the panel, and then select Develop customization. 8. Click Get checked node, to reopen the dialog and see the modified list. 9. Again close the Selected Nodes dialog. 10. Select Read the documentation and Practice with code examples, and then click Get checked nodes. 3:01 Now all three tasks display in the Selected Nodes dialog. 11. Close the Selected Nodes dialog.

3 3:08 Next we ll look at the Login Form, which shows a mockup of Authorization control. This shows how easy it is to develop custom dialogs in the user interface. A final application would log in to ERDAS APOLLO Catalog, for example, or some other secured service. 12. Click the Login Form icon to show the required login information. 3:28 Now we ll look at Accordion. 13. Click the Accordion icon to show the available accordions in the panel. 3:34 Accordions are mockups of this popular user interface pattern. We can use them to place many more complex panels in a limited space in the user interface. This user interface pattern is familiar to the users of Geospatial Portal. 3:49 Finally, we ll look at the Slider. This mockup sets, resets, and saves sound settings. 14. Click the Slider icon to open Sound Settings, and then set the controls. 15. Each setting can be manually changed by using the sliders or Max All to set each option to the maximum volume. 16. Click Save to save the settings and open the Settings Saved dialog, and then click OK to close the Settings Saved dialog. 17. To return the settings to the original defaults, click the Reset button. 4:19 4:40 4:58 5:22 Now let s go back to the Code Examples and demonstrate some available features with code examples that perform meaningful operations. These examples should be familiar to users of 2014 SDK with Geospatial Portal (Professional) though presented in the new Consumer Portal environment, which shows that the API is backwards compatible. In the following workflows we ll use the embedded source code editor. Clicking a code example in Code Examples on the sidebar panel launches the code in the editor dialog. After editing the code, clicking Run on the editor dialog lets us test the code but not does change the actual application. This editor provides a tool for rapid prototyping. It does not affect the application; it is only for experimenting and building a set of commands and then immediately seeing their effects. After experimenting, we can put such code into the actual application by editing the HTML or JavaScript file, and can place this code inside the $GP.ready function invocation. We can use this same method with buttons. Clicking Run does not add buttons to the application but helps to prototype the functionality and so speed up development.

4 5:31 The embedded code editor, however, is different from Visual Studio. The editor is only for prototyping. Visual Studio is used with Geospatial Portal as it is built on top of the.net/sp.net stack, and some modifications require recompiling the source code. For Consumer Portal, we can use any other text editor. 18. From the Legend Manipulation group select Switch on/off legend items to open the embedded source code editor in the Switch on/off legend items dialog. 19. Hover the mouse over Switch on/off legend items in the panel to see a tooltip describing what this code does. 20. Click the Layers control, and then select virtual mosaic to apply this to the virtual mosaic layer. 6:18 Showing layers here indicates what the current state is, and then the updated state after using Switch legend items on/off. 21. Click Run on the Switch on/off legend items dialog. 6:44 7:14 We ll now use an example for switching legend item visibility. We ll use this code example to first switch the coordinate system, and then to add a WMS layer, which works with EPSG:4326, from the DEMIS service. Next, we ll randomly switch particular layers on and off to show that it is easy to manipulate the visibility and availability of particular legend items and map layers. After that, we ll switch back to EPSG:3857 and remove the WMS. Finally, we ll concatenate this information into a single string that is later displayed in the Legend items information dialog. 22. In Code examples, select Legend item information. 23. Click Run on the Legend items information dialog to display legend items data at the top of the screen. This Data consists of the combined information of all the legend items. 8:10 Now we ll sample how to make a map pan operation using a code snippet that can pan the map. For example, we could have a special user interface to pan the map in a specific way, such as a custom button to pan the map at regular intervals. 24. In Code examples, select Map operations: pan. 25. Edit the code as necessary in the Map operation: pan dialog, and then click Run to see the panning result. 26. Again edit the code, and then click Run to see the panning result.

5 9:04 Add pin to the map let s us edit the code to add more pins in the appropriate locations on a map. The sample code displays three pins in the map. Now add one more pin in a new location. 27. In Code examples, select Add pin to the map. 28. Click Run on the Add pin to the map dialog to show the three pins. 29. In the Add pin to the map dialog, copy and paste the coordinate part of the code, provide the coordinates for another pin, and then click Run to add the new pin. 9:58 We ll use another sample code to add a button to the toolbar in the lower left of the screen. 30. In Code examples, select Adding button to the toolbar. 31. Edit the code as necessary in the Adding button to the toolbar dialog, and then click Run to add the button. 10:15 A simple code is used for removing the pins from the map. 32. In Code examples, select Clear pins. 33. Verify the code in the Clear pins dialog, and then click Run to remove all the pins. 10:28 For the last code example, we ll display the sample notification for displaying messages, warnings, and errors. We can produce all these alerts, warnings, and information boxes from our custom code. 34. In Code examples, select Display notifications. 35. Edit the code in the Display notifications dialog to add the notification. 36. Click Run and the sample notification appears at the top of the screen. 11:17 Finally, we ll look at the complete Consumer Portal SDK Documentation provided for the product. 37. Click the Documentation icon on the toolbar in the lower left of the screen to open the portal s internal web browser to show the Consumer Portal SKD documentation Welcome page. 38. Adjust the size of the document for readability. 39. Select the $GP tab, and then select crs to open the Coordinate Reference System page. 40. Select several other pages to look at the documentation. 41. Lastly, select the Home tab, and then click X in the upper-right corner to exit the documentation.

6 12:03 Thank you for watching this etraining module from Hexagon Geospatial. For more etraining, please visit hexagogeospatial.com/etraining.