表示タブでの機能エリアの編集
表示タブを使用して、同一ファイルを機能エリア別に編集することができます。これらのタブには、他の表示タブからはアクセスできない情報が表示されます。
ページレイアウトのデザイン - デザイン表示タブの使用
[デザイン] 表示タブは、HTML ページまたはドキュメントを作成する際に表示されます。このタブで、キャンバスにコントロールやコンポーネントを追加することで、ページのレイアウトをデザインすることができます。HTML ページまたはドキュメントを作成する際は、このタブがデフォルト設定で選択されています。
パラメータ値の作成と変更 - パラメータ表示タブの使用
[パラメータ] 表示タブは、HTML ページまたは Analytic Document ダッシュボードを作成する際に表示されます。このタブでは、パラメータ値や入力コントロールを作成、編集したり、パラメータ条件をカスタマイズしたりできます。また、パラメータをコントロールにバインドしたり、コントロール間に連鎖を設定したりすることもできます。
[パラメータ] タブは、次のコンポーネントで構成されます。
- 入力コントロールオブジェクト
入力コントロールオブジェクトを選択し、コントロールのプロパティと設定の表示や編集を行うことができます。
- [デザイン] 表示で入力コントロールを作成すると、[パラメータ] タブでバインドパラメータを作成するよう要求されます。
- 新規パラメータに入力コントロールを設定したときに挿入された入力コントロールを編集します。
- 新規パラメータの追加
[パラメータ] タブで任意の位置を右クリックし、新規パラメータを追加することができます。
注意：パラメータを手動で追加した場合、未バインドのパラメータが作成されます。
- 未解決パラメータのリフレッシュ
[パラメータ] タブでは、すべてのパラメータが 2 分ごとに解析され、パラメータに未解決のものがないかどうかが確認されます。未解決のパラメータが存在する場合、そのパラメータの周囲に赤色の多角形が表示されます。未解決のパラメータを必要に応じて確認する場合は、右クリックして [未解決項目のリフレッシュ] を選択します。
- コントロールとパラメータのバインド
[パラメータ] タブで、入力コントロールとパラメータのバインドの設定と解除が行えます。
パラメータにコントロールをバインドしたり、パラメータをコントロールにバインドしたりすることができます。
- コントロールにパラメータをバインドすると、そのパラメータはコントロールに入力される「入力パラメータ」になります。[パラメータ] タブで、パラメータオブジェクトをコントロールオブジェクトにドラッグすることができます。
- パラメータにコントロールをバインドすると、そのパラメータに値が入力されます。[パラメータ] タブで、コントロールオブジェクトをパラメータオブジェクトにドラッグすることができます。
- 複数のコントロールの連鎖
連鎖を設定すると、連鎖内で前のコントロールで選択した値に基づいて、コントロールに値が入力されます。静的コントロールおよび動的コントロールに連鎖を設定することや、連鎖の一部へのリンクの設定と解除、連鎖内のリンクの設定、条件の作成が可能です。[パラメータ] タブでは、連鎖はコントロールオブジェクトを接続する線として表示されます。連鎖のリンクの矢じり部分をクリックすると、[プロパティと設定] ダイアログボックスで、連鎖のプロパティや条件の設定と変更を行うことができます。
注意：連鎖は、パラメータではなく、コントロールにのみ適用されます。
JavaScript およびカスケードスタイルシートの作成 - JavaScript 表示タブおよび CSS 表示タブの使用
[埋め込み JavaScript] および [埋め込み CSS] 表示タブは、HTML ページを作成する際に表示されます。このタブで、HTML ページで使用する JavaScript コードやカスケードスタイルシート (CSS) を作成することができます。既存のカスケードスタイルファイルや JavaScript ファイルを参照するには、[設定] パネルの [URL/ファイルの検索] エリアに URL を入力します。また、CSS または JavaScript コマンドを使用することで、これらのファイルを検索することもできます。
埋め込みコードは、ホスト HTML ファイルでのみ使用されます。外部コードは、複数のファイルで使用可能です。
jQuery ツールヒントを使用してタイトルをカスタマイズするには
次の手順では、jQuery および内部 CSS を使用してタイトルをカスタマイズする方法について説明します。
- 手順
- HTML ページを作成します。
- ページにコンポーネントまたはコントロールを追加します。
- [プロパティ] パネルを開きます。
- [基本属性] セクション下の [タイトル] プロパティに値を入力します。
- キャンバスをクリックして、[DOCUMENT] オブジェクトが選択された状態にします。
- [プロパティ] パネルのツールバーで、稲妻アイコンをクリックしてイベントリストを表示します。
- 下図のように、[ロード時] イベントの右側の列をクリックして [...] (参照) ボタンを表示します。
- HTML キャンバスで [埋め込み JavaScript] 表示タブを選択します。
- 下図のように、コメント行の後に新しい行を追加し、次のコードを入力します。
$(document).tooltip();
- 下図のように、[埋め込み CSS] タブに移動します。
- 1 つ目のクラス定義の後に新しい行を追加し、新しいクラス名として次のように入力します。
.ui-tooltip
- 下図のように、以下の CSS スタイルを追加します。
- Color: white;
- Font-size: small;
- Background: black;
- Border-radius:20px;
注意：必要に応じて、任意のスタイルを追加することができます。
- HTML ページを保存して実行します。オブジェクト上にマウスポインタを置いて、スタイルが設定されたツールヒントを表示します。