TicketMonster walkthrough ========================= Demo walkthrough ---------------- * Client walkthrough on BrowserSim + OpenShift * Show the booking monitor in a browser 1. Book ticket Explanation of POH5 architecture -------------------------------- * Single page application - loaded all in one step * Interacts with the backend via JAX-RS * Two variants - mobile and desktop ** Different structures due to look and feel, layout and flow through app ** Mobile apps need to be more functional due to limited screen real estate * Libraries used ** JQuery - base ** Backbone provides app structure, client side MVC framework ** Underscore (dependency of backbone) adds utilities, smart finders, templating etc. ** Bootstrap for look and feel and UI components * Templates are split out into resources/templates/template.html ** Common design pattern for Backbone/JS * Backbone gives you a fairly traditional client side structure if you understand MVC * Still plan to add require to give a more modular server side structure (backbone gives modular client side) - better code org! * Backbone gives us: ** Models *** data holders *** mapped to a REST endpoint *** does CRUD automatically *** can attach event handlers to listen for data changes to model (e.g. produced by inputs) ** Collections *** Collections of models *** Can receive events (e.g. model destroyed) for models they hold ** Views *** has a render method to manipulate dom - apply the templates **** can handle browser events via mapping to methods ** Router *** Browser nav leads to method called *** Backbone gives you REST like urls (after hash) Prerequisites ------------- * Forge up and running * JBDS * OpenShift account Persistence layer ----------------- 1. Open up `Booking.java` * Show basic structure * Point out generated id * Point out relationship to `tickets` and talk through `cascade` and `fetch` 2. Introduce Bean Validation * contstraint model (click through to `@NotEmpty` * `@Valid` for cascading constraints * `@Email` on `contactEmail` 3. Include basic business logic here - `getTotalTicketPrice()` 4. Boilerplate 5. Open up `Event.java` * Natural identifiers - unique columns * equals/hashCode Business layer -------------- 1. Introduce `MediaItem` and `MediaManager` * Explain about caching REST layer ---------- 1. Open up `MediaService` - lightweight wrapper around `MediaManager` - explain why 2. Open up `BaseEntityService` * Standard logic for retrieving entities * Introduce criteria based query - typesafe etc. * automatic handling of items like maxResults and first 3. Open up `EventService` * Simple wrapper around BaseEntityService that adds some search predicates - mapping query parameters through to predicates 4. Open up `BookingService.java` * Work through algorithm - don't go into the details * Things to point out: * Automatic marshalling of JSON into holder objects * Population of entity from holder object (great for keeping your models clean) * BV constraints being applied View layer ---------- Take a look at how events are rendered 1. Open up `src/main/webapp/desktop-index.html` 2. At top of JS show backbone for model and events * Explain models, views and routers 3. Explain underscore templating used by the views (great for separating markup from actual code) 4. Show Event model and Events collection (including REST url mapping) 5. Show EventCategoriesView and associated subviews * show how templating is used 6. Show the router (and how `#events` results in rendering EventCategoriesView) * Explain how view get rendered and bound to `div` elements * Explain fetch() and the chain of events that leads to rendering the view (i.e. "reset") Bookings 7. Show EventDetailView 8. Show CreateBookingView - explain how its model gets continuously updated and portions of it re-rendered * may need a recall on the concept of subviews and backbone events * the concept of subviews may be understood by now, let's not dwell into JS details, however: * show `save()` invoked when the button is clicked, show the REST call and its outcome Generate admin layer -------------------- Now, we'll generate the admin layer. This is automatically generated by Forge. Currnetly using JSF, but we have prototpyed a POH5 version too. 1. Open up `admin_layer.fsh` in JBDS, walk through steps 2. _Show in -> Forge Console_ 3. Run the script, this will deploy to openshift. Openup http://ticketmonster-pmuir.rhcloud.com and show CRUD UI added