ビューの動作の定義

JavaScript、スタイルを追加したり、イベントハンドラに関数を定義することで、ビューの動作や外観を定義することができます。

手順

「動作」に切り替えて、ビューの機能と外観を定義します。

  • ビューの外観を制御する動的スタイルを追加します。
    動的スタイルでは、Less スタイル・シートと、親 (通常はアプリケーション) に設定されているスタイル定義が結合されます。 Less言語については http://lesscss.org/ 外部リンクは新しいウィンドウまたはタブで開きます. Less スタイル・シートと、スタイル定義の結合により、ランタイム CSS ファイルが生成されます。 このランタイム CSS ファイルは、プロセス・アプリケーションでビュー・インスタンスを表示するために使用されます。 コンテナー・レベルで定義値を設定することにより、そのコンテナー内のビュー・インスタンスのスタイルに一貫性を持たせることができます。 また、そのスタイルに 1 箇所からグローバルな変更を加えることができます。
  • 組み込まれたスクリプトを使用して、ライブラリーの既存のスクリプト・ファイルとスタイル・シート・ファイルを追加します。
    通常、これらのファイルは再使用可能な .js ファイルと .css ファイルです。 これらのファイルを個々の Web ファイルとしてライブラリーに追加することも、.zip ファイルにパッケージ化して、Web ファイルとして追加することもできます。 ファイルを .zip ファイルにパッケージ化することは、ファイルが相対関係を維持することを意味します。 例えば、.css ファイルをパッケージ化して、相対リンクを使用して参照対象のイメージを含める場合、システムがイメージを検出します。 ただし、.css ファイルを 1 つの .zip ファイルにパッケージ化し、参照先のイメージを別の .zip ファイルにパッケージ化した場合、システムはイメージを検出しません。

    .css ファイルを個別の Web ファイルとして追加する場合は、ロー・コード・デザイナーで編集できます。 デザイナーでは、 .zip ファイルにパッケージされている .css ファイルを編集することはできません。 その代わりに、外部で編集し、再パッケージ化してから、.zip Web ファイルを更新済みの .zip ファイルに置換する必要があります。

  • インライン CSS を使用して、ビューのスタイルを設定するために必要な CSS のプロトタイプを作成します。 CSS を開発したら、それを .css ファイルにコピーし、そのファイルを組み込みスクリプトとしてインポートします。
    インライン CSS クラス名はグローバルであるため、名前の競合が発生し、その結果、最後のスタイル定義しか適用されない場合があります。 この理由により、インライン CSS は、ビューの CSS スタイルを開発するための一時的な場所として使用してください。
    .zip ファイル内のイメージ・ファイルを指す場合は、file.zip!path/file.extension という URL フォーマットを使用します。
    注: アーカイブ内のファイルを参照するための「!」表記は、インライン CSS の動作でのみサポートされます。
    ロー・コード・デザイナーで作業している場合、.css ファイルおよびインライン CSS に指定されたビュー・スタイルが レイアウト ペインのビューに適用されます。これにより、ビューを実行またはテストすることなく、実行時のビューの表示状態を確認できます。 この設計時のスタイル・サポートには、以下のいくつかの制限があります。
    • CSS でメディア照会ステートメントを使用した場合、メディア・タイプが screen のメディア照会のみが構文解析され、設計時には min-width および max-width 仕様のみが適用されます。 この設計時のスタイルでは、単純な構文のみがサポートされます。例えば、以下のメディア・タイプ・ステートメントは設計時に処理されます。
      @media screen ….
	@media all
	@media (min-width: 520 px )
      ただし、以下のステートメントは設計時に処理されません。
      @media not screen
@media not print
@media not (tty and screen)
    • Internet Explorer 9 (非推奨) を使用している場合は、開かれた最初の 25 個のビューまたはアプリケーションにのみ設計時のスタイルが適用されます。 アプリケーション内のそれ以降のビューやページには、設計時のスタイルが適用されません。
    • 組み込まれたスクリプトおよびインライン CSS 内のインポートは、1 レベルの組み込みまでのみ処理されます。 例えば、 @import url('File1.css')というステートメントを含むインライン CSS がある場合、 File1 内の CSS は設計時に反映されますが、 File1 内のインポート・ステートメントは設計時に反映されません。

    大きなページやビューまたは複雑なページやビューがある場合は、設計時のスタイルが適用されるとパフォーマンスに問題が生じる可能性があります。 現行セッションで設計時のスタイルを使用不可にする場合は、「レイアウト」に切り替え、キャンバス上の任意の場所を右クリックしてから、「設計時スタイルを使用不可にする」を選択します。 残りのセッションでは、指定されたビュー・スタイルは適用されません。 セッションで設計時のスタイルをオンに戻す場合は、キャンバスを右クリックし、「設計時スタイルを使用可能にする」を選択します。

  • ブラウザーとメディア・タイプ間の違いに対処するための条件付きスタイルを追加します。
    条件付きスタイルは、条件が当てはまる場合、デフォルトのスタイルをオーバーライドします。
    例えば、ある .css ファイルを Microsoft Internet Explorer に適用し、別の .css ファイルを他のブラウザーに適用することができます。 条件付きスタイルを使用して、該当ファイルを適用します。
    条件付きスタイルを追加するには、以下の手順を実行します。
    1. 画面サイズ固有のスタイル設定またはブラウザー固有のスタイル設定を .css ファイルに追加します。
      例えば、より小さいラベル用フォントを使用し、埋め込みを減らしたタブレット用スタイルを追加することができます。
    2. .css ファイルを組み込まれたスクリプトとして追加します。
    3. 「IE 条件」 フィールドまたは 「メディア」 フィールドに、 .css ファイルのスタイルを適用する条件を追加します。
      例えば、.css ファイルにタブレット表示用のスタイルが含まれている場合は、screen and (max-width: 600px) のような条件を「メディア (Media)」フィールドに追加します。 ユーザーの画面の幅が 600 ピクセル以下の場合、ビューでは、デフォルト値ではなく .css ファイル内のスタイルを使用します。
    インライン JavaScript とインライン CSS を追加して、条件付きスタイルを追加することもできます。
    注: インラインの JavaScript スタイル設定、および 「IE 条件」 フィールドと 「メディア」 フィールドに入力されたスタイル設定条件は、実行時にのみ処理され、設計時には反映されません。
  • インライン JavaScriptを使用して、ビューのイベント・ハンドラーの共通変数および関数を定義します。
    エディターにはコード・スニペットが表示されます。 コード・スニペットの検証メッセージはエディターに表示されません。
  • ユーザー定義のイベント・ハンドラーを識別する変数を定義します。
  • <meta> タグなどのコードをビューのヘッダーに挿入するには、 「ヘッダー HTML」を使用します。
  • 必要に応じて、ビューが使用する関数を適切なイベント・ハンドラーに定義します。
    概要 プロパティーで 境界イベントを起動できます を選択した場合は、コードを追加して境界イベントを起動します。 イベントをトリガーするには、適切なときに this.context.trigger(callback) を呼び出すように JavaScript をコーディングします。