リストボックスからの値の削除

function button1_onclick(event) {
   var eventObject = event ? event : window.event;
   var ctrl = eventObject.target ? eventObject.target :
   eventObject.srcElement;
   // TODO:Add your event handler code here
   var readVals = [];
   readVals = IbComposer_getCurrentSelection('listbox1');
   IbComposer_removeSelectOption('combobox1',readVals);
}

アニメーションの実行

function submit1_onclick(event) {
   IbComposer_runAnimation('animation1');
}

タスクの実行

次の例は、「task1」と呼ばれる最初のタスクを実行します。このタスクは、「submit1」と呼ばれるボタンをクリックすると実行されます。

function submit1_onclick(event) {
	IbComposer_triggerExecution('task1',1);
}

プロシジャからのタスクの実行

次の構文は、レポートプロシジャのスタイルシートセクションを示しています。これは、[Drill to InfoWindow] というメニュー項目から起動する JavaScript ドリルダウンを作成します。この場合、IbComposer_triggerExecution 関数を使用して、「task2」(インデックス値は「1」) と呼ばれるタスクを実行します。「&BUSINESS_SUB_REGION」パラメータ値に、レポートの先頭フィールド (N1) の選択値が設定されます。このレポートは、ページ上で「ib_frameName」と識別されるフレームにロードされ、「report1」という一意の識別子が付けられます。

TYPE=DATA,
     COLUMN=N1,
     DRILLMENUITEM='Drill to InfoWindow',
          JAVASCRIPT=parent.IbComposer_triggerExecution( ¥
     'task2' ¥
     '1' ¥
     'BUSINESS_SUB_REGION' ¥
     N1 ¥
     'ib_frameName' ¥
     'report1' ¥
     ),
          TARGET='_parent',
$

これにより、このレポートは、HTML ページに「report1」という名前のコンポーネントとして追加できるようになります。さらに、[タスクとアニメーション] パネルで、「task2」という名前のタスクを load タスクの直後に作成することができます。トリガタイプに [TBD] を使用して、レポート内のドリルダウンリンクをクリックした際に実行するようタスクを設定します。これにより、ドリルダウンリンクのクリック時に、選択したパラメータ値を使用して実行するリクエストを [リクエスト/アクション] セクションで指定することができるようになります。

プロシジャ名の取得

function button1_onclick(event) {
   IbComposer_getRequestRefProcedure('Drilldown');
}

ターゲットフレーム名の取得

function button1_onclick(event) {
   IbComposer_getRequestTarget('Drilldown','true');
}

マップのマップオブジェクトの取得

function onInitialUpdate() {
   var map = IbComposer_getMapObject('mapcontrol1');
}

マップのマーカー配列の取得

function  onInitialUpdate() {
   var map = IbComposer_getMapObject('mapcontrol1');
   var markers = IbComposer_getMarkers('mapcontrol1','Customers');
}

コントロールへの動的な値の挿入

function button3_onclick(event) {
   var acc = IbComposer_populateDynamicCtrl('listbox3','listbox2');
   acc.selectNextPage();
}

コンポーネント ID によるアコーディオンレポートの取得

function button3_onclick(event) {
   var acc = IbComposer_getComponentById('accordion1');
   acc.selectNextPage();
}

現在選択されているドロップダウンリストの値の取得

function button1_onclick(event) {
   var values = IbComposer_getCurrentSelection('combobox1');
   for(var i = 0; i < values.length; i++)
   alert(values[i]);
}

リストボックスの現在選択値、実際値、表示値の取得

function button1_onclick(event) {
   var values = IbComposer_getCurrentSelectionEx('combobox1');
   for(var i = 0; i < values.length; i++)
{
   alert("Index Value: " + values[i].getIndex() + "¥n" +
   "Actual Value: " + values[i].getValue() + "¥n" +
   "Display Value: " + values[i].getDisplayValue());
}

HTML テーブルでクリックされた行の取得

function IbComposer_getClickedRow(clickEventTarget) {
    return getCurrentClickedRow(clickEventTarget);
}

HTML テーブルでクリックされた列の取得

function IbComposer_getClickedColumn(clickEventTarget) {
    return getCurrentClickedColumn(clickEventTarget);
}

HTML テーブルでクリックされたセル値の取得

function IbComposer_getClickedCellValue(clickEventTarget) {
    return getClickedCellValue(clickEventTarget);
}

リストボックスの現在選択値の設定

次の例は、「listbox1」という複数選択リストボックスから、「ITALY」および「JAPAN」の値を選択します。

function button1_onclick(event) {
   var arr = [];
   arr.push('ITALY');
   arr.push('JAPAN');
   IbComposer_setCurrentSelection('listbox1',arr,'false');
}

新しいウィンドウでのレポートの実行

function button3_onclick(event) {
   IbComposer_execute('report1','newwin');
}

チェックボックスの選択の有無の特定

function checkbox1_onclick(event) {
   var curValue = IbComposer_isSelected('checkbox1');	
   IbComposer_showHtmlElement('form1',curValue);
}

チェックボックスの表示と非表示の切り替え

function checkbox1_onclick(event) {
   var curValue = IbComposer_isSelected('checkbox1');
   IbComposer_showHtmlElement('form1',curValue);
}

要素の有効化または無効化

function checkbox2_onclick(event) {
   IbComposer_enableHtmlElement('listbox1', IbComposer_isSelected('checkbox2','country'));
   IbComposer_enableHtmlElement('combobox1', IbComposer_isSelected('checkbox2','car'));
   IbComposer_enableHtmlElement('listbox2', IbComposer_isSelected('checkbox2','model'));
   IbComposer_enableHtmlElement('combobox2', IbComposer_isSelected('checkbox2','dcost'));
}

リストボックス以降の連鎖のリセット

function button4_onclick(event) {
   var arr = [];arr.push('ENGLAND');
   IbComposer_setCurrentSelection('listbox1',arr,'false');
   IbComposer_ResetDownChainControls('listbox1');
}

タブのアクティブ化

<FORM id=form1 onsubmit="OnExecute(this);
   IbComposer_selectTab('tab1',1) name="form1">

テンプレートタブのアクティブ化

function submit1_onclick(event) {
   IbComposer_selectTemplateTab('tab5');
}

複数ページコントロールのページの選択

次の例は、[ウィンドウ] 複数ページコントロールの特定のページを選択する方法を示しています。この例では、このコントロールは 3 ページ目から開始されます。

function button2_onclick(event) {
var eventObject = event ? event : window.event;
var ctrl = eventObject.target ? eventObject.target : eventObject.srcElement;
// TODO:Add your event handler code here
IbComposer_goToPageOfMultiPageControl('windowPanel1', '3');
}

次の例は、ウィンドウ複数ページコントロールの前ページを選択する方法を示しています。

function button2_onclick(event) {
var eventObject = event ? event : window.event;
var ctrl = eventObject.target ? eventObject.target : eventObject.srcElement;
// TODO:Add your event handler code here
IbComposer_goToPageOfMultiPageControl('windowPanel1', 'true');
}

次の例は、ウィンドウ複数ページコントロールの次ページを選択する方法を示しています。

function button2_onclick(event) {
var eventObject = event ? event : window.event;
var ctrl = eventObject.target ? eventObject.target : eventObject.srcElement;
// TODO:Add your event handler code here
IbComposer_goToPageOfMultiPageControl('windowPanel1', 'false');
}

レポートで選択済みのすべてのパラメータのリスト取得

function button1_onclick(event) {
   var val = IbComposer_getAllAmpersValues();
   alert(val);
   OnExecute(event);
}

レイヤの表示と非表示の切り替え

function button1_onclick(event) {
   var eventObject = event ? event : window.event;
   var ctrl = eventObject.target ? eventObject.target :
   eventObject.srcElement;
   // TODO:Add your event handler code here
   IbComposer_showLayer('Customers','true');
}

マップレイヤの表示と非表示の切り替え

function button1_onclick(event) {
   var eventObject = event ? event : window.event;
   var ctrl = eventObject.target ? eventObject.target :
   eventObject.srcElement;
   // TODO:Add your event handler code here
   IbComposer_toggleMapLayer('mapcontrol1','Customers');
}

マップマーカーの表示と非表示の切り替え

function button1_onclick(event) {
   var eventObject = event ? event : window.event;
   var ctrl = eventObject.target ? eventObject.target :
   eventObject.srcElement;
   // TODO:Add your event handler code here
   IbComposer_toggleMapMarker('mapcontrol1','Stores','EMart');
}

レイヤの更新

function button1_onclick(event) {
   var eventObject = event ? event : window.event;
   var ctrl = eventObject.target ? eventObject.target : 
   eventObject.srcElement;
   // TODO:Add your event handler code here
   IbComposer_refreshMapLayer('mapcontrol1','Customers');    
}

住所への地図の移動

function button1_onclick(event) {
   var eventObject = event ? event : window.event;
   var ctrl = eventObject.target ? eventObject.target :
   eventObject.srcElement;
   // TODO:Add your event handler code here
   IbComposer_panToAddress('2 Penn Plaza,NY,NY','mapcontrol1',10);
}

地点への地図の移動

function button1_onclick(event) {
   var eventObject = event ? event : window.event;
   var ctrl = eventObject.target ? eventObject.target :
   eventObject.srcElement;
   // TODO:Add your event handler code here
   IbComposer_panToPoint(37.0625,-95.677068,'mapcontrol1',5); 
}

すべてのマップマーカーの表示

function button1_onclick(event) {
   var eventObject = event ? event : window.event;
   var ctrl = eventObject.target ? eventObject.target :
   eventObject.srcElement;
   // TODO:Add your event handler code here
   IbComposer_showAllMapMarkers('mapcontrol1','Customers');  
}

同心円グラフの描画

function button1_onclick(event) {
   var eventObject = event ? event : window.event;
   var ctrl = eventObject.target ? eventObject.target :
   eventObject.srcElement;
   // TODO:Add your event handler code here
   IbComposer_drawBullseye('mapcontrol1',37.0625,-95.677068,'true','mi',3);
}

ターゲットカレンダーの日付範囲の設定

function button1_onclick(event) {
var eventObject = event ? event : window.event;
var ctrl = eventObject.target ? eventObject.target : eventObject.srcElement;
// TODO:Add your event handler code here
     var curDate = IbComposer_getCurrentSelection('calendar1', 0, true);
       var fromDate= new Date(curDate);
       var toDate = new Date();
       var nOfDays= IbComposer_getCurrentSelection('slider1');
       if (isNaN (nOfDays-0)&& nOfDays != null) {
            alert("Please enter a numeric value!!");
       }
       else {
           var time = fromDate.getTime()+(nOfDays*3600000 * 24);
           toDate.setTime(time);
           IbComposer_setCalendarDatesRange("calendar2", fromDate, 
           toDate);
       }
}

テーブル内の次のグループのロード

次の例では、一意の識別子「next」で識別されるボタンをクリックすると、IbComposer_loadNextGroup 関数を使用して、「tablectrl1」というテーブルの次のグループがロードされます。「prev」というボタンは、IbComposer_loadPrevGroup 関数を実行しますが、最初に IbComposer_loadNextGroup 関数を実行するまで有効になりません。つまり、表示する前のグループが存在する場合のみ使用可能になります。「next」ボタンは、テーブルの最後のグループが表示された場合は使用できません。

正しく実行するためには、「numOfRows」という変数を使用して、表示されるグループの長さを 3 行に設定します。

var numOfRows=3;

function tablectrl1_onbeforeload(ctrl,arrValuesToLoad) {
 if(IbComposer_isCompleteReloading("tablectrl1") && arrValuesToLoad.length>numOfRows)	
{	
IbComposer_enableHtmlElement("prev",false);	
IbComposer_enableHtmlElement("next",true);
		return numOfRows;
	}
return false;
}

function next_onclick(event) {
var eventObject = event ? event : window.event;
var ctrl = eventObject.target ? eventObject.target : eventObject.srcElement;
// TODO:Add your event handler code here
var groupObj = {};
IbComposer_loadNextGroup("tablectrl1", groupObj, false);
IbComposer_enableHtmlElement("prev",true);
if(groupObj.end== groupObj.total)
	IbComposer_enableHtmlElement("next",false);

}

テーブル内の前のグループのロード

次の例では、一意の識別子「prev」で識別されるボタンをクリックすると、IbComposer_loadPrevGroup 関数を使用して、「tablectrl1」というテーブルの前のグループがロードされます。テーブル内の最初のグループが表示されている場合は、「prev」ボタンは使用できません。つまり、表示する前のグループが存在する場合のみ使用可能になります。有効化するには、IbComposer_loadNextGroup 関数を実行する「next」というボタンをクリックする必要があります。

正しく実行するためには、「numOfRows」という変数を使用して、表示されるグループの長さを 3 行に設定します。

var numOfRows=3;

function tablectrl1_onbeforeload(ctrl,arrValuesToLoad) {
 if(IbComposer_isCompleteReloading("tablectrl1") && arrValuesToLoad.length>numOfRows)	
{	
IbComposer_enableHtmlElement("prev",false);	
IbComposer_enableHtmlElement("next",true);
		return numOfRows;
	}
return false;
}

function prev_onclick(event) {
var eventObject = event ? event : window.event;
var ctrl = eventObject.target ? eventObject.target : eventObject.srcElement;
// TODO:Add your event handler code here
var groupObj = {};
IbComposer_loadPrevGroup("tablectrl1", groupObj, false);
IbComposer_enableHtmlElement("next",true);
if(groupObj.begin== 1)
	IbComposer_enableHtmlElement("prev",false);    

}

要素の再ロード完了の確認

次の例では、一意の識別子「button1」で識別されるボタンをクリックすると、「tablectrl1」というテーブルの再ロードが完了したかどうかを示すメッセージが表示されます。

function button1_onclick(event) {
var eventObject = event ? event : window.event;
var ctrl = eventObject.target ? eventObject.target : eventObject.srcElement;
// TODO:Add your event handler code here
alert(IbComposer_isCompleteReloading("tablectrl1"))

}

マップズームレベルでのイメージサイズ変更の構成

次の例では、マップのイメージマーカーの最小サイズはすべて 15 ピクセル、最大サイズは 60 ピクセルに設定されています。HTML ページを実行すると、ズームインした場合にマーカーの高さが最大 60 ピクセルに拡大され、ズームアウトした場合に 15 ピクセルまでに縮小されます。

function getImageScale(layerName, scaleObj)
{     
	scaleObj.scale=true;
	scaleObj.minSz=15;
	scaleObj.maxSz=60; 
		}

コントロールロード前の表示値の変更

次の例では、onbeforeload イベントを使用して、値「DATSUN」の表示値を「Modified」に変更します。

//Begin function listbox1_onbeforeload
function listbox1_onbeforeload(ctrl,arrValuesToLoad) { 
for(var i = 0; i < arrValuesToLoad.length; i++) { 
    //alert(arrValuesToLoad[i].dispValue + "  " + arrValuesToLoad[i].value + "  " + arrValuesToLoad[i].selected);
    if (arrValuesToLoad[i].value == 'DATSUN') 
{         arrValuesToLoad[i].dispValue = 'Modified';     } 
    }
}
//End function listbox1_onbeforeload

値のロード後にコントロールから別コントロールに値をコピー

次の例では、onafterload イベントハンドラを使用して、コントロールから別のコントロールに値をコピーします。

//Begin function listbox1_onafterload
function listbox1_onafterload(ctrl) 
{      IbComposer_getComponentById("listbox2").innerHTML = IbComposer_getComponentById("listbox1").innerHTML } 
//End function listbox1_onafterload

注意：コントロールに 101 個以上の値が存在する場合、WebFOCUS App Studio で一度にロード可能な値は 100 個までに制限され、すべての値がロードされるまで、処理が繰り返されます。JavaScript を次のように変更する必要があります。

function listbox1_onafterload(ctrl) 
{ if (arguments && arguments.length==2 && arguments[1])
IbComposer_getComponentById("listbox2").innerHTML = IbComposer_getComponentById("listbox1").innerHTML
}

この JavaScriptは、100 個の項目がリストボックスのドロップダウンコントロールに追加されるたびに、段階的に呼び出されます。追加のパラメータ (true/false argument[1]) が送信されます。100 個の項目の段階的ロードのそれぞれで false が設定され、最終コールの時点で true が設定されます。