Uniface GUI サンプル: HTML ウィジェット と Javaスクリプト

Uniface 9.6.01
Sample Version: 1.0
December 2012


概要

このサンプルはどのようにHTMLウィジェットとプロックコードの間の相互作用を行っているのかを表します。

サンプルはHTMLウィジェットとUnifaceボタンを使ったフォームからできています。

Javaスクリプトを使ってライトをON・OFF にするために左の電球をクリックしてください。
プロックコードを使ってライトをON・OFF にするために右の電球をクリックしてください。
実行された内容は電球の下に表示されます。

ファイル

サンプルは以下のファイルを含んでいます:

ファイル名

説明

u96_htmljs_readme_jpn.htm

このファイル


u96_htmljs.xml

Uniface export file containing:

オブジェクト

名前

説明

フォーム U96_HTMLJS サンプルフォーム

u96_htmljs_screen_jpn.png
u96_htmljs_off.gif
u96_htmljs_on.gif

このサンプルで使用される画像


前提条件

サンプルを使用するにあたって、以下の知識が必要とされます。

Uniface スキル

レベル

Uniface 開発

Uniface プロックコード


Javaスクリプト



ステップ

  1. 以下をIDFアサイメントの [FILES]セクション内の最初の行に追記します。
    u96*.*     .\samples\u96*.*
  2. サブフォルダsamplesをプロジェクトフォルダに作成します。
  3. u96_htmljs_jpn.zipを samplesフォルダにすべて解凍します。
  4. u96_htmljs.xmlをインポートします。
    /imp u96_htmljs.xml
  5. コンパイルします。
    /all u96_htmljs*
  6. コマンドラインからサンプルフォームを起動します。
    /tst u96_htmljs
  7. コンポーネントエディタからフォームの設定を確認してください。
    フィールドHTML.DUMMYのExtendedトリガを確認します。
    フィールドBULB.DUMMYのDetailトリガを確認します。

JavaスクリプトからUnifaceをコール

左の電球はHTLMウィジェットで実装されています。 ウィジェットのためのHTMLコードは
フォームのExecuteトリガにあるblockdataに記述されています。このHTMLは若干のJavaスクリプトを含んでいます。
電球をクリックするとonclickイベントが発生します、そしてJavaスクリプトファンクションChangeImage()が実行されます。
このファンクションではイメージを変更し、パラメータ'On'を持ってUniface extended トリガ('Bulb')をコールします。
window.unifaceTriggers('Bulb','On');

extendedトリガBulbはHTMLウィジェット(HTML.DUMMY)に属しています。それはUniface ボタンの上でイメージを変更します。

UnifaceからJavaスクリプトをコール

右の電球はデフォルトイメージプロパティで、電球イメージが定義されているUnifaceボタンとして実装されます。

電球をクリックするとき、Detailトリガが発生します。
それは、フィールドプロパティを変更することによって、ボタンのイメージを変え、そしてHTMLウィジェット内のJavaスクリプトファンクションをスタートさせます:
$fieldhandle(HTML.DUMMY)->$widgetoperation("JS:ImageOn")

このコードはイメージを変更するHTMLウィジェットにあるJavaScriptファンクションImageOnをコールしています。

詳細