miercuri, 16 ianuarie 2008

CSS Friendly Control Adapters

Deoarece eu am pierdut cateva zile pentru a intelege cum se pot folosi aceste controale in pagini noi, am decis sa fac un post legat de asta, care sper sa va lamureasca.

Asp.Net este o buna tehnologie folosita in construirea de pagini de web, dar ar fi si mai buna daca ar oferi o flexibilitate mai mare la modificarea html-ului generat. De exemplu crearea unui Meniu in Asp.Net se face foarte simplu: drag&drop. Dar in codul HTML rezultat, creeaza taguri

, lucru care ingreuneaza aplicarea css-urilor.

Niste oameni destepti, ce stiau de mult de aceste probleme ale .net-ului s-au hotarat sa implementeze niste adaptoare de controale. Toate fisierele, si clasele la care se face referire in acest post se gasesc pe: http://www.asp.net/CSSAdapters/Default.aspx . Pentru a putea folosi controalele Friendly CSS avem de facut urmatoarele operatii:

Cream un Website nou si apoi:

  • Cream fisierul App_Browsers in continutul carui copiem CssFriendlyAdapters.browser;
  • Cream fisierul CSS, si adaugam toate css-urile;
  • Cream fisierul Javascript si adaugam scripturile;
  • Adaugam ca referinta dll-ul CSSFriendly.dll;
  • In headul fiecarei pagini trebuie sa existe urmatoare secventa:

<link rel="stylesheet" href="CSS/Look/SimpleMenu.css" type="text/css" />

<link runat="server" rel="stylesheet" href="~/CSS/Import.css" type="text/css" id="AdaptersInvariantImportCSS" />

<title>Untitled Pagetitle>

Unde href="CSS/Look/SimpleMenu.css" este calea spre Css ce descrie appearance-ul controalelor. In acest exemplu acel css descrie doar cum va arata meniul, in viitoarele site-uri aici se vor pune css-urile pentru toate controalele. O alta posibilitate ar fi crearea un master page in header-ul careia sa se scrie acest cod, si apoi toate paginile care vor folosii controale Adaptate sa aiba acea pagina ca master.

  • In constructia fiecarui control va trebui desemnata clasa css: CssSelectorClass="SimpleEntertainmentMenu", pentru Meniu sau

CssSelectorClass="SimpleEntertainmentTreeView" pentru Tree

Un exemplu de Tree ar fi acesta:

<asp:TreeView ID="EntertainmentTreeView" runat="server" OnSelectedNodeChanged="OnClick" OnAdaptedSelectedNodeChanged="OnClick" CssSelectorClass="SimpleEntertainmentTreeView" ExpandDepth="0">

<Nodes>

<asp:TreeNode Text="Music" SelectAction="Expand">

asp:TreeNode>

<asp:TreeNode Text="Movies" SelectAction="Expand">

asp:TreeNode>

Nodes>

asp:TreeView>

Un exemplu de Meniu ar fi acesta:

<asp:Menu ID="EntertainmentMenu" runat="server" Orientation="Horizontal" onmenuitemclick="OnClick" CssSelectorClass="SimpleEntertainmentMenu">

<Items>

<asp:MenuItem Text="Music">

<asp:MenuItem Text="Classical" />

<asp:MenuItem Text="Rock">

<asp:MenuItem Text="Electric" />

<asp:MenuItem Text="Acoustical" />

asp:MenuItem>

<asp:MenuItem Text="Jazz" />

asp:MenuItem>

<asp:MenuItem Text="Movies" Selectable="false">

<asp:MenuItem Text="Action" />

<asp:MenuItem Text="Drama" />

<asp:MenuItem Text="Musical" />

asp:MenuItem>

Items>

asp:Menu>

Mai multe indicatii si completari la gasesti pe:

http://www.asp.net/CSSAdapters/WhitePaper.aspx

2 comentarii:

  1. de acuma inainnte o sa stiu unde sa caut tutoriale cand am nevoie ptr ASP .NET

    RăspundețiȘtergere
  2. :), acuma nu exagera...Dar de mult timp vreau sa postez pe blog despre .net, pentru ca in timp si eu o sa cum sa fac...si asa imi amintesc rapid :d

    RăspundețiȘtergere