(ATS6-DEV03) Building an Enterprise Web Solution with AEP

306
-1

Published on

In this session, we'll take a deep dive into building an Enterprise Solution with AEP. We'll be using Pipeline Pilot to develop the protocols that will provide our server-side implementations and ExtJS to build the user interface. We'll look at the techniques involved in using protocols to implement actions and explore the capabilities of ExtJS to produce powerful enterprise applications.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
306
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

(ATS6-DEV03) Building an Enterprise Web Solution with AEP

  1. 1. (ATS6-DEV03) Building an EnterpriseWeb Solution with AEPJames RedfernLead Software EngineerR&Djames.redfern@accelrys.com
  2. 2. The information on the roadmap and future software development efforts areintended to outline general product direction and should not be relied on in makinga purchasing decision.
  3. 3. Content• Writing Service Protocols• Defining REST API• Building UI with Ext JS
  4. 4. DemoThe Application• Ext JS client on AEP server solution• Run through a Search/List application• Overview of implementation
  5. 5. Service Protocols• Implementing services using protocols
  6. 6. Service ProtocolsHow does the protocol…receive input from the client?Protocol Parametersreturn response to the client?Web Service Resultsor via files written to job directory
  7. 7. DemoImplement DELETE LIST protocol• Our application uses Caches to store lists• We need to create a protocol to delete a named cache
  8. 8. REST API• Mapping RESTful endpoints to protocols• Testing
  9. 9. • Representational State Transfer• Typically pass documents (eg XML, JSON) between client& server that represent state of a resource• Uses existing verbs rather than creating arbitrary functionnames – GET, PUT, POST, DELETE• Resources identified by URI, so URI mapping required tounderlying functionsRESTful Services
  10. 10. RESTful URIS refer to resourcesTwo types of URIsCollection - http://example.com/compounds/Element - http://example.com/compounds/acc1234565 Common MethodsMethod PurposeGET For retrieving a data resource or a resource collectionPOST For creating a new resourcePUT For replacing a resourcePATCH For updating resource contentDELETE For removing a resourceRESTful URIs
  11. 11. • URL Route definitions are provided in package files• In your package define the routes in a urls.conf file• Include a reference to this file in package.conf:…# URL routing configurationInclude $(package)/urls.conf*Changes to urls.conf modify Apache configuration, so require restartDefining URL Routes
  12. 12. Defining URL Routes<url REST AUTH>method GETrequest /ajaxapp/lists/protocol Protocols/Ajax App/Get Lists</url>
  13. 13. Defining URL Routes• Passing Parameters (1)<url REST AUTH>method GETrequest /ajaxapp/search/protocol Protocols/Ajax App/Search</url>
  14. 14. Defining URL Routes• Passing Parameters (2)<url REST AUTH>method GETrequest /ajaxapp/@Visibility/lists/@Nameprotocol Protocols/Ajax App/Get List</url>
  15. 15. Testing Services• No need for special / customized Accelrys tooling• Simply test with web browser or REST client(eg. Chrome plugin)
  16. 16. DemoAdd new RESTful endpoint• Map URL for DELETE LIST protocol• Test using REST Client
  17. 17. Building the UI• What does Ext JS give us?• What’s involved?
  18. 18. What does Ext JS give us?• Class Structure• MVC Architecture• Rich set of widgets• Plugin-free charting• Modern, clean Neptune theme• Cross platform browser compatibility• Helper methods for DOM manipulation
  19. 19. Class Structure• Ext JS provides a rich class structure, including:– Methods & properties– Inheritance– Statics– Mixins– Singletons
  20. 20. Class Structure• Classes are:– defined using Ext.define– created using Ext.create
  21. 21. MVC Architecture• Separates the representation ofinformation from the user’sinteraction with it.– MODEL contains application data– VIEW is any representation of that data– CONTROLLER takes input and converts tocommands for Model & View.
  22. 22. MVC Architecture: Model• Models…– contain a collection of fields– can persist to/from server using their proxy• Stores…– are a client-side cache of Models– support filtering, sorting, paging
  23. 23. MVC Architecture: View• Views…– are the visual elements of the application– usually extend Ext.Component (or a derivative)– can be laid out in containers using layouts– fire events as user interacts with component
  24. 24. MVC Architecture: Controller• Controllers…– bind the application together– listen to events and take appropriate actions– extend Ext.app.Controller
  25. 25. DemoAdd DELETE LIST button• Add new button• Wire-up the button click to action call• TEST!!
  26. 26. • How to create an Ext JS / AEP app?– Actions are implemented as normal protocols– urls.conf defines RESTful endpoints for protocols– REST API makes it easy to use 3rd party JS libraries– UI code is pure Ext JS (no need for AEP customizations)Summary
  27. 27. • http://docs.sencha.com/extjs/4.2.0/• aep_restful_web_services.pdf• Learn how to incorporate other REST APIs in a Mash-upapplication (ATS6-DEV04)• Take a deep-dive into REST and SOAP integration forProtocol Authors (ATS6-DEV09)Next Steps?

×