Hello, This is the last in the three part series. This is also the longest email as it is the most complex because of all the uses cases that need to be covered.
XAL embedding in html There are some syntax issues and initiation variables that need clean up. The embedding of Xap components with in HTML page is either done be adding non-standard attributes to the HTML page and scanning the page for them or adding a non-standard attribute to the Xap components. We should clean this process up to make it real clear how to handle the embedding of Xap with-in an HTML document. In order to come up with the solution, we need to define the use cases. Below are the use cases I have defined for embedding Xal components If anyone has any more please send them so we can incorporate them in to the list. 1.) No Xap components in the HTML. 2.) A single Xap Application that encompasses the full screen. 3.) A single Xap Application that is located in just one section of the HTML page. 4.) A single Xap Application that is composed of components scattered throughout the HTML page. 5.) Multiple Xap Application within a single page with components scattered or local to one region of the HTML page. With in each use case there are also two ways that Xap should accommodate the embedding of components. 1.) Location of the components is defined with in the Xal document. To accomplish this create an xModify directive that is responsible for embedding a component in the HTML. Doing so allow developers to accomplish uses cases 3-5. This approach makes the most sense when trying to scatter components within an HTML page, in either a single or multiple application scenarios. ----- index.xal document ------ <xal xmlns:xal="http://www.openxal.org/xal"; xmlns:xm="http://www.openxal.org/xmodify";> <xm:modifications document="html"> <!-- -- The embed-xal tag is only relevant to the HTML dom, if used with any other document -- an error will occur. -- The select attribute determines the location of the splitPane within the HTML document -- In this example the component has an id of "splitPaneHost" -- When this document is processed the xModify logic will create the hosting -- Parent and insert the button into it. --> <xm:embed-xal select="id('splitPaneHost')"> <splitPane text="Button in middle of the application." /> </xm:embed-xal> <!-- more <xm:embed-xal/> tags could be added to place more components in the html page --> </xm:modifications> </xal> ---- Application creation in the html page -------------- <script> function onload(){ var config = { startPage: "index.xal", } var application = Xap.createApplication(config); } </script> <body> <table width="400px" height="400px" style="background-color:grey"> <tr><td>Xap splitter Pane</td></tr> <tr> <td><div id="splitPaneHost" width="100%" height="100%" style="background-color:white"/></td> </tr> </table> </body> </html> 2.) Location of the components is defined in the HTML page. A.) Location is defined during application creation. Developers can specify the location of the Xap components in the config object passed to the createApplication() method. This process makes it easy to either create a Xap application that encompasses the full screen or is located within a single html element. Multiple calls to the createApplication() method can be made to create more than one application as long as the "element" property is not the same. The Xal document would not need to include xModify syntax for embedding xal. If the "element" properties null or left out the location is assumed to be the body of the page. <script> function onload(){ var config = { startPage: "index.xal", element: document.getElementById("splitPaneHost") } var application = Xap.createApplication(config); } </script> <body> <table width="400px" height="400px" style="background-color:grey"> <tr><td>Xap splitter Pane</td></tr> <tr> <td><div id="splitPaneHost" width="100%" height="100%" style="background- color:white"/> </td> </tr> </table> </body> </html> B.) Specify with in the HTML applications or components to include in the Application. The best case scenario would be to allow developers to include xal components directly within the html document as follows. <table width="400px" height="400px" style="background-color:grey"> <tr><td>Xap splitter Pane</td></tr> <tr> <td> <xal:splitPane> <xal:top><xal:button/></xal:top> <xal:bottom><xal:button/></xal:bottom> </xal:splitPane> </td> </tr> </table> At this point we are not implementing this but instead will allow users to add non standard attribute to the HTML page that specifies the information needed to host a xal document in that particular location. This is done as follows: <script> function onload(){ var config = { scanPage: true } var application = Xap.createApplication(config); } </script> <body> <table width="400px" height="400px" style="background-color:grey"> <tr><td>Xap splitter Pane</td></tr> <tr> <td><div id="splitPaneHost" width="100%" height="100%" style="background- color:white" startPage="index.xal"/> </td> </tr> </table> </body> </html> When the scanPage attribute is set to true then Xap will look through the HTML document for any components that have the "startPage" attribute. For each of these components Xap will create a new application and host the xal document within the html element. This approach is my least favorite will as it is the least flexible and doesn't clearly define what is happening. My suggestion would be to remove support for this approach until we can actually embed the Xal components with in the HTML. Sorry for the length of the email, any feedback on this would be welcome. Bob (Buffone)
