Xap ApplicationCreation

1. Deploying your own applications

There are several elements that need to be properly configured in order to write your own XAP applications.

a. Location of Dojo

djConfig is used to configure Dojo. Setting parseWidgets to false tells Dojo to ignore widget markup. The baseRelativePath attribute should be set to the location of Dojo.

djConfig = {
                parseWidgets: false,
                baseRelativePath: "../../xap/src/dojo/"
};

b. The core XAP file

The HTML file should be able to load the appropriate XAP core:

<script language="JavaScript" type="text/javascript" src="../../xap/lib/xapcore.js"></script>

There are four choices within the lib directory:

# xapcore.js - contains most of the Dojo widgets and XAP widgets

# xapcore.js.gz - compressed version of this file, see [Using GZIP] for information on using this file

# xapmin.js - a small XAP core file that contains just core the elements needed; other JavaScript is loaded dynamically

# xapmin.js.gz - GZipped version

c. The start page, the configuration path and the context

<div context="../../" applicationName="SampleButton" startPage="index.xal" configFilePath="../../xap/config/XapConfig.js"></div>

Putting it all together

Your starting HTML page defines the frame and location of XAP. This can be a full screen div, or a smaller element within an existing page:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Sample Button</title>

	<style type="text/css">
		<!--
		@import url(xap/css/xapDefault.css);
		-->
		body { margin: 5px; }
        </style>
    
	  	<!-- Keep dojo from trying to scan this whole page for dojoType'd tags: -->
	  	<script type="text/javascript">
            djConfig = {
                parseWidgets: false,
                baseRelativePath: "xap/src/dojo/"
            };
        </script>    
	
        <script language="JavaScript" type="text/javascript" src="xap/lib/xapcore.js"></script>
        <script language="JavaScript" type="text/javascript" src="src-js/DisplayUIDocument.js"></script>
        
        <script language="JavaScript" type="text/javascript">
        	function onLoad(){
        		Xap.createEmbeddedApplications();
        	}    	
        </script>
    </head>
  
    <body onload="onLoad();">
       <div applicationName="Sample" startPage="index.xal" configFilePath="xap/config/XapConfig.js"></div>
    </body>
</html>

The XAL file defines the XAP application:

<xal xmlns="http://openxal.org/ui">
  <mco xmlns="http://openxal.org/core/mco" id="testMCO" src="DisplayUIDocument"/>
  <verticalBoxPane align="start" padding="3px" width="500px" height="500px" borderWidth="3px" borderColor="blue" borderStyle="solid">
    <label xmlns="http://openxal.org/ui/html" height="20px" text="Welcome to Nexaweb Platform" fontSize="12px"/>
    <button text="Display UI Document" width="200px" height="24px" onCommand="mco:testMCO.displayAlert(event)"/>
  </verticalBoxPane>
</xal>

Page tree