ビジュアル要素にはデバイス画面に表示される絵、図形、そしてテキストなどが含まれます。 これらは長方形、ラベル、そして画像といった基本的なグラフィックオブジェクトを表す 一群のUJMLのタグを任意に組み合わせ、色を指定し、位置を指定することにより実現されています。 

全てのビジュアル要素はdisplay要素の中に記述するか、 他のビジュアル要素の中に入れ子状に記述しなければなりません。 関連項目： display、 入れ子構造。 display要素を含むtransition要素が 有効になると、displayの子要素はUJMLのソースに記述されている順番に評価されます。 関連項目： ステートトランジション、 transition。 このことは、関数の呼び出しなどのコードにおいて変数の値を変更する場合、 そのコードよりも実行の優先度が低い他の子要素が同じ変数を参照している場合、前者が後者に対して副作用を持つことを意味します。 

visualelements.ujml サンプルによる折り重なったポリゴンの描画例。

全てのビジュアル要素はselection eventsを通じてなんらかの形のユーザー入力機能を提供しています。 エディットボックスは利用しているデバイスに応じたテキスト入力を提供しています。 関連項目： ユーザー入力の検出、 選択イベント、 エディットボックス。

全てのビジュアル要素は、自身の画面上での位置とサイズを表す属性の子要素を持っています。 関連項目： 描画の位置とサイズ。 テキストを表示するビジュアル要素では表示する文字列とフォントの属性を指定することが可能です。 関連項目： テキストとフォント。 ラベルや図形ではビジュアル要素の色を指定することが可能です。 関連項目： UJMLにおける色。 その他の属性はそれぞれのビジュアル要素に特化した属性となっています。

位置の属性とサイズの属性の動作はビジュアル要素によって異なります。 両属性の動作は領域を定義する長方形によって決定される場合と、 直線によって決定される場合があります。 関連項目： 描画の位置とサイズ。 ビジュアル要素は、大まかにわけて次の5種類に分類されます：

• 図形 - 長方形や直線といった、基礎的な2次元グラフィック
• 画像 - ビットマップ・グラフィック
• テキスト- ラベルに代表される、基礎的なテキスト表示グラフィック
• エディット - テキストの入力・編集コントロール
• 特殊用途 - 特殊な用途を持ち、他のビジュアル要素とは動作が異なる

デバイス画面上でのビジュアル要素の描画順（画面上の重なり）はz-orderと要素の入れ子構造によって決定します。 関連項目： Z-Order、 入れ子構造。 ビジュアル要素には有効（画面上に表示されている場合）な状態と無効（画面上に表示されていない場合）な状態の2つの状態があります。 UJMLアプリケーション本体のdisplay要素に記述されているビジュアル要素は 常に有効です。ビジュアル要素がtransition要素の中のdisplay要素に 記述されている場合、そのビジュアル要素はトランジションがアクティブである場合にのみ有効となります。ステートがそのトランジションから 抜けると、そのビジュアル要素は無効となります。 関連項目： ステートトランジション。 

個々のビジュアル要素はそれぞれ独立して宣言されており、ランタイム時に新たなビジュアル要素を追加することはできません。 単純な例として、ステートのトランジションにbox要素が記述されている場合、 このboxはトランジションが有効な間は画面の一角に表示されますが、ステートがそのトランジションから抜けると 画面から消え去ります。この場合、別のboxを宣言しない限り追加のboxを表示することはできません。

UJMLでは一度宣言されたビジュアル要素を再利用する方法を2つ用意しています。 

1つ目の方法は、デフォルトのステートをもつステート変数の配列を使用する方法です。 この方法を使用するには、ステート変数の各次元のインデックス属性の参照値としてアスタリスク('*')を記述します。 記述例： '<state var="sFoo" index="*, *">'。 この場合、ステート要素に含まれているビジュアル要素（およびその他のトランジション要素）は ステート変数の配列のすべての要素に適用されます。 関連項目： ステートトランジション。 

2つ目の方法は、テンプレート要素を使ってビジュアル要素を定義し、ビジュアル要素を利用したい箇所に expand要素を記述する方法です。 関連項目： ビジュアル要素テンプレート。 テンプレートの利用は実行コードを小さくするなど、他のメリットをもたらします。

UJMLはデバイス画面の背景の再描画を自動的に行いません。 ステートトランジションによって表示されているビジュアル要素が無効になった場合、 UJMLアプリケーションが画面上の同じ場所でなんらかの描画を行わない限り、 そのビジュアル要素が画面上に表示されたままになることがあります。 このため、アプリケーション作成時には画面全体を覆う背景画面を利用することを お勧めします。 関連項目： ステートトランジション。 

備考：background.ujms サンプルは 画面の背景全体に描画を行う、再利用可能なコンポーネントの一例です。 

各ビジュアル要素の利用の可否はデバイスによって異なります。 x-ovalのように一部のデバイスではサポートされていない ビジュアル要素も存在します。 その他のビジュアル要素、例えばround-boxや polygonはデバイスによって描画される 結果が異なる場合があります。 UJMLには、デバイスに合わせた画面表示をランタイム時に行うために必用な、 デバイスがサポートしている機能を検出する関数を用意しています。 関連項目： デバイス依存の回避、 デバイスコンテキストの取得方法。 また画面サイズ、寸法そして利用可能な色数もデバイスによってことなります。 UJMLはこれらの特徴もランタイム時に検出できる関数を用意しています。 

備考：visualelements.ujml サンプルは 全ての種類のビジュアル要素を利用しています。このサンプルに手を加えて、異なるデバイス上でビジュアル要素がどのように 表示されるか、実験してみてください。

ステートトランジション、 ユーザー入力の検出、 選択イベント、 エディットボックス、 デバイス依存の回避、 デバイスコンテキストの取得方法、 visualelements.ujml、 background.ujms