create fancy applications with the new twitter bootstrap theme for apex
DESCRIPTION
Presentation KScope14 - SeattleTRANSCRIPT
![Page 1: Create fancy applications with the new Twitter Bootstrap theme for Apex](https://reader033.vdocuments.site/reader033/viewer/2022061105/53fe1ca78d7f72db2d8b45aa/html5/thumbnails/1.jpg)
Twitter Bootstrap themeFor Application Express 4.2.x
![Page 2: Create fancy applications with the new Twitter Bootstrap theme for Apex](https://reader033.vdocuments.site/reader033/viewer/2022061105/53fe1ca78d7f72db2d8b45aa/html5/thumbnails/2.jpg)
2
A presentation by
![Page 3: Create fancy applications with the new Twitter Bootstrap theme for Apex](https://reader033.vdocuments.site/reader033/viewer/2022061105/53fe1ca78d7f72db2d8b45aa/html5/thumbnails/3.jpg)
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
![Page 4: Create fancy applications with the new Twitter Bootstrap theme for Apex](https://reader033.vdocuments.site/reader033/viewer/2022061105/53fe1ca78d7f72db2d8b45aa/html5/thumbnails/4.jpg)
Who is smart4apex?
4
Reliable Apex solutions by shared knowledge
![Page 5: Create fancy applications with the new Twitter Bootstrap theme for Apex](https://reader033.vdocuments.site/reader033/viewer/2022061105/53fe1ca78d7f72db2d8b45aa/html5/thumbnails/5.jpg)
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)5
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
![Page 6: Create fancy applications with the new Twitter Bootstrap theme for Apex](https://reader033.vdocuments.site/reader033/viewer/2022061105/53fe1ca78d7f72db2d8b45aa/html5/thumbnails/6.jpg)
6
Safe Harbor Statement
The following sheets are intended to outline our general thoughts about UI trends.
Some of the statements can act as confrontational and explicit.
Things will be more nuanced in the real world.
We intentionally did this to create a clearer understanding about the topics discussed.
![Page 7: Create fancy applications with the new Twitter Bootstrap theme for Apex](https://reader033.vdocuments.site/reader033/viewer/2022061105/53fe1ca78d7f72db2d8b45aa/html5/thumbnails/7.jpg)
In the early ages
Nowadays
7
![Page 8: Create fancy applications with the new Twitter Bootstrap theme for Apex](https://reader033.vdocuments.site/reader033/viewer/2022061105/53fe1ca78d7f72db2d8b45aa/html5/thumbnails/8.jpg)
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.
8
![Page 9: Create fancy applications with the new Twitter Bootstrap theme for Apex](https://reader033.vdocuments.site/reader033/viewer/2022061105/53fe1ca78d7f72db2d8b45aa/html5/thumbnails/9.jpg)
Companies invest a lot of moneyin a company brand
9
Outside
Inside
![Page 10: Create fancy applications with the new Twitter Bootstrap theme for Apex](https://reader033.vdocuments.site/reader033/viewer/2022061105/53fe1ca78d7f72db2d8b45aa/html5/thumbnails/10.jpg)
• 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
10
![Page 11: Create fancy applications with the new Twitter Bootstrap theme for Apex](https://reader033.vdocuments.site/reader033/viewer/2022061105/53fe1ca78d7f72db2d8b45aa/html5/thumbnails/11.jpg)
Our dashboards
11
Today
Tomorrow
![Page 12: Create fancy applications with the new Twitter Bootstrap theme for Apex](https://reader033.vdocuments.site/reader033/viewer/2022061105/53fe1ca78d7f72db2d8b45aa/html5/thumbnails/12.jpg)
Mission
Create an Apex application theme which:
• is trendy and intuitive• can easily be used (out of the box)• can easily be adjusted to own brand.• supports many UI-items• is free to use (open source)• is well documented
12
![Page 13: Create fancy applications with the new Twitter Bootstrap theme for Apex](https://reader033.vdocuments.site/reader033/viewer/2022061105/53fe1ca78d7f72db2d8b45aa/html5/thumbnails/13.jpg)
Why 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
13
![Page 14: Create fancy applications with the new Twitter Bootstrap theme for Apex](https://reader033.vdocuments.site/reader033/viewer/2022061105/53fe1ca78d7f72db2d8b45aa/html5/thumbnails/14.jpg)
• 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
14
What is included?
![Page 15: Create fancy applications with the new Twitter Bootstrap theme for Apex](https://reader033.vdocuments.site/reader033/viewer/2022061105/53fe1ca78d7f72db2d8b45aa/html5/thumbnails/15.jpg)
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
15
![Page 16: Create fancy applications with the new Twitter Bootstrap theme for Apex](https://reader033.vdocuments.site/reader033/viewer/2022061105/53fe1ca78d7f72db2d8b45aa/html5/thumbnails/16.jpg)
Offsetting columns
16
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
![Page 17: Create fancy applications with the new Twitter Bootstrap theme for Apex](https://reader033.vdocuments.site/reader033/viewer/2022061105/53fe1ca78d7f72db2d8b45aa/html5/thumbnails/17.jpg)
Bootstrap vs. ApexProblem:Bootstrap : relative positioningApex: absolute positioning
Solution:col-xx-offset-# in column attributes
17
![Page 18: Create fancy applications with the new Twitter Bootstrap theme for Apex](https://reader033.vdocuments.site/reader033/viewer/2022061105/53fe1ca78d7f72db2d8b45aa/html5/thumbnails/18.jpg)
Demo
18
![Page 19: Create fancy applications with the new Twitter Bootstrap theme for Apex](https://reader033.vdocuments.site/reader033/viewer/2022061105/53fe1ca78d7f72db2d8b45aa/html5/thumbnails/19.jpg)
Were to get the theme
19
![Page 20: Create fancy applications with the new Twitter Bootstrap theme for Apex](https://reader033.vdocuments.site/reader033/viewer/2022061105/53fe1ca78d7f72db2d8b45aa/html5/thumbnails/20.jpg)
20
Do you want to participate in development?
We are fishing for IT professionals with a hunger for knowledge