/
NXML to XAL

NXML to XAL

Nov 30, 2012

概要

Nexaweb は、Platform4.5のアプリケーション開発のため新しいXMLシンタックスを導入しました。この新しいシンタックスは XAL（eXtensible Application Language）として知られ、様々なテクノロジー上の Rich User Interface 開発を可能し、Nexaweb Universal Client Framework に対応するよう設計されています。今回は UCF は Ajax, Java、offline テクノロジーに対応しています。
XALの利点

  1. HTMLとCSS標準に準拠したクロステクノロジー シンタックス; 技術者には幅広く知られています

  2. Future ready（将来に備えてあります）; 新しい技術もUniversaｌClient Frameworkで対応できます。

  3. シンプルで、統一性のあるシンタックス;　属性が読みやすく、レイアウトがより直感的です。

変更点概要

  1. 3つのスキーマが作成されました: Core、HTML、Java です。HTML と Java はそれぞれ特定の技術拡張を含みますが、コアは共有シンタックスで示されます。

  2. Root タグが NXML から XAL に変更されました。

  3. XAL シンタックスは namespace を必要としますが、ＮＸＭＬは必要としませんでした。

  4. 統一性と使い易さのため、属性の名前をより CSS と JavaScript スタイルの名前と合致するよう変更されました。

  5. レイアウトシンタックスの開発と使用を簡素化するため、レイアウトマネジャとパネルが1つのタグに統合されました。これによりストラクチャと XModify sytnax が変更されました。

  6. Measure 属性は測定の1-4リストを対応するよう強化されました。NXML は１か４のみ対応でした。

  7. Measures はpx, pt, %等の HTML で利用可能なオプションを反映するため拡張されました。今回の Java では、px のみ対応していますが将来のバージョンでは HTML Measure の全てもしくは大部分に対応する予定です。 

  8. Macro、MCO、Data Binding、XInclude は変更されていません; それぞれ新しい namespace が作成されています。

  9. XUpdate は XModify に変更されました;　シンタックスはそのまま残ります。

  10. Nexaweb Platform は引き続き変更なしでNXML シンタックスに対応しています。

NXMLからの移行
NXML から XAL に移行する時考慮する点は以下です:

  1. NXML ファイルと XAL シンタックスに変更する

  2. Namespace を新 namespace に移行する; デフォルトシンタックスは namespace が必要です;

  3. ファイル名をXUpdate をXModifyに変更する

  4. ＤＯＭAPIを使用するアプリケーションコードを新ストラクチャと属性に更新する

  5. XModify シンタックスを新ストラクチャと属性に更新する

  6. 今回は NFC は XAL 対応していない

  7. 表と SVG は変更していない; 引き続きnamespace=""で使用

変更詳細は以下をご覧ください。
 

4.5.1 での NXML から XAL へのシンタックス変更の詳細一覧

  1. 次の 3 つのスキーマが作成されました。Core、HTML、および Java です。コア スキーマには拡張子ポイントがあり、テクノロジ固有の要素と属性をサポートします。これらのスキーマは、nexawebxmlfull.xsd を置き換えます。

    • xal.xsd (xal-core.xsd ではありません) は、Core XAL シンタックスを定義します。

    • xal-java.xsd は、XAL の Java 拡張子を定義します。

    • xal-html.xsd は、XAL の HTML 拡張子を定義します。

  2. レイアウト マネージャと <panel> コンポーネントは、レイアウト マネージ ペインに置き換えられました。各レイアウト マネージ ペインは、基本的に NXML レイアウト マネージャと <panel> コンポーネントを組み合わせたものです。 

    • freePane

    • borderPane

    • cardPane

    • gridPane

    • horizontalBoxPane

    • verticalBoxPane

    • horizontalFlowPane

    • verticalFlowPane

  3. 上記のレイアウト マネージャの変更により、NXML で水平 flowLayout にデフォルト設定されていたコンテナが、soloPane から派生したコンポーネント (<left>、<right>、<top>、<bottom>、<tab> など) のように動作するようになりました。これにより、最初の子がコンテンツ領域全体に拡張されます。これは、次のコンテナに影響します。 

    • rootPane (rootPane には、rootPane の左上隅に対して相対的な x、y、height、width の値でレンダリングされた複数のウィンドウ ベースの子を含めることもできます)。

    • desktopPane (desktopPane には、desktopPane の左上隅に対して相対的な x、y、height、width の値でレンダリングされた複数のウィンドウ ベースの子を含めることもできます)。

    • window

    • dialog

  4. HTML との一貫性を考慮し、いくつかの属性名が変更されました。

    • enabled は disabled に変更されました。

    • margin は padding に変更されました。

  5. 一般的な操作に合わせて属性が変更されました。

    • increment は pageIncrement に変更されました。

  6. いくつかのフォント スタイル属性が、構文的に HTML に近く、より用途の広いフォント スタイル属性に置き換えられました。ブール型の属性がなくなりました。これらがサポートする特定の値については、スキーマ ドキュメントを参照してください (Java プラットフォームと Ajax プラットフォームで異なります)。 

    • fontUnderlined は textDecoration に置き換えられました。

      • Java: "none" | "underline"

      • Ajax: "none" | "underline" | "overline" | "line-through" | "blink"

    • fontBold は fontWeight に置き換えられました。

      • Java: "bold" | "normal"

      • Ajax: "bold" | "normal" | "bolder" | "lighter" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900"

    • fontItalics は fontStyle に置き換えられました。

      • Java: "normal" | "italic"

      • Ajax: "normal" | "italic" | "oblique"

    • fontName は fontFamily に置き換えられました。

      • Java: "monospaced" | "serif" | "sans-serif" | "default" | "dialog" | "dialog-input"

      • Ajax: "monospaced" | "serif" | "sans-serif" | "cursive" | "fantasy"

      • メモ: これは、すぐにカンマ区切りのリストを受け取ります。

  7. 引き続き fontSize は使用されますが、フォントの測定単位を受け取るようになりました。

    • in Ajax: (size unit, pt, cm, mm, in, ex, pc, %)

    • in Java: (size units, pt)

  8. すべての色属性では "font" という語が省略されます。また、HTML との一貫性を考慮し、"background" とスペルアウトされます。

    • altBgColor は altBackgroundColor に変更されました。。

    • altFontColor は altColor に変更されました。

    • bgColor は backgroundColor に変更されました。

    • highlightBgColor は highlightBackgroundColor に変更されました。

    • highlightFontColor は highlightColor に変更されました。

    • fontColor は color に変更されました。

    • fontColorDisabled は colorDisabled に変更されました。

    • selectedFontColor は selectedColor に変更されました。

  9. すべての "img" 属性は "image" とスペルアウトされます。

    • img は image に変更されました。

    • imgBackground は backgroundImage に変更されました。

    • imgClose は closeImage に変更されました。

    • imgClosed は closedImage に変更されました。

    • imgDisabled は disabledImage に変更されました。

    • imgDisabledSelected は disabledSelectedImage に変更されました。

    • imgHeight は imageHeight に変更されました。

    • imgHint は hintImage に変更されました。

    • imgIcon は iconImage に変更されました。

    • imgLeaf は leafImage に変更されました。

    • imgMax は maximizeImage に変更されました。

    • imgMin >は minimizeImage に変更されました。

    • imgOpen は openImage に変更されました。

    • imgOver は mouseOverImage に変更されました。

    • imgOverSelectedは mouseOverSelectedImage に変更されました。

    • imgPressed は pressedImage に変更されました。

    • imgPressedSelected は pressedSelectedImage に変更されました。

    • imgRestore は restoreImage に変更されました。

    • imgSelected は selectedImage に変更されました。

    • imgWidth は imageWidth に変更されました。

  10. DropShadow 対応がXALのJava 実装に追加されました。

    • dropShadow

    • dropShadowOffset

  11. サイズを指定する属性値は、単位や座標を特定するために接尾にサフィックスを必要とします。
    Java のデフォルトは "px" です( "px" のみ対応します)。
    HTML と JavaScript はデフォルト対応せず、HTML対応単位の"px","%", "em","pt"のうち1つを特定しなくてはなりません。これは以下の属性に影響します：

    • borderCorner

    • borderWidth

    • dropShadowOffset

    • height

    • padding

    • width

    • x

    • y

  12. 色を指定する属性は Java よりも HTML/Javascript でより多くの名前に対応しており、 RGB や16進表記にも対応しています。

  13. 境界タイプ（4つのリスト）は 1 から 4 までスペースで区切られた値（NXML は 1 もしくは 4 つのコンマ区切りの値にのみ対応）に対応するよう拡張されました。これは all | top/bottom, left/right | top, left/right, bottom | top, right, bottom, leftを設定します。これは以下の属性に影響します：

    • borderColor

    • borderCorner

    • borderStyle

    • borderWidth

    • padding

  14. 表示方向のあるコンポーネントは、orientation 属性を持つベースコンポーネントのかわりに、
    horizontal とvertical が付くコンポーネントを持つようになりました。

    • sliderは horizontalSlider, verticalSliderに変更されました。

    • scrollBarは horizontalScrollBar, verticalScrollBarに変更されました。

    • toolBarは horizontalToolBar, verticalToolBarに変更されました。

    • splitPaneは horizontalSplitPane, verticalSplitPaneに変更されました。

  15. コンテナレファレンスは[containerName]://[objectName].[method](arg1, ...) から
    [containerName]:[objectName].[method](arg1, ...) へ変更されました。例：

  16. Chart と SVG は XAL 言語仕様に含まれません。

  17. ドキュメントのルートノードは<nxml>から<ui>へ変更されました。

  18. Menubar シンタックス はスタイルを改善するため変更されました。以下の例では、”menu”はmenu barの項目を参照し、”popupMenu”は実際のポップアップを参照します。このため、stylesheetとapp内のスタイルがより簡単になり ます。”popupMenu”のスタイル変更は右クリックメニューと、menuBarからのpopupを変更します。”menuItem”は”popup Menu”を子として保有し、subMenuを作成することができます。

     例

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

  1. CO は大部分の使用で、 <declarations> タグを必要としなくなりました。 NXML は <declarations> のみ対応していますが、XAL は <mco> タグで浮遊性 free-floating の発生を可能にします。

    • <declarations> は未だに有効な使用ケースがあります：オペレーションの順序が個々のMCO タグとは少し異なるグループとして、MCO を定義することができます。<declarations> に MCO が３つある場合、以下のようになります：

      1. すべての MCO が構築される

      2. すべての MCO のプロパティが設定される

      3. すべての MCO は onLoad eventが呼び出される

    • つまり、MCO1のonLoad eventにMCO3があることが分かります。なぜなら、すでにロードされているからです。

    • 以下の例は MCO1 に MCO3 を参照させているデモになります。99% のケースで、この種の順序付けはあまり問題になりませんが、このケースになった場合、 <declarations> は必要になります。

      <mco:declarations ...> <mco:mco id="MCO1" ...> <mco:property name="McoPointer">#MCO3</property> </mco:mco> <mco:mco id="MCO2" .../> <mco:mco id="MCO3" .../> </mco:declarations>

  2. NFC は XAL に対応していません。

4.5.2に導入されている追加シンタックスが変更されました。

table, tree, treeTable elements:

  • openImage は expandedImage に変更されました。

  • closedImage は collapsedImage に変更されました。

  • horizontalLines は horizontalLineColor に変更されました。

  • verticalLines は verticalLineColor に変更されました。

  • treeLines は treeLineColor に変更されました。

  • resizeColumns は resizeableColumns に変更されました。

  • swapColumns は swappableColumns に変更されました。

Layout panelで表示可能なelement (レイアウト管理属性)：

  • hGrabSpace は gridHorizontalGrabSpace に変更されました。

  • vGrabSpace は gridVerticalGrabSpace に変更されました。

  • vAlign は gridVerticalAlignment に変更されました。

  • hAlign は gridHorizontalAlignment に変更されました。

  • columnSpan は gridColumnSpan に変更されました。

  • rowSpan は gridRowSpan に変更されました。

  • flex は boxFlex に変更されました。

  • name (cardPane で使用される場合) は cardName に変更されました。

gridPane, flowPane, borderPane elements:

  • gapVertical は verticalGap に変更されました。

  • gapHorizontal は horizontalGap に変更されました。

boxPane and flowPane elements:

  • align は alignment に変更されました。

horizontalSlider and verticalSlider elements:

  • posMin は minPosition に変更されました。

  • posMax は maxPosition に変更されました。

  • pos は position に変更されました。

全てのevent属性はこれらの変更点を反映しアップデートされています。

スクロールポジション属性：

  • scrollPosVertical は verticalScrollPosition に変更されました。

  • scrollPosHorizontal は horizontalScrollPosition に変更されました。

スクロールウインドウポジションはこの変更を反映し event 属性を変更しています。

テキストアラインメント属性：

  • alignHorizontal は horizontalAlignment に変更されました。

  • alignVertical は verticalAlignment に変更されました。

ラベル属性：

  • textPlacementHorizontal は horizontalTextToImagePlacement に変更されました。

  • textPlacementVertical は verticalTextToImagePlacement に変更されました。

その他注意：

  • colorDisabled は disabledColor に変更され、Java extensions でのみ有効となりました。

  • ignoreEvents は Xal core から Java extensions に移動されました。