Innehållskomponenter

Dynamix-sidor byggs upp dels av komponenter som ligger direkt i mallar - det kan vara navigation eller andra fasta delar - och dels av sådana innehållsdelar som redaktörerna kan lägga in i redigerbara sektioner - t ex texter, bilder, nyhetslistor eller formulärfält.

Som utvecklare har man full frihet att utforma dessa komponenter. I de allra flesta lösningar bygger man åtminstone några egna sådana komponenter för de funktioner som är speciella för webbplatsen.

Uppbyggnad

Den ena grundläggande klassen för innehållskomponenter är Dynamix.Content5.ContentType. Det är objekt av denna typ som definierar för systemet:

  • Vad som ska visas för redaktören (Namn, ikon mm)

  • Vilken typ av objekt som lagrar informationen för en viss instans av innehållet.

Klasser som ärver från ContentType är så gott som alltid singelinstanser. Det rekommenderade är att skapa en klass för varje innehållstyp i webblösningen.

Den andra klassen som definierar en innehållskomponent är Dynamix.Content5.ContentElement. Det är objekt av denna klass som lagrar information för varje instans av innehållet. För en nyhetslista kanske objektet lagrar nyhetskategori och för en bild kan det vara sökväg till bildfilen, justering mm.

Det är också objekten av denna klass som initierar de kontroller som slutligen presenterar innehållet i sidan.

Skapa en innehållskomponent - steg för steg

Som exempel ska vi skapa en innehållskomponent som ritar ut en text och en bild.

Högerklicka i lösningen och välj Add - New Item

Välj Dynamix - ContentElement och mata in namn (utan suffixet Element). I det här fallet anger vi ImageAndText.

Efter att vi har klickat på Add har tre nya poster skapats i lösningen: En för definitionen (ImageAndTextContentType), en kontroll för utritning (ImageAndTextControl) och ett lagringsobjekt (ImageAndTextElement).

Vi kan nu mata in de egenskaper vi vill lagra för varje sidinnehåll:

Dynamix kommer automatiskt att generera ett gränssnitt för att redigera innehåll av denna typ.

I filen ImageAndTextElement.dx.cs finns koden som slutligen skapar kontroller i sidan:

  1. C#
  1. protected override void CreateContentControls( ControlCollection controls, ElementRenderingContext renderingContext )
  2. {
  3. controls.Add( new ImageAndTextControl( this, renderingContext ) );
  4. }

För väldigt enkla innehåll (t ex sådana som inte har några redaktörsstyrda parametrar) skulle det vara fullt möjligt att klara sig helt utan en anpassad klass som ImageAndTextControl och använda funktionen CreateContentControls till att lägga in innehåll i sidan direkt.

För de flesta innehåll rekommenderar vi dock att en separat presentationskontroll används. I detta exempel ImageAndTextControl:

  1. C#
  1. using System.Web.UI;
  2. using System.Web.UI.WebControls;
  3. using Dynamix.Content5;
  5. namespace MySite.Content
  6. {
  7. public class ImageAndTextControl : ElementControl<ImageAndTextElement>
  8. {
  9. public ImageAndTextControl( ImageAndTextElement element, ElementRenderingContext renderingContext ) : base( element, renderingContext )
  10. {
  11. }
  13. protected override void CreateChildControls()
  14. {
  15. var div1 = new WebControl( HtmlTextWriterTag.Div );
  16. Controls.Add( div1 );
  18. var info = new Dynamix.ImageInformation( Element.Image );
  19. var img = new Image { ImageUrl = info.GetImageUrl().HRef };
  21. div1.Controls.Add( img );
  23. var div2 = new WebControl( HtmlTextWriterTag.Div );
  24. Controls.Add( div2 );
  26. var text = new LiteralControl( Dynamix.Util.HtmlString( Element.Text ) );
  27. div2.Controls.Add( text );
  28. }
  29. }
  30. }

I detta fall ärver objektet från Dynamix-klassen ElementControl<T> där T är klassen på motsvarande datalagringselement. Fördelen med att ärva från denna klass är att man då kan referera till dataelementet via egenskapen this.Element som då automatiskt är av rätt typ.

Denna klass kan sedan på valfritt sätt skapa och rita ut innehållet. I det här fallet lägger vi ut två div:ar, en med en bilden och en med texten. Det hade gått lika bra att t ex ladda och lägga till en user control eller att överlagra Render eller andra metoder för att rita ut innehåll explicit.

Läs mer

Sektioner