VGUIRecord 특성 사용

필드 특성 간의 관계는 EGL이 VGUIRecord의 필드를 JSP의 HTML 제어로 변환하는 방법을 결정합니다.

대부분의 UI 제어는 uiType 특성을 다음 값 중 하나로 설정하는 작업을 포함합니다.
  • input
  • inputOuput
  • output

다음 표에는 지정된 각 HTML 제어를 작성하는 방법이 표시되어 있습니다.

표 1. HTML 제어
HTML 제어 필드의 배열 여부 uiType 필드 길이

selectedIndex-
Item

필드 값
텍스트 상자 N input 또는 inputOutput 80자 이하 n/a 초기 표시
텍스트 영역 N input 또는 inputOutput 80자 초과 n/a 초기 표시(<textarea>와 </textarea> 태그 사이)
단일 선택 단추 Y input 또는 inputOutput n/a 숫자 필드 사용되지 않음
선택란 Y input 또는 inputOutput n/a 숫자 배열 사용되지 않음
단일 선택 콤보 상자 Y output n/a 숫자 필드 콤보 상자의 항목
다중 선택 콤보 상자 Y output n/a 숫자 배열 콤보 상자의 항목
다음 코드는 세 개의 단일 선택 단추 세트를 작성합니다.
10 ID  INT [3] { 
		displayName = "First option: \nSecond option: \nThird option:" ,
		selectedIndexItem = SELECTEDID,
		uiType = input
		} = [1, 2, 3];
		
10 SELECTEDID int {
		uiType = none
		};

표시되는 제어는 다음 예제와 유사합니다.

"첫 번째 옵션"부터 순서대로 이와 같이 레이블 지정된 세 개의 단일 선택 단추 세트입니다. 각 레이블 뒤에는 숫자가 포함된 텍스트 상자가 있습니다.

각 단일 선택 단추 레이블 뒤에는 해당 배열 번호의 값을 포함하는 텍스트 상자가 있다는 점을 참고하십시오. 이러한 텍스트 상자는 VisualAge® Generator 구현의 아티팩트입니다. EGL에서는 호환성을 위해 이 동작을 유지하고 있습니다. 표시를 생성하는 변수에 세 개의 INT 멤버가 있으며 그 입력의 유형이 uiType이므로, 이론적으로는 이러한 멤버에 대해 새 값을 입력할 수 있습니다. 실제로는 이러한 작업을 수행할 이유가 없습니다.

SELECTEDID를 배열로 변경하는 경우 해당 코드는 단일 선택 단추 대신 선택란이 있는 웹 페이지를 작성합니다.
10 SELECTEDID int [3] {
		uiType = none
		};
동일한 코드를 사용하여 uiType을 output으로 변경하는 경우 EGL은 단일 선택 단추 또는 선택란이 아니라 콤보 상자를 작성합니다. 이 경우에는 사용자가 프롬프트 메시지가 아니라 배열로부터 값을 선택하므로 표시 이름도 변경하는 것이 좋습니다. SELECTEDID가 배열인 경우 사용자는 Shift 키를 누른 채로 여러 선택을 수행할 수 있습니다. SELECTEDID가 다음 코드와 같이 단일 INT인 경우 사용자는 하나의 값만 선택할 수 있습니다.
10 ID  INT [3] { 
		displayName = "Pick a number:" ,
		selectedIndexItem = SELECTEDID,
		uiType = output
		} = [1, 2, 3];
		
10 SELECTEDID int {
		uiType = none
		};

표시되는 제어는 다음 예제와 유사합니다.

숫자 1 - 3을 선택사항으로 갖는 콤보 상자입니다.

기타 제어

uiType 특성의 기타 값은 기타 HTML 아티팩트를 작성합니다. VGUIRecord 소스 파일의 필드에 대한 다음 예제를 참고하십시오.
10 MYLINK char(32) {
   displayName = "MyLink",
   uiType = programLink,
   @programLinkData {
      programName = "DEST_PGM",
      uiRecordName = "DEST_PGE",
      newWindow = no,
      linkParms = [
         @linkParameter { name = "PARM", value="ParmData" },
         @linkParameter { name = "NAME", valueRef=NAME },
         @linkParameter { name = "ID", value="107" }
      ]
   }
};

여기에서는 programLink UI 유형으로 인해 displayName 특성의 컨텐츠("MyLink")가 링크로 표시됩니다. 이 링크는 programName 특성의 프로그램("DEST_PGM")을 가리키며, 이는 uiRecordName 특성의 페이지("DEST_PGE")를 실행합니다. 각 @linkParameter 특성의 이름 및 값은 조회 문자열에서 대상 프로그램의 URL과 함께 전달됩니다.

다음 예제는 브라우저에 <FORM> 태그 및 모든 연관된 컨텐츠를 생성하는 필드를 보여줍니다.
10 MYFORM01   char(60) {
   displayName = "MyForm01",
   uiType = uiForm,
   @programLinkData {
      programName = "DEST_PGM",
      uiRecordName = "DEST_PGE",
      newWindow = no,
      linkParms = [
         @linkParameter { name = "PARM", value="ParmData" }
      ]
   }
};
MYFORM01 아래에 있는 하위 구조 필드는 앞서 제시되었던 입력 또는 출력 제어나 다음 제출 단추와 같은 필드를 양식 내에 선언합니다.
20 BUTTON1 char(8) {
   displayName = "Submit",
   uiType = submit
   } = "SUBMIT";

사용자가 이 양식을 제출하면 VGWebTransaction 프로그램이 show 명령을 사용하여 programName에 있는 프로그램을 호출합니다. 호출 대상 프로그램에 필드 값이 전달되는 방법에 대한 정보는 EGL 언어 참조에서 "show"를 참조하십시오.