Your SlideShare is downloading. ×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

232

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 …

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
232
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. (ATS6-DEV03) Building an EnterpriseWeb Solution with AEPJames RedfernLead Software EngineerR&Djames.redfern@accelrys.com
  • 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. Content• Writing Service Protocols• Defining REST API• Building UI with Ext JS
  • 4. DemoThe Application• Ext JS client on AEP server solution• Run through a Search/List application• Overview of implementation
  • 5. Service Protocols• Implementing services using protocols
  • 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. DemoImplement DELETE LIST protocol• Our application uses Caches to store lists• We need to create a protocol to delete a named cache
  • 8. REST API• Mapping RESTful endpoints to protocols• Testing
  • 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. 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. • 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. Defining URL Routes<url REST AUTH>method GETrequest /ajaxapp/lists/protocol Protocols/Ajax App/Get Lists</url>
  • 13. Defining URL Routes• Passing Parameters (1)<url REST AUTH>method GETrequest /ajaxapp/search/protocol Protocols/Ajax App/Search</url>
  • 14. Defining URL Routes• Passing Parameters (2)<url REST AUTH>method GETrequest /ajaxapp/@Visibility/lists/@Nameprotocol Protocols/Ajax App/Get List</url>
  • 15. Testing Services• No need for special / customized Accelrys tooling• Simply test with web browser or REST client(eg. Chrome plugin)
  • 16. DemoAdd new RESTful endpoint• Map URL for DELETE LIST protocol• Test using REST Client
  • 17. Building the UI• What does Ext JS give us?• What’s involved?
  • 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. Class Structure• Ext JS provides a rich class structure, including:– Methods & properties– Inheritance– Statics– Mixins– Singletons
  • 20. Class Structure• Classes are:– defined using Ext.define– created using Ext.create
  • 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. 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. 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. MVC Architecture: Controller• Controllers…– bind the application together– listen to events and take appropriate actions– extend Ext.app.Controller
  • 25. DemoAdd DELETE LIST button• Add new button• Wire-up the button click to action call• TEST!!
  • 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. • 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?

×