NXML to XAL

Overview

Nexaweb has introduced a new XML syntax for developing applications with Platform 4.5. This new syntax, known as XAL for eXtensible Application Language, is designed to support Nexaweb's Universal Client Framework, enabling the development of rich user interface in a variety of underlying technologies. At this time UCF supports Ajax, Java and offline technologies.

Benefits of XAL

Cross technology syntax that conforms to HTML and CSS standards; familiar to a wide number of developers.
Future ready; supports new technologies that will be included under the Universal Client Framework.
Simpler and more consistent syntax; attributes are easier to read, layout is more intuitive.

Overview of changes

Three schema's have been created: Core, HTML and Java. Core represents the shared syntax while HTML and Java contain technology specific extensions to each.
The root tag has changed from NXML to XAL.
XAL syntax requires a namespace, NXML did not.
Names of attributes have been changed to more closely match CSS and JavaScript style names for consistency and ease of use.
Layout managers and Panels have been combined into one tag, simplifying development and usage of the layout syntax. This does change the structure and XModify sytnax.
Measure attributes have been enhanced to support 1 to 4 lists of measures, NXML supported only 1 or 4.
Measures have been enhanced to reflect the different options available in HTML such as px, pt, %, etc. Java supports only px at this time, but future versions will support all or most of the HTML measures.
Macro, MCO, Data Binding and XInclude have not changed; new namespaces were created for each.
XUpdate has changed to XModify; the syntax remains the same.

The Nexaweb Platform continues to support NXML syntax without change.

Migrating from NXML

The following is a list of considerations when migrating from NXML to XAL:

Change NXML files to the XAL sytnax.
Migrate namespaces to new namespaces; default syntax now requires a namespace.
Rename XUpdate to XModify.
Update application code that uses the DOM API to the new structure and attributes.
Update XModify syntax to the new structure and attributes.
NFC does not support XAL at this time.
Charting and SVG has not been changed; continue to use with namespace="".

An exhaustive list of changes is below.

Detailed list of NXML to XAL Syntax changes as of 4.5.1

Three schema have been created: Core, HTML, Java. The core schema has extension points for technology specific element and attribute support. These schema replace nexawebxmlfull.xsd.
- xal.xsd (NOT xal-core.xsd) defines the Core XAL Syntax
- xal-java.xsd defines the Java extension of XAL
- xal-html.xsd defines the HTML extension of XAL
Layout managers and the <panel> component have been replaced with layout managed panes. Each is essentially the equivalent combination of an NXML layout manager and <panel> component.
- freePane
- borderPane
- cardPane
- gridPane
- horizontalBoxPane
- verticalBoxPane
- horizontalFlowPane
- verticalFlowPane
In conjunction with the Layout manager changes above, containers which in NXML defaulted to a horizontal flowLayout now behave like soloPane derived components (e.g. <left>, <right>, <top>, <bottom>, <tab>). This means the first child will be expanded to the entire content area. This affects the following containers:
- rootPane (rootPane can also have multiple window-based children which are rendered at their x,y,height,width relative to the upper left corner of the rootPane)
- desktopPane (desktopPane can also have multiple window-based children which are rendered at their x,y,height,width relative to the upper left corner of the desktopPane)
- window
- dialog
Several attributes names have changed for consistency with HTML
- enabled becomes disabled
- margin becomes padding
Attributes changed for general usability
- increment becomes pageIncrement
Several font styling attributes are replaced with more general-purpose font styling attributes syntactically closer to HTML. These are no longer boolean attributes, refer to the schema documentation for the specific values they support (these vary between Java and Ajax platforms).
- fontUnderlined is replaced by textDecoration
  - Java: "none" | "underline"
  - Ajax: "none" | "underline" | "overline" | "line-through" | "blink"
- fontBold is replaced by fontWeight
  - Java: "bold" | "normal"
  - Ajax: "bold" | "normal" | "bolder" | "lighter" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900"
- fontItalics is replaced by fontStyle
  - Java: "normal" | "italic"
  - Ajax: "normal" | "italic" | "oblique"
- fontName is replaced by fontFamily
  - Java: "monospaced" | "serif" | "sans-serif" | "default" | "dialog" | "dialog-input"
  - Ajax: "monospaced" | "serif" | "sans-serif" | "cursive" | "fantasy"
  - Note: this will soon accept a comma delimited list
fontSize remains, but now accepts font-measure units
- in Ajax: (size unit, pt, cm, mm, in, ex, pc, %)
- in Java: (size units, pt)
All color attributes dropped "font", and spell out "background" for closer consistency with HTML.
- altBgColor becomes altBackgroundColor
- altFontColor becomes altColor
- bgColor becomes backgroundColor
- highlightBgColor becomes highlightBackgroundColor
- highlightFontColor becomes highlightColor
- fontColor becomes color
- fontColorDisabled becomes colorDisabled
- selectedFontColor becomes selectedColor
- titleBgColor becomes titleBackgroundColor
- titleFontColor becomes titleColor
All "img" attributes now spell out the word "image"
- img becomes image
- imgBackground becomes backgroundImage
- imgClose becomes closeImage
- imgClosed becomes closedImage
- imgDisabled becomes disabledImage
- imgDisabledSelected becomes disabledSelectedImage
- imgHeight becomes imageHeight
- imgHint becomes hintImage
- imgIcon becomes iconImage
- imgLeaf becomes leafImage
- imgMax becomes maximizeImage
- imgMin becomes minimizeImage
- imgOpen becomes openImage
- imgOver becomes mouseOverImage
- imgOverSelected becomes mouseOverSelectedImage
- imgPressed becomes pressedImage
- imgPressedSelected becomes pressedSelectedImage
- imgRestore becomes restoreImage
- imgSelected becomes selectedImage
- imgWidth becomes imageWidth
DropShadow supported added to the the Java implementation of XAL:
- dropShadow
- dropShadowOffset
Size specification attribute values now require a suffix to identify units or coordinates. Java defaults to "px" (and only supports "px"). HTML and JavaScript don't support a default and must specify one of the HTML supported units: "px", "%", "em", or "pt". This affects the follow attributes:
- borderCorner
- borderWidth
- dropShadowOffset
- height
- padding
- width
- x
- y
Color specification attributes support more names in HTML/Javascript than in Java, they also support both RGB and Hex notation.
Bounding types (list of four things) have been expanded to accept 1 TO 4 space delimited values (NXML only supports 1 OR 4 comma delimited values). This specifies all | top/bottom, left/right | top, left/right, bottom | top, right, bottom, left. This affects the following attributes:
- borderColor
- borderCorner
- borderStyle
- borderWidth
- padding
Orientation components now have a horizontal and vertical component instead of a base component with an orientation attribute
- slider becomes horizontalSlider and verticalSlider
- scrollBar becomes horizontalScrollBar and verticalScrollBar
- toolBar becomes horizontalToolBar and verticalToolBar
- splitPane becomes horizontalSplitPane and verticalSplitPane
Container references changed from [containerName]://[objectName].[method](arg1, ...) to [containerName]:[objectName].[method](arg1, ...). Examples include:
- <button onCommand="macro:myMacro.execute()"/>
- <textField onEdit="mco:myMco.handleOnEdit(this.text)"/>
- <label image="classpath:com.nexaweb.example.images.icon.gif"/>
Chart and SVG are not part of the XAL language specification
The document root node has changed from <nxml>, to <ui>.
Menubar syntax has changed in order to improve styling. In the example below, "menu" refers to the item in the menu bar, and "popupMenu" refers to the actual popup itself. This should be easier to style both in a stylesheet and in the app. Changing the style for "popupMenu" will change it for both right-click menus and popups from a menuBar. "menuItem" can now have "popupMenu" as a child, which generates a subMenu.

Example

<menuBar>
  <menu>
    <popupMenu>
      <menuItem/>
      <menuItem/>
      <menuItem>
       <popupMenu>
        ...
       </popupMenu>
      </menuItem>
    </popupMenu>
  </menu>
</menuBar>

MCO no longer requires the <declarations> tag for most uses. NXML ONLY supported <declarations>, but XAL allows <mco> tags to occur free-floating.
- <declarations> still has a valid use case: it allows you to define MCOs as groups where the order of operations is slightly different from individual MCO tags. If you have 3 mcos in a <declarations> here is what happens:
  1. All MCOs are constructed.
  2. All MCOs then have their properties set.
  3. All MCOs then fire the onLoad event.
- What this means is that in the onLoad event of MCO1 you can look up and find MCO3 because it has already been loaded.
- The following example demonstrates making MCO1 have a reference to MCO3. 99% of the time this sort of ordering stuff doesn't matter at all, but when it does, <declarations> are a necessity.
```
<mco:declarations ...>  
  <mco:mco id="MCO1" ...>
    <mco:property name="McoPointer">#MCO3</property>
  </mco:mco>
  <mco:mco id="MCO2" .../>
  <mco:mco id="MCO3" .../>
</mco:declarations>
```
NFC does not support XAL

Additional syntax changes introduced in 4.5.2

table, tree, treeTable elements:

openImage is now expandedImage
closedImage is now collapsedImage
horizontalLines is now horizontalLineColor
verticalLines is now verticalLineColor
treeLines is now treeLineColor
resizeColumns is now resizeableColumns
swapColumns is now swappableColumns

elements which can appear in a layout panel (layout management attributes):

hGrabSpace is now gridHorizontalGrabSpace
vGrabSpace is now gridVerticalGrabSpace
vAlign is now gridVerticalAlignment
hAlign is now gridHorizontalAlignment
columnSpan is now gridColumnSpan
rowSpan is now gridRowSpan
flex is now boxFlex
name (when used in a cardPane) is now cardName

gridPane, flowPane, borderPane elements:

gapVertical is now verticalGap
gapHorizontal is now horizontalGap

boxPane and flowPane elements:

align is now alignment

horizontalSlider and verticalSlider elements:

posMin is now minPosition
posMax is now maxPosition
pos is now position

all event attributes have been updated to reflect these changes

scroll position attributes:

scrollPosVertical is now verticalScrollPosition
scrollPosHorizontal is now horizontalScrollPosition

scroll pane position change event attributes updated to reflect this change

text alignment attributes:

alignHorizontal is now horizontalAlignment
alignVertical is now verticalAlignment

label attributes:

textPlacementHorizontal is now horizontalTextToImagePlacement
textPlacementVertical is now verticalTextToImagePlacement

Other notes:

colorDisabled is now disabledColor and is now only in the Java extensions
ignoreEvents has been moved from the Xal core to the Java extensions