Rich UI 메뉴

Rich UI 메뉴 위젯은 파일과 같은 단일 최상위 레벨 항목으로 표시되는 메뉴를 정의합니다. 메뉴에는 각각 추가 옵션을 제공할 수 있는 종속 메뉴 항목이 있습니다. 메뉴 표시줄을 작성하기 위해 다음 예에서와 같이 일련의 메뉴가 포함된 상자 위젯을 선언할 수 있습니다.
menuBar Box{ font = "Arial", children = [
   fileMenu,
   otherMenu,
   helpMenu 	]};
일반적으로 메뉴 표시줄을 전체 웹 페이지가 포함되는 더 큰 상자에 두려고 합니다. 다음은 이후에 표시되는 예의 일부 코드입니다.
handler MyHandler type RUIhandler{initialUI =[ui], onConstructionFunction = start}

ui Box{columns = 1, margin = 12, background = "#eeeeee", 
   children =[ menubar,
               new Box{ borderStyle = "solid", borderColor = "orange", borderTopWidth = 25,
               padding = 11, children =[changeTextBox]}
             ]};
기본 아이디어는 각 메뉴에 대한 메뉴 항목 배열을 지정하는 것이고, 각 메뉴 항목은 최대 두 개의 함수를 참조합니다.
  • 항목 유형 함수는 런타임 시 관계를 설정하고 메뉴 항목을 표시하도록 준비하는 경우에 호출됩니다.
  • 항목 조치 함수는 메뉴 항목을 선택하는 사용자에게 응답합니다. 그러나 일부 경우 메뉴 항목을 선언할 때 항목 조치 함수를 참조하지 않습니다.
예를 들어 다음은 파일 메뉴의 항목 배열이며, 이 뒤에 파일 메뉴 선언이 옵니다.
fileMenuItems menuItem[] =[                    
   new MenuItem{item = "Clear", itemType = MenuBehaviors.simpleText, itemAction = menuAction},
   new MenuItem{item = "Type", itemType = MenuBehaviors.simpleText, itemAction = menuAction}];

fileMenu Menu{menubehaviors ::= MenuBehaviors.BasicMenu, title = "File", 
              options = fileMenuItems, onMenuOpen = closeMenu};

지원되는 특성과 함수는 “위젯 특성 및 함수”에서 설명됩니다.

이 위젯을 사용하려면 다음 명령문이 필요합니다.
import com.ibm.egl.rui.widgets.Menu;
import com.ibm.egl.rui.widgets.MenuBehaviors;
import com.ibm.egl.rui.widgets.MenuItem;

항목이 표시되는 메뉴를 선언하기 전에 메뉴 항목 세트를 선언해야 함을 참고하십시오. 이 주제에서는 이러한 순서로 메뉴 개발에 대해 설명합니다.

MenuItem

MenuItem 유형의 필드(레코드 파트)는 항목 유형 및 항목 조치 함수를 참조합니다. 함수 특성에 대해 설명하기 전에 MenuItem 필드에 대해 설명합니다. 다음과 같은 필드가 있습니다.
id
메뉴 항목을 CSS 항목과 연관시킬 선택적 값입니다.
item
항목 유형 함수에 전달한 값입니다. Rich UI는 몇 가지 함수를 제공하여 사용자 소유의 코드를 작성할 수 있습니다. 기존 선택을 사용한다고 가정하면 item 특성은 다음 값 중 하나입니다.
  • 하위 메뉴 항목으로 표시할 문자열입니다. 이 경우에만 메뉴 항목 선언에서 항목 조치 함수를 지정하십시오.
  • 하위 메뉴 항목을 표시할 위젯입니다.
  • 하위 메뉴 제목과 종속 하위 메뉴 항목 세트를 참조하는 배열로 구성된 배열입니다. 다음 단편은 이 대체 방법을 표시하며 나중에 표시되는 예에 있습니다.
    new MenuItem{item =["Special", [myTimeItem, myReadOnlyItem]],
                 itemType= MenuBehaviors.subMenu }];
itemType
항목 유형 함수에 대한 참조입니다.
Rich UI는 item 특성과 관련하여 설명된 옵션에 사용할 수 있는 세 개의 함수를 제공합니다.
  • simpleText 함수는 item이 표시할 문자열인 경우에 적절합니다.
  • widgetItem 함수는 item이 위젯인 경우에 적절합니다.
  • subMenu 함수는 item이 문자열 배열 또는 종속 하위 메뉴 항목인 경우에 적절합니다.

다음 모든 함수는 Rich UI 라이브러리 MenuBehaviors에 있습니다.

itemAction
항목 조치 함수에 대한 참조입니다. item 필드 값이 문자열인 경우에만 이 값을 지정하십시오.
항목 유형 함수에는 다음 위임 파트에 정의된 특성이 있습니다.
Delegate 
   MenuItemType(newItem any in, itemAction MenuItemSelection, parentMenu Menu in) 
      returns (any) 
end
newItem
메뉴 항목을 선언할 때 지정하는 항목입니다.
itemAction
항목 유형 함수에서 항상 필요한 항목 조치 함수에 대한 참조입니다.

일반적으로 MenuItemSelection이라는 위임 파트는 항목 조치 함수를 설명합니다(나중에 설명됨).

parentMenu
메뉴 항목이 포함된 메뉴입니다.
다음은 항목 조치 함수를 설명하는 MenuItemSelection이라는 위임 파트입니다.
Delegate MenuItemSelection(parentMenu Menu, item any in) end
parentMenu
메뉴 항목이 포함된 메뉴입니다.
item
메뉴 항목입니다.
항목 조치 함수(아웃라인에 있음)는 다음과 같을 수 있습니다.
function menuAction(parentMenu Menu, item any in)
   if(parentMenu == fileMenu)
      case(item as string)
         when("Clear")
            ;
         otherwise
            ;
         end
   else
      if(parentMenu == helpMenu)
         ;
      else
         ; 
      end
   end
end

메뉴

메뉴 유형의 필드는 다음과 같습니다.
menuBehaviors
메뉴에 스타일과 기능을 적용하도록 메뉴를 작성하거나 다시 표시하는 동안 호출되는 함수에 대한 참조입니다. 이 참조는 추가 구문(::=) 사용으로 menuBehaviors 배열에 추가됩니다. 항목(구문은 예에 표시됨)을 반복했을 수 있고, 사용자가 메뉴를 선택할 때 참조된 함수가 배열 요소 순서로 실행됩니다. 이 예에서는 menuBehaviors 특성이 basicMenu 함수를 참고합니다. 이 함수는 Rich UI 라이브러리 MenuBehaviors에 있습니다. basicMenu 함수를 직접 사용하거나, 이를 사용자 함수의 기본으로 사용할 수 있습니다.

MenuBehavior라는 위임 파트는 참조되는 함수의 특성에 대해 설명합니다. 나중에 위임 파트에 대해 설명합니다.

메뉴 선언에서 다른 특성 앞에 behaviors 특성을 나열하십시오.

title
표시할 문자열입니다.
options
메뉴 항목의 배열입니다.
onMenuOpen
사용자가 메뉴를 선택할 때 실행되는 함수에 대한 참조입니다. 이 함수에는 리턴값이 없으며 메뉴 유형 및 규정자 IN의 단일 매개변수가 있습니다. 다음은 사용자가 한 메뉴를 선택하여 다른 열린 메뉴를 닫는 예입니다.
function closeMenu(keepOpen Menu IN)
   if(keepOpen != fileMenu)
      fileMenu.hideOptions(false);
   end
   if(keepOpen != otherMenu)
      otherMenu.hideOptions(false);
   end
   if(keepOpen != helpMenu)
      helpMenu.hideOptions(false);
   end
end
다음은 MenuBehavior라는 위임 파트이며, 런타임 시 메뉴 선택에 대한 응답에서 호출되는 각 함수에 대해 설명합니다.
Delegate 
   MenuBehavior(menu Menu in, titleBar TextLabel, optionsBox Box, options MenuItem[]) 
end
menu
메뉴입니다.
titleBar
지정한 메뉴 제목이 포함된 텍스트 레이블입니다.
optionsBox
메뉴의 모든 항목에 대한 하위 메뉴가 포함된 상자입니다. basicMenu 함수는 런타임 시 마우스 이동에 대한 응답으로 해당 하위 메뉴를 강조표시하는 규칙을 지정합니다.
for (index int from 1 to optionsbox.children.getSize() by 1)
   widget Widget = optionsBox.children[index];
   widget.onMouseOver ::= highlight;
   widget.onMouseOut ::= removemenuhighlight;
end
options
메뉴 항목의 배열입니다.
layouts() 함수는 다음 규칙에 설명된 대로 위젯 동작을 재설정합니다.
  • 메뉴를 선언할 때 menuBehaviors 특성을 먼저 나열하십시오.
  • 함수에 명령문을 작성할 때 menuBehaviors 특성 값을 변경하는 경우 메뉴 특정 함수 layouts()를 호출하여 위젯을 재설정하십시오.

다음 예를 사용자 작업공간으로 가져와서 이전에 설명된 관계를 볼 수 있습니다.

package myPkg;

import com.ibm.egl.rui.widgets.Box;
import com.ibm.egl.rui.widgets.CheckBox;
import com.ibm.egl.rui.widgets.HTML;
import com.ibm.egl.rui.widgets.Menu;
import com.ibm.egl.rui.widgets.MenuBehaviors;
import com.ibm.egl.rui.widgets.MenuItem;
import com.ibm.egl.rui.widgets.TextField;
import egl.ui.rui.Event;

handler MyHandler type RUIhandler{initialUI =[ui], onConstructionFunction = start}
    {}

ui Box{columns = 1, margin = 12, background = "#eeeeee", 
         children = [
         menubar,
         new Box{
         borderWidth = 2, borderStyle = "solid", borderColor = "orange", 
         borderTopWidth = 50, padding = 11, 
         children =[changeTextBox]}]};

   menuBar Box{font = "Arial", children =[fileMenu, otherMenu, helpMenu]};
   changeTextBox TextField{text="here"};
   readonlyCheck CheckBox{Text = "Read Only", onChange::= setReadOnly};

    
   myTimeItem menuItem{
      item = "Time?",
      itemType = MenuBehaviors.simpleText,
      itemAction = tellTime };    

   myReadOnlyItem MenuItem { 
      item = readOnlyCheck, 
      itemType = MenuBehaviors.widgetItem };

   fileMenuItems menuItem[] =[                    
                   new MenuItem{item = "Clear", 
                                itemType = MenuBehaviors.simpleText, itemAction = menuAction},
                   new MenuItem{item = "Type", 
                                itemType = MenuBehaviors.simpleText, 
                                itemAction = menuAction} ];

   otherMenuItems menuItem[] =[
                   new MenuItem{item =["Special", [myTimeItem, myReadOnlyItem]],
                                itemType= MenuBehaviors.subMenu }];
        
   helpItems menuItem[] =[new MenuItem{item = "About", 
                                       itemType = MenuBehaviors.simpleText, 
                                       itemAction = showHelp} ];

   fileMenu Menu{menubehaviors ::= MenuBehaviors.BasicMenu, title = "File",
                 options = fileMenuItems, onMenuOpen = closeMenu};

   helpMenu Menu{menubehaviors ::= MenuBehaviors.BasicMenu, title = "Help",
                 options = helpItems, onMenuOpen = closeMenu};

   otherMenu Menu{menubehaviors ::= MenuBehaviors.BasicMenu, title = "Other",
                  options = otherMenuItems, onMenuOpen = closeMenu};

   helpArea HTML{onClick ::= hideHelp, position = "absolute", x = 70, y = 60, 
                 backgroundColor = "lightyellow", width = 400, padding = 11, 
                 borderWidth = 3, borderStyle = "solid", height = 50, 
                 text = "Helpful detail is here. <p>Click this box to continue working.</p>"};

   function start()

   end

   function tellTime(parentMenu Menu, item any in)
      changeTextBox.text = dateTimeLib.currentTime();
   end

   function menuAction(parentMenu Menu, item any in)
      if(parentMenu == fileMenu)
         case(item as string)
            when("Clear")
               changeTextBox.text = "";
            otherwise
               changeTextBox.select();
            end
      else
         if(parentMenu == helpMenu)
            ;
         else
            ;  // parentMenu == widgetMenu
         end
      end
   end

   function setReadOnly(e Event in)
      changeTextBox.readOnly = !(changeTextBox.readOnly);			
   end
       
   function closeMenu(keepOpen Menu in)

      if(keepOpen != fileMenu)
         fileMenu.hideOptions(false);
      end

      if(keepOpen != otherMenu)
         otherMenu.hideOptions(false);
      end

      if(keepOpen != helpMenu)
         helpMenu.hideOptions(false);
      end
   end

   function showHelp(parentMenu Menu, item any in)
      document.body.appendChild(helparea);
   end

   function hideHelp(e Event in)
      document.body.removeChild(helparea);
   end
end