The document discusses an end-to-end online and mobile banking platform that uses an embedded content management system (Magnolia) to provide a consistent experience across channels. It allows content to be managed from a single console and delivered via online banking websites, mobile websites, and native mobile apps. The technical stack uses open source tools like Spring, Wicket, and PhoneGap along with Magnolia to retrieve and display managed content. A demo of a native iPad app integrated with Magnolia for content management is also presented.

1. End-to-End, Content Managed Online & Mobile Banking
Discussion and Demo
September 4, 2012
Basel, Switzerland

2. Presentation Topics
• Issue / Challenge / Solution
• Online / Mobile Banking Platform with Embedded Magnolia
• Multichannel Banking and Magnolia
• Online / Mobile App – Platform Tech Stack
• Native App – Platform Tech Stack
• Demo -- iPad Banking App and Magnolia
• Questions / Contact Us
2

3. Issue / Challenge / Solution
Issue: Financial institutions (FIs) are confronted with a forest of user applications
housed in individual silos that deliver an inconsistent customer experience and prevent
FIs from responding rapidly to changing consumer expectations.
Challenge: There is a clear need for FIs to provide customers with a consistent
experience across all online and mobile channels. To accomplish this, it is imperative
that such a solution include an embedded Web content management system.
Solution: NRG Edge Online / Mobile Banking Platform w/ embedded Magnolia
• Consistent customer experience across all online / mobile banking channels.
• Consistent application framework that exposes RESTful services.
• Single console (Magnolia Author) manages all online and mobile channels.
3

4. Online / Mobile Banking Platform – Capabilities
• The platform supports the development of the following applications / products:
- Tablet applications (iPad & Android)
- Mobile applications (iPhone & Android)
- Online banking including account origination & funding and online account
case management
- Web marketing sites (Web storefronts)
• Embedded Web content management system – Magnolia
- The Magnolia component can manage, publish and edit content across
all Web and mobile access points from a single console.
4

5. Embedded Magnolia Features
• Manage content for . . . Embedded Web CMS
- Text changes.
- Field label changes.
- Links and document uploads.
- Style changes; e.g., button colors, sizes, shapes,
uploading of cascading stylesheets (CSS).
• Pull rate information from a banking engine.
• Enable promotional advertising w/ Adobe / Omniture Test and Target
enabled m-boxes.
• Manage multiple channels from one Magnolia Author instance.
5

6. Managing Bank Content w/ Embedded Magnolia
Traditional Model
Content Change Developer Create Release WAR File UAT Publish
Request Codes WAR File via Controllers Testing Content
Native, Web & Mobile Banking Enabled w/ Magnolia
Changes Reviewed
in Workflow
Editor(s) Change Publish
Publisher
Content Content
6

7. End-to-End Solution – Platform Applications Overview
Internet Intranet
Magnolia- Magnolia-
enabled enabled
Magnolia- Magnolia-
Online Native Single
enabled enabled
Banking, Mobile Magnolia
Marketing Mobile Web
Origination & Apps Console
Storefront
Funding, and iPad
(Web & Mobile)
Banking iPhone
Ancillaries Android
NRG Edge Online / Mobile Banking Platform
(RESTful Services)
APIs Service Oriented Architecture (SOA)
Bank System of Record (BSOR)
7

8. A Magnolia Console Manages Content for All Direct Channels
Magnolia Console
Pages
Tables
Links
Images Charts Rates
Calculators Video
Promos & Ads
Text
Chat Social Media
Surveys
Help Multilingual
Product Info
Legal
Native Mobile & Web Online
Mobile Web WebStorefront
Tablet Apps Banking
Customer Engagement Experience
8

9. Tech Stack - NRG Edge Online / Mobile Banking Platform
Spring Security – framework for authentication & access control
User
Interface Magnolia – Web content management system
Layer
Apache Wicket – framework for Web applications
Apache Spring
Maven – Inversion
manages of Spring Security – secures all calls into the service layer
project's Control
dependencies, (IoC)
builds, pattern – Activiti – workflow – business process management
reporting, wires
Service
and together JasperReports – report writing engine
Layer
documentation components
and
services Custom Business Logic – contains the business rules
Experian – third party services
Bitronix JTA – Java Transaction API
Platform System of
Data Hibernate Java Persistence API – JPA 2.0 Third Party
Database Record
Layer Databases
Database
Hibernate Search – Search – uses Apache Lucene
9

10. Mechanics of Integration w/ Wicket
• Created content provider (class) that uses core Magnolia components to
retrieve content based off an identifier.
• Content provider can return resource bundle strings for field labels.
• Content provider can also return a complete Wicket template (HTML).
<div>
<label wicket:id="firstNameLabel">[Label will display here]</label>
<input type="text" wicket:id="firstName" />
</div>
10

11. The Content Provider
public interface ContentProvider {
public List<String> getContentCollectionById(String id);
public String getContentValueById(String id);
public String getContentValueById(String id, String defaultValue);
}
• The identifier can be either a path or a UUID.
• The content provider returns either HTML or plain text from Magnolia.
11

12. Tech Stack - Native Mobile
(iPad, iPhone / Android tablets & phones)
Apache Cordoba – HTML5 and JavaScript UI
User
Interface Hogan.js – Templating Engine
Layer
Native Components
Spring Security – secures all calls into the service layer
Activiti – workflow – business process management
Service
Layer Apache Spring JasperReports – report writing engine
Maven – Inversion
manages of
Custom Business Logic – contains the business rules
project's Control (IoC)
dependencies, pattern –
builds, wires together Experian – third party services
reporting, components
and and services Magnolia – Web content management system
documentation
Bitronix JTA – Java Transaction API
Platform System of
Data Hibernate Java Persistence API – JPA 2.0 Third Party
Database Record
Layer Databases
Database
Hibernate Search – Search – uses Apache Lucene
12

13. Mechanics of Integration w/ Adobe PhoneGap
• Using PhoneGap, we create native applications that use HTML and
JavaScript.
• We create a RESTful content service that uses core Magnolia
components to retrieve content based off an identifier.
• We use Twitter’s Hogan.js templating library within PhoneGap.
• Content service can return resource bundle strings for field labels in
JSON format.
• The content service can also return complete Hogan.js templates.
<div>
<label for="firstName">{{firstNameLabel}}</label>
<input type="text" name="firstName" />
</div>
13

14. The Content Service
@Path("/content-service/")
@Produces({"application/xml","application/json"})
@Consumes({"application/x-www-form-urlencoded","application/xml","application/
json"})
public interface ContentService {
@GET
@Path("/{id}")
public Content getContent(@PathParam("id") String id);
}
• The identifier can either be a path or a UUID.
• The content service returns either HTML or plain text from Magnolia in
JSON format.
14

15. Native iPad App – Magnolia Demo
iPad Services
Downloadable iPad App
Magnolia
HTML5 & JavaScript
Profile Data / RESTful
Content Services
Custom Business Logic
Native iOS Components
15

16. Native iPad App Demo with Magnolia
16

17. Questions / Contact Us
Address: Web:
NRG Edge, LLC www.nrg-edge.com
5 Great Valley Parkway
Suite 210 Contact:
Malvern, PA 19355 USA 1-888-638-2704
info@nrg-edge.com
17