Support > Wagby Developer Network(R8) > Advanced usage > Change key event behavior including function key

I will explain how to shift to any screen by pressing the key.

Open "Customize Key" on the Environment> Customize tab.Up to 15 customization settings can be done.

Fig. 1 Setting of key customization

Try pressing "F1" (function key F1) at the key input part of the first column (No1).Then the key code is automatically set.

Figure 2 Setting the function key F1

From the template, you can select the desired action.Here, I will specify "Open Main Menu".

Figure 3 Return to Main Menu

The script has been set up automatically.

Figure 4 Script set

keyEventHandlers.js

After doing this setting, a file called keyEventHandlers.js is created in wagbyapp/webapps/(project identifier) ​​/ system folder.This is a JavaScript file that runs on the browser.

You can confirm the operation by editing this file directly in the build application (wagbyapp) and reloading the browser.

Write an arbitrary script

You can write arbitrary scripts instead of pre-prepared templates.The structure of keyEventHandlers.js is as follows.

function getKeyEventHandlers(keys) {
  var keyEventHandlers = {};
  keyEventHandlers[キー] = handler_keyDown_キー;
  return keyEventHandlers;
}

// キーが押されたときに呼び出されるイベントハンドラ関数
function handler_keyDown_キー(event, dom, registry) {
  処理
}

The code written in Designer is posted to the "processing" part above.

This example shows how to assign the function key F1.The keyEventHandler.js looks like this:

function getKeyEventHandlers(keys) {
  var keyEventHandlers = {};
  keyEventHandlers[keys.F1] = handler_keyDown_F1; // メインメニューを開く
  return keyEventHandlers;
}

// メインメニューを開く
function handler_keyDown_F1(event, dom, registry) {
  window.openLocation("mainMenu.do");
}
  • In the getKeyEventHandlers function, set the corresponding event handler function with the code of the pressed key as the key of the associative array.
  • The screen transition can be realized by passing the transition destination URL to the openLocation function.
  • The code set in Designer is reflected inside handler_keyDown_F1 function.
When F1 is pressed on the registration/update screen, a confirmation dialog will be displayed to inform that the input contents will be discarded before the transition.

Here is an example of assigning function key F2.

function getKeyEventHandlers(keys) {
  var keyEventHandlers = {};
  keyEventHandlers[keys.F2] = handler_keyDown_F2; // メインメニューのサービスタブを開く
  return keyEventHandlers;
}
// メインメニューのサービスタブを開く
function handler_keyDown_F2(event, dom, registry) {
  // メインメニューの画面を開く前に表示されていたメインメニュータブのIDを
  // 「サービス」のIDに変更する
  window.setMainMenuSelectedTabId("menuTab9");
  window.openLocation("mainMenu.do");
}

The tab of the main menu saves the ID of the tab in the cookie so that the previously selected tab opens when the main menu screen is redisplayed.

To select a specific tab when displaying the main menu, you need to rewrite the cookie values ​​before transitioning to the main menu. Specifically, by passing the ID of the tab to be displayed to the setMainMenuSelectedTabId function, the value of the cookie is updated.

The ID of the tab can be confirmed on the Elements screen of the Developer Tools displayed by selecting "Validation" from the right mouse click in the tab name part.Since the span tag with the tab name is highlighted, please set "menuTab <number>" of the id attribute value (mainMenuContainer_tablist_menuTab <number>) of this tag.

If the ID on the "Service" tab is "mainMenuContainer_tablist_menuTab 9", please specify "menuTab 9" as the tab ID.

Please note: When you change the menu setting, the ID of this tab may be changed.In that case please modify JavaScript to set new value.
If there is no tab ID specified, the leftmost tab is selected.

An example of assigning function key F3 is shown below.

function getKeyEventHandlers(keys) {
  var keyEventHandlers = {};
  keyEventHandlers[keys.F3] = handler_keyDown_F3; // ツリー形式のサブメニューを開く
  return keyEventHandlers;
}

// ツリー形式のサブメニューを開く
function handler_keyDown_F3(event, dom, registry) {
  // サブメニューの表示位置を「左」に設定した場合に表示されるメニュー表示
  // ボタンをID指定で取得する
  var jfcBtnMenu = registry.byId("jfcBtnMenu");
  if (!jfcBtnMenu) {
    // ボタンが取得できなかった場合は何もしない
    return;
  }
  // ボタンのクリックイベントを実行する
  // ツリー形式のサブメニューの表示・非表示が切り替わる
  jfcBtnMenu.onClick();
}

The event handler function defined by the developer has three arguments: event, dom, and registry.

event is the event object when the key is pressed.
dom, registry are functions provided by Dojotoolkit respectively.
You can get an element with the specified ID value with dom.byId ("<ID>").
Button etc. with the specified ID value can be obtained by registry.byId ("<ID>").

The script that pushes the menu button when the submenu display position is set to the left is as shown above. Each time the key is pressed, the submenu in the tree format changes display/non-display.

An example of assigning function key F4 is shown below.

function getKeyEventHandlers(keys) {
  var keyEventHandlers = {};
  keyEventHandlers[keys.F4] = handler_keyDown_F4; // ポータル画面を開く
  return keyEventHandlers;
}

// ポータル画面を開く
function handler_keyDown_F4(event, dom, registry) {
  // メインメニューの画面を開く前に表示されていたメニュータブのIDを
  // 「ポータル」のIDに変更する
  window.setMainMenuSelectedTabId("menuTab0");
  window.openLocation("mainMenu.do");
}

In the case of portal, "menuTab 0" is fixed.

An example of assigning function key F5 is shown below.

function getKeyEventHandlers(keys) {
  var keyEventHandlers = {};
  keyEventHandlers[keys.F5] = handler_keyDown_F5; // モデル1の新規登録画面を開く
  return keyEventHandlers;
}

// モデル1の新規登録画面を開く
function handler_keyDown_F5(event, dom, registry) {
  window.openLocation("insertModel1.do?action_New=");
}

An example of assigning function key F6 is shown below.

function getKeyEventHandlers(keys) {
  var keyEventHandlers = {};
  keyEventHandlers[keys.F6] = handler_keyDown_F6; // モデル1の検索画面を開く
  return keyEventHandlers;
}

// モデル1の検索画面を開く
function handler_keyDown_F6(event, dom, registry) {
  window.openLocation("mainMenu.do?name=showListModel1");
}

An example of assigning function key F7 is shown below.

function getKeyEventHandlers(keys) {
  var keyEventHandlers = {};
  keyEventHandlers[keys.F7] = handler_keyDown_F7; // モデル1のダウンロード画面を開く
  return keyEventHandlers;
}

// モデル1のダウンロード画面を開く
function handler_keyDown_F7(event, dom, registry) {
  window.openLocation("mainMenu.do?name=downloadModel1");
}

An example of assigning function key F8 is shown below.

function getKeyEventHandlers(keys) {
  var keyEventHandlers = {};
  keyEventHandlers[keys.F8] = handler_keyDown_F8; // マルチセッションで別画面を開く
  return keyEventHandlers;
}

// マルチセッションで別画面を開く
function handler_keyDown_F8(event, dom, registry) {
  // 画面右上のドロップダウンボタン内の「新規ログオン」ボタンをID指
  // 定で取得する
  var opennewtabMenuItem = registry.byId("opennewtabMenuItem");
  if (!opennewtabMenuItem) {
    // ボタンが取得できなかった場合は何もしない
    return;
  }
  // ボタンのクリックイベントを実行する
  opennewtabMenuItem.onClick();
}

A "new logon" button that realizes multi-session can be acquired with an ID called opennewtabMenuItem.

An example of assigning function key F9 is shown below.

function getKeyEventHandlers(keys) {
  var keyEventHandlers = {};
  keyEventHandlers[keys.F9] = handler_keyDown_F9; // ログオフ
  return keyEventHandlers;
}

// ログオフ
function handler_keyDown_F9(event, dom, registry) {
  window.openLocation("logoff.do");
}

The event object passed to the event handler function contains information for referring to the key information that was pressed at the same time, such as the code of the key that was pressed, the shift key, and so on.

Inscription Description
keyCode Code (numerical value) of the pressed key
altKey When the Alt key is pressedtruereturn it.If notfalsereturn it.
ctrlKey When the Ctrl key is pressedtruereturn it.If notfalsereturn it.
shiftKey When Shift key is pressedtruereturn it.If notfalsereturn it.

Within the event handler function, processing can be divided by keys pressed at the same time as follows.

if (event.altKey) {
 // Alt キー押下
} else {
 // Alt キー押下無し
}

In the model model1 screen, we show an example including the judgment that the function key F1 becomes effective.

function getKeyEventHandlers(keys) {
  var keyEventHandlers = {};
  keyEventHandlers[keys.F1] = handler_keyDown_F1; // メインメニューを開く
  return keyEventHandlers;
}

// Model1 の画面で F1 キーを押下した場合にメインメニューを開く
function handler_keyDown_F1(event, dom, registry, query) {

  // デバッグ用のコード。
  //console.log("event: ", event);
  //console.log("pagetitle: ", query(".pagetitle")[0]);

  // CSS クラスを指定してページタイトルの div タグを 取得する
  var pageTitle = query(".pagetitle")[0];
  // ページタイトルの div タグの id 属性に Model1 が含まれる場合、
  // メインメニューを表示する
  if (pageTitle && pageTitle.id.indexOf("Model1") !== -1) {
    window.openLocation("mainMenu.do");
  }
}

The fourth argument query contained in the handler_keyDown_F1 function returns the element (in HTML) containing the specified id attribute. In this way, you can make a judgment by using the character string included in the page title.

Multiple key events can be registered in one keyEventHandler.js file.

function getKeyEventHandlers(keys) {
  var keyEventHandlers = {};
  keyEventHandlers[keys.F1] = handler_keyDown_F1; // メインメニューを開く
  keyEventHandlers[keys.F2] = handler_keyDown_F2; // メインメニューのサービスタブを開く
  keyEventHandlers[keys.F3] = handler_keyDown_F3; // ツリー形式のサブメニューを開く
  keyEventHandlers[keys.F4] = handler_keyDown_F4; // ポータル画面を開く
  keyEventHandlers[keys.F5] = handler_keyDown_F5; // モデル1の新規登録画面を開く
  keyEventHandlers[keys.F6] = handler_keyDown_F6; // モデル1の検索画面を開く
  keyEventHandlers[keys.F7] = handler_keyDown_F7; // モデル1のダウンロード画面を開く
  keyEventHandlers[keys.F8] = handler_keyDown_F8; // マルチセッションで別画面を開く
  keyEventHandlers[keys.F9] = handler_keyDown_F9; // ログオフ
  return keyEventHandlers;
}

// メインメニューを開く
function handler_keyDown_F1(event, dom, registry) {
  window.openLocation("mainMenu.do");
}

// メインメニューのサービスタブを開く
function handler_keyDown_F2(event, dom, registry) {
  // メインメニューの画面を開く前に表示されていたメインメニュータブのIDを
  // 「サービス」のIDに変更する
  window.setMainMenuSelectedTabId("menuTab9");
  window.openLocation("mainMenu.do");
}

// ツリー形式のサブメニューを開く
function handler_keyDown_F3(event, dom, registry) {
  // サブメニューの表示位置を「左」に設定した場合に表示されるメニュー表示
  // ボタンをID指定で取得する
  var jfcBtnMenu = registry.byId("jfcBtnMenu");
  if (!jfcBtnMenu) {
    // ボタンが取得できなかった場合は何もしない
    return;
  }
  // ボタンのクリックイベントを実行する
  // ツリー形式のサブメニューの表示・非表示が切り替わる
  jfcBtnMenu.onClick();
}

// ポータル画面を開く
function handler_keyDown_F4(event, dom, registry) {
  // メインメニューの画面を開く前に表示されていたメニュータブのIDを
  // 「ポータル」のIDに変更する
  window.setMainMenuSelectedTabId("menuTab0");
  window.openLocation("mainMenu.do");
}

// モデル1の新規登録画面を開く
function handler_keyDown_F5(event, dom, registry) {
  window.openLocation("insertModel1.do?action_New=");
}

// モデル1の検索画面を開く
function handler_keyDown_F6(event, dom, registry) {
  window.openLocation("mainMenu.do?name=showListModel1");
}

// モデル1のダウンロード画面を開く
function handler_keyDown_F7(event, dom, registry) {
  window.openLocation("mainMenu.do?name=downloadModel1");
}

// マルチセッションで別画面を開く
function handler_keyDown_F8(event, dom, registry) {
  // 画面右上のドロップダウンボタン内の「新規ログオン」ボタンをID指
  // 定で取得する
  var opennewtabMenuItem = registry.byId("opennewtabMenuItem");
  if (!opennewtabMenuItem) {
    // ボタンが取得できなかった場合は何もしない
    return;
  }
  // ボタンのクリックイベントを実行する
  opennewtabMenuItem.onClick();
}

// ログオフ
function handler_keyDown_F9(event, dom, registry) {
  window.openLocation("logoff.do");
}
  • In IE, even if you change the behavior of F1 key, the help screen always starts up.This is the specification of IE.
  • The next character can not be specified as a key event.
    BACKSPACE, TAB, CLEAR, ENTER, SHIFT, CTRL, ALT, PAUSE, CAPS_LOCK, SPACE, INSERT, DELETE, SELECT, NUM_LOCK, SCROLL_LOCK
    
  • PrtScn (PrintScreen) key can not be handled.For example, it does not correspond to invalidating PrtScn.
  • You can now control key events by directly editing keyEventHandlers.js with R8.0.0.
  • You can now write scripts from Designer in R version 8.0.1.keyEventHandlers.js is auto-generated.
  • The fourth argument query of the function handler_keyDown_ key which is automatically generated in R version 8.2 is added.