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

31
Adaptive Rendering Adaptive Rendering - - Css Friendly Css Friendly Adapters Adapters

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

Page 1: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

Adaptive Adaptive Rendering Rendering

--Css Friendly Css Friendly

AdaptersAdapters

Page 2: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

Dott. Ing. Giorgetti Dott. Ing. Giorgetti AlessandroAlessandro

[email protected]

www.dotnetmarche.org

www.GruppoSID.com

Page 3: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

Rendering AdattativoRendering AdattativoIl concetto di rendering adattivo (o più in generale di Adaptive Il concetto di rendering adattivo (o più in generale di Adaptive Control Behaviour) nasce originariamente come mezzo per Control Behaviour) nasce originariamente come mezzo per raggiungere una maggiore efficienza e flessibilità nello sviluppo di raggiungere una maggiore efficienza e flessibilità nello sviluppo di codice (in applicativi web in generale) quando si tratta di codice (in applicativi web in generale) quando si tratta di rappresentare il contenuto della stessa pagina su dispositivi rappresentare il contenuto della stessa pagina su dispositivi differenti.differenti.

Tipico è il caso di palmari e telefonini in grado di accedere ad Tipico è il caso di palmari e telefonini in grado di accedere ad internet, essi non sono in grado di renderizzare un pagina web in internet, essi non sono in grado di renderizzare un pagina web in HTML standard, ma necessitano di un proprio dialetto.HTML standard, ma necessitano di un proprio dialetto.

Due sono le strade da seguire in questo caso:Due sono le strade da seguire in questo caso:

1- Riscrivere completamente l’interfaccia utente e realizzarne una 1- Riscrivere completamente l’interfaccia utente e realizzarne una versione per ogni dispositivo (utilizzando versioni dedicate dei versione per ogni dispositivo (utilizzando versioni dedicate dei controlli).controlli).

2- Adattare l’interfaccia al device lasciando ai singoli controlli 2- Adattare l’interfaccia al device lasciando ai singoli controlli l’incombenza di variare la visualizzazione in base al device stesso.l’incombenza di variare la visualizzazione in base al device stesso.

Page 4: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

Se poi si considerano come device distinti, oltre Se poi si considerano come device distinti, oltre alla moltitudine di sistemi operativi, anche i alla moltitudine di sistemi operativi, anche i diversi browser che esistono sul mercato per diversi browser che esistono sul mercato per una stessa piattaforma (ognuno con le proprie una stessa piattaforma (ognuno con le proprie peculiarità), si comprende come la tecnologia peculiarità), si comprende come la tecnologia del rendering adattativo possa di fatto aiutare del rendering adattativo possa di fatto aiutare moltissimo.moltissimo.

Il browser può infatti essere correttamente Il browser può infatti essere correttamente identificato mediante lo UserAgent della identificato mediante lo UserAgent della richiesta ed il controllo può variare la propria richiesta ed il controllo può variare la propria rappresentazione di conseguenza.rappresentazione di conseguenza.

GeneralizzazioneGeneralizzazione

Page 5: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

Adaptive Control Adaptive Control BehaviourBehaviour

Il concetto di adattatore (adapter) può esser Il concetto di adattatore (adapter) può esser ulteriormente generalizzato, in .NET si parla ulteriormente generalizzato, in .NET si parla di Adaptive Control Behaviour: molti dei punti di Adaptive Control Behaviour: molti dei punti critici nel ciclo di vita di una entità (sia esso critici nel ciclo di vita di una entità (sia esso un controllo o l’intera pagina) possono essere un controllo o l’intera pagina) possono essere intercettati e sostituiti dai corrispondenti intercettati e sostituiti dai corrispondenti metodi di un adapter.metodi di un adapter.

E’ possibile infatti E’ possibile infatti intercettareintercettare ed ed adattareadattare altri altri comportamenti standard dei controlli come comportamenti standard dei controlli come ad esempio: il caching, la gestione del view-ad esempio: il caching, la gestione del view-state o la processazione dei dati di post-back.state o la processazione dei dati di post-back.

Page 6: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

La NecessitàLa Necessità Gli attuali requisiti di design per un sito web Gli attuali requisiti di design per un sito web

impongono un maggiore rispetto della sintassi, delle impongono un maggiore rispetto della sintassi, delle regole e degli schemi associati ai linguaggi HTML e regole e degli schemi associati ai linguaggi HTML e XHTML.XHTML.

Il buon senso inoltre dovrebbe spingere a non Il buon senso inoltre dovrebbe spingere a non utilizzare in modo scorretto i differenti tag del utilizzare in modo scorretto i differenti tag del linguaggio (il tag <table> deve essere usato per linguaggio (il tag <table> deve essere usato per rappresentare dati tabulati, non impostare un layout).rappresentare dati tabulati, non impostare un layout).

Inoltre le normative impongono ulteriori limiti: la legge Inoltre le normative impongono ulteriori limiti: la legge Stanca (in Italia) ed altre normative europee e Stanca (in Italia) ed altre normative europee e mondiali definiscono le caratteristiche tecniche (e non mondiali definiscono le caratteristiche tecniche (e non solo) minime che un sito deve avere per rispettare solo) minime che un sito deve avere per rispettare degli standard di accessibilità ed essere quindi fruibile degli standard di accessibilità ed essere quindi fruibile da tutti in modo consono.da tutti in modo consono.

Page 7: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

Quando il Framework ‘rema Quando il Framework ‘rema contro’contro’

Tra i principali problemi/difficoltà da affrontare nella Tra i principali problemi/difficoltà da affrontare nella costruzione di un sito che rispetti i nuovi standard:costruzione di un sito che rispetti i nuovi standard:

1- Layout e formattazione css-based (evitando gli stili 1- Layout e formattazione css-based (evitando gli stili inline il più possibile, idealmente non ce ne inline il più possibile, idealmente non ce ne dovrebbero essere).dovrebbero essere).

2- Abuso dei tag (ex: <table> nella definizione del 2- Abuso dei tag (ex: <table> nella definizione del layout di una pagina).layout di una pagina).

3- Utilizzo di attributi e tag considerati obsoleti.3- Utilizzo di attributi e tag considerati obsoleti.

I controlli standard di ASP.NET 1.x e 2.0 commettono I controlli standard di ASP.NET 1.x e 2.0 commettono entrambi questi errori.entrambi questi errori.

Page 8: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

Come risolvo il Come risolvo il problema?problema?

.NET 1.x.NET 1.xNon si ha molta scelta: per variare il Non si ha molta scelta: per variare il rendering standard del controllo si deve rendering standard del controllo si deve ereditare la classe base del controllo e ereditare la classe base del controllo e riscrivere le funzioni di rendering. Ci si riscrivere le funzioni di rendering. Ci si scontra in questo caso con la scarsità di scontra in questo caso con la scarsità di documentazione fornita documentazione fornita sull’implementazione interna dei controlli.sull’implementazione interna dei controlli.Supporto limitato per Adaptive RenderingSupporto limitato per Adaptive Rendering

.NET 2.0.NET 2.0Adaptive Rendering, supporto esteso.Adaptive Rendering, supporto esteso.

Page 9: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

Control AdapterControl Adapter

Un Un AdapterAdapter è una classe/oggetto a è una classe/oggetto a cui vengono delegate determinate cui vengono delegate determinate funzioni esposte da un controllo funzioni esposte da un controllo

base (siano esse relative alla fase base (siano esse relative alla fase di rendering, gestione del di rendering, gestione del

viewstate, ecc…).viewstate, ecc…).

Page 10: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

Control AdapterControl AdapterE’ possibile cambiare completamente il E’ possibile cambiare completamente il

comportamento di un controllo, con un risultato comportamento di un controllo, con un risultato simile a quello che si otterrebbe creando una classe simile a quello che si otterrebbe creando una classe che eredita dal controllo stesso, il vantaggio è che che eredita dal controllo stesso, il vantaggio è che

quest’ultima può essere variata in funzione del quest’ultima può essere variata in funzione del device ed attivabile inserendo un file di definizione.device ed attivabile inserendo un file di definizione.

Esistono diversi tipi di ContolAdapters a seconda del tipo di controllo Esistono diversi tipi di ContolAdapters a seconda del tipo di controllo che si vuole ridefinire:che si vuole ridefinire:

•ControlAdapter - ControlAdapter - adatto per qualsiasi tipo di controllo.adatto per qualsiasi tipo di controllo.

•WebControlAdapter - WebControlAdapter - da usare per tutti quei controlli che da usare per tutti quei controlli che ereditano da WebControl.ereditano da WebControl.

•DataBoundControlAdapter - DataBoundControlAdapter - da usare per ridefinire i controlli che da usare per ridefinire i controlli che supportano il databound come la GridView.supportano il databound come la GridView.

•HierarchicalDataBoundControlAdapter - HierarchicalDataBoundControlAdapter - adatto per i controlli adatto per i controlli che supportano il caricamento di informazioni gerarchiche come il che supportano il caricamento di informazioni gerarchiche come il TreeView o il Menu.TreeView o il Menu.

Page 11: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

Ciclo di vita di una Ciclo di vita di una paginapagina

Page 12: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

Il Modello di RenderingIl Modello di RenderingDurante il ciclo di vita di una pagina, a seguito delle inizializzazioni e Durante il ciclo di vita di una pagina, a seguito delle inizializzazioni e

dell’handling degli eventi si rende necessario renderizzare il controllo dell’handling degli eventi si rende necessario renderizzare il controllo (ovvero produrre codice HTML). L’oggetto Page durante questa fase (ovvero produrre codice HTML). L’oggetto Page durante questa fase richiama ricorsivamente la funzione RenderControl() di ogni oggetto richiama ricorsivamente la funzione RenderControl() di ogni oggetto control.control.

Al metodo viene passata una istanza della classe HtmlTextWriter Al metodo viene passata una istanza della classe HtmlTextWriter (responsabile del rendering dei tag e degli attributi) sotto forma di (responsabile del rendering dei tag e degli attributi) sotto forma di una delle sue specializzazioni: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 Per identificare quale tipo di HtmlTextWriter utlizzare viene analizzata la stringa UserAgent presente in ogni richiesta Web. stringa UserAgent presente in ogni richiesta Web.

Questa stringa viene comparata con una lista ben definita di browser Questa stringa viene comparata con una lista ben definita di browser ognuno dotato delle proprie caratteristiche e tecnologie supportate. La ognuno dotato delle proprie caratteristiche e tecnologie supportate. La lista viene definita attraverso una serie di files (.browser files) aderenti lista viene definita attraverso una serie di files (.browser files) aderenti ad uno specifico schema. Tra le proprietà supportate vi è proprio la ad uno specifico schema. Tra le proprietà supportate vi è proprio la spacifica della classe HtmlTextWriter da utilizzare (spacifica della classe HtmlTextWriter da utilizzare (tagwritertagwriter). ).

Adaptive Rendring di “primo livello”Adaptive Rendring di “primo livello”

Page 13: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

Adattatore (Adapter)Adattatore (Adapter)

Un Adapter deve ereditare dalla classe base Un Adapter deve ereditare dalla classe base System.Web.UI.Adapters.ControlAdapter : System.Web.UI.Adapters.ControlAdapter : una classe astratta che espone i metodi una classe astratta che espone i metodi Init(), Load(), Unload(), PreRender() e Init(), Load(), Unload(), PreRender() e Render(), ecc…Render(), ecc… che verranno richiamati in che verranno richiamati in sostituzione di quelli standard dei controlli. sostituzione di quelli standard dei controlli.

Poiché gli adapter nascono per fornire Poiché gli adapter nascono per fornire comportamenti alternativi a seconda dei comportamenti alternativi a seconda dei differenti device le informazioni sui mapping differenti device le informazioni sui mapping vanno specificate nei “.browser files”.vanno specificate nei “.browser files”.

Adaptive Rendring di “secondo livello”Adaptive Rendring di “secondo livello”

Page 14: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

Adaptive Rendering - Adaptive Rendering - ArchitetturaArchitettura

ControlControl(internal rendering functions)

Adapter MappingsAdapter Mappings

Adapter present?Adapter present?

Control.Render()Control.Render() Adapter.Render()Adapter.Render()

No Yes

Page 15: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

Mappings e Riconoscimento Mappings e Riconoscimento dei Browserdei Browser

In ASP.NET 1.x il riconoscimento dei browser In ASP.NET 1.x il riconoscimento dei browser veniva effettuato mediante le sezione veniva effettuato mediante le sezione <browserCaps> nel web.config (o nel <browserCaps> nel web.config (o nel machine.config).machine.config).

In ASP.NET 2.0 tale metodo viene mantenuto ma In ASP.NET 2.0 tale metodo viene mantenuto ma si consiglia l’utilizzo dei .browser files: file si consiglia l’utilizzo dei .browser files: file XML che consentono di specificare le XML che consentono di specificare le caratteristiche dei differenti browser. caratteristiche dei differenti browser.

Possono risiedere sia nella directory Possono risiedere sia nella directory ‘App_Browsers’ all’interno del sito, sia ‘App_Browsers’ all’interno del sito, sia globalmente al persorso ‘%SYSTEM%\globalmente al persorso ‘%SYSTEM%\Microsoft.NET\Framework\v2.0.50727\Config\Microsoft.NET\Framework\v2.0.50727\Config\Browsers’.Browsers’.

Page 16: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

.browser file - .browser file - identificazioneidentificazione

Utilizzati per popolare la classe HttpBrowserCapabilities che Utilizzati per popolare la classe HttpBrowserCapabilities che istruisce ASP.NET sulle funzionalità esposte dal browser e istruisce ASP.NET sulle funzionalità esposte dal browser e su come renderizzare la pagina.su come renderizzare la pagina.

Specifica:Specifica: <browser parentID=“…”> - elemento che definisce un set <browser parentID=“…”> - elemento che definisce un set

di capability da assegnare ad uno o più browsers, di capability da assegnare ad uno o più browsers, l’attributo parentID viene utilizzato per identificare una l’attributo parentID viene utilizzato per identificare una categoria/insieme di browsers all’interno di una ben categoria/insieme di browsers all’interno di una ben definita gerarchia.definita gerarchia.

<identification> - subelement contenente le regole di <identification> - subelement contenente le regole di identificazione, espresse come regular expression che identificazione, espresse come regular expression che devono effettuare matching sulla stringa UserAgent della devono effettuare matching sulla stringa UserAgent della richiesta.richiesta.

<useragent match=“” /> - subelement che speficica il <useragent match=“” /> - subelement che speficica il match di inclusione.match di inclusione.

<useragent nonMatch=“” /> - subelement che specifica i <useragent nonMatch=“” /> - subelement che specifica i match di esclusione.match di esclusione.

Page 17: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

Gerarchia dei BrowsersGerarchia dei Browsers

Page 18: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

.browser file.browser file

<browsers><browsers> <browser<browser id="IE" id="IE" parentIDparentID="Mozilla"> ="Mozilla"> <identification><identification>

<userAgent match<userAgent match="^Mozilla[^(]*\([C|c]ompatible;\="^Mozilla[^(]*\([C|c]ompatible;\s*MSIE (?’version’(?’major’\d+)(?’minor’\.\d+)(?’letters’\w*)) s*MSIE (?’version’(?’major’\d+)(?’minor’\.\d+)(?’letters’\w*)) (?’extra’[^)]*)" /> (?’extra’[^)]*)" />

<userAgent nonMatch<userAgent nonMatch="Opera|Go\.Web|Windows ="Opera|Go\.Web|Windows CE|EudoraWeb" /> CE|EudoraWeb" /> </identification></identification> <capabilities><capabilities>

<capability name="browser" value="IE" /><capability name="browser" value="IE" /><capability name="extra" value="${extra}" /> <capability name="extra" value="${extra}" /> <capability name="isColor" value="true" /><capability name="isColor" value="true" />

……

Esempio di definizione delle caratteristiche del browser Internet Explorer

Page 19: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

.browser file – mapping .browser file – mapping degli adapterdegli adapter

Il tipo System.Web.UI.Control dispone di una Il tipo System.Web.UI.Control dispone di una proprietà proprietà AdapterAdapter che restituisce l'oggetto che restituisce l'oggetto incaricato di operare le normali operazioni di incaricato di operare le normali operazioni di un controllo per uno specifico device. un controllo per uno specifico device.

Per creare l’oggetto il metodo Per creare l’oggetto il metodo ResolveAdapter() ResolveAdapter() identifica il dispositivo in identifica il dispositivo in base alle definizioni dei browser:base alle definizioni dei browser:

Viene analizzata la sezione Viene analizzata la sezione controlAdapterscontrolAdapters del tag del tag browser.browser.

controlAdapterscontrolAdapters è costituito da una lista di tag è costituito da una lista di tag adapteradapter indicanti la coppia indicanti la coppia controlTypecontrolType//adapterType.adapterType.

Page 20: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

.browser file - .browser file - CssAdapterControlsCssAdapterControls

<browsers><browsers> <<browserbrowser refID=" refID="DefaultDefault">"> <controlAdapters><controlAdapters> <adapter controlType="System.Web.UI.WebControls.Menu"<adapter controlType="System.Web.UI.WebControls.Menu" adapterType="CSSFriendly.MenuAdapter" />adapterType="CSSFriendly.MenuAdapter" /> <adapter controlType="System.Web.UI.WebControls.TreeView"<adapter controlType="System.Web.UI.WebControls.TreeView" adapterType="CSSFriendly.TreeViewAdapter" />adapterType="CSSFriendly.TreeViewAdapter" /> <adapter controlType="System.Web.UI.WebControls.DetailsView"<adapter controlType="System.Web.UI.WebControls.DetailsView" adapterType="CSSFriendly.DetailsViewAdapter" />adapterType="CSSFriendly.DetailsViewAdapter" />

…… </controlAdapters></controlAdapters> </browser></browser>

<browser id="W3C_Validator" parentID="default"><browser id="W3C_Validator" parentID="default"> <identification><identification> <userAgent match="^W3C_Validator" /><userAgent match="^W3C_Validator" /> </identification></identification> <capabilities><capabilities> <capability name="browser" value="W3C Validator" /><capability name="browser" value="W3C Validator" /> <capability name="ecmaScriptVersion" value="1.2" /><capability name="ecmaScriptVersion" value="1.2" />……

<capability name="tagWriter" value="System.Web.UI.HtmlTextWriter" /><capability name="tagWriter" value="System.Web.UI.HtmlTextWriter" /> <capability name="w3cdomversion" value="1.0" /><capability name="w3cdomversion" value="1.0" /> </capabilities></capabilities> </browser></browser></browsers></browsers>

Page 21: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

CSS Friendly AdaptersCSS Friendly AdaptersSi tratta di una serie di Adapters appositamente creati per far fronte Si tratta di una serie di Adapters appositamente creati per far fronte

alla duplice necessità da parte degli web-designer di avere alla duplice necessità da parte degli web-designer di avere controlli che renderizzino un layout corretto e poter specificare controlli che renderizzino un layout corretto e poter specificare tutti gli attributi di stile per i controlli utilizzando i fogli di stile tutti gli attributi di stile per i controlli utilizzando i fogli di stile invece che ricorrere ad attributi server-side.invece che ricorrere ad attributi server-side.

Tutti gli attributi di stile vengono incapsulati in una stessa classe Tutti gli attributi di stile vengono incapsulati in una stessa classe CSS, in questo modo è possibile creare stili diversi associati a CSS, in questo modo è possibile creare stili diversi associati a classi diverse.classi diverse.

E’ possibile specificare il set di stili associato ad un particolare E’ possibile specificare il set di stili associato ad un particolare controllo ricorrendo all’attributo controllo ricorrendo all’attributo CssSelectorClassCssSelectorClass..

Per garantire il corretto wiring degli eventi (generati dai controlli Per garantire il corretto wiring degli eventi (generati dai controlli adattati) le funzioni di gestione devono essere specificare adattati) le funzioni di gestione devono essere specificare ricorrendo ad attributi che inizino con il prefisso ricorrendo ad attributi che inizino con il prefisso OnAdaptedOnAdapted (ex (ex per una treeview: per una treeview: OOnSelectedNodeChanged="SelectedNodeChanged“nSelectedNodeChanged="SelectedNodeChanged“ OnAdaptedSelectedNodeChanged="SelectedNodeChanged“OnAdaptedSelectedNodeChanged="SelectedNodeChanged“).).

Alcuni eventi tipici di determinati controlli potrebbero non essere Alcuni eventi tipici di determinati controlli potrebbero non essere più supportati a causa dell’override delle funzioni di generazione più supportati a causa dell’override delle funzioni di generazione degli eventi di postback (ex: gli eventi expand e collapse della degli eventi di postback (ex: gli eventi expand e collapse della treeview).treeview).

Page 22: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

CSS Friendly Adapters - CSS Friendly Adapters - UtilizzoUtilizzo

• Istallare lo Starter Kit (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:<link runat="server" rel="stylesheet" href="~/CSS/Import.css" type="text/css" id="AdaptersInvariantImportCSS" /> <!--[if lt IE 7]><link runat="server" rel="stylesheet" href="~/CSS/BrowserSpecific/IEMenu6.css" type="text/css" id="IEMenu6CSS" /><![endif]-->

• Creare gli opportuni fogli di stile nella cartella App_Themes.• Settare nel web.config l’elemento xhtmConformance a strict (<xhtmlConformance mode="Strict"/>) in modo da indicare all’engine Asp.NET di renderizzare gli elemnti in conformità allo standard xhtml.

Page 23: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

CSS Friendly Adapters CSS Friendly Adapters Esempio HTMLEsempio HTML

<!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict"-//W3C//DTD XHTML 1.0 Strict//EN" //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><head runat="server"> <title>Untitled Page</title><title>Untitled Page</title> <link runat="server" rel="stylesheet" href="~/CSS/Import.css" type="text/css" <link runat="server" rel="stylesheet" href="~/CSS/Import.css" type="text/css"

id="AdaptersInvariantImportCSS" />id="AdaptersInvariantImportCSS" /> <!--[if lt IE 7]><!--[if lt IE 7]><link runat="server" rel="stylesheet" href="~/CSS/BrowserSpecific/IEMenu6.css" <link runat="server" rel="stylesheet" href="~/CSS/BrowserSpecific/IEMenu6.css"

type="text/css" id="IEMenu6CSS" />type="text/css" id="IEMenu6CSS" /><![endif]--><![endif]--></head></head><body><body> <form id="form1" runat="server"><form id="form1" runat="server"> <div id="layout"><div id="layout"> …… <asp:Menu CssSelectorClass="MyMenu"<asp:Menu CssSelectorClass="MyMenu" ID="mnuHorizontal" runat="server" ID="mnuHorizontal" runat="server"

DataSourceID="xmlHorizontal"DataSourceID="xmlHorizontal" Orientation="Horizontal">Orientation="Horizontal"> <DataBindings><DataBindings> <asp:MenuItemBinding DataMember="siteMapNode" TextField="title" <asp:MenuItemBinding DataMember="siteMapNode" TextField="title"

NavigateUrlField="url" />NavigateUrlField="url" /> </DataBindings></DataBindings> </asp:Menu></asp:Menu>

Page 24: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

CSS Friendly Adapters CSS Friendly Adapters Esempio CSSEsempio 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;}

Page 25: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

DEMODEMO

Mammuth s.r.l.Mammuth s.r.l.

Page 26: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

DEMDEMOO

Page 27: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

DEMDEMOO

Page 28: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

DEMDEMOO

Page 29: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

DEMDEMOO

Page 30: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

Limiti degli Adapter Limiti degli Adapter ControlsControls

Molti degli attributi di stile e formattazione Molti degli attributi di stile e formattazione impostabili nel designer vengono impostabili nel designer vengono completamente ignorati, tutta la formattazione completamente ignorati, tutta la formattazione viene fatta mediante classi css.viene fatta mediante classi css.

Non tutti gli eventi standard di un controllo Non tutti gli eventi standard di un controllo vengono gestiti (gli eventi collapse ed expand vengono gestiti (gli eventi collapse ed expand di una treeview ad esempio).di una treeview ad esempio).

Necessitano ancora di alcune piccole Necessitano ancora di alcune piccole correzioni per generare codice completamente correzioni per generare codice completamente ‘accessibile’ soprattutto in caso di rendering di ‘accessibile’ soprattutto in caso di rendering di liste di elementi prive di contenuto.liste di elementi prive di contenuto.

Page 31: Adaptive Rendering - Css Friendly Adapters. Dott. Ing. Giorgetti Alessandro alessandro.giorgetti@GruppoSID.com .

DOMANDE ?DOMANDE ?(Spero di no)(Spero di no)