Dialogbox in XML omzetten naar HTML met XSL

[DPhoenix]

Hallo,

Ik heb me al een beetje verdiept in XML. Echter ik heb een opdracht gekregen om een invoerscherm (dialogbox) in XML formaat die er als volgt uitziet:

<!-- dialogid=10017832 mnemonic=EPDGB file=C:\tmp\DCCEPD\epdgb.xml -->
<DIALOGS>
<DIALOG>
<name>EPDGB</name>
<POSITION>
<x>0</x>
<y>0</y>
<w>341</w>
<h>61</h>
<units>Dialog</units>
</POSITION>
<STYLES>
<style>Caption</style>
<style>SystemMenu</style>
<style>MinimizeBox</style>
<style>MaximizeBox</style>
<style>Resizable</style>
<style>Absolute</style>
</STYLES>
<caption>EPD Gebruiker</caption>
<FONT>
<name>MS Sans Serif</name>
<size>8</size>
</FONT>
<!-- <icon> EPDGB </icon> -->
<CONTROLS>
<CONTROL>
<type>Borshade</type>
<STYLES>
<style>Visible</style>
<style>Group</style>
<style>Border</style>
<style>Etched</style>
</STYLES>
<POSITION>
<x>5</x>
<y>1</y>
<w>288</w>
<h>56</h>
<units>Dialog</units>
</POSITION>
<SCALING>
<scalable>XY</scalable>
<anchor>TopLeft</anchor>
</SCALING>
</CONTROL>
<CONTROL>
<caption>EPD Gebruiker</caption>
<type>Static</type>
<STYLES>
<style>Visible</style>
</STYLES>
<POSITION>
<x>119</x>
<y>1</y>
<w>61</w>
<h>9</h>
<units>Dialog</units>
</POSITION>
<COLOR>
<foreground>white</foreground>
<background>blue</background>
</COLOR>
<FORMAT>
<alignment>Center</alignment>
</FORMAT>
<SCALING>
<scalable>X</scalable>
<anchor>TopLeft</anchor>
</SCALING>
</CONTROL>
<CONTROL>
<type>BorShade</type>
<STYLES>
<style>Visible</style>
<style>Group</style>
<style>Border</style>
<style>Etched</style>
</STYLES>
<POSITION>
<x>10</x>
<y>14</y>
<w>276</w>
<h>39,5</h>
<units>Dialog</units>
</POSITION>
<SCALING>
<scalable>XY</scalable>
<anchor>TopLeft</anchor>
</SCALING>
</CONTROL>
<CONTROL>
<caption>Gebruiker:</caption>
<type>Static</type>
<STYLES>
<style>Visible</style>
</STYLES>
<POSITION>
<x>37</x>
<y>24</y>
<w>43</w>
<h>8</h>
<units>Dialog</units>
</POSITION>
<FORMAT>
<alignment>Right</alignment>
</FORMAT>
</CONTROL>
<CONTROL>
<caption>EPD mnemonic:</caption>
<type>Static</type>
<STYLES>
<style>Visible</style>
</STYLES>
<POSITION>
<x>22</x>
<y>34</y>
<w>58</w>
<h>8</h>
<units>Dialog</units>
</POSITION>
<FORMAT>
<alignment>Right</alignment>
</FORMAT>
</CONTROL>
<CONTROL>
<name>R01</name>
<type>PhoenixEdit</type>
<index>0</index>
<STYLES>
<style>Visible</style>
<style>Tabstop</style>
<style>AutoHScroll</style>
<style>Mandatory</style>
<style>AutoStart</style>
<style>AutoExit</style>
</STYLES>
<POSITION>
<x>84</x>
<y>24</y>
<w>32</w>
<h>8</h>
<units>Dialog</units>
</POSITION>
<COLOR>
</COLOR>
<FORMAT>
<length>8</length>
<transport>8</transport>
<decimals>0</decimals>
</FORMAT>
<VALIDATION_TYPES>
</VALIDATION_TYPES>
<PROCESSINGFLAGS>
</PROCESSINGFLAGS>
</CONTROL>
<CONTROL>
<name>R02</name>
<type>PhoenixEdit</type>
<index>0</index>
<STYLES>
<style>Visible</style>
<style>AutoHScroll</style>
<style>ReadOnly</style>
</STYLES>
<POSITION>
<x>124</x>
<y>24</y>
<w>80</w>
<h>8</h>
<units>Dialog</units>
</POSITION>
<COLOR>
</COLOR>
<FORMAT>
<length>20</length>
<transport>20</transport>
<decimals>0</decimals>
</FORMAT>
<VALIDATION_TYPES>
</VALIDATION_TYPES>
<PROCESSINGFLAGS>
<flag>NoBrowse</flag>
</PROCESSINGFLAGS>
</CONTROL>
<CONTROL>
<name>R03</name>
<type>PhoenixEdit</type>
<index>0</index>
<STYLES>
<style>Visible</style>
<style>Tabstop</style>
<style>AutoHScroll</style>
<style>Mandatory</style>
<style>AutoStart</style>
<style>AutoExit</style>
</STYLES>
<POSITION>
<x>84</x>
<y>34</y>
<w>33</w>
<h>8</h>
<units>Dialog</units>
</POSITION>
<COLOR>
</COLOR>
<FORMAT>
<length>8</length>
<transport>8</transport>
<decimals>0</decimals>
</FORMAT>
<VALIDATION_TYPES>
</VALIDATION_TYPES>
<PROCESSINGFLAGS>
</PROCESSINGFLAGS>
</CONTROL>
<CONTROL>
<name>R04</name>
<type>PhoenixEdit</type>
<index>0</index>
<STYLES>
<style>Visible</style>
<style>AutoHScroll</style>
<style>ReadOnly</style>
</STYLES>
<POSITION>
<x>124</x>
<y>34</y>
<w>80</w>
<h>8</h>
<units>Dialog</units>
</POSITION>
<COLOR>
</COLOR>
<FORMAT>
<length>20</length>
<transport>20</transport>
<decimals>0</decimals>
</FORMAT>
<VALIDATION_TYPES>
</VALIDATION_TYPES>
<PROCESSINGFLAGS>
<flag>NoBrowse</flag>
</PROCESSINGFLAGS>
</CONTROL>
<CONTROL>
<caption>OK</caption>
<name>OK</name>
<type>button</type>
<id>OK</id>
<STYLES>
<style>Visible</style>
<style>Tabstop</style>
</STYLES>
<POSITION>
<x>297</x>
<y>5</y>
<w>40</w>
<h>14</h>
<units>Dialog</units>
</POSITION>
<COLOR>
</COLOR>
<PROCESSINGFLAGS>
<flag>OnValidate</flag>
</PROCESSINGFLAGS>
<FORMAT>
</FORMAT>
<tooltip>Druk op deze knop,\nals u klaar bent met invoeren\nen de gegevens wilt verwerken</tooltip>
</CONTROL>
<CONTROL>
<caption>Sluiten</caption>
<name>Close</name>
<type>button</type>
<id>Clo</id>
<STYLES>
<style>Visible</style>
<style>Tabstop</style>
</STYLES>
<POSITION>
<x>297</x>
<y>23</y>
<w>40</w>
<h>14</h>
<units>Dialog</units>
</POSITION>
<COLOR>
</COLOR>
<PROCESSINGFLAGS>
<flag>OnAutoStart</flag>
</PROCESSINGFLAGS>
<FORMAT>
</FORMAT>
<tooltip>Druk op deze knop,\nom de dialoog te sluiten,\nzonder te verwerken</tooltip>
</CONTROL>
<CONTROL>
<caption>Inzage...</caption>
<name>Browse</name>
<type>button</type>
<id>Bws</id>
<STYLES>
<style>Visible</style>
<style>Tabstop</style>
</STYLES>
<POSITION>
<x>297</x>
<y>23</y>
<w>40</w>
<h>14</h>
<units>Dialog</units>
</POSITION>
<COLOR>
</COLOR>
<PROCESSINGFLAGS>
<flag>On</flag>
</PROCESSINGFLAGS>
<FORMAT>
</FORMAT>
</CONTROL>
<CONTROL>
<caption>Help</caption>
<name>Help</name>
<type>button</type>
<id>Hlp</id>
<STYLES>
<style>Visible</style>
<style>Tabstop</style>
</STYLES>
<POSITION>
<x>297</x>
<y>43</y>
<w>40</w>
<h>14</h>
<units>Dialog</units>
</POSITION>
<COLOR>
</COLOR>
<PROCESSINGFLAGS>
<flag>OnAutoStart</flag>
</PROCESSINGFLAGS>
<FORMAT>
</FORMAT>
<tooltip>Druk op deze knop,\nom informatie te krijgen\nover deze dialoog</tooltip>
</CONTROL>
</CONTROLS>
<TOOLBAR>
<CONTROL>
<name>Close</name>
<icon>K_EXIT</icon>
<type>Button</type>
</CONTROL>
<CONTROL>
<type> Separator </type>
<POSITION>
<w>4</w>
<units> Dialog </units>
</POSITION>
</CONTROL>
<CONTROL>
<name>Help</name>
<icon>K_HELPX</icon>
<type>Button</type>
</CONTROL>
</TOOLBAR>
</DIALOG>
</DIALOGS>

Ik kom er maar niet achter hoe ik deze dialogbox zou kunnen omzetten naar HTML gebruikmakend van XSL. Kan iemand me hiermee helpen?

[mbravenboer]

Wat snap je dan niet? Heb je al iets geprobeerd?

Weet je wel wat XSLT is en doet? Als je dat niet weet moet je maar eens een goede tutorial doorlezen zoals op http://www.xfront.com . Als je die doorgespit hebt schut je dit zo uit je mouw .

[DPhoenix]

Is goed MBravenboer, ik weet dat jij de XMLman bent dus ik ga daar wel even een kijkje nemen. Lukt het me niet dan post ik het wel weer op deze thread.

[DPhoenix]

Wat ik eigenlijk niet snap is het volgende:
Ik lees in die tutorials wel vaak hoe je XMLbestanden omzet in HTML gebruikmakend van XSL.

Bijvoorbeeld een XMLbestand met een cdcollectie erin, dus bv 65 cds in het XMLbestand. Deze worden dan door het XSLbetand omgezet in HTML in een schema. Dat lukt me allemaal wel.

Maar hier gaat het om een dialogbox in XML dat door XSL in zeg maar een HTML formulier invoerscherm moet worden omgezet.

[mbravenboer]

DutchPhoenix: Ik lees in die tutorials wel vaak hoe je XMLbestanden omzet in HTML gebruikmakend van XSL.

Daar kan je XSL inderdaad voor gebruiken, maar XSL is meer: het is gewoon een generieke transformatie-taal voor XML. Je kunt met XSL, XML transformeren naar allerlei vormen: XML, HTML en allerlei plain-text varianten.

Maar hier gaat het om een dialogbox in XML dat door XSL in zeg maar een HTML formulier invoerscherm moet worden omgezet.

Dat is toch ook HTML? Op zich geen probleem dus . Maar uiteraard genereer je zo alleen de presentatie voor de html client. Er is nog wel server-side code nodig om de input ook daadwerkelijk te verwerken....

[ErectionJackson]

Je moet gewoon van iedere XML node die je hebt bedenken hoe je wilt dat het eruit gaat zien. Als je bijv. je Dialog node eruit wilt laten zien als een tabel met grijze achtergrond, maak je voor Dialog een template die een <table bgcolor="gray"> uitspuugt.

Gestructureerd te werk gaan, dat is belangrijk. Begin klein en bouw langzaam uit, dat is het makkelijkst

Succes ermee!

[DPhoenix]

Bedankt ErectionJackson! Kort maar krachtig uitgelegd. Ik begrijp het nu een stuk beter.

Die template van die node Dialog moet ik neem ik aan in XSL schrijven.

[ErectionJackson]

Inderdaad! Laat maar even zien als het af is dmv screenshotjes oid!

[DPhoenix]

Op woensdag 16 januari 2002 10:51 schreef ErectionJackson het volgende:
Inderdaad! Laat maar even zien als het af is dmv screenshotjes oid!

Is goed. Ik zal in iedergeval één screenshotje maken. Dit is namelijk een opdracht voor mijn werk. Vandaar dat ik niet alles mag publiceren. Maar één screenshotje kan geen kwaad.

[DPhoenix]

Moet je elke node defineren in XSL, ik bedoel beschrijven wat je ermee wil doen?

Enkele nodes zijn namelijk niet nodig volgens mij om mbv XSL om te zetten HTML. Bijvoorbeeld de volgende:

STYLES>
<style>Caption</style>
<style>SystemMenu</style>
<style>MinimizeBox</style>
<style>MaximizeBox</style>
<style>Resizable</style>
<style>Absolute</style>
</STYLES>

Minimize, Maximize en Resizable dat doet de browser toch al standaard? Kan ik deze nodes dan gewoon skippen, maar wel in de XMLbestand laten staan?

[mbravenboer]

Uiteraard, je kan met XSLT heel gemakkelijk zelf kiezen of je content wel of niet wilt gebruiken. Je hoeft niet alle content 1 op 1 te vertalen, sterker nog: dat doe je haast nooit .

[DPhoenix]

Op donderdag 17 januari 2002 19:14 schreef mbravenboer het volgende:
Uiteraard, je kan met XSLT heel gemakkelijk zelf kiezen of je content wel of niet wilt gebruiken. Je hoeft niet alle content 1 op 1 te vertalen, sterker nog: dat doe je haast nooit .

Aha, want de XMLbestanden die ik om moet zetten die worden gegeneert door een applicatie. De applicatie maakt User Interfaces (dialogboxes) en poept er XMLbestanden ervan uit.

En dan kunnen er nodes tussen zitten die ik dus niet gebruik. Vandaar.

[ErectionJackson]

Na, kom op met die screendumps

[DPhoenix]

Op vrijdag 18 januari 2002 09:46 schreef ErectionJackson het volgende:
Na, kom op met die screendumps

Gimme some time , heb begint me langzaam duidelijker te worden. Maar ik beloof je de screendump komt!

[DPhoenix]

Nog even een vraagje:

Is in het geval van deze XML(zie eerste post)

In het geval van deze XML (zie eerste post) gaat het om de opmaak (weergave) van het schermpje. Niet alle nodes moeten dus letterlijk worden weer gegeven in HTML.

Wat ik bedoel dit:

code:

<POSITION>
<x>5</x>
<y>1</y>
<w>288</w>
<h>56</h>
<units>Dialog</units>
</POSITION>
<SCALING>
<scalable>XY</scalable>
<anchor>TopLeft</anchor>
</SCALING>

moet wel gebruikt worden maar niet zoals van: Dit is 288.... 288 staat voor de width. Hoe moet ik zulke informatie omzetten met XSL? Doe ik dat met XSL-FO?

[Verwijderd]

hoe, en waarvoor wil je die waarde gebruiken in html?

[DPhoenix]

Het zit zo. De XML geeft als het ware een beschrijving weer van het schermpje (dialogbox).

Enkele nodes zoals namen op het schermpje moeten er worden weergegeven. Andere nodes zoals bijvoorbeeld die van STYLE of van x en y en w en h geven weer hoe het schermpje er uit moet komen te zien (de vorm).

Zou je mij een voorbeeld kunnen geven adv het bovenstaande XML hoe ik zo'n "Opmaak"node moet gebruiken?

[mbravenboer]

Ik zie je probleem niet echt... Je bepaalt met XSLT helemaal zelf wat er wel en niet in je resultaat komt. Je kunt zelf op elke plek alle mogelijke waarden verzamelen enzovoorts...

Als je alleen bepaalde waarden wilt overhouden kan je toch gewoon je value-ofs of apply-templates selectief gebruiken....