Eindwerk. HTMLEditor. Jeroen Van Loocke. Lucky s Pc s. Gemakkelijk en vlug bewerken van HTML pagina s. Handelswetenschappen en Bedrijfskunde

Eindwerk

Studiegebied Bachelor Afstudeerrichting Academiejaar Student

Handelswetenschappen en Bedrijfskunde Toegepaste Informatica 2009-2010

Jeroen Van Loocke

Thema

HTMLEditor Gemakkelijk en vlug bewerken van HTML pagina’s

Stageplaats

Lucky’s Pc’s Brugge

Howest-de Hogeschool West-Vlaanderen Rijselstraat 5 – 8200 Brugge – T 050 38 12 77 – F 050 38 11 71 [email protected] – www.howest.be

Jeroen Van Loocke – Lucky’s Pc’s

2

1 Woord vooraf Een HTMLEditor vinden op het internet, die je de mogelijkheid laat om vlot van de ene HTML pagina naar de andere te kopiëren en je daarna toelaat om een groot aantal bewerkingen daarop uit te voeren, is zeer moeilijk te vinden. Laat staan een HTMLEditor die je toelaat alles te automatiseren. Daarom hebben dhr. Luc Pollet en dhr. Parcifal Aertssen besloten hier een stageopdracht van te maken. Ik heb voor deze stageplaats gekozen omdat het mij een uitdaging leek deze opdracht voor hen tot een goed einde te brengen. Daarom wil ik dhr. Pollet en dhr. Aertssen ook bedanken om mij deze kans te geven. Ook zou ik mevr. Kristien Roels willen bedanken voor de begeleiding tijdens de stage. Deze stage heeft mij inzicht gegeven in het maken van software en het doelgericht programmeren naar gebruiksvriendelijke software. Ik heb veel bijgeleerd en hoop deze kennis later goed te kunnen gebruiken.


3

2 Samenvatting Mijn stage heb ik gedaan bij Lucky’s Pc’s. Mijn stageopdracht was om een geavanceerde HTMLEditor te maken. Deze HTMLEditor zorgt ervoor dat de gebruiker snel, efficiënt en geautomatiseerd HTML pagina’s kan kopiëren en bewerken. Daarvoor zijn er een aantal functies voorzien die de gebruiker toelaat om macro’s en templates te maken en te bewaren. De HTMLEditor bevat functionaliteit om tabellen gemakkelijk te bewerken, de grootte van afbeeldingen in één klik aan te passen en om tabellen en/of tekst om te zetten naar lijsten. De mogelijkheid om glyphs te koppelen aan bepaalde HTML tags en om randen te tonen van tabellen die geen randen heeft, moet het de gebruiker visueel gemakkelijker maken om zijn pagina aan te passen. De gebruiker kan op elk moment de source code opvragen van zijn HTML pagina en deze aanpassen naar zijn wensen. Daarbij kan de gebruiker ervoor kiezen om geholpen te worden door een soort van intellisense. Ook de opmaak van de source code is zo voorzien dat de gebruiker gemakkelijk zijn source code kan lezen.


4

1

WOORD VOORAF .......................................................................................................................... 3

2

SAMENVATTING ............................................................................................................................ 4

3

LUCKY’S PC’S................................................................................................................................ 7

4

OMSCHRIJVING STAGEOPDRACHT ........................................................................................... 8

5

PROBLEEMDEFINITIE ................................................................................................................... 9 5.1 5.2 5.3 5.4

6

VROEGER .................................................................................................................................. 9 OPLOSSING ............................................................................................................................... 9 FUNCTIONELE EISEN................................................................................................................. 10 NIET-FUNCTIONELE EISEN......................................................................................................... 11

ONTWERP .................................................................................................................................... 12 6.1 WEBBROWSERTEXTBOX .......................................................................................................... 12 6.1.1 Klassen die gebruikt werden ............................................................................................. 12 6.1.2 Belangrijke methoden kort uitgelegd ................................................................................. 12 6.2 HTMLEDITBOX ....................................................................................................................... 14 6.2.1 Klassen die gebruikt werden ............................................................................................. 14 6.2.2 Belangrijke methoden kort uitgelegd ................................................................................. 14 6.3 HTMLSOURCETEXTBOX .......................................................................................................... 16 6.3.1 Klassen die gebruikt werden ............................................................................................. 16 6.3.2 Belangrijke methoden kort uitgelegd ................................................................................. 16 6.4 OVERZICHT KLASSEN ............................................................................................................... 18 6.4.1 Algemeen........................................................................................................................... 18 6.4.2 Macro’s .............................................................................................................................. 18 6.4.3 Templates .......................................................................................................................... 19

7

PROGRAMMATIE ......................................................................................................................... 20 7.1 GEBRUIKTE HARDWARE ........................................................................................................... 20 7.2 GEBRUIKTE SOFTWARE ............................................................................................................ 20 7.3 DE SOURCE CODE .................................................................................................................... 20 7.3.1 Kleuren van de code .......................................................................................................... 20 7.3.2 Validatie ............................................................................................................................. 21 7.4 WERKEN MET JE REGISTER. ...................................................................................................... 22 7.4.1 Settings opslaan in je register. .......................................................................................... 22 7.4.2 Settings uit je register halen. ............................................................................................. 23 7.5 IOLECOMMANDTARGET INTERFACE .......................................................................................... 24 7.5.1 IOleCommandTarget uit een HTMLDocument halen. ....................................................... 24 7.5.2 De GUID ............................................................................................................................ 25 7.5.3 Commando’s laten uitvoeren door de IOleCommandTarget ............................................. 25 7.5.4 IOleCommandInterface gebruiken om glyphs te maken ................................................... 26 7.6 .RES RESOURCES TOEVOEGEN AAN EEN LIBRARY ...................................................................... 28 7.7 TEKST/TABELLEN OMZETTEN NAAR LIJSTEN. .............................................................................. 30 7.7.1 Hoe tabellen omzetten naar lijsten? .................................................................................. 30 7.7.2 Hoe tekst omzetten naar lijsten? ....................................................................................... 31 7.7.3 Rekening houden met het rowspan attribuut..................................................................... 32 7.7.4 Splitsen aan de hand van een string ................................................................................. 32 7.8 HET ZICHTBAAR MAKEN VAN DE RANDEN BIJ TABELLEN. .............................................................. 33 7.8.1 IE 7 en oudere versies ....................................................................................................... 33 7.8.2 IE8 ..................................................................................................................................... 34 7.9 TEMPLATES ............................................................................................................................. 35 7.9.1 Wat is een template ........................................................................................................... 35


5

7.9.2 Hoe beginnen om een template te maken? ...................................................................... 35 7.9.3 Een element laten kopiëren ............................................................................................... 36 7.9.4 Selecties maken ................................................................................................................ 38 7.9.5 Commando’s uitvoeren ...................................................................................................... 39 7.9.6 Surfen met een template ................................................................................................... 39 7.9.7 Frames............................................................................................................................... 40 7.10 VIA WINDOWS EEN TIJDELIJK BESTAND MAKEN........................................................................... 42 8

CONCLUSIE.................................................................................................................................. 43

9

KRITISCHE REFLECTIE .............................................................................................................. 44


6

3 Lucky’s Pc’s Lucky’s Pc’s werd in 1997 opgericht door dhr. Luc Pollet. Wat begon als een klein winkeltje is nu een bekende computerwinkel in Brugge en omstreken. Samen met zijn 2 werknemers (dhr. Parcifal Aertssen en dhr. Jan Hoorne) wil dhr. Pollet een zo goed mogelijke service geven die zowel goedkoop als efficiënt is. Dhr Aertssen is verantwoordelijk voor de server en de zelfgemaakte software van de winkel. Dhr Hoorne is dan weer verantwoordelijk voor de technische dienst van de winkel. Sinds kort houdt dhr. Aertssen zich ook bezig met het verkopen van de “Point of Sale” (het zelfgemaakt kassa programma) en de “Product Manager”(het zelfgemaakte programma om producten te beheren). De “Product Manager” bevat ondermeer de nieuwe library die ik gemaakt heb tijdens deze stage. Lucky’s Pc’s is gelegen in Brugge op de Komvest 2.


7

4 Omschrijving stageopdracht Voor mijn stage had ik de opdracht gekregen om een geavanceerde HTMLEditor te maken op basis van de .NET Webbrowser control. Op mijn stage maakten ze gebruik van een verouderde DHTMLEdit control, maar deze control wordt niet meer ondersteund onder Windows 7. Mijn taak was dus om deze DHTMLEdit control zo goed mogelijk na te maken met de .NET Webbrowser control. Achteraf was het dan de bedoeling dat er nog een aantal extra features aan toegevoegd werden, zoals de mogelijkheid om macro’s en templates te maken en het automatisch downloaden van gedropte afbeeldingen.


8

5 Probleemdefinitie 5.1 Vroeger Vroeger werd er gebruik gemaakt van de verouderde DHTMLEdit control. De gebruiker kon al veel bewerkingen doen met deze control maar had geen mogelijkheden om deze te automatiseren. Er was ook gebrek aan functies die te maken hadden met afbeeldingen. Bij elke HTML pagina werd nog elke foto apart bewerkt. Het omzetten van tabellen/tekst naar lijsten had beperkingen en kon niet altijd efficiënt gebruikt worden.

5.2

Oplossing

De DHTMLEdit control wordt onder Windows 7 niet meer ondersteund. Dus was het mijn opdracht om deze control om te zetten naar de nieuwe .Net Webbrowser control. Deze opdracht leek simpel maar al snel bleek dat veel van de oude functies die ingebouwd waren in de DHTMLEdit control niet meer ondersteund werden in de .Net Webbrowser control. Wat vooral een groot probleem was, is het groot tekort aan events bij de Webbrowser control. Het was ook de bedoeling dat er een aantal nieuwe functies gemaakt werden die de gebruiker meer, betere en snellere controle geeft over zijn HTML pagina. Het Automatisch verkleinen en downloaden van foto’s en de mogelijkheid om per website templates te maken zijn daar een aantal voorbeelden van. Ook de beperkingen bij het omzetten van tabellen/tekst naar lijsten heb je nu niet meer. Functies zijn ingebouwd die het mogelijk maken om alle foto’s in één klik te verkleinen naar een gewenst formaat. Macro’s moeten het mogelijk maken om functies te combineren en zo alles vlotter te laten verlopen.


9

5.3 Functionele eisen •

• •

•

• • • •

•

•

Het kunnen berwerken van tabellen: o Verwijderen van cellen. o Verwijderen van rijen. o Verwijderen van kolommen. o Invoegen van cellen. o Invoegen van rijen. o Invoegen van kolommen. o Samenvoegen van cellen. Toolbars voorzien voor de gemaakte functies. Sourcetabblad maken voor het bekijken van de HTML code: o De HTML moet gekleurd worden met een kleurenpallet. o HTML validatie moet voorzien zijn. o Zoekfunctie die ook tekst kan vervangen (Find and replace). o MenuStrip voorzien met de mogelijke functies. De mogelijkheid om macro's te maken en te gebruiken: o Macro's kunnen maken. o Macro's kunnen bewerken/verwijderen. o parameters kunnen meegeven met de commando's in een macro. o De macro’s bewaren in het register. Randen tonen van tabellen waar het border attribuut niet van ingesteld is (of op 0 staat). Bij bepaalde elementen moeten de begin en/of eindtag zichtbaar worden gemaakt aan de hand van een glyph. Bij het selecteren van tekst bij de editor moet diezelfde tekst geselecteerd worden bij het navigeren naar het sourcetabblad. Het uitbreiden van de bestaande functie om text en/of tabellen om te zetten naar lijsten: o Diepte moet kunnen meegegeven worden. o Tabellen in tabellen moeten kunnen omgezet worden. o Afbeeldingen moeten kunnen verwijderd worden. o Er moet kunnen gesplits worden op een string in de tekst. o Er moet rekening gehouden worden met rowspan. o De lege kolommen verwijderen Het kunnen maken van templates voor websites: o Elementen automatisch kopiëren. o Automatisch kunnen klikken op links of buttons. o Kunnen surfen naar frames. o Selecties kunnen maken. o Macro's kunnen uitvoeren. o Alle templates kunnen bewaren. Afbeeldingen kunnen resizen: o Met percentages kunnen werken. o Met pixels kunnen werken. o Rekening houden met het style attribuut van de afbeelding. o De verhoudingen moeten kunnen behouden worden.


10

•

• •

Alle afbeeldingen die groter zijn dan een bepaalde lengte en/of breedte automatisch verkleinen: o Behouden van de verhoudingen. o De maximum lengte en breedte moeten kunnen opgegeven worden. Een functie die automatisch titels detecteert en deze in het vet zet. Settings van dialogen moeten automatisch in het register bewaart worden en automatisch uitgelezen worden.

5.4 Niet-functionele eisen • •

• •

Code moet geschreven zijn in VB.net. De Coding Conventions van Lucky’s Pc’s moeten gevolgd worden: o Juiste naamgeving van de controls. o Altijd anchors of docking gebruiken. o Altijd Namespaces gebuiken. Het programma moet robuust zijn (Defensief programmeren). Er moet volgens de OO principes gecodeerd worden waar het kan.


11

6 Ontwerp De nieuwe HTMLEditlibrary, die het mogelijk maakt om HTML pagina’s te bewerken, bevat 3 grote klassen. Twee van die klassen zijn afgeleid van de .Net WebBrowser control. Deze twee klassen zouden kunnen worden samengevoegd maar werden gesplitst om de klassen niet te groot te laten worden. De andere klasse is afgeleid van de RichTextBox klasse en wordt gebruikt om de sourcecode weer te geven.

6.1 WebBrowserTextBox Deze klasse is afgeleid van de .Net WebBrowser control. 6.1.1 • • 6.1.2 •

•

• • •

Klassen die gebruikt werden TempStyle: Deze klasse wordt gebruikt om een stylesheet te maken en die weg te schrijven naar een tijdelijk bestand OleCommandTarget: Wordt gebruikt om de glyphs te tonen van bepaalde tags. Belangrijke methoden kort uitgelegd Command: Deze methode krijgt een commando mee en aan de hand van dat commando wordt er doorgestuurd naar de juiste methode (soort van commandpatern) SetBorders: Via deze methode kan je ervoor zorgen dat tabellen die geen border hebben , en dus niet zichtbaar zijn, toch een border krijgen zonder dat de gebruiker iets ziet in zijn sourcecode. ShowDetails: Deze property zorgt ervoor dat de glyphs van bepaalde tags worden getoond. SetEditMode: Dit zorgt ervoor dat een gebruiker kan typen en veranderingen kan aanbrengen in zijn Webbrowser control. TableCommand: Handelt de commando’s af die speciaal voor tabellen zijn.


12


13

6.2 HTMLEditBox Deze klasse is afgeleid van de WebBrowserTextbox (dus ook de .Net Webbrowser control). 6.2.1 • • • • • • 6.2.2 • •

• • •

•

Klassen die gebruikt werden OleCommandTarget: Wordt gebruikt om bepaalde commando’s of te handelen (vb: tonen van de printpreview) MacroList: Deze klasse wordt gebruikt om een lijst van macro’s bij te houden. Macro: Wordt hier gebruikt om een macro op te nemen Parser: Controleert of bepaalde tags aanwezig zijn. Template: Voor het opslaan en uitlezen van gemaakte templates TagCleanup: Kan bepaalde tags verwijderen uit een document Belangrijke methoden kort uitgelegd AddElementTemplate: Voegt een element dat via een template werd opgezocht toe. CleanStyleImages: Kijkt bij elke afbeelding of ze een style hebben. Als ze een style hebben dan wordt gekeken of die style een width en of height bevat. Deze worden dan als attribuut gezet en de style wordt verwijderd. Command:Handelt de commando’s af voor deze klasse. GetTreeviewElement: Hiermee kan je wanneer je een node selecteert in je treeview het overeenstemmend element opvragen van je webbrowser. SelectTextOrControl: In een webbrowser kan je een element op 2 manieren selecteren. Je kan je element als tekst selecteren of als een control. Niet alle elementen kunnen als control geselecteerd worden. Deze methode probeert je element eerst als control te selecteren en lukt dit niet dan gaat hij het als tekst selecteren. ShowSelection: Deze methode wordt gebruikt bij het maken van templates. Hiermee kan je een grafische weergave bekomen van je template en het zo de gebruiker gemakkelijk maakt om selecties te maken voor je template.


14


15

6.3 HTMLSourceTextBox Deze klasse is afgeleid van RichTextBox en wordt gebruikt om de HTML van de gemaakte pagina te bekijken. 6.3.1 • • • 6.3.2 •

•

•

Klassen die gebruikt werden SourcePalet: Wordt gebruikt om gemakkelijk de kleuren van de source code te veranderen. ClipBoard: Hiermee kan je opvragen wat er op het clipboard van het Windows staat en zo gemakkelijk functies als knippen en kopiëren implementeren. Validation: Met deze klasse kan je een HTML document laten valideren. Belangrijke methoden kort uitgelegd CheckHTML: Deze methode zorgt voor een basis validatie van de pagina. Er wordt onder andere gekeken of elke tag wel goed gesloten is en of er geen tag’s tussen staan die niet bestaan. De fouten worden met een dialoog weergegeven en de tag’s die fout zijn worden in het rood gekleurd. HighlightHTMLAdvanced: Deze methode gaat de tekst kleuren met een bepaald pallet van kleuren. Dit pallet kan zelf ingesteld worden. Je kan opgeven welk kleur je commentaar moet hebben, welk kleur je attributen,… HTMLSource_ShowIntel: Aan de hand van dit event wordt er intellisense getoond. Er wordt onderscheid gemaakt tussen de intellisense voor de tag’s en die voor de attributen.


16


17

6.4 Overzicht O klassen 6.4.1

A Algemeen

6.4.2

Macro’s

Jeroen Van Loocke e – Lucky’s Pc’s

18

6.4.3

T Templates


19

7 Programmatie 7.1 Gebruikte Hardware Mijn stageproject heb ik volledig gemaakt op mijn eigen laptop.

7.2 Gebruikte software Mijn volledig project is gemaakt in Visual Studio 2008. De code staat volledig in Visual Basic .Net (Visual Basic 9 voor .Net 3.5). Tijdens mijn stage heb ik wel verschillende andere projecten bestudeerd die in C++ waren geschreven en heb zelf ook een C++ project moeten maken voor het gebruik van .res resources (Zie “.Res resources toevoegen aan een library”)

7.3 De source code De gebruiker heeft de mogelijkheid om de source code te bekijken van zijn HTML pagina. Dit wordt getoond in een HTMLSourceTextBox. Deze HTMLSourceTextBox kan onder andere de code laten kleuren en de code valideren. Hij heeft ook de mogelijkheid om de gebruiker te voorzien van een soort intellisense bij het aanpassen van de code. 7.3.1

Kleuren van de code

Om het de gebruiker gemakkelijker te maken om de source code te lezen is er de mogelijkheid om de source code te kleuren. Standaard wordt de source code gekleurd zoals Visual Studio. De HTMLSourceTextBox is een uitbreiding op de gewone RichTextBox. Daarom wordt het kleuren volledig met string functies gedaan. Het algoritme die ik hiervoor heb gemaakt gaat volgens het volgende principe: 1. De tekst wordt gesplitst bij elke “>” 2. Alle gesplitste delen worden overlopen 2.1. Controleren of het in commentaar moet staan 2.1.1. Zo ja, alles kleuren in de daarvoor voorziene kleur 2.2. Controleren of er commentaar tags in staan 2.2.1. Zo ja, splitsen bij commentaar tag en links kleuren als tekst en rechts als commentaar. 2.3. Kijken of het deel een “<” bevat 2.3.1. Ja, controleren of het begint met de char “<” 2.3.1.1. Ja, kleur geven aan de char “<”. Daarna splitsen op spatie en de tag de juiste kleur geven en kijken voor attributen en die ook de juiste kleur geven. 2.3.1.2. Nee, alles links als tekst kleuren en rechts splitsen op spatie en de tag kleuren en kijken voor attributen en die ook kleuren. 2.3.2. Nee, volgende in de lijst 2.4. Kleuren van de char “>”


20

Om de kleuren in te stellen kan je gebruik maken van de klasse SourcePalet. Deze heeft een aantal properties waar je de kleuren van elk deel kan instellen. Het kleuren wordt gedaan aan de hand van die SourcePalet. 7.3.2

Validatie

Het werken met de source code is niet altijd even gemakkelijk en er kunnen vlug fouten gebeuren tijdens het kopiëren van de webbrowser. De website waarvan je kopieert kan ook foute HTML bevatten. Daarom kan de gebruiker een functie gebruiken die de HTML voor hem kan valideren. De source code wordt automatisch HTML encoded! De validatie controleert volgende elementen: • • • • •

Is de tag goed gesloten? Bestaat de tag? Bevat de code een tab? Bevat de code een ampersand gevolgd door spatie?(Kan niet bij HTML encoded tekst.) Bevat de code een ampersand gevolgd door nog een ampersand?(Kan niet bij HTML encoded tekst.)

Het valideren van de code werkt volgens het volgende principe: 1. Elke karakter van de tekst wordt overlopen 1.1. Controleren of we in commentaar zitten 1.2. Controleren of het karakter een “<” is 1.2.1. Opvragen welke tag het is 1.2.2. Controleren of de tag bestaat 1.2.3. Controleren of het een sluitende tag is 1.2.3.1. Ja, kijken of er nog één openstaat 1.2.3.1.1. Ja, de openstaande tag verwijderen uit lijst 1.2.3.1.2. Nee, melden als fout “Sluittag teveel” 1.2.3.2. Nee, toevoegen aan lijst van openstaande tags 1.3. Controleren of het karakter een “&” is 1.3.1. Ja, Controleren of het gevolgd wordt door een spatie of door een andere “&” 1.3.1.1. Ja, melden als fout. 1.4. Controleren of karakter een tab is 1.4.1. Ja, Melden als fout. 2. Tags die nog overblijven in de lijst met openstaande tags melden als fout “Tags niet goed gesloten!”. Wanneer het valideren gedaan is wordt er een dialoog getoond met de fouten en in de tekst worden alle foute tags aangeduid met een rode achtergrond.


21

7.4 Werken met je register. In mijn stageproject wordt er vaak gewerkt met het register. Dit is zeer handig want je kan alle settings van dialogs en/of forms van een gebruiker opslaan. Als de gebruiker dan het programma afsluit wordt alles weggeschreven. Wanneer de gebruiker dan opnieuw het programma opstart staat alles nog net zo als toen hij het afsloot en hoeft de gebruiker dus niet elke keer opnieuw alles in te stellen wanneer hij iets afsluit. 7.4.1

Settings opslaan in je register.

Het opslaan van settings van een bepaalde dialog en/of form gebeurt best wanneer de gebruiker die afsluit. Je bepaalt zelf wat er opgeslagen wordt en waar. Hier heb je een voorbeeld van hoe je iets opslaat in het register. Public Sub SaveSettings(ByRef MasterKey As String, ByRef AppKey As String, ByRef lijst As String) SaveSetting(MasterKey, AppKey & "\" & Me.Name, Me.chkTitels.Name, lijst) End Sub

In het voorbeeld hierboven wordt er een string opgeslagen in het register. Visual Studio heeft zelf een ingebouwde methode die kan wegschrijven naar het register (SaveSetting). Bij deze methode kan je 4 parameters meegeven. De eerste parameter is je MasterKey, dit is de naam van de map in het register waar je waarden moeten worden in opgeslaan. Je 2de parameter zijn de submappen die je kan meegeven. Als je meer dan één submap wil meegeven dan moet je voor elke extra submap een “\” zetten. De 3de parameter is de naam van je file in het register. Als laatste geef je de waarde mee die in het bestand moet weggeschreven worden.


22

7.4.2

Settings uit je register halen.

Om weggeschreven settings terug op te halen heeft Visual Studio terug een ingebouwde methode. De methode GetSetting kan je weggeschreven waarden terug ophalen. Je haalt de nodige settings best pas op wanneer het dialoog en/of het formulier die de settings bevat getoond wordt. Hier heb je een voorbeeld van hoe je de waarde terug ophaalt. Public Function LoadSettings(ByRef MasterKey As String, ByRef AppKey As String) Return GetSetting(MasterKey, AppKey &"\"& Me.Name, Me.chkTitels.Name, "") End Function

Bij dit voorbeeld zijn opnieuw de eerste 2 parameters de mapstructuur waar de waarde te vinden is. De 3de parameter is de naam van het bestand waar de waarde staat(De waarde wordt als string teruggegeven!).


23

7.5 IOleCommandTarget Interface Met deze interface zorg je ervoor dat COM objecten en hun containers commando’s naar elkaar kunnen sturen. IOleCommandTarget interface implementeert de IUnknown interface. De IOleCommandTarget interface kent twee methodes: ‐

QueryStatus: Met deze methode kom je te weten of het meegegeven commando kan uitgevoerd worden. Exec: Deze methode voert het meegegeven commando uit.

‐

Een voorbeeld van een mogelijke interface voor de IOleCommandTarget: _ Public Interface IOleCommandTarget _ Function QueryStatus(<[In]()> ByVal pguidCmdGroup As IntPtr, <[In](), MarshalAs(UnmanagedType.U4)> ByVal cCmds As UInteger, <[In](), Out(), MarshalAs(UnmanagedType.Struct)> ByRef prgCmds As tagOLECMD, <[In](), Out()> ByVal pCmdText As IntPtr) As <MarshalAs(UnmanagedType.I4)> Integer _ Function Exec(<[In]()> ByVal pguidCmdGroup As IntPtr, <[In](), MarshalAs(UnmanagedType.U4)> ByVal nCmdID As UInteger, <[In](), MarshalAs(UnmanagedType.U4)> ByVal nCmdexecopt As UInteger, <[In]()> ByVal pvaIn As IntPtr, <[In](), Out()> ByVal pvaOut As IntPtr) As <MarshalAs(UnmanagedType.I4)> Integer End Interface

7.5.1

IOleCommandTarget uit een HTMLDocument halen.

Voor dat we commando’s kunnen uitvoeren met een CommandTarget moeten we eerst de CommandTarget uit het HTMLDocument halen. Dit kan met de volgende methode: Public Function GetCommandTarget(ByRef mydoc As mshtml.IHTMLDocument2) As IOleCommandTarget Dim m_Doc2OleCommandTraget As Editing.IOleCommandTarget = Nothing Dim doc2 As mshtml.IHTMLDocument2 = mydoc If doc2 Is Nothing Then Return Nothing End If m_Doc2OleCommandTraget = TryCast(doc2, Editing.IOleCommandTarget) Return m_Doc2OleCommandTraget End Function


24

7.5.2

De GUID

GUID staat voor Globally Unique Identifier. Dit is een 128 bit lange code die gegeven wordt aan een bepaald object, interface of klasse. Een GUID ziet er als volgt uit: 8856F961-340A-11D0-A96B-00C04FD705A2 Dit zijn telkens reeksen van hexadecimale waarden gescheiden met “-“. Doordat de IOleCommandTarget met COM objecten werkt moet je een pointer naar de GUID van een type meegeven in plaats van de naam van dat type. Hieronder kan je een voorbeeld zien van hoe je dit voor elkaar krijgt. Public Function GetGuidHTML() As IntPtr Dim m_Guid_MSHTML As IntPtr = m_NullPointer Dim guidbytes As Byte() = New Guid("8856F961-340A-11D0-A96B-00C04FD705A2").ToByteArray() m_Guid_MSHTML = Marshal.AllocCoTaskMem(CInt((guidbytes.Length * 2))) Marshal.Copy(guidbytes, 0, m_Guid_MSHTML, guidbytes.Length) Return m_Guid_MSHTML End Function

In de functie hierboven kan je zien hoe je een nieuwe GUID maakt. Om te weten te komen welke GUID dat een klasse of object heeft kan je dit vlug opzoeken op internet. Aan de hand van Marshal kan men plaats reserveren in het RAM geheugen en daarna daar naartoe schrijven. Daarna kan je de pointer naar de plaats in het geheugen teruggeven. 7.5.3

Commando’s laten uitvoeren door de IOleCommandTarget

Nu we een CommandTarget uit een HTMLDocument kunnen halen, kunnen we een methode maken die ons toelaat om commando’s uit te voeren. Deze methode zal er ongeveer als volgt uitzien: Public Sub OleCommandExec(ByVal CmdID As Integer, ByRef mydoc As mshtml.IHTMLDocument2) Dim m_Doc2OleCommandTraget As Editing.IOleCommandTarget = Nothing Dim m_Guid_MSHTML As IntPtr = m_NullPointer m_Guid_MSHTML = GetGuidHTML() m_Doc2OleCommandTraget = Me.GetCommandTarget(mydoc) bret = If((m_Doc2OleCommandTraget.Exec( m_Guid_MSHTML, CUInt(CmdID), CUInt(SHDocVw.OLECMDEXECOPT.OLECMDEXECOPT_DODEFAULT), m_NullPointer, m_NullPointer ) = 1),True,False) End Sub


25

7.5.4

IOleCommandInterface gebruiken om glyphs te maken

Een mogelijk commando dat de IOleCommandInterface ondersteunt, is het AddToGlyphTable commando. Via dit commando kan je, zoals de naam het beschrijft, een glyph toevoegen aan de glyph tabel. Eerst en vooral heb je een string nodig waarin je beschrijft welke afbeelding je voor welke tag wil gebruiken. Dit moet je op de volgende manier zelf samenstellen. De delimiters van je string zijn: • • •

%% begin van een entry. ^^ eindigt een entry. ** eindigt een rij.

Elke rij bevat 10 entries: 1. Tag ID: De eerste entry bevat de naam van de tag waar je een afbeelding aan wil koppelen. De namen van de tags zijn niet hoofdletter gevoelig!

%%comment^^%%res://edglyphs.exe/GIFS/comment.gif^^%%0^^%%3^^%%3^^%% 4^^%%20^^%%15^^%%20^^%%15^^** 2. Plaats van de glyph: Op de 2de plaats komt de URL of een resource identifier van een afbeelding in de DLL of in de EXE. 3. Tag type: Bij de 3de entry geef je een 0 op als je de afbeelding alleen voor de begin tag wil. Je geeft een 1 op als je het voor alleen de sluitende tag wil. Wil je de glyph voor zowel begin als eind tag gebruiken dan geef je een 2 op. Enkelvoudige tags zoals br moeten altijd de entry 0 hebben. 4. Uitlijning (rechthoekige elementen alleen): Dit veld geeft aan dat de afbeelding voor een element is met een align attribuut. Left = 0, center = 1, right = 2, en undefined = 3. Left, right of center moeten uitdrukkelijk bij het element staan. 5. Positionering informatie: bepaalt welke Cascading Style Sheets (CSS) positioneren van de waarde van de glyph van toepassing is. Statische positionering = 0, absolute positionering = 1, relatieve positionering = 2, en alle = 3. Dit veld kan je een glyph opgeven voor een tag als het niet is geplaatst en een andere glyph om aan te tonen dat er een ankerpunt bij de tag is geplaatst. Voorbeeld:

// This entry sets the opening H3 tag image %%h3^^%%res://edglyphs.exe/GIFS/h3bgn.gif^^%%0^^%%3^^%%0^^%%4^ ^%%20^^%%15^^%%20^^%%15^^** // This entry sets the closing H3 tag image %%h3^^%%res://edglyphs.exe/GIFS/h3end.gif^^%%1^^%%3^^%%0^^%%4^ ^%%20^^%%15^^%%20^^%%15^^** // This entry sets the image for an absolutely positioned H3 element %%h3^^%%res://edglyphs.exe/GIFS/anchor.gif^^%%0^^%%3^^%%2^^%%4^ ^%%20^^%%15^^%%20^^%%15^^** Jeroen Van Loocke – Lucky’s Pc’s

26

In dit voorbeeld hebben de begin en eind tags van statisch gepositioneerde H3 elementen een afbeelding. Elementen zijn standaard statisch gepositioneerd, dus deze afbeeldingen geven weer wanneer er geen plaatsing is ingesteld. Absoluut gepositioneerde H3 elementen hebben een afbeelding om te laten zien waar de H3 is verankerd in het document. Maar de relatief gepositioneerde H3 elementen geven de begin H3 tag afbeelding, h3bgn.gif, voor hun ankerpunt. 6. Richting: Dit veld specificeert een afbeelding voor een tag gebaseerde richting van lezen voor de ingestelde taal. 0 is voor links naar rechts. 1 is voor rechts naar links. 2 voor boven naar beneden. 3 is voor beneden naar boven. 4 is voor alles. Normaal staat dit veld altijd op 4. 7. Breedte van de afbeelding: Dit veld bepaalt te breedte van de afbeelding in pixels. 8. Hoogte van de afbeelding: Dit veld bepaalt de hoogte van de afbeelding in pixels. 9. Gereserveerd: Zet dit veld op de breedte van de afbeelding 10. Gereserveerd: Zet dit veld op de hoogte van de afbeelding. Bron: http://msdn.microsoft.com/en-us/library/aa969614%28VS.85%29.aspx Daarna kan je het commando AddToGlyphTable uitvoeren. Bij dit commando heeft de IOleCommandInterface een pointer van een NativeVartiant van je string met tags en afbeeldingen nodig. Die wordt dan aan de glyph tabel toegevoegd. Deze parameter kan je op de volgende manier bekomen: Dim pData As IntPtr = Marshal.AllocCoTaskMem(2000) Marshal.GetNativeVariantForObject(bstrTemp, pData)

Bij deze testcode is de variabele ‘bstrTemp’ je string waarin je één of meerdere tag(s) koppelt aan een afbeelding in je resources(zie hierboven).


27

7.6 .Res resources toevoegen aan een library In mijn project gebruik ik zoals hierboven vermeld de IOleCommandTarget Interface. Deze interface gebruik ik bij het commando AddToGlyphsTable. Bij dit commando is het de bedoeling dat je een pointer meegeeft van een NativeVartiant van een string die de omschrijving van de HTML tags met bijhorende resource(Zie IOleCommandInterface gebruiken om glyphs te maken). Dit moet een resource zijn met een .res extensie. Standaard kan je alleen maar .resx resources toevoegen in .NET . Oplossing: Ik heb een C++ project gemaakt waarin ik mijn .res resource gemaakt heb. Dan heb ik de .vbproj van mijn library aangepast, de code hieronder heb ik toegevoegd: <Win32Resource>HTMLEditingLibrary.res Dan open je je library in visual studio en voeg je het .res bestand toe via rechtermuisknop, bestaand bestand toevoegen. Bij het lezen van je .res bestand zijn de namen van je afbeeldingen en/of andere bestanden vervangen door nummers omdat .NET dit niet ondersteunt. Hiervoor bestaat een handige tool, ResourceHacker. Hiermee kan je .res bestanden openen en zien welk nummer met welke afbeelding en/of ander bestand overeenkomt.


28


29

7.7 Tekst/tabellen omzetten naar lijsten. Één van de functionele eisen was de bestaande functie om tekst/tabellen om te zetten naar lijsten uit te breiden. De functie die al bestond was redelijk beperkt. Zo kon men maar tot 2 diep gaan in de lijsten. Er werd geen rekening gehouden met het rowspan attribuut en er was geen mogelijkheid om afbeeldingen te eruit te filteren. Door de nieuwe functionaliteit is dit nu wel allemaal mogelijk. 7.7.1

Hoe tabellen omzetten naar lijsten?

Om tabellen om te zetten naar lijsten moet je elke cel van een tabel zien als een listitem. Hierbij heb je een aantal regels waar je rekening mee moet houden: Bij elke cel van een rij moet je één dieper gaan in je lijst. Voorbeeld: Titel

Data1

Data2

Deze tabel wordt omgezet in volgende lijst: •

Titel o

Data1 Data2

Bij elke rij begin je opnieuw met je lijst. Voorbeeld: Titel1 Titel2

Data1 Data2

Deze tabel wordt omgezet in volgende lijst: • •

Titel1 o Data1 Titel2 o Data2

Bij lege cellen ga je gewoon één dieper. Voorbeeld: Titel1

Data1 Data2

Deze tabel wordt omgezet in volgende lijst: •

Titel1 o Data1 o Data2


30

7.7.2

Hoe tekst omzetten naar lijsten?

Om tekst om te zetten naar lijsten gaan we eerst de tekst omzetten in tabellen en daarna de tabellen omzetten naar lijsten. Hierbij gebruiken we de hierboven vermelde functie. Bij het omzetten van tekst in tabellen zijn er een aantal regels waar er rekening mee gehouden moet worden: In volgende voorbeelden wordt een tab voorgesteld door: Æ Bij elke tab wordt er een nieuwe cel gemaakt in dezelfde rij. Voorbeeld: Titel1ÆData1ÆData2 Dit wordt omgezet naar volgende tabel: Titel

Data1

Data2

Bij elke enter(carriage return line feed) wordt er een nieuwe rij gemaakt. Voorbeeld: Titel1ÆData1 Titel2ÆData2 Dit wordt omgezet naar volgende tabel: Titel1 Titel2

Data1 Data2

Bij lege tab gewoon een lege cel toevoegen. Voorbeeld: Titel1ÆData1 ÆÆData2 Dit wordt omgezet naar volgende tabel: Titel1


Data1 Data2

31

7.7.3

Rekening houden met het rowspan attribuut.

Wanneer een cel een rowspan attribuut bevat moet men hier rekening mee houden. Dit attribuut geeft weer over hoeveel rijen de cel zich bevindt. De oplossing hiervoor is de rowspan vervangen door lege cellen. Voorbeeld: Titel1 (Bevat rowspan 2)

Data1 Data2

Dit wordt dan de volgende tabel: Titel1

7.7.4

Data1 Data2

Splitsen aan de hand van een string

Men kan een tabel of tekst ook opsplitsen aan de hand van een opgegeven string. Elke keer dat de string voorkomt in de tekst van een tabel wordt er een nieuwe cel aangemaakt en het deel dat links van de string staat blijft staan in de huidige cel en het rechter deel wordt in de nieuwe cel geplaatst. Bij het omzetten van tekst naar lijsten wordt elke keer wanneer de string gevonden is die vervangen door een tab. In volgende voorbeelden is de string waarom we splitsen een “,”. Voorbeeld tabel naar lijst: Titel1

Data1,Data2

Dit wordt dan de volgende tabel: Titel1

Data1

Data2

Voorbeeld tekst naar lijst: Titel1ÆData1,Data2 Dit wordt dan het volgende: Titel1ÆData1ÆData2


32

7.8 Het zichtbaar maken van de randen bij tabellen. Bij de oude DHTML control zat deze functie er standaard in. Met de nieuwe .Net Webbrowser control was dit niet het geval. Internet Explorer 8 ondersteund deze functie niet meer. Daarom heb ik voor een alternatief gezocht. Deze zelfgemaakte functie werkt nu met een stylesheet die weggeschreven wordt in een tijdelijk bestand die toegewezen is door Windows zelf (zie “Via Windows een tijdelijk bestand maken”). Voorbeeld:

7.8.1

IE 7 en oudere versies

Internet Explorer 7 en andere oudere versies ondersteunen de standaard functie wel. Deze kan op de volgende manier bekomen worden met behulp van de OleCommandTarget interface (Zie “5.4 OleCommandTarget Interface”).

Dim ct As OleCommandTarget = New OleCommandTarget() ct.OleCommandExec(MSHTML_COMMAND_IDS.IDM_SHOWZEROBORDERATDESIGNTIME , Me.Document.DomDocument)


33

MSHTML_COMMAND_IDS.IDM_SHOWZEROBORDERATDESIGNTIME is een enum die gelijk is aan een Integer met waarde 2328. 7.8.2

IE8

Internet Explorer 8 ondersteunt de hierboven vermelde functie niet. Daarom heb ik voor een alternatief gezocht. Het is de bedoeling dat de randen van de tabellen zichtbaar worden zonder dat de source code verandert. De oplossing die ik hiervoor heb gevonden is werken met een stylesheet. Het probleem is nu waar dat je die stylesheet moet plaatsen. Elke computer is immers anders ingedeeld. De oplossing die ik hiervoor gevonden heb, is om een tijdelijk bestand aan het Windows besturingsysteem te vragen (zie “Gebruik maken van tijdelijke bestanden.”). Het Windows besturingssysteem heeft een map waar alle programma’s hun tijdelijke bestanden in kunnen wegschrijven (Temporary files). Wanneer je een tijdelijk bestand gekregen heb schrijf je het volgende naar dat bestand: TD{border-width: 1px; border: groove} Nu kan je dit bestand als style in de head tag van je document zetten.


34

7.9 Templates s 7.9.1

W is een template Wat

In de HT TMLEditor is een temp plate een so oort van lijst met instru ucties die de e editor seq quentieel moet uittvoeren. Ee en template e is bedoeld om zo vee el mogelijk bewerkinge b n te automa atiseren. Zo kan men autom matisch elementen van n de webbrrowser laten kopiëren naar de ed ditor, de s latten maken en comma ando’s op die d selectie e laten uitvo oeren. Omdat elke editor selecties website e anders is,, is er de mogelijkheid m d om voor elke website een tem mplate te maken en deze in een lokale map op te slaan. s Voorbee eld:

7.9.2

Hoe beginn nen om een template e te maken? ?

Om een n template te maken moet de ge ebruiker ee erst naar ee en webpagiina van de website surfen waarvoor w hij een temp plate wil ma aken. Als de e gebruikerr de gewenste webpag gina van die web bsite heeft geladen in n de webbrrowser, moe et de gebru uiker op he et volgend icoontje klikken: Hierna zal de geb bruiker een dialoog op p het scherrm krijgen die d een tre eeview beva at. Deze treeview w geeft een n gestructu ureerde wee ergave van n alle elementen van de webpag gina die momenteel open staat. Jeroen Van Loocke e – Lucky’s Pc’s

35

Voorbeeld:

Nu kan de gebruiker beginnen met zijn template te maken. Hieronder worden de mogelijkheden besproken. 7.9.3

Een element laten kopiëren

Een mogelijkheid in het maken van een template is het kopiëren van een element uit de webbrowser en deze plakken in de editor. De gebruiker moet eerst de stappen hierboven (zie “Hoe beginnen om een template te maken?”) volgen tot hij zijn treeview heeft. Hierna is het de bedoeling dat de gebruiker instructies geeft aan de editor: wat hij moet kopiëren en waar het moet staan in de editor. Dit kan op de volgende manier duidelijk worden gemaakt. Om te laten weten welk element je wil laten kopiëren moet je dat element zoeken in je treeview. Wanneer de gebruiker een element selecteert in de treeview wordt het overeenkomstig element in de webbrowser ook geselecteerd. Zo kan de gebruiker snel weten waar op de webpagina hij juist zit.


36

Wanneer de gebruiker het gewenste element heeft gevonden moet hij eerst bovenaan het treeview dialoog voor “SjabloonPath” kiezen. Daarna hoeft hij alleen maar het gewenste element uit de treeview te slepen naar de gewenste plaats in de editor.

In het voorbeeld hierboven zal het gewenste element in de eerste cel van de tabel komen te staan. Het element wordt dus gekopieerd naar de plaats waar het commando staat.


37

Wannee er de gebru uiker het ge ewenste element naar de gewenste plaats he eeft gesleep pt zal hij niet hett element ziien staan op die plaatss maar een commando o. Dit comm mando besttaat uit 2 delen. • •

Het comma ando zelf na amelijk: “Sja abloonPath:” Het pad naar het ge ewenste ele ement. Doo or dit pad weet de e editor precies welk e element je wil w kopiëren n.

Het geh heel moet altijd tussen vierkante haken h staan n. De gebrruiker kan zoveel z elem menten laten n kopiëren als a hij wil! 7.9.4

S Selecties m maken

Nadat de d gebruike er één of meerdere m elementen heeft opgegeven om te e kopiëren. Kan de gebruike er selectiess laten makken op de gekopieerde g e elementen n. Hiervoor moet de gebruiker g eerst op p het volgen nd icoontje klikken: Hierna krijgt k hij volg gend dialoo og tezien:

In dit dialoog heb je aan de linkerkant opnieuw een e treeview w en aan d de rechterk kant een webbrow wordt gevo wser. De webbrowser w ormd door de d instructie es die al in de editor staan s uit te voere en. Het ve erkregen do ocument wo ordt daarna a getoond en e de treevview wordtt van dit docume ent gemaakkt. Hier geldt opnieuw w hetzelfde principe alls bij het ko opiëren van n een elem ment. Wanne eer men iets selecteert in de treeview wordt het overe eenkomstig element iin de web bbrowser ent gevond den is moe et de gebrruiker opnie euw dat geseleccteerd. Als het gewenste eleme elementt van de tre eeview naarr zijn editor slepen. s


38

Opnieu uw krijgt de gebruiker een e commando en een n pad tezien n. Voorbee eld: [ [Selection:B BODY 0\TA ABLE 0\TBO ODY 0\TR 0\\TD 0\STRO ONG 0] 7.9.5

C Commando o’s uitvoerren

In een template heeft h de gebruiker ookk de mogellijkheid om bepaalde commando o’s uit te laten vo oeren. Hiervvoor moet de gebruikerr eerste op het volgend d icoontje kllikken: Nu kan de gebruikker op de gewenste g c commando’ s klikken die d hij wil u uitvoeren. De D editor u in een soo ort van opneem moduss dus zullen n de icoontjjes waarop hij klikt nie ets doen! staat nu Als de gebruiker de d gewensste comman ndo’s heeftt aangekliktt moet hij nu op het volgend e klikken: icoontje De opne eem moduss wordt stop pgezet en de geselecte eerde comm mando’s worden getoon nd. Voorbee eld: [ [Macro:Bold d%%Underline%%Italic%%] De gebruike D er heeft hie er op 3 icoo ontjes geklikt namelijk Bold, Underline en Italic. Het c commando hier is “Macro:”. Pas op! Wannee er men com mmando’s wil w uitvoere en waarvoo or een selecctie nodig iis, moet me en eerst een sele ectie maken n in de temp plate (zie “S Selecties maken”). 7.9.6

S Surfen mett een temp plate

De geb bruiker heefft ook de mogelijkheid m d om de ed ditor op linkks in een w webpagina te laten klikken. Hiermee kan k hij in zijn template naar meerd de webpagiina’s surfen n. Om een editor e op links te laten klikke en moet de gebruiker g h volgende het e doen. om een tem mplate te De gebruiker gaat terug naarr zijn treeview dialoog (zie “Hoe beginnen o n van een element (z zie “Een maken”). De gebrruiker doet hetzelfde als voor het kopiëren aar voor datt hij de gew wenste linkk sleept moet hij vanboven de elementt laten kopiëren”). Ma radiobutton “Click” aanvinken.. Nu mag de e gebruiker de gewensste link slepen in zijn ed ditor.


39

Voorbeeld:

De gebruiker zal na het slepen het volgende zien:

[Click:BODY 0\DIV 0\TABLE 0\TBODY 0\TR 1\TD 0\TABLE 0\TBODY 0\TR 0\TD 4\TABLE 0\TBODY 0\TR 0\TD 0\TABLE 1\TBODY 0\TR 0\TD 0\A 0] 7.9.7

Frames

Als er op een webpagina frames gebruikt worden kan men de hierboven uitgelegde functies niet gebruiken. Het is immers niet mogelijk om de inhoud van een frame op te vragen. Daarom is er een speciale functie gemaakt voor frames. Wanneer een gebruiker toch de inhoud van een frame wenst kan hij deze krijgen door te surfen naar die bepaalde frame. Dit kan met behulp van de functie “FramePath”. De gebruiker gaat terug naar zijn treeview dialoog (zie “Hoe beginnen om een template te maken”). Nu klikt hij vanboven op de treeview op de radiobutton “FramePath”. Nu is het principe weer hetzelfde. De gebruiker sleept het frame waar hij naartoe wil surfen naar zijn editor.


40

De gebruiker zal na het slepen het volgen zien:

[FramePath:FRAMESET 0\FRAMESET 1\FRAMESET 1\FRAME 0]


41

7.10 Via Windows een tijdelijk bestand maken In Visual Studio heb je de mogelijkheid een tijdelijk bestand te maken via het Windows besturingssysteem. Dit kan handig zijn wanneer je tijdelijk iets wil wegschrijven die na het afsluiten van het programma mag verwijdert worden. In de HTMLEditor wordt dit gebruikt om een CSS bestand te maken die ervoor zorgt dat de randen van cellen in een tabel getoond worden (zie “Het zichtbaar maken van randen bij tabellen”). Hieronder heb je een voorbeeld van hoe je een tijdelijk bestand aanmaakt en tegelijkertijd het pad van dat bestand opvraagt.

path = My.Computer.FileSystem.GetTempFileName()

Het bestand dat aangemaakt wordt bevindt zich in de “Temp” map van Windows. Een groot voordeel hieraan is dat wanneer de gebruiker een cleanup doet van de “C” schijf worden deze bestanden ook verwijderd. Doordat je de verantwoordelijkheid voor het maken van het bestand aan Windows geeft, heb je weinig kans dat er fouten gebeuren door een foute mappenstructuur of een gebrek aan rechten.


42

8 Conclusie De HTMLEditor die ik tijdens mijn stage heb gemaakt is een grote uitbreiding op de bestaande .Net webBrowser control. De oude DHTML control is volledig vervangen en er zit veel nieuwe functionaliteit in. De gebruiker die de HTMLEditor gebruikt kan veel vlugger en veel meer bewerkingen doen dan vroeger. De gebruiker kan bepaalde acties laten automatiseren door macro’s en templates te maken. Macro’s worden samen met de meeste settings die een gebruiker kan aanpassen bewaard in het register. Terwijl templates in een lokale map worden bewaard. Er zijn verschillende functies voorzien die het de gebruiker gemakkelijker maakt om zijn pagina te bewerken. Zo kan hij aan de hand van glyphs zien waar bepaalde HTML tags beginnen en eindigen. Een andere functie zorgt er dan weer voor dat de gebruiker tabellen kan zien die geen border hebben. De functionaliteit om de grootte van een afbeelding in te stellen is verder uitgebreid. Nu is er de mogelijkheid om alle afbeeldingen in één druk op de knop te verkleinen naar een maximum. De gebruiker kan zowel met pixels als met procenten werken. De gebruiker heeft de mogelijkheid om de source code te bekijken van zijn HTML pagina. Deze wordt gekleurd zodat het de gebruiker gemakkelijker maakt om te lezen. Er is intellisense voorzien om de gebruiker te helpen bij het aanpassen van de source code. Ook kan de gebruiker gebruik maken van een validatie functie die mogelijke fouten in de source code weergeeft.


43

9 Kritische reflectie De HTMLEditor die ik tijdens mijn stage heb gemaakt voldoet aan alle functionele eisen die gevraagd waren. Deze HTMLEditor biedt echter nog veel mogelijkheden om verder uit te breiden. Zo zou men er nog extra functionaliteit kunnen insteken die ervoor zorgt dat de gebruiker meer dan alleen de grootte van een afbeelding kan aapassen maar ook zijn randen, het ALT attribuut, … De HTMLEditor is ontwikkeld voor Internet Explorer 8. Als een eindgebruiker een oudere of nieuwere versie gebruikt is er een mogelijkheid dat sommige functionaliteit niet werkt. Bij gebruik van IE5 of ouder zal een groot deel van het programma niet werken. De eindgebruiker hoeft zich niet veel zorgen te maken over het besturingssysteem dat hij gebruikt. Tijdens het testen is gebleken dat het programma werkt op: Windows XP, Windows Vista en Windows 7. Dit zowel voor de 32bit als de 64bit versies. De eindgebruiker heeft dus één van de hierboven vermelde besturingssystemen nodig om de HTMLEditor correct te kunnen laten werken. Internet toegang is gewenst wanneer een eindgebruiker de HTMLEditor wil gebruiken. Dit is niet verplicht omdat de eindgebruiker ook naar lokale bestanden kan surfen en daar ook de gewenste functies van de HTMLEditor op kan toepassen.


44

Datum van voltooiing:

Voor akkoord verklaard

Kristien Roels

Parcifal Aertssen

Stagebegeleider

Stagementor


45

Eindwerk. HTMLEditor. Jeroen Van Loocke. Lucky s Pc s. Gemakkelijk en vlug bewerken van HTML pagina s. Handelswetenschappen en Bedrijfskunde

Recommend Documents