XML Explained (includes sample download)

Using XMLHttpRequest() to configure entire ToolBook pages.

XML Explained (includes sample download)

Postby Clifton » Wed Apr 29, 2015 7:22 am

XML (Extensible Markup Language) is a flexible markup language which is able to define objects and styles for entire web pages. The idea behind using XML to configure web pages is to create uniformity and simplicity of development throughout a web application.

It is possible to completely format, and script an entire page using entirely the XML capabilities of the PowerPac. The only Action needed is the one used to actually load the XML file which does the rest of the work for you. We can assist you in writing your XML configuration files.

A simple XML document:
    XML documents are text-based documents that contain tags that match in some way the elements on the HTML page. Extracting the contents of these tags provides the instructions to the XML interpreter how to format and display the page and what other dependencies should be loaded.

    A typical XML file that could be used to configure a ToolBook page may look like this:

    Code: Select all
    <?xml version="1.0" encoding="UTF-8"?>
    <page>
      <config>
        <stylesheet>
          ../media/config.css
        </stylesheet>
        <setPageContentPosition>
          <![CDATA[
            { left : 30, top : 30, width : '', height : '', addScrollBars : '', transparentPageBG : 42 }
          ]]>
        </setPageContentPosition>
      </config>
      <Heading_1>
        <pgStyleObject>
          <![CDATA[
            { theStyle : "border, fontFamily, fontSize, fontStyle, fontWeight",
              propVal  : "0px none, Tahoma, 16pt, italic, bold" }
          ]]>
        </pgStyleObject>
        <htmlText>
          <![CDATA[
            XML Configuration Demonstration&nbsp;&nbsp;
              <span class="copyright">
                &copy;2015 PG Software Development &mdash; Clifton L. Sleger
              </span>
          ]]>
        </htmlText>
        <userProperty>
          { prop : "className", val : "heading_1", get_set : "set" }
        </userProperty>
      </Heading_1>
      <body_frame_1>
        <htmlText>
          <![CDATA[
            <div class="container">
              <p style="margin-top:0px;">
                This page demonstrates the methods used to configure a ToolBook page using CSS and XML configuration
                files. Essentially, every element on the page may be configured, though there is a balance between
                what <i><u>can</u></i> be configured and what <i><u>should</u></i> be configured.
              </p>
              <p>
                The config.xml file included with this example contained fully commented sections that you can
                use to figure out your specific configuration requirements. You can load as many XML files as
                needed in your project and load them as necessary. During loading, any functions in the XML files
                are executed at the same time.
              </p>
              <p>
                XML files get cached in memory and will remain accessible to your application throughout the browser
                session. The browser memory cache is much faster than its disk cache. Plus the server only needs to
                deliver the XML file(s) ONCE per session which saves bandwidth and load time while navigating
                between pages of your application.
              </p>
              <p>
                You can create custom XML files and use the Actions Editor to parse the results. This is beyond the
                reach of this basic tutorial.
              </p>
              <p>
                To create XML files, you simply use a text editor. However, it is best to use one that has provisions
                for working with XML files (i.e.: syntax highlighting, etc.). The one we use is called SynWrite and is
                freely available. Other XML editors include NotePad++ and PSPad. The one you choose to use is entirely
                based on preference and ease of use for you.
              </p>
              <p>
                <b>NOTE:</b> You cannot open content with XML file configurations in IE from your local hard drive. Use
                Firefox for all you development testing and then upload the content to a server for final testing in
                other browsers.
              </p>
               
            </div>
          ]]>
        </htmlText>
        <pgStyleObject>
          { theStyle : "padding, overflowY, borderRadius, boxShadow",
            propVal  : "20px, auto, 20px, 1px 1px 8px 3px #333333" }
        </pgStyleObject>
        <pgTBObjSet>
          { myProperty : "user", myValue : "This is a user event on \"body_frame_1\"", myDelay : 3000 }
        </pgTBObjSet>
      </body_frame_1>
    </page>

    The page this defined by the above XML contains ONLY TWO fields and requires only ONLY ONE ACTION to load the XML using XMLHttpRequest(). The XML instructs the interpreter to load a single stylesheet which defines classes that determine how the content in each field will look.
    You can view the page here: http://www.pgsoftwaretools.com/powerpac/assessments/xml/basics

    Our original ToolBook page looks as simple as this! The XML document shown above contained the page content and handled sending one trigger to display a message prompt.
    Image 1.png
    ToolBook page with 2 fields and one action
    Image 1.png (3.58 KiB) Viewed 10438 times

    The entire PowerPac Help API is driven by XML files like this one! Editing a portion of a web application often simply involves editing the XML document which defines the page rather than going into author mode of ToolBook, making the change, and then re-exporting the entire application. In addition, exports are much faster since the page content need only be provided in XML files and the ToolBook application simply supplies the structure (or framework) for the page elements referred to the XML.

ToolBook and XML:
  • ToolBook exports are NOT XML capable by design. However, the essence of adding this ability has existed for a long time. The PowerPac enables developers to completely define entire pages using XML files via the function XMLHttpRequest(). This function is able to retrieve the XML data files, parse them, and read the content in such a way as to style the ToolBook page.
  • The PowerPac implementation of XML uses the browser's memory cache to put the XML data into memory so that it only is read ONCE per session. Thereafter, the data is instantly available making pages load much faster than normal.
  • Microsoft IE does not allow developers to view XML driven content from the local hard drive. However, Firefox does and this is the preferred way to test your content before placing on the web server for final testing.
  • XML files should be all placed in a common folder. They could be named based on the name of each page they configure but that is up to you.
  • Use the PowerPac DHTML Export utility to flag the XML folder for inclusion in the export of the application.
  • XML documents can be used to run other JavaScript and trigger objects, send user events, and perform many other practical tasks. Usually they are loaded with the page, however they can be retrieved at any time the services they provide are needed.
  • XML documents can greatly lighten the Action code needed to drive an exported ToolBook page.

XML Editors:
    Choose a good XML editor to create the XML files. While they can be created in notepad, other text editors are designed to automatically close tags and color-code section elements and markup, thus making the entire document easier to read.

    Some XML editor recommendations (all of which are freely available):
    SynWrite (our preferred XML editor)
    NotePad++ (well known and used by XML and web developers)
    PSPAD (a good choice but lacks code folding which often comes in handy)

Experimentation Is the Best Teacher
    We have included for download the example cited above as a zip file that you can download and try. The XML included in the zip file is much larger than ordinary as we have fully commented each section to explain what it does and how it relates to the ToolBook page. Once you get a handle on using XML, you will never look back. XML files can be used to create mult-language setups and they can be stored in online databases to create different versions of a web application.

    xml_demo_v115_v901.zip
    Basic XML / ToolBook example (v11.5 and v9.01 included)
    (79.2 KiB) Downloaded 669 times
Clifton
Site Admin
 
Posts: 732
Joined: Tue Jan 14, 2014 1:04 am

Re: XML Explained (includes sample download)

Postby John Robin Dove » Wed Apr 29, 2015 9:20 am

Hi Clifton,

Thanks for the download. I have been looking at the possibilities. I can see how useful this is for configuring complex pages. I have managed to change numerous style properties like colors, opacity etc. but I'm not sure how to apply it to to my project yet. My pages are not particularly complex visually. My problem is how to stuff all the programming into Toolbook without making it crash.

Is it possible to include things like shared actions and object methods (I mean functions or things like VB.NET subs) in the XML file? I tried to add onclick to one of your objects but nothing's happened yet. :)
John Robin Dove
 
Posts: 486
Joined: Thu Jan 23, 2014 4:35 am

Re: XML Explained (includes sample download)

Postby Clifton » Wed Apr 29, 2015 9:37 am

You can only execute PowerPac functions in XML files.

Code: Select all
<objectName>
   <pgTBObjSet>
      { myProperty : "click", myValue : "" }
   </pgTBObjSet>
</objectName>

This will send a click to objectName. Sending events to the application is the principle way to leverage code execution. Triggers, user events, and clicks can be sent to any object. In addition, you can execution single functions directly that enable/disable buttons, style objects, set the layer order or set/get text in fields, swap images, etc. The list goes on and on ...

To run other stuff, you can use the PowerPac function exeJavascriptDirect() in XML files. You can run some pretty complex stuff in this way, but you have to be careful to debug the code ... doing so in sections to make sure you know what you are doing and what practices may cause errors to be triggered. Running code this way is NOT exactly the same as writing your own functions because the interpreter in the middle trying to figure out what you want when it retrieves the code and parse it in a way that is most likely to execute cleanly.

Just remember that XML is a powerful tool; not a catch all solution to every situation you may encounter. It has saved a huge amount of authoring work for us. In your case, to substantially reduce action code you may have to write you own JavasScript functions.
Clifton
Site Admin
 
Posts: 732
Joined: Tue Jan 14, 2014 1:04 am

Re: XML Explained (includes sample download)

Postby John Robin Dove » Wed Apr 29, 2015 9:44 am

And then run them with exJavascriptDirect()?
John Robin Dove
 
Posts: 486
Joined: Thu Jan 23, 2014 4:35 am

Re: XML Explained (includes sample download)

Postby Clifton » Wed Apr 29, 2015 11:56 am

Please read the commented config.xml file included in the sample. It indicates what can and cannot be done.

For example, exeJavascriptDirect() can only be called inside a config section:

Code: Select all
<config[n]>
    <exeJavascriptDirect>
        { commandLine : "alert( 'Hello world!' );" }
    </exeJavascriptDirect>
</config[n]>
Clifton
Site Admin
 
Posts: 732
Joined: Tue Jan 14, 2014 1:04 am

Re: XML Explained (includes sample download)

Postby John Robin Dove » Thu Apr 30, 2015 10:27 am

Hi Clifton,

I made some trial apps to test page loading via an XML file. I included mergeTBObjects(), createDraggableObject(), etc. and they worked well. So I decided to transfer a large chunk of my on load page actions to an xml file. But it doesn't work and seems to mess up other things too. Buttons no longer respond etc. Here's the file. Can you see anything wrong with it please?

Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<page>
  <!--The FIRST line defines this as a data XML file.
  END-->
 
 
  <config>
   
   
    <!--You should always provide at least one config section even if it is empty-->
   
  </config>
 
  <!--------------------------------CHANGEPOS-------------------------->
  <changepos>
     <mergeTBObjects>
    <![CDATA[
        {ObjectsToMerge  : "mask", }
      ]]>
    </mergeTBObjects>
 
    <createDraggableObject>
      <![CDATA[
        { constrainAxis : "x",
        bounds : "limits",
        constrainMouseCursor : false,
        manipulateLayer : false,
        cursorTheme  : "hand",
        suspendDrag : false,
        dragParentIfExist : false,
        realTimeNotify : true }
      ]]>
    </createDraggableObject>
   
    <pgStyleObject>
       <![CDATA[
        { theStyle : "background, backgroundImage",
          propVal  : "transparent, url('../images/changeposE.png')" }
      ]]>
    </pgStyleObject>
  </changepos>
    <!---------------------------HELP GROUP-------------------------------->
  <closeHelp>
      <pgStyleObject>
       <![CDATA[
        { theStyle : "padding",
          propVal  : "6px" }
      ]]>
      </pgStyleObject>
  </closeHelp>
 
  <container3>
      <mergeTBObjects>
    <![CDATA[
        {ObjectsToMerge  : "helpPage", }
      ]]>
    </mergeTBObjects>
  </container3>
 
  <helpBar>
   <createDraggableObject>
      <![CDATA[
        { constrainAxis : "false",
        bounds : "page",
        constrainMouseCursor : false,
        manipulateLayer : false,
        cursorTheme  : "default",
        suspendDrag : false,
        dragParentIfExist : true,
        realTimeNotify : false }
      ]]>
    </createDraggableObject>
  </helpBar>
 
  <helpShadow>
    <createAlphaShadow>
      <![CDATA[
        {tbName  : "helpShadow",
         remove : false}
      ]]>
    </createAlphaShadow>
  </helpShadow>
 
  <!---------------------AUXILIARY GROUP--------------------------------->
 
   <closeAux>
      <pgStyleObject>
       <![CDATA[
        { theStyle : "padding",
          propVal  : "6px" }
      ]]>
      </pgStyleObject>
  </closeAux>
 
  <container2>
      <mergeTBObjects>
    <![CDATA[
        {ObjectsToMerge  : "auxiliary", }
      ]]>
    </mergeTBObjects>
  </container2>
 
  <auxBar>
   <createDraggableObject>
      <![CDATA[
        { constrainAxis : "false",
        bounds : "page",
        constrainMouseCursor : false,
        manipulateLayer : false,
        cursorTheme  : "default",
        suspendDrag : false,
        dragParentIfExist : true,
        realTimeNotify : false }
      ]]>
    </createDraggableObject>
  </auxBar>
 
  <auxShadow>
    <createAlphaShadow>
      <![CDATA[
        {tbName  : "auxShadow",
         remove : false}
      ]]>
    </createAlphaShadow>
  </auxShadow>
 
   <!--------------------REQUEST GROUP-----------------------------------> 
    <button1>
      <pgStyleObject>
       <![CDATA[
        { theStyle : "padding-top, padding-left, padding-right, width",
          propVal  : "4px, 14px, 14px, auto" }
      ]]>
      </pgStyleObject>
  </button1>
 
  <button2>
      <pgStyleObject>
       <![CDATA[
        { theStyle : "padding-top, padding-left, padding-right, width",
          propVal  : "4px, 14px, 14px, auto" }
      ]]>
      </pgStyleObject>
  </button2>
 
  <buttonOK>
      <pgStyleObject>
       <![CDATA[
        { theStyle : "padding",
          propVal  : "4px" }
      ]]>
      </pgStyleObject>
  </buttonOK>
 
  <requestDisplay>
      <pgStyleObject>
       <![CDATA[
        { theStyle : "padding-left, padding-right, padding-top, padding-bottom,height",
          propVal  : "40px, 40px, 43px, 70px, auto" }
      ]]>
      </pgStyleObject>
  </requestDisplay>
 
   <mover>
      <mergeTBObjects>
    <![CDATA[
        {ObjectsToMerge  : "requestGroup", }
      ]]>
    </mergeTBObjects>
  </mover>
 
   <requestBar>
   <createDraggableObject>
      <![CDATA[
        { constrainAxis : "false",
        bounds : "page",
        constrainMouseCursor : false,
        manipulateLayer : false,
        cursorTheme  : "default",
        suspendDrag : false,
        dragParentIfExist : true,
        realTimeNotify : false }
      ]]>
    </createDraggableObject>
  </requestBar>
 
  <!--NO NEED TO CREATE SHADOW. IT'S DONE EVERY TIME REQUEST IS SHOWN-->
  <!-----------------------PAD GROUP------------------------------------->
  <shadow>
    <createAlphaShadow>
      <![CDATA[
        {tbName  : "shadow",
         remove : false}
      ]]>
    </createAlphaShadow>
  </shadow>
 
  <container>
      <mergeTBObjects>
    <![CDATA[
        {ObjectsToMerge  : "myGroup", }
      ]]>
    </mergeTBObjects>
  </container>
 
  <bar>
   <createDraggableObject>
      <![CDATA[
        { constrainAxis : "false",
        bounds : "page",
        constrainMouseCursor : false,
        manipulateLayer : false,
        cursorTheme  : "default",
        suspendDrag : false,
        dragParentIfExist : true,
        realTimeNotify : false }
      ]]>
    </createDraggableObject>
  </bar>
 
  <!--------------------TEXT DISPLAY FIELDS----------------------------->
 
  <Teacher>
      <pgStyleObject>
       <![CDATA[
        { theStyle : "border, paddingTop, paddingBottom, height",
          propVal  : "24px solid rgb(64,191,254), 6px, 6px, auto" }
      ]]>
      </pgStyleObject> 
     
      <pgStyleObject>
       <![CDATA[
        { theStyle : "-webkit-box-shadow",
          propVal  : "inset 4px 4px 4px 0px #969696" }
      ]]>
      </pgStyleObject>
     
      <pgStyleObject>
       <![CDATA[
        { theStyle : "moz-box-shadow",
          propVal  : "inset 4px 4px 4px 0px #969696" }
      ]]>
      </pgStyleObject>
     
      <pgStyleObject>
       <![CDATA[
        { theStyle : "box-shadow",
          propVal  : "inset 4px 4px 4px 0px #969696" }
      ]]>
      </pgStyleObject>
  </Teacher>
         
  <Teacher2>
      <pgStyleObject>
       <![CDATA[
        { theStyle : "border, paddingTop, paddingBottom, height",
          propVal  : "24px solid rgb(64,191,254), 6px, 6px, auto" }
      ]]>
      </pgStyleObject> 
     
      <pgStyleObject>
       <![CDATA[
        { theStyle : "-webkit-box-shadow",
          propVal  : "inset 4px 4px 4px 0px #969696" }
      ]]>
      </pgStyleObject>
     
      <pgStyleObject>
       <![CDATA[
        { theStyle : "moz-box-shadow",
          propVal  : "inset 4px 4px 4px 0px #969696" }
      ]]>
      </pgStyleObject>
     
      <pgStyleObject>
       <![CDATA[
        { theStyle : "box-shadow",
          propVal  : "inset 4px 4px 4px 0px #969696" }
      ]]>
      </pgStyleObject>
  </Teacher2>
 
 
   <!------------------------TITLE--------------------------------------->
 
  <config1>
    <exeJavascriptDirect>
        { commandLine : "document.title='Médiacours Student';" }
    </exeJavascriptDirect>
  </config1> 
</page>
John Robin Dove
 
Posts: 486
Joined: Thu Jan 23, 2014 4:35 am

Re: XML Explained (includes sample download)

Postby Clifton » Thu Apr 30, 2015 10:41 am

Amazingly enough, but XML files get quirky about comments:

    This:
    <!--------------------------------CHANGEPOS-------------------------->
    ... will throw a parse error in the interpreter because the double dashes are forbidden in XML comments to maintain compatibility with other data types that are supported in XML files.

The workaround is to change your comment headings to something like:

    <!--************* CHANGEPOS *************-->
I didn't completely examine the rest of your XML, but it looks pretty good as long as you clean up the commented sections as shown above.
Clifton
Site Admin
 
Posts: 732
Joined: Tue Jan 14, 2014 1:04 am

Re: XML Explained (includes sample download)

Postby John Robin Dove » Thu Apr 30, 2015 12:14 pm

Yep!

Absolutely right as usual. I thought of a number of things that might have been wrong but that wasn't one of them. So I haven't wasted as much time as I thought I had. :D

About exeJavascriptDirect, you wrote "to substantially reduce action code you may have to write your own JavasScript functions". I don't expect to use an xml file plus exeJavascriptDirect to do this. I think you misunderstood me. I was wondering how, if I wrote my own functions, I could access them. I've now thought a bit more about this and a possible plan might be to create functions in one of my embedded HTML files (loaded via pgGotoURL) and use pgExecuteRemote to access them. They could then send back things like top.tbfunction_pgTBObjSet("exerciseName","text", fileName + "," + fileSize); Right?

One thing I have noticed is that top.tbfunction etc. doesn't seem to work on buttons only fields.

Somewhere on this forum, I think, you explained how to to make an embedded HTML file "Powerpac-enabled" but I can't find it. Perhaps it was in an e-mail you sent me.

Another thing: can I reset global variables in the TB part? I have an idea like this: on property change (in a field) variableNumber = item 1 of text of self; newValue = item 2 of text of self; if variableNumber = 1; set x to newValue etc. I think this would work but maybe there's a better way to do this?

Thanks for your help.
John Robin Dove
 
Posts: 486
Joined: Thu Jan 23, 2014 4:35 am

Re: XML Explained (includes sample download)

Postby Clifton » Thu Apr 30, 2015 4:36 pm

To create your own JavaScript functions:

Code: Select all
function tbfunction_johnDove( para1, para2, para3, para[n]) {
    // ... do some stuff
};

Save your custom file as a [some name].js file and import it using the book properties in ToolBook.
Menu > Properties for book > Web tab ... click on import.

    Image 3.png
    Importing JS files into ToolBook
    Image 3.png (13.2 KiB) Viewed 10404 times
Your custom file will be added to the list of PowerPac files already listed and your functions will become available to call within the Actions Editor.

pgTBObjSet() does indeed work on buttons. However, I'm not sure what properties you are trying to set. Check the popup help window closely to make sure you are attempting to set a property that applies to buttons.

You cannot access the global variable pool very effectively using exeJavascriptDirect() or even by writing your own JavaScript functions. This is because the variables are encrypted on export. However, you can use the PowerPac to send a user event to an object that has actions on it to set these variable to values you send with the user event [value] parameter. The [value] parameter can be as complex as needed for your application (stirng, Boolean, arrays, objects, etc.) Please note that when calling a PowerPac function outside the object scope, expressions like name of self or name of target are out of context and cannot be used. To target a specific object, you must specify it by its name string.
Clifton
Site Admin
 
Posts: 732
Joined: Tue Jan 14, 2014 1:04 am

Re: XML Explained (includes sample download)

Postby John Robin Dove » Fri May 01, 2015 3:15 am

Many thanks Clifton,

I'll start 'unpacking' some of my code and see if Toolbook behaves itself better.
John Robin Dove
 
Posts: 486
Joined: Thu Jan 23, 2014 4:35 am


Return to XML Configurations – Plugin Examples

Who is online

Users browsing this forum: No registered users and 1 guest