1 APEX Templates OGH APEX dag 30 maart Art Melssen2 Introductie Over de spreker 4 jaar APEX ervaring / 7 jaar Oracle 10 jaar web technologie ervaring ...
• 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
31 maart 2010
Agenda Over het onderwerp
• From scratch • Web standards basics • HTML en CSS onmisbare tips • Templates – – – – – –
Page Buttons Form Items Reports Regions Items
31 maart 2010
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)
31 maart 2010
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
31 maart 2010
31 maart 2010
31 maart 2010
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 – 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 31 maart 2010
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 ()
– Neem niet direct items op in templates • • &APP_USERR. 31 maart 2010
CSS & APEX Do & don‟ts
• Do‟s – Gebruik bij ontwikkeling meerdere stylesheets • reset.css1, 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/
• From scratch • Web standards basics • HTML en CSS onmisbare tips • Templates – – – –
Page Lists Buttons Reports
31 maart 2010
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.
• Printen van een pagina via +P – Ingebouwde browser functionaliteit dat alleen stylesheets gebruikt worden met media=“print” of media=“all” –
31 maart 2010
31 maart 2010
31 maart 2010
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) 31 maart 2010
Page Template Tips voor mobiel gebruik (2)
31 maart 2010
Page Template Tips voor mobiel gebruik (2)
31 maart 2010
Page Template Tips voor mobiel gebruik (2)
31 maart 2010
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#
31 maart 2010
Buttons (2) Technieken, states & sprites
• Gebruik zoveel mogelijk dit template : – <span>#LABEL#
• Maak styles voor button states – default, active (pressed), hover, focus
• 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
