Responsive Web Design mit APEX Theme 25 Christian Rokitta APEX UserGroup NRW Treffen 20.01.2014
Oracle DB & APEX Entwickler (selbstständig) Deutschland ( 1996) Niederlanden ( 1996) themes4apex: APEX UI Customization (online) Training in Zusammenarbeit mit SkillBuilders Referent (OGh APEX World, OBUG, DOAG, ODTUG KScope)
Responsive Web Design APEX/Theme 25 Beyond
Responsive Web Design (RWD) umfasst verschiedene Techniken, sowohl an Client- als an Serverseite, mit dem Ziel die Webseite sich auf das Endgerät, von dem sie angefragt wird, an zu passen. Das bedeutet, man entwickelt einen Codebase der die Seite an Bildschirm Größe, Orientierung und Gerät anpasst, um dem Benutzer so optimal mögliche Interaction zu bieten.
CSS @Media Queries Grid Layouts Device/Browser Detection verbesserte Performance und Reduzierung der zu übertragenen Datenmenge
Sind nicht beschränkt auf width Vergleiche: es gibt ein Vielzahl verschiedener Attribute die mit Hilfe von @media Queries abgefragt werden können (u.a. device orientation, height, aspect ratio und resolution) @media screen and (max-device-width: 640px) and (orientation:portrait) { /* Rules inside the @media condition only apply if the condition is met */ #mydiv { display: inline-block; } } @media all and (orientation:portrait) { } @media all and (orientation:landscape) { }
@media Queries können direkt in die Style-Sheet Datei aufgenommen werden. Das ist die am häufigsten benutzte Methode. @media screen and (max-device-width: 640px) and (orientation:portrait) { /* Rules inside the @media condition only apply if the condition is met */ #mydiv { display: inline-block; } }
@import Regel um andere Dateien in Style Sheet auf zu nehmen. @import url(style600min.css) screen and (min-width: 600px); @media Query als Attribut in mit LINK gekoppelter Style Sheet Datei. <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 800px)" href="style800.css" />
Beispiel: JavaScript zur Erkennung der Viewport Größe; BODY Element mit einer extra Class erweitern.
Absolute Pixels (px) Point (pt) = 1/72 of an inch Relative units are based on the initial value em unit is relative to the initial value of font-size Percentages (%) Resolution dpi/dpcm: dots per inch / centimeter
<div class="col1"> <p> </p> </div> <div class="col2"> <p> </p> </div> <div class="col3"> <p> </p> </div>
@media (min-device-width: 641px) { /* target devices with desktop sized resolution */ }.col1,.col2,.col3 { /* Float the columns to create a three-column layout */ padding: 2em; width: 30%; margin-right: 1em; float: left; }
@media (max-device-width: 640px) { /* target devices with smal sized resolution */ }.col1,.col2,.col3 { position: relative; padding: 2em; width: 90%; float: none; display: block; margin-right: 0; }
Fixed Grid nicht notwendigerweise responsive Wird benutzt um Elemente in einem gleichmäßigen Rhythmus an zu legen Fluid/Flexible Grid CSS3 Grid Layout
Container Columns Gutter (Abstand) Rows
http://dev.w3.org/csswg/css-grid/
Ein fixed Website Layout hat einen Container mit fester Breite, und Komponenten haben entweder eine prozentuale oder feste Breite, ungeachtet der Bildschirmresolution.
In einem fluid Website Layout haben die meisten Komponenten innerhalb des Container eine prozentuale Breite, und passen sich somit an die Bildschirmresolution an.
@media screen and min-width 320px and max-width 479px @media only screen and min-width 480px and max-width 767px @media only screen and max-width 767px @media only screen and min-width 768px and max-width 959px @media only screen and min-width 960px and max-width 1024px @media screen and min-width 1260px and max-width 1419px @media screen and min-width 1420px and max-width 1659px @media screen and min-width 1660px and max-width 1899px @media screen and min-width 1900px @media screen and min-width 2540px
Deklarative Methode um Elemente zu platzieren, ohne selbst CSS schreiben zu müssen (Region Attributes) Lässt die Implementation anderer Grid Frameworks zu, so wie Twitter Bootstrap, 960 gs, etc. (Template)
http://rokitta.blogspot.nl/2013/09/theme-25-responsive-grid-column.html
Hide/show Content abhängig von @media Query
http://apex.shak.us/post/35664732629/responsive-interactive-reports-in-theme-25
#USED_COLUMNS_NUMBER# #USED_COLUMNS_ALPHA# #USED_COLUMNS_ALPHA_MINUS# #USED_COLUMNS_WORD# #USED_COLUMNS_PLURAL# #ROWS# #COLUMNS# #COLUMN_NUMBER# #COLUMN_ALPHA# #COLUMN_WORD# #COLUMN_PLURAL# #COLUMN_SPAN_NUMBER# #COLUMN_SPAN_ALPHA# #COLUMN_SPAN_WORD# #COLUMN_SPAN_PLURAL# #ATTRIBUTES# #FIRST_LAST_COLUMN_ATTRIBUTES# #CONTENT#
Entwicklung einer responsive Applikation kann zeitraubend sein und verlangt sehr wahrscheinlich eine gute Einsicht in und Begriff von Grid Layouts, HTML und CSS. Seiten Größe bleibt gleich! Man ladet immer die kompletten HTML, CSS, und JS Ressourcen, auch auf mobile Geräten mit eingeschränkter Bandbreite. Responsive Web Design ist nur die Spitze des Eisbergs.
Navigation Data Tables Benutzung von konditionellen Abfragen in APEX, zusammen mit Client Property Detection für die optimale Layout Generierung.
desktop mobile
@media (orientation:portrait) and (max-width: 640px) { [headers="cust_street_address1"], #CUST_STREET_ADDRESS1 { display: none; } } TD: table data/cell TH: table header
Client device property detection categorizr.isportrait categorizr.islandscape categorizr.isdesktop categorizr.istablet categorizr.ismobile http://rokitta.blogspot.nl/2013/05/how-are-you-categorizr-for-apex-part-2.html
Table Reflow, kind of like in APEX 5.0, but then for responsive ( )
Demo
http://rokitta.blogspot.com @crokitta christian@rokitta.nl http://www.themes4apex.com http://plus.google.com/+christianrokitta http://nl.linkedin.com/in/rokit/
OGh APEX World, 25. März, Zeist (NL) www.ogh.nl DOAG Development, 4. Juni, Düsseldorf www.doag.org ODTUG KScope 14, 22.26. Juni, Seattle (USA) www.kscope14.com ODTUG APEX Theming Competition competition.odtug.com Skillbuilders Online Training (www.skillbuilders.com): HTML5, CSS3 und JavaScript in APEX Einführung in Oracle APEX Advanced Oracle APEX