APEX Templates. OGH APEX dag 30 maart. Art Melssen. 31 maart 2010

Maat: px

Weergave met pagina beginnen:

Download "APEX Templates. OGH APEX dag 30 maart. Art Melssen. 31 maart 2010"

Joanna Sanders
8 jaren geleden
Aantal bezoeken:

1 APEX Templates OGH APEX dag 30 maart Art Melssen

2 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

3 Agenda Over het onderwerp From scratch Web standards basics HTML en CSS onmisbare tips Templates Page Buttons Form Items Reports Regions Items

4 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)

5 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 :

10 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

11 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 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.

12 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:

13 CSS & APEX Onmisbare utilities Tijdens ontwikkeling: Firebug & extensies CSS Usage FireFinder Een goede reference Runtime : ie-css3.js jquery

14 Agenda From scratch Web standards basics HTML en CSS onmisbare tips Templates Page Lists Buttons Reports

15 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.

16 Page Template Het standaard page template (1)

17 Page Template Het standaard page template (1)

18 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 css" media="print" />

21 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)

22 Page Template Tips voor mobiel gebruik (2)

23 Page Template Tips voor mobiel gebruik (2)

24 Page Template Tips voor mobiel gebruik (2)

25 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#

26 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

27 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

28 Buttons (4) Technieken, flexibele buttons & regions Region voorbeeld met button holder

29 Form Items Standaard text items Geen templates voor Form Items Toch is het te voorzien van een stijl

30 Form Items (2) Extra opmaak & functionaliteit dmv jquery Ook extensies dmv javascript op form elementen zijn mogelijk Gebruik jquery Plugins Passroid Plugin

31 Form Items (3) Extra opmaak & functionaliteit dmv jquery (2) Ook extensies dmv javascript op form elementen zijn mogelijk Gebruik jquery Plugins Selectbox replacement

32 Reports (1) Named Column templates Vaak meerdere column named templates. Ingewikkelde layout is niet met alleen styles te regelen

33 Reports (2) Generic Column Templates Column template gewoonlijk 1 basic template

34 Reports (2) Generic Column Templates Gebruik geen #HIGHLIGHT_ROW#

35 Reports (2) Generic Column Templates

36 Regions 22 region templates. Wederom : vaak 1 template al genoeg Ook voor de hide en show region

37 Regions 22 region templates. Wederom : vaak 1 template al genoeg Ook voor de hide en show region

38 Lists Het flexibele navigatiemiddel Een eenvoudig template werkt voor alles

39 Lists Het flexibele navigatiemiddel Een eenvoudig template werkt voor alles

40 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

41 Vragen

Vergelijkbare documenten

Frontend ontwikkeling

Frontend ontwikkeling Mark Jansen Edwin Vlieg PHPFreakz ledendag 10 november 2007 Frontend ontwikkeling De interface is je product richting de eindgebruiker Goede PHP code met een slechte interface geeft