Lähtökohtana on toteuttaa Microsoft:n (R) ASP.NET ympäristössä toimiva WebControl (Web Control Library), kehitysympäristönä .NET Framework:n komentorivi-työkalut, kielenä C#, kohdealustana IIS5 tai uudempi ASP.NET-sovellusten suorittamiseen kykenevä Internet palvelin, IE5.5 tai uudempi vastaava selain.

Tarkempia yleistietoja tekniikasta ja rakenteesta löytää lähinnä luvusta 7 rakenteellinen ja tekninen analyysi. Kaikki esimerkit perustuvat Em. teknisiin ratkaisuihin ja niiden mukaisten ratkaisujen pitäisi toimia edellä mainituilla teknisillä edellytyksillä kunhan myös laitteistopuoli täyttää kontrollin määrittelyssä asetetut vaatimukset.

Huom. Seuraavat esimerkit eivät täytä järjestelmän rakenteellisia vaatimuksia ts. niissä ei käytetä oikeita olioita jne. mutta teknisen toteutusmallin eri toiminnoille niistä kyllä saa.

Kontrollin luomisprosessi tapahtuu .NET:n WebControlleilla CreateChildControls, OnPreRender ja Render metodien kautta. Tavallinen jako on seuraava: CreateChildControls vastaa lapsikontrollien luomisesta, OnPreRenderissä tehdään alustustoimet/tilan lataus ja Renderissä "tulostetaan" kontrollin sisältö outputtiin html:nä. Nämä metodit voidaan periytetyissä kontrolleissa overridata ja kirjoittaa niille tarpeen mukaan oma toteutus. HtmlEditTbox luomisen ja alustuksen vaiheet ovat seuraavat:

a) Osien luominen (instantiointi)

Esim. Seuraavaan tapaan

Vaiheet:

1. Luo kontrollin pääkehys osien sijoittelua varten eli esim. table. Tablen ylimmälle riville tulee ToolBar ja alemmalle riville Editori-osa.
   
    
2. Luo paikka toolbarille ja itse ToolBar:iin  liittyvät kontrollit  (kontrollit voidaan luoda esim. imagebuttoneina.) :  Esim. ToolBar:n solun luominen:
    

   //Toolbar rivi ja solu

   TableRow toolBarRow = new TableRow();

   TableCell toolBarCell = new TableCell();

    

   // Luo uusi Toolbar olio välittämällä parametriksi ko. solu  toolbar säätää solun koon haluamakseen initializen yhteydessä

   myTb = new HtmlEditTboxToolBar(toolBarCell, ViewState, this.ControlStyle);

    

   //myTb olio luo vastaavasti kaikki imagebuttoninsa ja lisää ne soluun (voi luoda myös taulun toolbar-solun sisälle jonka soluihin lisää varsinaiset ImageBtn:t)

   mySaveBtn = new ImageButton();

   toolBarCell.Controls.Add(mySaveBtn);

    

   // Lisää toolbar:lle textsave-eventti (vastaavasti myös source click)

   myTb.SaveClick += new HtmlEditTboxSaveClickHandler(this.saveClickHandlerMethod);

    

   //Lisää muokattu solu toolbar-riviin ja rivi päätauluun

   toolBarRow.Cells.Add(toolBarCell);

   myMainTable.Rows.Add(toolBarRow);

   
    

3. Luo paikka editorille ja itse editori (Paikka: luomalla päätauluun editoria varten rivi ja solu, editori luomalla Div kontrolli esim seuraavasti)
    

   myTBoxCtrl = new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");

   editorCell.Controls.Add(myTBoxCtrl);

    

b) Osien alustus

Esim. Seuraavaan tapaan

1. Alusta MainFrame esim. seuraavasti:
   
   
   
    
2. Alusta toolbar ja siihen liittyvät nappulat (esim. toolbar:n taulun solujen alustaminen:  tämä esimerkki olettaa että toolbarin imagebuttoneita varten on luotu oma taulunsa)
   
   
   
    
3. Alusta EditTbox:n liittyvät ominaisuudet HtmlGenericControl:n rajapinta mahdollistaa ominaisuuksien helpon muuttamisen

   
    

4. Luo ja rekisteröi tarvittavat skriptit (JavaScript tai JScript). Osa skripteistä on ns. yleisiä ja niitä voidaan käyttää kaikille kontrolleille yhteisinä. Osa taas kontrollikohtaisia ja niillä on oltava uniikit nimet. Seuraavassa esimerkki uniikin nimen generoinnista ja skriptien rekisteröinnistä:

   private string GetSpesificId(string internallySpecificId)// Luo uniikki Id
   {
       return this.ClientID + "_" + internallySpecificId;
   }
    

   Page.RegisterClientScriptBlock(GetSpesificId("ClientScript"),stringScript);

   Clientti-scriptin rekisteröinnin tarpeellisuus voidaan tutkia:

   if(!Page.IsClientScriptBlockRegistered(GetSpesificId("ClientScript")))

   Jokaisen sivun latauksen yhteydessä suoritettavat skriptit puolestaan rekisteröidään: Page.RegisterStartupScript

Tekstiä kuljetetaan piilokenttänä (register hidden field) sivun mukana --> Piilokenttä asetetaan editTbox:n sisällön mukaiseksi Saven yhteydessä javaskriptillä ennen palvelimelle lähettämistä ja luetaan taas palvelimella.

JavaSkriptillä asetus käy seuraavasti :

function CtrlId_save()
{
    if (CtrlId_isHTMLMode){ document.all.CtrlId_HTMLContent.value = CtrlId_HTMLEditor.innerText;}
    else{ document.all.CtrlId_HTMLContent.value = CtrlId_HTMLEditor.innerHTML;}
}

Palvelin päässä hidden field rekisteröidään puolestaan esim. seuraavalla tavalla

Esim. Page.RegisterHiddenField(GetSpesificId("HTMLContent"),this.HTMLValue);

Save-suoritetaan kun Save-nappulaa painetaan ja jokaisen post-back:n (EditTbox onblur) yhteydessä jottei kontrollin sisältö häviä roundtripissä (serverillä käytäessä)

SP1:n yhteydessä save:en lisättiin merkkijonon koodaus html-erikoismerkkien (< ja >) osalta seuraavassa esimerkkinä JavaScript-toteutus. Vastaavasti myös palvelinpäässä tulee koodata tallennettava stringi ja purkaa koodaus luettaessa dataa hidden-kentästä.

function replaceHtmlStrs(text)
{
    text = text .split('<').join('&lt;');
    text = text .split('>').join('&gt;');
    return text;
}
function replaceHtmlReplaceStrs(text)
{
    text = text .split('&lt;').join('<');
    text = text .split('&gt;').join('>');
    return text;
}

Kaikki muotoilu toiminnot suoritetaan client-päässä javaskriptin avulla eivätkä ne aiheuta palvelimella käyntiä

Esim. ToolBar:n lihavointinappula:

<input type="image" name="CtrlId:_ctl2" title="Bold Text" onClick="CtrlId_cmdExec('Bold') ;return false;" src="/YaheRtboxTest/images/Bold.gif" border="0" />

Ja onClick eventtiä vastaava javaskripti:

function CtrlId_cmdExec(cmd,opt)
{
    if (CtrlId_isHTMLMode){alert("Please uncheck 'View HTML'");return ;}
    CtrlId_HTMLEditor.focus()
    CtrlId_HTMLEditor.document.execCommand(cmd,false,opt);

}

• Hyödyntämällä lapsikontrollin ImageBtns propertyjen säilyvyyttä --> ei täysin dynaamista kontrollien luontia vaan kontrollit esitellään jäsenmuuttuja tasolla ja instantioidaan CreateChildControls metodissa.
  
   
• Hyödyntäen WebControl:ien propertyjen säilyvyyttä --> tyylit (esim. taustaväri)
  
   
• Hyödyntäen ViewStatea

• Kun leveyttä/korkeutta muutetaan muuttuu kontrolli automaattisesti määrittelyn mukaisesti kunhan editori osan leveys/korkeus = 100%
  
   
• Mikäli koko kontrollin leveyttä/korkeutta ei ole asetettu täytyy editori-osan leveys/korkeus asettaa oletusarvoihinsa.
  
   

Yksilölliset id:t generoidaan seuraavan ohjesäännön mukaisesti: lapsikontrollinId = KontrollinId_KontrollinSisälläYksilöllinenId

Esim. HtmlEditTbox1_TboxDiv

Osa ko. Id:iestä generoidaan automaattisesti (.NET:n valmiit lapsikontrollit esim. imagebuttonit) ns.  "markkeri-rajapinnan"  INamingContainer  avulla ja osalla se muodostetaan itse (omat lapsikontrollit esim. Editori-osana käytettävä Div) em. tavalla . UniikkiId:n generoinnista vastaava metodi voisi olla esim. CreateUniqueId ja sen sisältö voisi vastata kontrollin alustus-kuvauksen kohdassa 5 esitettyä GetSpecificId metodia.

Visual Studio.NET:n tai ASP.Net WebMatrix:n suunnittelutilassa tulee näkyä ainakin kontrollin leveys ja korkeus, paikka sekä toolbar:n nappuloiden määrä, imaget ja koko