APEX Templates OGH APEX dag 30 maart Art Melssen
Introductie Over de spreker 4 jaar APEX ervaring / 7 jaar Oracle 10 jaar web technologie ervaring APEX trajecten o.a. bij Centraal Boekhuis en eboekhuis 6 live applicaties Kleinste 2 gebruikers Grootste 1500 gebruikers (Nog) geen blogger
Agenda Over het onderwerp From scratch Web standards basics HTML en CSS onmisbare tips Templates Page Buttons Form Items Reports Regions Items
From Scratch Waarom opnieuw beginnen Ga voor web standards Opzet templates niet volgens web standards Streef naar een strikte scheiding tussen HTML : Content & structuur CSS : Presentatie Javascript : Gedrag Voordelen Taakscheiding Snellere ontwikkeling* / makkelijker onderhoud Betere ondersteuning in browsers Betere frontend performance voor drukke sites Goed startpunt voor toegankelijke sites (accessibility)
Web standards Focus op een juiste scheding tussen structuur en vormgeving HTML alleen gebruiken voor de inhoud en de structuur. Een puur html document zou je niets moeten vertellen over hoe het eruit ziet. Noch over kleuren, lettertype Noch over layout Het zou je moeten vertellen wat de gegevens zijn en wat de semantiek is. Gebruik de juiste HTML elementen voor de juiste doeleinden Gebruik CSS voor de vormgeving van die structuur Volg de (laatste) W3C standaarden! Goed voorbeeld : http://www.csszengarden.com
Web standards en APEX Anatomie van een standaard apex theme Geringe scheiding HTML Geen DOCTYPE! Layout veel gestuurd d.m.v. tabellen (Te) veel templates per component. CSS 15 Page Templates 22 Regions Gebruik van theme specifieke classes Alleen gebruik van basic selectors Element Type Selectors ( td ) Class Selectors ( a.listitem ) ID Selectors (#apexir_search ) Vaak dubbele styling aanwezig op meerdere niveaus http://en.wikipedia.org/wiki/quirks_mode http://www.quirksmode.org/css/quirksmode.html
HTML & APEX Do s & dont s Do s Gebruik altijd een DOCTYPE Gebruik het HTML element dat het beste de lading van het gegeven dekt. Ken je browser-base http://www.quirksmode.org/js/detect.html Don t Gebruik geen tabellen alleen maar voor positionering van regions of items Vermijd het gebruik van HTML op andere plaatsen dan in templates. Dus vermijd pre/post element tags op items bijv (<b> </b>) Neem niet direct items op in templates <input type= text name= f01 /> &APP_USERR.
CSS & APEX Do & don ts Do s Gebruik bij ontwikkeling meerdere stylesheets reset.css 1, layout.css, typography.css, forms.css, iex.css, print.css Ontwikkel in FireFox met FireBug Don t Neem geen <style> sectie op in een specifieke pagina Neem geen style= attributen op in items of regions Ontwikkel vooral niet in IE 1: http://meyerweb.com/eric/tools/css/reset/
CSS & APEX Onmisbare utilities Tijdens ontwikkeling: Firebug & extensies CSS Usage FireFinder Een goede reference http://reference.sitepoint.com http://www.quirksmode.org http://a.deveria.com/caniuse Runtime : ie-css3.js http://www.keithclark.co.uk/labs/ie-css3/ jquery
Agenda From scratch Web standards basics HTML en CSS onmisbare tips Templates Page Lists Buttons Reports
Page Templates (1) Ga voor één generiek page template Themes hebben (te) veel page templates. 15 verschillende templates Notabs, OneLevelTabs, TwoLevelTabs, Printerfriendly, Login, Popup, Pages with Sidebar Je zou prima kunnen volstaan met 1 template.
Page Template Het standaard page template (1) http://developer.yahoo.com/performance/rules.html http://www.alistapart.com/articles/return-of-the-mobile-stylesheet
Page Template Het standaard page template (1)
Page Templates (2) één generiek page template Printen van een pagina via <CTRL>+P Ingebouwde browser functionaliteit dat alleen stylesheets gebruikt worden met media= print of media= all <link rel="stylesheet" type="text/css" href=""#image_prefix#css/print-1.0.4.css" media="print" />
Page Template Tips voor mobiel gebruik Voor regions : Gebruik geen region columns Gebruik floats Bij reports : Gebruik bij report evt application items om kolommen te verbergen. Of maak gebruik van drijvende rijen m.b.v. Named Column templates (row template)
Page Template Tips voor mobiel gebruik (2)
Page Template Tips voor mobiel gebruik (2)
Page Template Tips voor mobiel gebruik (2)
Buttons APEX Verschillende buttons HTML buttons Style via Button Attributes Button Name (ID) Template Based Buttons bieden meer flexibiliteit. Meestal is 1 template voor alle buttons genoeg! #LINK# #LABEL# #BUTTON_ATTRIBUTES#
Buttons (2) Technieken, states & sprites Gebruik zoveel mogelijk dit template : <a href= #LINK#" title= #LABEL# #BUTTON_ATTRIBUTES# #BUTTON_ID#><span>#LABEL#</span></a> Maak styles voor button states default, active (pressed), hover, focus
Buttons (3) Technieken icons Een button template met een icon : <a href= #LINK#" title= #LABEL# #BUTTON_ID#><span #BUTTON_ATTRIBUTES# >#LABEL#</span></a> Button Attributes worden gebruikt om het icon te kiezen http://woork.blogspot.com/2008/06/beautiful-css-buttons-with-icon-set.html
Buttons (4) Technieken, flexibele buttons & regions Region voorbeeld met button holder http://kailoon.com/css-sliding-door-using-only-1-image/
Form Items Standaard text items Geen templates voor Form Items Toch is het te voorzien van een stijl
Form Items (2) Extra opmaak & functionaliteit dmv jquery Ook extensies dmv javascript op form elementen zijn mogelijk Gebruik jquery Plugins Passroid Plugin http://plugins.jquery.com/project/passroids* http://www.sitepoint.com/books/forms1/
Form Items (3) Extra opmaak & functionaliteit dmv jquery (2) Ook extensies dmv javascript op form elementen zijn mogelijk Gebruik jquery Plugins Selectbox replacement http://plugins.jquery.com/project/selectbox
Reports (1) Named Column templates Vaak meerdere column named templates. Ingewikkelde layout is niet met alleen styles te regelen
Reports (2) Generic Column Templates Column template gewoonlijk 1 basic template
Reports (2) Generic Column Templates Gebruik geen #HIGHLIGHT_ROW# http://www.learningjquery.com/2008/12/quick-tip-click-table-row-to-trigger-a-checkbox-click
Reports (2) Generic Column Templates http://www.learningjquery.com/2008/12/quick-tip-click-table-row-to-trigger-a-checkbox-click
Regions 22 region templates. Wederom : vaak 1 template al genoeg Ook voor de hide en show region http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/
Regions 22 region templates. Wederom : vaak 1 template al genoeg Ook voor de hide en show region http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/
Lists Het flexibele navigatiemiddel Een eenvoudig template werkt voor alles http://www.alistapart.com/articles/dropdowns/
Lists Het flexibele navigatiemiddel Een eenvoudig template werkt voor alles http://www.alistapart.com/articles/dropdowns/ http://www.htmldog.com/articles/suckerfish/dropdowns/ http://users.tpg.com.au/j_birch/plugins/superfish/ http://www.alistapart.com/articles/sprites
De te zetten stappen Durf af te stappen van een standaard template Ga voor de laatste standaarden Scheid structuur van vormgeving Investeer in een grondige CSS en jquery kennis
Vragen