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.

1. (ATS6-DEV03) Building an Enterprise
Web Solution with AEP
James Redfern
Lead Software Engineer
R&D
james.redfern@accelrys.com

2. The information on the roadmap and future software development efforts are
intended to outline general product direction and should not be relied on in making
a 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 Protocols
How does the protocol…
receive input from the client?
Protocol Parameters
return response to the client?
Web Service Results
or 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 function
names – GET, PUT, POST, DELETE
• Resources identified by URI, so URI mapping required to
underlying functions
RESTful Services

10. RESTful URIS refer to resources
Two types of URIs
Collection - http://example.com/compounds/
Element - http://example.com/compounds/acc123456
5 Common Methods
Method Purpose
GET For retrieving a data resource or a resource collection
POST For creating a new resource
PUT For replacing a resource
PATCH For updating resource content
DELETE For removing a resource
RESTful 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 configuration
Include $(package)/urls.conf
*Changes to urls.conf modify Apache configuration, so require restart
Defining URL Routes

12. Defining URL Routes
<url REST AUTH>
method GET
request /ajaxapp/lists/
protocol Protocols/Ajax App/Get Lists
</url>

13. Defining URL Routes
• Passing Parameters (1)
<url REST AUTH>
method GET
request /ajaxapp/search/
protocol Protocols/Ajax App/Search
</url>

14. Defining URL Routes
• Passing Parameters (2)
<url REST AUTH>
method GET
request /ajaxapp/@Visibility/lists/@Name
protocol 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 of
information from the user’s
interaction with it.
– MODEL contains application data
– VIEW is any representation of that data
– CONTROLLER takes input and converts to
commands 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-up
application (ATS6-DEV04)
• Take a deep-dive into REST and SOAP integration for
Protocol Authors (ATS6-DEV09)
Next Steps?