6 Comments

Radeći administratorsko sučelje CMSa dobio sam grafički predložak dizajna koji je uključivao brojne okvire za module. Odmah sam natipkao nekoliko CSS klasa, aplicirao ih na dva-tri DIVa, i cijeli zadatak je bio gotov u pola sata. Da ne bude dosadno do kraja dana, valjalo je proanalizirati rješenje i pronaći način da se stvar malo zakomplicira!

Ako pogledamo HTML kod od okvira:

Naslov okvira
Obicni text...

implementacija sadržaja i opis CSS klasa je nebitan, ali je poanta da se svaki put moraju pisati točno ti DIVovi sa CSS klasama da bi se dobio željeni grafički rezultat. Da bi to izbjegli, cilj je upakirati HTML kod u zasebnu kontrolu koja bi bila pogodna za ponovno korištenje i primala bi samo čisti tekst koji mora prikazati.

Koliko je meni poznat rad u ASP.NETu, postoje dvije mogučnosti: Custom Controls ili User Controls. Custom Controls su previše kompleksne za ovaj zadatak, tako da ostaje samo druga opcija: opće poznate i svima dobro znane user kontrole, ilitiga ASCX kontrole, ili (ime po vlastitom izboru)

Ono što želimo dobiti izgleda ovako:


Naslov okvira

    ovdje ide puna vreća asp.net kontrola i sličnog

Želimo imati predloške unutar user kontrole, tako da je na jednom mjestu definiran grafički izgled (unutar ascx datoteke), a sadržaj kod samo upotrebe user kontrole. Kada dizajner dođe sa novim dizajnom, njegova implementacija mora biti jednostavna, brza i mora se svesti samo na promjenu unutar ascx datoteke.

Do sada nisam nikada koristio predloške unutar user kontrole, niti naišao na sličnu upotrebu user kontrole, pa nakon malo guglanja/binganja i isprobavanja stvar je konačno proradila. Evo kako napraviti svoju templateziranu user kontrolu:

 

1. dodati novu user kontrolu u projekt

2. dodati atribut ParseChildren na definiciju klase:

[ParseChildren(true)]
public partial class FrameContainer : System.Web.UI.UserControl

time smo rekli kompajleru da se unutar te user kontrole nalaze i child kontrole koje se moraju parsirati, odnosno izvršiti.

2. definiranje ITemplate propertya za svaki od predloška:

[TemplateContainer(typeof(ControlsContainer))]
[TemplateInstance(TemplateInstance.Single)]
[PersistenceMode(PersistenceMode.InnerProperty)]
public ITemplate HeaderTemplate
{ get; set; }

[TemplateContainer(typeof(ControlsContainer))]
[TemplateInstance(TemplateInstance.Single)]
[PersistenceMode(PersistenceMode.InnerProperty)]
public ITemplate ContentTemplate
{ get; set; }

uz jednu napomenu: ako ima više ContentTemplate predložaka u deklaraciji, TemplateInstance.Single mora biti promjenjen u TemplateInstance.Multiple

3. TemplateContainer atribut opisuje tip kontrole koja je sadržana u predlošku, pa nju možemo jednostavno kreirati i dodati u projekt:

public class ControlsContainer : Control, INamingContainer { }

4. Izrada samog predloška unutar HTMLa user kontrole

PlaceHolderi su mjesta gdje ćemo ubaciti kontrole i HTML tekst koje smo dodali u deklaraciji user kontrole.

5. Renderiranje: kontrole koje smo u deklaraciji dodali u predložak moraju biti instancirane unutar OnInit eventa da bi ViewState ispravno funkcionirao.

protected override void OnInit(EventArgs e) 
{ 
	if (ContentTamplate != null) 
	{ 
		var c = new ControlsContainer(); 
		ContentTemplate.InstantiateIn(c); 
		ContentHolder.Controls.Add(c); 
	} 
	if (HeaderTemplate != null) 
	{ 
		var c = new ControlsContainer(); 
		HeaderTemplate.InstantiateIn(c); 
		HeaderHolder.Controls.Add(c); 
	} 
}

ControlsContainer je potrebno koristiti zbog implementacije INamingContainer interfacea, i zbog toga što ITemplate tip od HeaderContainera i ContentContainera ne možemo direktno instancirati u PlaceHolder.

 

I to je sve! Sasvim jednostavno!

download VisualStudio 2008 projekta sa primjerom

Comments

Comment by jadro

Super ti je članak :)!
Okači primjer ako može...

jadro
Comment by mycloudwork

Thanks for the Post, thanks for this great Post. I will come back later ..

Comment by mycloudwork

Thanks for the Post, thanks for this fine Post. I will come back later _

Comment by 3gshdmi

Have you ever thought about adding a little bit more than just your articles? I mean, what you say is important and everything. But just imagine if you added some great pictures or videos to give your posts more, "pop"! Your content is excellent but with images and videos, this website could certainly be one of the very best in its niche. Amazing blog!

Comment by Gerardo Bobet

I just came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.

Comment by male training

As you become more mature, your own men's health issues may very well change. May a new dark beer gut bring on illnesses?