Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ......
Transcript of Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ......
![Page 1: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/1.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
![Page 2: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/2.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
Responsive Web Designin Application Express using HTML5 and CSS3Shakeeb Rahman@shakeebPrincipal Member of Technical StaffOracle Application Express #orclapex
![Page 3: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/3.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Software Developer
Shakeeb Rahman
Intern at Oracle in 2006Joined APEX team in 2009Projects I have worked on
– Oracle Store– APEX– Oracle Cloud
First talk at NYOUG
3
![Page 4: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/4.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Session Overview
The Web Today
Mobile Applications in the Enterprise Two Approaches Responsive Web Design Basics Responsive Web Design in APEX 4.2 Demos
Is Responsive Right for you?
4
![Page 5: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/5.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
10 Years Ago
Evolving Web Applications
Designed for Internet ExplorerWindows Desktop or LaptopMaximum screen resolution of 1024x768
Table-Based<font> TagPresentation + Markup mixed
5
![Page 6: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/6.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
5 Years Ago
Evolving Web Applications
Mobile becomes popular with iPhone
Firefox is eating IE marketshareMobile revolution taking place
6
![Page 7: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/7.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Today
Evolving Web Applications
Many DevicesMany PlatformsMany Screen sizesMany ResolutionsMany BrowsersMany Many Variables
7
![Page 8: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/8.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Enterprise gone Mobile
Evolving Web Applications
Mobile is not just for personal useEnterprises have embraced mobile
AgilityCost savings Improve productivity
8
![Page 9: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/9.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Symantec2012 State of Mobility Survey
“71% of organizations are already using or planning to use custom mobile applications”
9
![Page 10: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/10.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.10
Everyone is doing it. How can you?
![Page 11: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/11.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Native Apps?
11
![Page 12: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/12.jpg)
12
![Page 13: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/13.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Native Apps?
13
![Page 14: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/14.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Let’s look at the requirements.
14
![Page 15: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/15.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Mobile Application Requirements
Application Requirements
APEX ApplicationSupport Mobile + Tablet DevicesFunctional across a variety of mobile platforms (iOS, Android, etc)
Leverage existing APEX skills
15
![Page 16: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/16.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Two Approaches
16
![Page 17: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/17.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Approach 1:Dedicated Mobile Web Application
(using jQuery Mobile)
17
![Page 18: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/18.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
jQuery Mobile Application
• Looks/Feels like Native Mobile App
• Fast, Performant
• Optimized for Mobile
• Compatible with many mobile devices
18
![Page 19: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/19.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
jQuery Mobile Application
However...
• May require duplicate logic
• Limited functionality
• Lack of tablet support
• Different UI from desktop application
19
![Page 20: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/20.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Approach 2:Responsive Web Application
20
![Page 21: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/21.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Responsive Web Application
• One Application
• Desktop, Tablet, and Mobile support
• Similar User Interface
• Single Code Line
21
Image Source: http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
![Page 22: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/22.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Responsive Web Design (RWD)
22
![Page 23: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/23.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Responsive Web Design (RWD)
23
an approach to web design in which a designer intends to provide an optimal viewing experience—
easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide
range of devices (from desktop computer monitors to mobile phones). (Wikipedia)
![Page 24: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/24.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Same HTML. Same Application Logic.
Different User Experience.
24
![Page 25: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/25.jpg)
25
![Page 26: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/26.jpg)
26
![Page 27: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/27.jpg)
27
![Page 28: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/28.jpg)
28
![Page 29: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/29.jpg)
29
![Page 30: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/30.jpg)
30
![Page 31: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/31.jpg)
31
![Page 32: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/32.jpg)
32
![Page 33: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/33.jpg)
33
![Page 34: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/34.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
How does it work?
34
![Page 35: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/35.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
CSS3 Media Queries
35
allowing you to define styles based on conditions such as screen size or resolution
most commonly used media queries rely on browser width to determine layout / device type
define multiple CSS media queries to target “cut off points” and appropriately adjust UI for given screen size
@media screen and (min-width: 320px) and (max-width: 479px) {...}
![Page 36: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/36.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Common CSS3 Media Queries
36
Mobile Portrait– @media screen and (min-width: 320px) and (max-width: 479px)
Mobile Landscape– @media only screen and (min-width: 480px) and (max-width: 767px)
Mobile Portrait / Landscape– @media only screen and (max-width: 767px)
Tablet Portrait– @media only screen and (min-width: 768px) and (max-width: 959px)
Tablet Landscape– @media only screen and (min-width: 960px) and (max-width: 1024px)
![Page 37: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/37.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Grid-Based Layout
Provides a HTML structure to organize our page components onto a grid
Using a grid makes it easier to align and lay out page components
CSS3 media queries can then easily shift or reposition these components
37
![Page 38: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/38.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Grid-Based Layout
38
![Page 39: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/39.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Grid-Based Layout
39
'HVNWRS
+HDGHU
%UHDGFUXPE
6HDUFK
5HJLRQ�� 5HJLRQ��
5HJLRQ�� 5HJLRQ��
7DEOHW
+HDGHU
%UHDGFUXPE
6HDUFK
5HJLRQ�� 5HJLRQ��
5HJLRQ�� 5HJLRQ��
0RELOH
+HDGHU
%UHDGFUXPE
6HDUFK
5HJLRQ��
5HJLRQ��
![Page 40: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/40.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Example Grid Layout HTML Markup
40
![Page 41: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/41.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Sounds technical. Do I have to do this manually?
41
![Page 42: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/42.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
NO!APEX 4.2 handles all of this for you.
42
![Page 43: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/43.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
APEX 4.2
Every release tries to give developers more control over HTML emitted from APEX
APEX 4.2 has two features that especially enable responsive design
43
![Page 44: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/44.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Grid Layout
44
![Page 45: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/45.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Grid Layout
Declarative way to lay out regions and items on a page Possible to do complex layouts without manual css
overrides Compatible with popular grid frameworks such as twitter
bootstrap, 960 gs, etc.
45
![Page 46: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/46.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Grid Layout
46
![Page 47: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/47.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Theme 25(Responsive, Modernizr Enabled, SCSS-Based, HTML5 + CSS3 Utilizing Theme for APEX 4.2)
47
![Page 48: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/48.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Theme 25
48
Fully Responsive–Support for Desktop, Tablet and Mobile Screen Sizes–Uses flexible grid layout that can be used on screen sizes from the
largest monitors to mobile devices–(4.2.1) Interactive Reports are displayed appropriately for smaller
screens–Form labels shift above when using mobile devices–Uses Respond.js to enable media queries for older Internet Explorer
versions
![Page 49: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/49.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Theme 25
49
Modernizr Enabled–Popular feature detection library is loaded by default so developers can
take advantage of HTML5 and CSS3 features while providing fallbacks for older browsers
–On page load, several classes are added to the HTML tag to show which features are supported by the browser
![Page 50: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/50.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Theme 25
50
Icon Buttons–Developers can easily
create buttons with icons without creating custom templates
–Simply choose an icon-compatible button template and specify an icon class
![Page 51: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/51.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Theme 25
51
High Resolution Display Support–Support for “Retina Display” devices–Graphics utilized by the theme are automatically upscaled for devices
that utilize ultra high resolution displays to render web content
Standard Display High Resolution Display
![Page 52: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/52.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Theme 25
52
Responsive Utility Classes–Easily hide / show content depending on device type
![Page 53: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/53.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Demo
53
![Page 54: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/54.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
When to Develop Responsive Applications
Responsive design allows you to develop a single application suitable for a variety of devices
It does so by re-positioning page components to become more optimal for mobile devices by reducing zooming and panning
However, there are some challenges to consider.
54
![Page 55: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/55.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
When to Develop Responsive Applications
Developing a responsive application can be time consuming and may require a deep understanding of grid layout, html and css.
Page size remains the same. You are loading the full HTML, CSS, and JS resources, even on mobile devices with limited broadband.
Responsive Web Design is just the tip of the iceberg.
55
![Page 56: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/56.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Is Responsive Right for you?
Responsive–Developing a single application,
one source for application logic, one set of pages
–Similar UI –Full functionality of the
application
56
jQuery Mobile Framework especially designed for
mobile devices
Lightweight and faster loading
Native look and feel
Use wizards to create page components (more comfortable for APEX developers)
Easily integrated in PhoneGap to develop Hybrid-Native applications
![Page 57: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/57.jpg)
57
![Page 58: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/58.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Q & A
58
![Page 59: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/59.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
@shakeebblog: apex.shak.us
59
![Page 60: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/60.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
![Page 61: Copyright © 2012, Oracle and/or its affiliates. All ...€¦ · – Oracle Store – APEX ... Oracle and/or its affiliates. All rights reserved. APEX 4.2 ... Easily integrated in](https://reader031.fdocuments.in/reader031/viewer/2022030621/5ae7f9987f8b9aee078ee1e1/html5/thumbnails/61.jpg)
Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13