Tuesday, September 9, 2014 3:00 PM - 4:00 PM EDT Create Fancy Applications with Version 3 of the Bootstrap Theme for APEX by Sergei Martens, SMART4apex A group of APEX developers have joined hands to develop a free Twitter Bootstrap APEX theme and made it available for everyone who wants to use it. This theme was presented to the APEX community during Kscope14 in Seattle. After Kscope14, the developers have been working on a version 3 of the Bootstrap theme.This new version of the Bootstrap theme includes not only new Bootstrap elements but also a rich “admin dashboard” and several plugins and additional features to enhance the usability for end users. During this webinar, you’ll learn about the new Bootstrap theme and how to use the theme in your own APEX application. In addition, you will learn some Bootstrap tips and tricks.

1. Twitter Bootstrap theme
For Application Express 4.2.2

2. A presentation by
2

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

4. Sergei Martens
• Oracle since 1998 (Oracle 7)
• Started as classic developer
(Forms & Designer), now Apex
• Special interest in UI
• Speaker Dutch Apex congress
2012 (Ext JS), 2013 (mobile) &
2014 (Bootstrap)
4
Who are we?
Richard Martens
• Oracle since 2002 (Oracle 8i)
• PL/SQL, Apex, HTML5, CSS3,
JavaScript, XML, XSLT
• Special interest in UI
• RIMA on Oracle Forums

5. User-interfaces are getting important to an
increasing extent.
The best user-interface
• Is intuitive to the user (no manual needed)
• Looks trendy (nobody wants to use old/odd looking
software anymore)
5

6. • Bootstrap
• Simple design
• Just a few items
• Large items
• Dynamic regions
• Info graphics
• Dashboards
• Long pages
• Flat design
• JQuery UI (JQuery mobile)
• Complex design
• Many items
• Small items
• Tabs / Report -> Detail
• Text
• Reports / tables
• Short pages
• Skeuomorphic (realism)
Trends
6

7. Our dashboards
7
TomToodrraoyw

8. What is bootstrap?
• a free collection of tools for creating websites
and web applications.
• the most popular framework on the internet.
• supports responsive design.
• thousands of plug-ins available.
• it is easy to adjust to corporate brand.
• a frequent release schedule.
• based on JQuery
8

9. • Theme CSS
• Theme javascript
-remember active tab
-close modal
• Templates
-page
-region
-label
-etc…
• Apex plug-ins
-Modal iframe (da)
-Calendar (item)
• Other (integrated) plug-ins
-Fontawesome
-Parsley (JQuery)
-Cookie (JQuery)
-Bootstrap Notification
-Bootstrap selectlist
-Bootstrap date-picker
9
What was included in old version2?

10. 10
New in version 3
Technical upgrades
Bootstrap 3.1.1 => 3.2.0
Font Awesome 4.0.3 => 4.2.0
JQuery 1.7.1 => 1.11.1
Apex plug-ins
Flot charts
Morris charts
Hierarchical list
UX
Dashboard (SB-Admin 2)
Many new UI types
Fully responsive!

11. Demo
11

12. Bootstrap responsive - grid
• 12 column layout
• 940px width
• Works with CSS-classes:
- .row; like <tr> in html-table
- .col-md-#; width of the column
- .col-md-offset-#; move # columns to the right
- .container-fluid; percentages in stead of fixed width
- .container; center on page
12

13. Offsetting columns
13
Move columns to the right using .col-md-offset-*.
These increase the left margin of a column by * columns.
.col-md-4 .col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3 col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3

14. Bootstrap vs. Apex
Problem:
Bootstrap : relative positioning
Apex: absolute positioning
Solution:
col-xx-offset-# in column attributes
14

15. Were to get the theme?
15
http://www.apex-bootstrap.com

16. Support
16
Email: bootstrap@smart4apex.nl
The software is released “as is” and there is no official support for
the Bootstrap theme for Apex.
By sending an email we will try to answer your question in the
best way we can. But only in a time that’s in our own
convenience.

17. Do you want to participate in
development?
We are fishing for IT professionals
with a hunger for knowledge
17