概要
Nexaweb は、Platform4.5のアプリケーション開発のため新しいXMLシンタックスを導入しました。この新しいシンタックスは XAL(eXtensible Application Language)として知られ、様々なテクノロジー上の Rich User Interface 開発を可能し、Nexaweb Universal Client Framework に対応するよう設計されています。今回は UCF は Ajax, Java、offline テクノロジーに対応しています。
XALの利点
- HTMLとCSS標準に準拠したクロステクノロジー シンタックス; 技術者には幅広く知られています
- Future ready(将来に備えてあります); 新しい技術もUniversalClient Frameworkで対応できます。
- シンプルで、統一性のあるシンタックス; 属性が読みやすく、レイアウトがより直感的です。
変更点概要
- 3つのスキーマが作成されました: Core、HTML、Java です。HTML と Java はそれぞれ特定の技術拡張を含みますが、コアは共有シンタックスで示されます。
- Root タグが NXML から XAL に変更されました。
- XAL シンタックスは namespace を必要としますが、NXMLは必要としませんでした。
- 統一性と使い易さのため、属性の名前をより CSS と JavaScript スタイルの名前と合致するよう変更されました。
- レイアウトシンタックスの開発と使用を簡素化するため、レイアウトマネジャとパネルが1つのタグに統合されました。これによりストラクチャと XModify sytnax が変更されました。
- Measure 属性は測定の1-4リストを対応するよう強化されました。NXML は1か4のみ対応でした。
- Measures はpx, pt, %等の HTML で利用可能なオプションを反映するため拡張されました。今回の Java では、px のみ対応していますが将来のバージョンでは HTML Measure の全てもしくは大部分に対応する予定です。
- Macro、MCO、Data Binding、XInclude は変更されていません; それぞれ新しい namespace が作成されています。
- XUpdate は XModify に変更されました; シンタックスはそのまま残ります。
- Nexaweb Platform は引き続き変更なしでNXML シンタックスに対応しています。
NXMLからの移行
NXML から XAL に移行する時考慮する点は以下です:
- NXML ファイルと XAL シンタックスに変更する
- Namespace を新 namespace に移行する; デフォルトシンタックスは namespace が必要です;
- ファイル名をXUpdate をXModifyに変更する
- DOMAPIを使用するアプリケーションコードを新ストラクチャと属性に更新する
- XModify シンタックスを新ストラクチャと属性に更新する
- 今回は NFC は XAL 対応していない
- 表と SVG は変更していない; 引き続きnamespace=""で使用
変更詳細は以下をご覧ください。
4.5.1 での NXML から XAL へのシンタックス変更の詳細一覧
- 次の 3 つのスキーマが作成されました。Core、HTML、および Java です。コア スキーマには拡張子ポイントがあり、テクノロジ固有の要素と属性をサポートします。これらのスキーマは、nexawebxmlfull.xsd を置き換えます。
- xal.xsd (xal-core.xsd ではありません) は、Core XAL シンタックスを定義します。
- xal-java.xsd は、XAL の Java 拡張子を定義します。
- xal-html.xsd は、XAL の HTML 拡張子を定義します。
- レイアウト マネージャと <panel> コンポーネントは、レイアウト マネージ ペインに置き換えられました。各レイアウト マネージ ペインは、基本的に NXML レイアウト マネージャと <panel> コンポーネントを組み合わせたものです。
- freePane
- borderPane
- cardPane
- gridPane
- horizontalBoxPane
- verticalBoxPane
- horizontalFlowPane
- verticalFlowPane
- 上記のレイアウト マネージャの変更により、NXML で水平 flowLayout にデフォルト設定されていたコンテナが、soloPane から派生したコンポーネント (<left>、<right>、<top>、<bottom>、<tab> など) のように動作するようになりました。これにより、最初の子がコンテンツ領域全体に拡張されます。これは、次のコンテナに影響します。
- rootPane (rootPane には、rootPane の左上隅に対して相対的な x、y、height、width の値でレンダリングされた複数のウィンドウ ベースの子を含めることもできます)。
- desktopPane (desktopPane には、desktopPane の左上隅に対して相対的な x、y、height、width の値でレンダリングされた複数のウィンドウ ベースの子を含めることもできます)。
- window
- dialog
- HTML との一貫性を考慮し、いくつかの属性名が変更されました。
- enabled は disabled に変更されました。
- margin は padding に変更されました。
- 一般的な操作に合わせて属性が変更されました。
- increment は pageIncrement に変更されました。
- いくつかのフォント スタイル属性が、構文的に 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"
- メモ: これは、すぐにカンマ区切りのリストを受け取ります。
- fontUnderlined は textDecoration に置き換えられました。
- 引き続き fontSize は使用されますが、フォントの測定単位を受け取るようになりました。
- in Ajax: (size unit, pt, cm, mm, in, ex, pc, %)
- in Java: (size units, pt)
- すべての色属性では "font" という語が省略されます。また、HTML との一貫性を考慮し、"background" とスペルアウトされます。
- altBgColor は altBackgroundColor に変更されました。。
- altFontColor は altColor に変更されました。
- bgColor は backgroundColor に変更されました。
- highlightBgColor は highlightBackgroundColor に変更されました。
- highlightFontColor は highlightColor に変更されました。
- fontColor は color に変更されました。
- fontColorDisabled は colorDisabled に変更されました。
- selectedFontColor は selectedColor に変更されました。
- すべての "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 に変更されました。
- DropShadow 対応がXALのJava 実装に追加されました。
- dropShadow
- dropShadowOffset
- サイズを指定する属性値は、単位や座標を特定するために接尾にサフィックスを必要とします。
Java のデフォルトは "px" です( "px" のみ対応します)。
HTML と JavaScript はデフォルト対応せず、HTML対応単位の"px","%", "em","pt"のうち1つを特定しなくてはなりません。これは以下の属性に影響します:- borderCorner
- borderWidth
- dropShadowOffset
- height
- padding
- width
- x
- y
- 色を指定する属性は Java よりも HTML/Javascript でより多くの名前に対応しており、 RGB や16進表記にも対応しています。
- 境界タイプ(4つのリスト)は 1 から 4 までスペースで区切られた値(NXML は 1 もしくは 4 つのコンマ区切りの値にのみ対応)に対応するよう拡張されました。これは all | top/bottom, left/right | top, left/right, bottom | top, right, bottom, leftを設定します。これは以下の属性に影響します:
- borderColor
- borderCorner
- borderStyle
- borderWidth
- padding
- 表示方向のあるコンポーネントは、orientation 属性を持つベースコンポーネントのかわりに、
horizontal とvertical が付くコンポーネントを持つようになりました。- sliderは horizontalSlider, verticalSliderに変更されました。
- scrollBarは horizontalScrollBar, verticalScrollBarに変更されました。
- toolBarは horizontalToolBar, verticalToolBarに変更されました。
- splitPaneは horizontalSplitPane, verticalSplitPaneに変更されました。
- コンテナレファレンスは[containerName]://[objectName].[method](arg1, ...) から
[containerName]:[objectName].[method](arg1, ...) へ変更されました。例:- <button onCommand="macro:myMacro.execute()"/>
- <textField onEdit="mco:myMco.handleOnEdit(this.text)"/>
- <label image="classpath:com.nexaweb.example.images.icon.gif"/>
- Chart と SVG は XAL 言語仕様に含まれません。
- ドキュメントのルートノードは<nxml>から<ui>へ変更されました。
- 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>
- CO は大部分の使用で、 <declarations> タグを必要としなくなりました。 NXML は <declarations> のみ対応していますが、XAL は <mco> タグで浮遊性 free-floating の発生を可能にします。
- <declarations> は未だに有効な使用ケースがあります:オペレーションの順序が個々のMCO タグとは少し異なるグループとして、MCO を定義することができます。<declarations> に MCO が3つある場合、以下のようになります:
- すべての MCO が構築される
- すべての MCO のプロパティが設定される
- すべての 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>
- <declarations> は未だに有効な使用ケースがあります:オペレーションの順序が個々のMCO タグとは少し異なるグループとして、MCO を定義することができます。<declarations> に MCO が3つある場合、以下のようになります:
- 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 に移動されました。