La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro

Presentazioni simili


Presentazione sul tema: "Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro"— Transcript della presentazione:

1 Adaptive Rendering - Css Friendly Adapters

2 Dott. Ing. Giorgetti Alessandro

3 Rendering Adattativo Il concetto di rendering adattivo (o più in generale di Adaptive Control Behaviour) nasce originariamente come mezzo per raggiungere una maggiore efficienza e flessibilità nello sviluppo di codice (in applicativi web in generale) quando si tratta di rappresentare il contenuto della stessa pagina su dispositivi differenti. Tipico è il caso di palmari e telefonini in grado di accedere ad internet, essi non sono in grado di renderizzare un pagina web in HTML standard, ma necessitano di un proprio dialetto. Due sono le strade da seguire in questo caso: 1- Riscrivere completamente linterfaccia utente e realizzarne una versione per ogni dispositivo (utilizzando versioni dedicate dei controlli). 2- Adattare linterfaccia al device lasciando ai singoli controlli lincombenza di variare la visualizzazione in base al device stesso.

4 Se poi si considerano come device distinti, oltre alla moltitudine di sistemi operativi, anche i diversi browser che esistono sul mercato per una stessa piattaforma (ognuno con le proprie peculiarità), si comprende come la tecnologia del rendering adattativo possa di fatto aiutare moltissimo. Il browser può infatti essere correttamente identificato mediante lo UserAgent della richiesta ed il controllo può variare la propria rappresentazione di conseguenza. Generalizzazione

5 Adaptive Control Behaviour Il concetto di adattatore (adapter) può esser ulteriormente generalizzato, in.NET si parla di Adaptive Control Behaviour: molti dei punti critici nel ciclo di vita di una entità (sia esso un controllo o lintera pagina) possono essere intercettati e sostituiti dai corrispondenti metodi di un adapter. E possibile infatti intercettare ed adattare altri comportamenti standard dei controlli come ad esempio: il caching, la gestione del view-state o la processazione dei dati di post-back.

6 La Necessità Gli attuali requisiti di design per un sito web impongono un maggiore rispetto della sintassi, delle regole e degli schemi associati ai linguaggi HTML e XHTML. Gli attuali requisiti di design per un sito web impongono un maggiore rispetto della sintassi, delle regole e degli schemi associati ai linguaggi HTML e XHTML. Il buon senso inoltre dovrebbe spingere a non utilizzare in modo scorretto i differenti tag del linguaggio (il tag deve essere usato per rappresentare dati tabulati, non impostare un layout). Il buon senso inoltre dovrebbe spingere a non utilizzare in modo scorretto i differenti tag del linguaggio (il tag deve essere usato per rappresentare dati tabulati, non impostare un layout). Inoltre le normative impongono ulteriori limiti: la legge Stanca (in Italia) ed altre normative europee e mondiali definiscono le caratteristiche tecniche (e non solo) minime che un sito deve avere per rispettare degli standard di accessibilità ed essere quindi fruibile da tutti in modo consono. Inoltre le normative impongono ulteriori limiti: la legge Stanca (in Italia) ed altre normative europee e mondiali definiscono le caratteristiche tecniche (e non solo) minime che un sito deve avere per rispettare degli standard di accessibilità ed essere quindi fruibile da tutti in modo consono.

7 Quando il Framework rema contro Tra i principali problemi/difficoltà da affrontare nella costruzione di un sito che rispetti i nuovi standard: 1- Layout e formattazione css-based (evitando gli stili inline il più possibile, idealmente non ce ne dovrebbero essere). 2- Abuso dei tag (ex: nella definizione del layout di una pagina). 3- Utilizzo di attributi e tag considerati obsoleti. I controlli standard di ASP.NET 1.x e 2.0 commettono entrambi questi errori.

8 Come risolvo il problema?.NET 1.x Non si ha molta scelta: per variare il rendering standard del controllo si deve ereditare la classe base del controllo e riscrivere le funzioni di rendering. Ci si scontra in questo caso con la scarsità di documentazione fornita sullimplementazione interna dei controlli. Supporto limitato per Adaptive Rendering.NET 2.0 Adaptive Rendering, supporto esteso.

9 Control Adapter Un Adapter è una classe/oggetto a cui vengono delegate determinate funzioni esposte da un controllo base (siano esse relative alla fase di rendering, gestione del viewstate, ecc…).

10 Control Adapter E possibile cambiare completamente il comportamento di un controllo, con un risultato simile a quello che si otterrebbe creando una classe che eredita dal controllo stesso, il vantaggio è che questultima può essere variata in funzione del device ed attivabile inserendo un file di definizione. Esistono diversi tipi di ContolAdapters a seconda del tipo di controllo che si vuole ridefinire: ControlAdapter - adatto per qualsiasi tipo di controllo.ControlAdapter - adatto per qualsiasi tipo di controllo. WebControlAdapter - da usare per tutti quei controlli che ereditano da WebControl.WebControlAdapter - da usare per tutti quei controlli che ereditano da WebControl. DataBoundControlAdapter - da usare per ridefinire i controlli che supportano il databound come la GridView.DataBoundControlAdapter - da usare per ridefinire i controlli che supportano il databound come la GridView. HierarchicalDataBoundControlAdapter - adatto per i controlli che supportano il caricamento di informazioni gerarchiche come il TreeView o il Menu.HierarchicalDataBoundControlAdapter - adatto per i controlli che supportano il caricamento di informazioni gerarchiche come il TreeView o il Menu.

11 Ciclo di vita di una pagina

12 Il Modello di Rendering Durante il ciclo di vita di una pagina, a seguito delle inizializzazioni e dellhandling degli eventi si rende necessario renderizzare il controllo (ovvero produrre codice HTML). Loggetto Page durante questa fase richiama ricorsivamente la funzione RenderControl() di ogni oggetto control. Al metodo viene passata una istanza della classe HtmlTextWriter (responsabile del rendering dei tag e degli attributi) sotto forma di una delle sue specializzazioni: Html32TextWriter – emette HTML 3.2. Html32TextWriter – emette HTML 3.2. XhtmlTextWriter – emette html conforme allo standard xhtml. XhtmlTextWriter – emette html conforme allo standard xhtml. ChtmlTextWriter – emette compact html per sistemi palmari. ChtmlTextWriter – emette compact html per sistemi palmari. Per identificare quale tipo di HtmlTextWriter utlizzare viene analizzata la stringa UserAgent presente in ogni richiesta Web. Questa stringa viene comparata con una lista ben definita di browser ognuno dotato delle proprie caratteristiche e tecnologie supportate. La lista viene definita attraverso una serie di files (.browser files) aderenti ad uno specifico schema. Tra le proprietà supportate vi è proprio la spacifica della classe HtmlTextWriter da utilizzare (tagwriter). Adaptive Rendring di primo livello

13 Adattatore (Adapter) Un Adapter deve ereditare dalla classe base System.Web.UI.Adapters.ControlAdapter : una classe astratta che espone i metodi Init(), Load(), Unload(), PreRender() e Render(), ecc… che verranno richiamati in sostituzione di quelli standard dei controlli. Poiché gli adapter nascono per fornire comportamenti alternativi a seconda dei differenti device le informazioni sui mapping vanno specificate nei.browser files. Adaptive Rendring di secondo livello

14 Adaptive Rendering - Architettura Control (internal rendering functions) Adapter Mappings Adapter present? Control.Render()Adapter.Render() NoYes

15 Mappings e Riconoscimento dei Browser In ASP.NET 1.x il riconoscimento dei browser veniva effettuato mediante le sezione nel web.config (o nel machine.config). In ASP.NET 2.0 tale metodo viene mantenuto ma si consiglia lutilizzo dei.browser files: file XML che consentono di specificare le caratteristiche dei differenti browser. Possono risiedere sia nella directory App_Browsers allinterno del sito, sia globalmente al persorso %SYSTEM%\Microsoft.NET\Framework\v \Config\Browsers.

16 .browser file - identificazione Utilizzati per popolare la classe HttpBrowserCapabilities che istruisce ASP.NET sulle funzionalità esposte dal browser e su come renderizzare la pagina. Specifica: - elemento che definisce un set di capability da assegnare ad uno o più browsers, lattributo parentID viene utilizzato per identificare una categoria/insieme di browsers allinterno di una ben definita gerarchia. - elemento che definisce un set di capability da assegnare ad uno o più browsers, lattributo parentID viene utilizzato per identificare una categoria/insieme di browsers allinterno di una ben definita gerarchia. - subelement contenente le regole di identificazione, espresse come regular expression che devono effettuare matching sulla stringa UserAgent della richiesta. - subelement contenente le regole di identificazione, espresse come regular expression che devono effettuare matching sulla stringa UserAgent della richiesta. - subelement che speficica il match di inclusione. - subelement che speficica il match di inclusione. - subelement che specifica i match di esclusione. - subelement che specifica i match di esclusione.

17 Gerarchia dei Browsers

18 .browser file … Esempio di definizione delle caratteristiche del browser Internet Explorer

19 .browser file – mapping degli adapter Il tipo System.Web.UI.Control dispone di una proprietà Adapter che restituisce l'oggetto incaricato di operare le normali operazioni di un controllo per uno specifico device. Per creare loggetto il metodo ResolveAdapter() identifica il dispositivo in base alle definizioni dei browser: Viene analizzata la sezione controlAdapters del tag browser. Viene analizzata la sezione controlAdapters del tag browser. controlAdapters è costituito da una lista di tag adapter indicanti la coppia controlType/adapterType. controlAdapters è costituito da una lista di tag adapter indicanti la coppia controlType/adapterType.

20 .browser file - CssAdapterControls adapterType="CSSFriendly.MenuAdapter" /> adapterType="CSSFriendly.TreeViewAdapter" /> adapterType="CSSFriendly.DetailsViewAdapter" />… …

21 CSS Friendly Adapters Si tratta di una serie di Adapters appositamente creati per far fronte alla duplice necessità da parte degli web-designer di avere controlli che renderizzino un layout corretto e poter specificare tutti gli attributi di stile per i controlli utilizzando i fogli di stile invece che ricorrere ad attributi server-side. Tutti gli attributi di stile vengono incapsulati in una stessa classe CSS, in questo modo è possibile creare stili diversi associati a classi diverse. Tutti gli attributi di stile vengono incapsulati in una stessa classe CSS, in questo modo è possibile creare stili diversi associati a classi diverse. E possibile specificare il set di stili associato ad un particolare controllo ricorrendo allattributo CssSelectorClass. E possibile specificare il set di stili associato ad un particolare controllo ricorrendo allattributo CssSelectorClass. Per garantire il corretto wiring degli eventi (generati dai controlli adattati) le funzioni di gestione devono essere specificare ricorrendo ad attributi che inizino con il prefisso OnAdapted (ex per una treeview: OnSelectedNodeChanged="SelectedNodeChanged OnAdaptedSelectedNodeChanged="SelectedNodeChanged). Per garantire il corretto wiring degli eventi (generati dai controlli adattati) le funzioni di gestione devono essere specificare ricorrendo ad attributi che inizino con il prefisso OnAdapted (ex per una treeview: OnSelectedNodeChanged="SelectedNodeChanged OnAdaptedSelectedNodeChanged="SelectedNodeChanged). Alcuni eventi tipici di determinati controlli potrebbero non essere più supportati a causa delloverride delle funzioni di generazione degli eventi di postback (ex: gli eventi expand e collapse della treeview). Alcuni eventi tipici di determinati controlli potrebbero non essere più supportati a causa delloverride delle funzioni di generazione degli eventi di postback (ex: gli eventi expand e collapse della treeview).

22 CSS Friendly Adapters - Utilizzo Istallare lo Starter Kit (http://www.asp.net/cssadapters/).http://www.asp.net/cssadapters/ Creare un nuovo sito web mediante i template messi a disposizione dallo Starter Kit. Copiare il file CssFriendlyAdapters.browser nella directory App_Browsers del sito di destinazione. Copiare il contenuto della directory Adapters situata in App_Code nella corrispondnete posizione nel sito di destinazione. Copiare la directory CSS situata nella root del sito nella corrispondente posizione del sito di destinazione. Copiare la directory Javascript situata nella root del sito nella corrispondente posizione del sito di destinazione. Inserire in ogni pagina che deve utlizzare gli adapters (meglio se nelle master page) i link ai file css comuni utilizzando le direttive: Creare gli opportuni fogli di stile nella cartella App_Themes. Settare nel web.config lelemento xhtmConformance a strict ( ) in modo da indicare allengine Asp.NET di renderizzare gli elemnti in conformità allo standard xhtml.

23 CSS Friendly Adapters Esempio HTML Untitled Page Untitled Page Orientation="Horizontal">

24 CSS Friendly Adapters Esempio CSS.MyMenu { background-color: #B9C7E4; width: 100%; }.MyMenu ul.AspNet-Menu /* Tier 1 */ { left: 160px; }.MyMenu ul.AspNet-Menu ul /* Tier 2 */ { width: 10em; top: 100%; left: 0; border: 1px solid #003398; }.MyMenu ul.AspNet-Menu ul ul /* Tier 3+ */ { top: 0em; left: 10em; border: 1px solid #003398; }.MyMenu li /* all list items */ { width: 10em; background-color: #B9C7E4; color: #003398; }.MyMenu li:hover, /* list items being hovered over */.MyMenu li.AspNet-Menu-Hover { background: Black; }.MyMenu a, /* all anchors and spans (nodes with no link) */.MyMenu span { color: #003398; padding: 4px 2px 4px 8px; }

25 DEMO Mammuth s.r.l.

26 DEMO

27 DEMO

28 DEMO

29 DEMO

30 Limiti degli Adapter Controls Molti degli attributi di stile e formattazione impostabili nel designer vengono completamente ignorati, tutta la formattazione viene fatta mediante classi css. Molti degli attributi di stile e formattazione impostabili nel designer vengono completamente ignorati, tutta la formattazione viene fatta mediante classi css. Non tutti gli eventi standard di un controllo vengono gestiti (gli eventi collapse ed expand di una treeview ad esempio). Non tutti gli eventi standard di un controllo vengono gestiti (gli eventi collapse ed expand di una treeview ad esempio). Necessitano ancora di alcune piccole correzioni per generare codice completamente accessibile soprattutto in caso di rendering di liste di elementi prive di contenuto. Necessitano ancora di alcune piccole correzioni per generare codice completamente accessibile soprattutto in caso di rendering di liste di elementi prive di contenuto.

31 DOMANDE ? (Spero di no)


Scaricare ppt "Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro"

Presentazioni simili


Annunci Google