Oracle Application Express as add-on for Google Apps

Oracle Application Express
as add-on for Google Apps
with Twitter Bootstrap
1

Agenda
19:00 Who is…?
19:05 Introduction Google Apps
19:10 Business case & demo Gbilling
19:25 Introduction to Twitter Bootstrap
19:40 Some examples how to integrate TB in Apex
19:55 Mini-break
20:05 More examples how to integrate TB in Apex
20:15 Working with Google authentication (oauth 2.0)
20:35 Google API’s
20:50 Announcement
20:55 Quiz
2

Who is smart4apex?!
• Just some geeks passionate about Apex, having fun
together
• Sharing experience and knowledge
• Explore new techniques and opportunities
• Building state of the art (Apex) solutions for our
customers
3

Who is smart4apex?!
• Company 2.0;
– Co-operation of professionals
• Guild
– Rules about work-ethics
– Minimum experience
• Masters
– Commission of entrance
– Commission of dispute
– Form the corporation
• Friends
4

Who are we?
Sergei Martens
• Oracle developer from 1998
• OCP in 1999
• Database version 7
• Started as classic developer
(Forms & Designer)
• Now Apex developer
• Speaker Dutch Apex congress
2012 (Ext JS) & 2013 (mobile)
5

Warning
During this presentation we will bring the user interface of
our Apex application “to the next level”.
To make this happen we make use of HTML, CSS and
JavaScript.
This is inevitable for creating a modern user interface.
6

Business Case
1. Specialist in information management
2. Interested in the opportunities of cloud technology and the use of it
in a business environment.
Task
Based on the appointments in our Google
Calendars, we want to:
1. automatically generate invoices
2. send the invoices digitally (email) to our customers
Next we want to keep track of payments, etc.
9

Architecture
Domain &
user
information
Drive
Calendar
Jasper reports
server
Gbilling
Accounts &
projects
Invoicing
Local data
Google Apps
GoogleAPI
10

Data structure
Users
Users-
sessions
Companies
Projects
Clients
Invoices
Invoice itemsAgenda items
11

Subjects on user interface
Commercial
environmentShorter lifetime of software
Trends
Less = more
Reference of users
Bigger = better
HTML5 + CSS3
AJAX
13

Trends
• Simple design
• Just a few items
• Large items
• Dynamic regions
• Info graphics
• Dashboards
• Long pages
• Complex design
• Many items
• Small items
• Tabs / Report -> Detail
• Text
• Reports / tables
• Short pages
14

Introduction Twitter Bootstrap
17

Bootstrap in a nutshell
Wikipedia
1. Bootstrap is a free collection of tools for creating websites and
web applications.
2. It has been the most popular project in GitHub and has been used
by NASA and MSNBC among others.
3. Bootstrap was developed by Mark Otto and Jacob Thornton at
Twitter as a framework to encourage consistency across internal
tools
4. Since version 2.0 it also supports responsive design
18

Bootstrap examples I - template
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>
19

Bootstrap examples I - grid
• 12 column layout
• 940px width
• Works with CSS-classes:
• row; like <tr> in html-table
• span#; width of the column
• offset#; move # columns to the right
• fluid; uses percentages in stead of fixed width
• container; centre on page
20

Bootstrap examples II - Icons
• Icons available through classes
<i class="icon-search"></i>
• 140 icons available (glyphicons)
– from “icon-glass” to “icon-fullscreen”
• Alternative: font-awesome
– http://fortawesome.github.io/Font-Awesome/icons/
– 361 icons
– Compatible with the TB glyphicons
– Sizeable (they use a font instead of an image)
• CSS adjustable (colour, underline, alignment etc.)
<i class="icon-search"></i>
21

Who are we?
Richard Martens
• Oracle since 12 years (Oracle 8i)
– Large Multilingual websites
– RAD applications
• Core Technologies
– Oracle PL/SQL
– Oracle Apex
– HTML5, CSS3, JavaScript, XML, XSLT
• Other technologies
– PHP, ASP(.net)
– Windows and Linux server platform
• RIMA on Oracle Forums
22

Bootstrap examples II – Modal
• Modal
– Built-in dialog (popup)
– Usage
• First create the modal.
– Container div
» modal-header
» modal-body
» modal-footer
• To open modal
– Through data attributes
» <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
– Through JavaScript
» $('#myModal').modal('show');
• Modal implemented as a region template.
• Opening of modal through data-attributes on a button
– Sometimes JavaScript is used for specific reasons.
23
<div id="myModal" class="modal hide fade" tabindex="-1“
role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal“
aria-hidden="true"> </button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal"
aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>

Bootstrap examples II – Date-picker
• Date-picker
• Using Bootstrap plugin (http://www.eyecon.ro/bootstrap-datepicker/)
• Combination of text-item and button
• Usage
– Create input element of type text and ad the “date-picker”
class
– Page template will transform all these elements using
jQuery and CSS
24
<div class="input-append">
<input type="text" class="text_field input-medium date-picker" value="20-08-2013">
<button class="btn icon-calendar btn-date-picker" type="button"></button>
</div>

Bootstrap examples II – Parsley
• Is not a part of bootstrap
– http://parsleyjs.org/
• JavaScript library for client side form validation
• Allows element as well as form validation
• Element validation implemented in the S4A Bootstrap theme
– without using plugins
– Available for all page templates
– By use of element attributes:
• parsley=“blur”
• parsley=“false”
– Further attributes
according to parsley docs
• required = “required”
• data-notblank = “true”
• data-minlength = “6”
• data-maxlength = “8”
• data-type=“email”
(“url”, “digits”, “number”, “date-iso”)
25

Bootstrap examples II – Parsley
– Template JavaScript to position the error message correctly
for Bootstrap
26
<div class="control-group error">
<label class="control-label“ for="inputError">
Input with error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">
Please correct the error</span>
</div>
</div>

Google API – Authentication
27
Server
Application
Google oauth2
server
Google API
endpoint
Token request
Code
API call with token
API response (json, xml)
User login and consent
Exchange code for token
Token
Step 1
Step 2
Step 3

Google API – Authentication I
• Utilizes package and tables on
database
– Table contains session information
• Page 101 (standard login page)
– Remove token from table for “this” session
– Start procedure
• Procedure redirects to:
https://accounts.google.com/o/oauth2/
• Google takes over:
– Shows login information (shows the grants that the app is requesting)
– User clicks okay
– Google redirects to the URL specified in API console (which is page 102)
28
Server
Application
Google
oauth2
server
Token request
Code
User login and consent

Google API – Authentication II
• Page 102 (copied from 101)
– Contains item to store
query string
– Dynamic action to process query string
• Copy query string into item (using JavaScript)
• Start procedure (using pl/sql block)
– Request token
– Do first API call to:
» Get user info (id, email, name)
– Return user info
– Put user-info into application items
• Submit the page
– Login process
• Prepare redirect (start or settings) (new user needs to set certain settings)
• Set session language
• Start standard apex login procedure
– User is redirected to start-screen or settings-page
29
Server Application
Google oauth2
server
Exchange code for token
Code

Google API – making a request
• Three options:
– Using apex built-in restful client
• Advantages:
– Easy to implement
– Results go in a apex-collection
• Disadvantages
– Limited use from PL/SQL
– Limited debugging possibilities
– Making your own request in
PL/SQL
• Advantages
– Full debugging possibilities
– Full access from PL/SQL
• Disadvantages
– More difficult to implement
– Using apex_web_service package
(not covered)
• Advantages
– like making own request
– Easier to implement than own request,
more difficult than restful client
• Disadvantages
– Less control than own request
– Greatest lack in oracle apex is built
in JSON parsing / extracting
30

Google API – the built-in restful client
• Create web-service reference in
“Shared Components”
• Create process, report or form utilising the reference
– Process: store result in collection or items
– Report: will run on a temp collection
– Form: allows to post data
31

Google API – making your own request
• Relies on procedures and functions (within packages)
• Gives full freedom in what to do
• You must take errors into account
• A request consists of:
– URL (the question asked, aka: “endpoint”)
– Header (for setting security and other parameters)
• Authorization: Bearer {token}
• Content-Length: {length_of_body}
– Body (sometimes optional, used for POST, PUT and PATCH
requests, contains the content sent)
• Can contain json, xml or other structures, depending on webservice
32

Google API - getUserInfo
• RESTful webservice
• Response in json format
• Endpoint:
https://www.googleapis.com/oauth2/v1/userinfo?alt=json&access_token={token}
• Response is json:
{ "id": "111253075910917653317"
, "email": r.martens@smart4apex.nl
, "verified_email": true
, "name": "Richard Martens"
, "given_name": "Richard"
, "family_name": "Martens"
, "link": https://plus.google.com/111253075910917653317
, "picture": https://lh6.googleusercontent.com/-Dz..NM/photo.jpg
, "gender": "male"
, "locale": "nl"
, "hd": "smart4apex.nl"
}
33

Oracle Application Express as add-on for Google Apps

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Oracle Application Express as add-on for Google Apps

Similar to Oracle Application Express as add-on for Google Apps (20)

More from Sergei Martens

More from Sergei Martens (9)

Recently uploaded

Recently uploaded (20)

Oracle Application Express as add-on for Google Apps