Op je website wens je wellicht dat je pagina's allemaal dezelfde 'look and feel' hebben: ze delen hetzelfde uiterlijk. Figuren worden gemeenschappelijk gebruikt, User Interface elementen, menu's en zoekformulieren komen telkens terug.
Je mogelijkheid is het werken met User Controls, en een referentie naar deze controls leggen op elke pagina. In grote projecten verzeil je met deze aanpak dikwijls in een chaotisch, moeilijk te onderhouden model.
ASP.net 2.0 beschikt over een aantal elementen die het voor de ontwikkelaar bijzonder aangenaam maken om consistente webpagina's te maken.
ASP.Net 2.0 element
Beschrijving
Masterpages
De mogelijkheid oom jouw pagina in te passen in een welbepaald sjabloon of template
Themes
Met themes kan je op een eenvoudige manier de volledige site een consistente gebruikersinterface geven. Themes zijn gebouwd op CSS-technologie.
Wizards
Een meerstapsprocedure waarbij de gebruiker op een eenvoudige en logische manier formulieren kan invullen
Masterpages
Een masterpage in ASP.Net is een apart bestand waar je naar kan verwijzen vanuit een gewone ASP.Net pagina. Op deze masterpage kan je regio's aanduiden waar een andere pagina inhoud kan plaatsen. Deze regio's worden gemarkeerd met de PlaceHolder control.
Een masterpage maken
Een masterpage wordt gekenmerkt door de @Master directive.
Om met Visual Studio 2005 een masterpage te maken voeg je een nieuw item toe van het type Master Page. Je merkt dat de extensie van deze file geen .aspx wordt, maar .master
Op de masterpage vind je standaard 1 ContenPlaceHolder: deze markeert de plaats waar vanuit een andere pagina inhoud kan worden opgegeven
Je kan nu de masterpage verder opmaken met controls die je op elke pagina wil terugvinden
Je kan nog ContentPlaceHolders toevoegen als er meerder gebieden zijn die opgevuld dienen te worden door de subpagina, in de subpagina kan je dan voor elke ContentPlaceHolder een Content-control invoegen
Je kan de ContenPlaceHolder-controls inhoud geven voor het geval ze op een subpagina niet ingevuld worden (standaardinhoud)
Een inhoudspagina maken
Voeg een nieuw item toe aan de Web Site: Web Form
Selecteer de optie 'Select Master Page', druk OK
Kies je masterpage
De inhoudspagina krijgt automatisch de Content-controls voor de respectievelijke ContentPlaceHolders in de MasterPage
Standaard krijgt de pagina de titel zoals aangegeven door de tag title in de masterpage. Je kan vanuit de subpagina's de titel instellen met behulp van het attribuut Title in de @Page-directive.
Je kan een masterpage ook als inhoudspagina van een andere masterpage instellen. Deze child-masterpage bevat dan Content-controls voor de ContentPlaceHolder in de hooft-masterpage.
Binnen de Content-controls van de child-masterpage kan je dan weer ContentPlaceHolders plaatsen voor opvulling door gewone pagina's (of opnieuw een child-masterpage natuurlijk).
Met VS.Net 2005 kan je dit niet via de IDE-opties regelen, je kan voor een masterpage geen andere masterpage selecteren.
Oplossing: je maakt de child-masterpage als gewone Web Form en verandert de directive bovenaan van @Page in @Master en verwijdert het Title-attribuut. Verander nu ook de basisklasse in die van de masterpage.
Themes
Inleiding
Bij het maken van een webapplicatie ben je in eerste instantie bekommerd over de correcte werking, maar is het ook aangenaam dat je site er mooi uitziet.
Voor het opmaken van elementen op een pagina gebruik je wellicht reeds CSS-bestanden.
ASP.Net thema's kan je goed vergelijken met Windows XP thema's: je kan elementen heel eenvoudig een ander uiterlijk geven. Het instellen van een ASP.Net thema is even eenvoudig als het instellen van een eigenschap.
Om ASP.Net thema's te gebruiken heb je CSS-bestanden nodig, maar dit is niet voldoende.
Wat is een theme
Een theme is een set van skins en gerelateerde bestanden zoals Style Sheets en figuren: een soort van Super Style Sheet.
Term
Definitie
Skin
Een benoemde set van eigenschappen en templates die kan toegepast worden op een of meer controls op een pagina. Een skin wordt steeds geassocieerd met een controltype.
Style Sheet
Een CSS of server-side style sheet bestand dat kan gebruikt worden door je pagina's
Stylesheet Theme
Een theme dat gebruikt wordt om eigenschappen van controls op te maken. De control kan de theme nog overriden.
Custumization theme
Een theme dat gebruikt wordt om eigenschappen van controls op te maken. Het theme overrides de control en elk stylesheet theme. De term theme zal in het vervolg van de cursus gebruikt wordt voor een Customization theme.
Structuur van een theme
Themes vormen een verzameling van verschillende bestanden en mappen onder een gemeenschappelijke root-directory:
Maak nog een tweede theme (rechtsklik App_Themes > Add ASP.Net folder > Theme): vrolijk
Zorg voor een skin file:
<asp:BulletedList runat="server"
BulletImageUrl="images/boekje.gif"
BulletStyle="CustomImage"
Font-Names="Bookman old style"
ForeColor="Purple" />
Maak een submap images, kopiëer: boekje.gif
Zorg voor een css-file:
body
{
background-color: #ffff66;
}
Pas het Theme-attribuut op de aspx-pagina aan naar vrolijk
Themes dynamisch laden
We passen de pagina ThemeGebruiken.aspx aan zodat de gebruiker zelf kan kiezen welk theme wordt toegepast.
Voorzie een DropDownList:
Kies een theme:
<asp:DropDownList ID="DDLtheme" runat="server" AutoPostBack="True">
</asp:DropDownList><br />
Voorzie in de codebehind ThemeGebruiken.aspx.cs:
...
using System.IO;
...
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//themalijst ophalen bij eerste request,
DDLtheme.DataSource = GetThemeLijst();
DDLtheme.DataBind();
//plaats de keuzelijst op de tekstwaarde van attribuut Theme
DDLtheme.Text = this.Theme.ToString();
}
}
void Page_PreInit(object sender, EventArgs e)
{
string theme = "";
if (Page.Request.Form.Count > 0)
theme = Page.Request["DDLtheme"].ToString();
if (theme != "")
this.Theme = theme;
}
protected ArrayList GetThemeLijst()
{
string path = Request.PhysicalApplicationPath + @"App_Themes";
DirectoryInfo dir = new DirectoryInfo(path);
ArrayList themas = new ArrayList();
foreach (DirectoryInfo di in dir.GetDirectories())
{
themas.Add(di.Name);
}
return themas;
}
Wizards
Wat is een Wizard?
Een Wizard Component staat je toe om stap-voor-stap informatie aan de gebruiker te vragen. Een Wizard is conceptueel behoorlijk simpel, maar om dit te implementeren over het statusloze http-protocol kan behoorlijk lastig zijn.
Gelukkig is er nu sinds ASP.Net 2.0 de Wizard-control.
Een Wizard ondersteund lineaire en niet-lineaire nagigatie: het staat je toe terug te keren of stappen over te slaan die onnodig zijn in de huidige context. De Wizard control ondersteund themes, stijlen en templates.
De Wizard is een samengestelde control en maakt automatisch een aantal communicerende controls aan zoals navigatieknoppen en Panels. De control garandeert ook dat de state behouden blijft, al ga je vooruit of achteruit in de navigatie.
Structuur van een Wizard
Een Wizard bestaat uit vier delen: Header, View, Navigation bar en Sidebar.
Een Wizard aanmaken
Sleep op een nieuwe Web Form een Wizard uit de Toolbox
Met Auto Format kies je een voorgedefiniëerde opmaak: Classic
Via de eigenschappen van de Wizard kan je de knopteksten voor next, previous, ... aanpassen
Via Add/Remove Wizardsteps kan je stappen toevoegen aan de Wizard
Zorg voor een eerste stap van het steptype Start (geen previous knop)
Toon /verberg voorbeeldtoepassing
