odtug webinar 2014 version 3 of bootstrap theme 4 apex
DESCRIPTION
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.TRANSCRIPT
Twitter Bootstrap theme
For Application Express 4.2.2
2
A presentation by
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
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
The best user-interface• Is intuitive to the user (no manual needed)• Looks trendy (nobody wants to use old/odd looking
software anymore)
User-interfaces are getting important to an increasing extent.
5
• 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
Our dashboards
7
Today
Tomorrow
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
• 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
New in version 3
Technical upgradesBootstrap 3.1.1 => 3.2.0Font Awesome 4.0.3 => 4.2.0JQuery 1.7.1 => 1.11.1
Apex plug-insFlot chartsMorris chartsHierarchical list
UXDashboard (SB-Admin 2)Many new UI typesFully responsive!
Demo
11
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
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
Bootstrap vs. Apex
Problem:Bootstrap : relative positioningApex: absolute positioning
Solution:col-xx-offset-# in column attributes
14
Were to get the theme?
15
http://www.apex-bootstrap.com
Support
16
Email: [email protected]
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