1 · Web view샘플 데이터베이스 odbc 등록 2 2. 제품 설치 3 3. 로그인 화면 개발 4 4. 메뉴 화면 개발 7 5. 공통 함수 개발 13 6. 공통 데이터 입력

OZ Application 교육 - Northwind 샘플 만들기 1 / 83

OZ Application 교육 – Northwind 샘플 만들기마지막 수정일 : 2008-03-03

Microsoft Office Access의 Northwind 샘플을 OZ Application Designer로 구현한 샘플입니다.처음부터 순차적으로 따라하면서 OZ Application에 대해 학습하실 수 있는 자료입니다.

첨부된 northwind.zip을 C:\Repository 에 압축을 푸세요.(mdb/, ozs/, ozr/, img/ 미리 제공)

목차

1. 샘플 데이터베이스 odbc 등록 22. 제품 설치 33. 로그인 화면 개발 44. 메뉴 화면 개발 75. 공통 함수 개발 136. 공통 데이터 입력 ODI 개발 187. 공통 스타일 개발 208. 코드 조회 ODI 개발 229. 제품 목록 ODI 개발 2410. 리포트 출력 화면 개발 2511. 제품 목록 화면 개발 2712. 제품 상세 ODI 개발 3413. 제품 상세 화면 개발 3514. 공급업체 ODI 개발 4215. 공급업체 화면 개발 4316. 제품 추가 화면 개발 4917. 수주 내역 ODI 개발 5218. 수주 목록 화면 개발 5719. 수주 내역 화면 개발 6720. 배포 76

1. 샘플 데이터베이스 odbc 등록


샘플에 사용할 Northwind.mdb 파일을 odbc로 등록하세요.

Northwind.mdb가 없으면 “시작-프로그램-Microsoft Office-Microsoft Office Access” 프로그램 실행 후

“도움말” 메뉴의 “예제 데이터베이스” – “Northwind 예제 데이터베이스” 선택하면 로컬pc에 “C:\Program Files\Microsoft Office\OFFICE11\SAMPLES\Northwind.mdb”파일이 생성됩니다.

아래와 같이 Northwind.mdb를 제어판-관리도구-데이터 원본-시스템DSN에 northwind 이름으로

등록합니다.

Northwind.mdb의 테이블 구조는 아래와 같습니다.


2. 제품 설치OZ XStudio4.0을 설치하세요.

* 샘플이 작성된 버전

Application Designer 40,2008,215,100Query Designer 40,2008,118,100Application Viewer 40,2008,0215,100Report Viewer 40,2008,118,2003. 로그인 화면 개발


파일명 /northwind/oza/northwind.oza보드명 login

OZ Application Designer를 실행한 후 ‘도구’ – ‘옵션’ 메뉴에서 설정된 값을 아래와 같이 변경합니다.

‘리파지토리’ 창에서 ‘C:\Repository’ 폴더를 ‘작업폴더’로 설정하세요. 설정 방법은 해당 폴더로 이동한 다음


팝업 메뉴에서 ‘작업 폴더 설정’을 클릭하면 됩니다.

‘파일’ 메뉴의 ‘새로 만들기’ 메뉴를 클릭합니다.

컴포넌트 트리에서 Document를 선택한 후 아래와 같이 속성과 이벤트를 설정합니다.

컴포넌트 속성 / 이벤트 값 설명

Document

AutoAdjustSize

True뷰어 사이즈에 맞게

oza 사이즈가

조절됩니다.

Document

GlobalFunction

이벤트

// 메뉴 파일명 설정

var menuArray = new Array();menuArray[0] = "/northwind/oza/northwind_product.oza/product"; // 제품 목록

menuArray[1] = "/northwind/oza/northwind_supplier.oza/supplier"; // 공급 업체

menuArray[2] = "/northwind/oza/northwind_order.oza/order";

// 수주 내역

menuArray[3] = ""; // 국가별 직원 판매 실적

menuArray[4] = ""; // 총 판매액

menuArray[5] = ""; // 제품 분류별 판매 실적

배열에 메뉴 클릭시

보여줄 oza명을

초기화합니다. Docum

ent의 GlobalFunction

에 선언된 변수나

함수는 oza 내에서

공유됩니다.

BoardView.BoardName에 보드명까지

명시하지 않으면 다른

보드가 호출될 수

있으니 oza뒤에

board명을 꼭

입력하세요.

[참고] ‘스크립트 편집기’ 글꼴 크기 변경

‘스크립트 편집기’를 클릭한 후 ‘Ctrl’ 키를 누른 상태에서 마우스의 휠을 움직이면 글꼴 크기가 크거나 작게 변경됩니다.

[참고] 오즈 애플리케이션에서 제공되는 함수를 확인하는 방법

F1 키로 ‘스크립트 도움말’을 띄우면 각 컴포넌트별로 제공되는 ‘속성’, ‘메소드’(함수), 이벤트에 대한 설명과 예제가

제공됩니다.

‘파일’ 메뉴에 ‘새 보드 추가’ 클릭하면 화면에 Board1, Board2가 생깁니다.



Board1 Name login 로그인 보드의 이름 설정

Board1 Size 990, 600 Width, Height 설정

Board2 Name main 메뉴 보드의 이름 설정


‘login’ 보드에 Panel 컴포넌트를 두 개 추가합니다. 컴포넌트 속성 / 이벤트 값 설명

Panel1 BackgroundImage ozp://northwind/img/login_bg.jpg 파란색 이미지를 배경에 설정

Panel1 BackgroundImageAlign Tile이미지를 Panel 배경에 타일처럼

반복해서 보여줍니다

Panel1 Dock TopPanel 컴포넌트를 Board에 Top으로 도킹합니다.

Panel1 Size 990, 592 Width, Height 설정

Panel2 BackgroundImageozp://northwind/img/login_main.jpg

배경이미지 설정

Panel2 Location 100, 132 X, Y 좌표 설정

Panel2 Size 800, 350 Width, Height 설정

‘Panel2’ 패널 위에 TextBox 컴포넌트 두 개와 Button 컴포넌트를 추가합니다.컴포넌트 속성 / 이벤트 값 설명

TextBox1 BorderStyle None 테두리 모양을 없앱니다

TextBox1 Location 446, 176 X, Y 좌표 설정

TextBox1 Size 182, 14 Width, Height 설정

TextBox2 BorderStyle None 테두리 모양을 없앱니다

TextBox2 Location 446, 206 X, Y 좌표 설정

TextBox2 Size 182, 14 Width, Height 설정

TextBox2 PasswordChar * 암호입력문자 *로 대체

Button1 Text 텍스트를 지웁니다.Button1 FlatStyle Image 이미지 버튼을 만들 때 Image로 설정

Button1 Imageozp://northwind/img/login_btn.gif

로그인 버튼의 이미지 설정

Button1 Cursor – Type Hand버튼위에 마우스가 올라가면 손모양으로

변경되는 속성

Button1 Location 648, 169 X, Y 좌표 설정

Button1 Size 58, 54 Width, Height 설정

Button1 OnClick 이벤트 main.Attach(); 버튼이 클릭되면 main 보드로 이동


[참고] ozp:// 란?ozp:// 는 repository root 경로를 의미합니다. 만약 C:\Repository 폴더를 로컬 작업폴더로 설정한 경우에

ozp://northwind/img/login_btn.gif 는 C:\Repository\northwind\img\login_btn.gif 파일을 가리킵니다.

[참고] ‘찾기’ 기능

디자인 하는 화면을 한번 클릭한 후 ‘Ctrl+F’ 키를 누르시면 ‘찾기’ 창이 뜹니다. Document내에서

스크립트나 컴포넌트 속성을 검색할 수 있는 기능입니다.

4. 메뉴 화면 개발

파일명 /northwind/oza/northwind.oza보드명 main


‘main’ 보드에 Panel 컴포넌트를 3개와 BoardView 컴포넌트를 하나 추가합니다. 컴포넌트 속성 값 설명

Panel_Top Dock TopPanel이 Board의 상단에 도킹됩니다. (높이 고정, 너비

가변)로그이미지를 보여주는 Panel입니다.

Panel_Top Size 990, 132 Width, Height 설정

Panel_Top2 Dock Top Home, Exit 버튼이 올라갈 Panel 입니다.

Panel_Top2BackColor

135, 180, 160 패널의 배경색 설정

Panel_Top2 Size 990, 15 Width, Height 설정

Panel_Left Dock Left메뉴(TreeView)가 올라갈 Panel입니다. Board의

왼쪽에 도킹됩니다. (높이 가변, 너비 고정)

Panel_LeftBackColor

240, 238, 230 패널의 배경색 설정

Panel_Left Size 260, 453 Width, Height 설정

BoardView1 Dock Fill메뉴가 클릭되면 BoardView에 해당 화면의 Board를

보여줄 때 이용됩니다. Fill로 도킹하면 보드 사이즈가

변경될 때 높이와 너비가 변경됩니다.BoardView1 OnReSize

이벤트

if(This.GetChildBoard() != null){

northwind.oza의 AutoAdjustSize가 True이기 때문에

뷰어가 resize되면 northwind.oza도 뷰어 사이즈 만큼

resize 됩니다. 이 oza에 Fill로 도킹된 BoardView


This.GetChildBoard().Size = This.Size;}

사이즈도 같이 resize됩니다. 이 때 BoardView내의

보드도 같이 resize되도록 하는 스크립트 입니다.

[참고] This스크립트 작성시 This는 현재 컴포넌트를 가리킵니다. this라고 소문자로 사용하게 되면 jscript의 this가

되기 때문에 OZ에서 제공되는 현재 컴포넌트를 가리킬 때는 반드시 첫자를 대문자로 작성하셔야 합니다.

Panel_Top1 위에 PictureBox 세 개와 Label을 하나 추가합니다.컴포넌트 속성 값 설명

PictureBox1FrameThickness

0 외곽선 두께 설정

PictureBox1 Image ozp://northwind/img/ozx.gif 보여줄 이미지 경로 설정

PictureBox1 ImageAlign None 이미지 정렬 방식

PictureBox1 Location 16, 48 X, Y 좌표 설정

PictureBox1 Size 128, 53 Width, Height 설정


0 외곽선을 두께 설정

PictureBox2 Image ozp://northwind/img/top01.jpg 보여줄 이미지 경로 설정





0 외곽선을 두께 설정

PictureBox3 Image ozp://northwind/img/top02.jpg 보여줄 이미지 경로 설정




Label1 Transparent True 배경을 투명하게 합니다.Label1 Text Northwind Sample 라벨에 보여줄 텍스트 설정

Label1 FrameLineSize 0, 0, 0, 0 외곽선 두께 설정

Label1 Location 24, 96 X, Y 좌표 설정

Label1 Size 152, 24 Width, Height 설정

Panel_Top2 위에 버튼을 두 개 추가합니다.

[참고] 속성 복사 기능

컴포넌트의 속성을 복사하여 다른 컴포넌트에 붙여넣기 할 수 있는 기능입니다.


Button_home에 대해 속성을 설정한 후에 버튼에서 오른쪽 마우스를 누르고 “속성 복사하기”를 선택합니다. Button_exit 버튼에서 오른쪽 마우스를 누르고 “속성 붙여넣기”를 합니다.


Button_home

BackColor 135, 180, 160 버튼의 배경색 설정

Button_home

TextColor 255, 255, 255 버튼의 글자색 설정

Button_home

Font 굴림, 12pt, Bold, Underline 글꼴, 사이즈, 글꼴스타일, 밑줄 설정

Button_home

Text Home(H) 버튼위의 텍스트 설정

Button_home

FlatStyle Flat 버튼 모양 설정

Button_home

Cursor – Type Hand버튼위에 마우스가 올라가면 손모양으로

변경되는 속성

Button_home

Shortcut Alt + HAlt+H 키를 누르면 Home 버튼이

클릭되도록 단축키를 설정합니다.Button_home

Location 876, -1 X, Y 좌표 설정

Button_home

Size 58, 17 Width, Height 설정

Button_home

OnClick 이벤트 BoardView1.BoardName = ""; 보드뷰에 화면이 안나오게 합니다.

Button_exit Text Exit(X) 버튼위의 텍스트 설정

Button_exit Shortcut Alt + XAlt+X 키를 누르면 Exit 버튼이 클릭되도록

단축키를 설정합니다.Button_exit Location 932, -1 X, Y 좌표 설정

Button_exit Size 58, 17 Width, Height 설정

Button_exit OnClick 이벤트 _ExitOZAViewer(); 뷰어 종료

[참고] 함수 이름 앞에 ‘_’가 들어가는 경우는?F1키를 눌러 ‘스크립트 도움말’을 보시면 ‘Document’와 ‘Global’ 에 있는 함수들은 ‘_’가 들어가 있습니다. ‘Document’내의 함수는 같은 oza 내에서 공유되며 ‘_’앞에 컴포넌트명(Document)을 붙이지 않고도

사용할 수 있습니다. ‘Global’ 내의 함수는 뷰어 내에서 공유되며 ‘_’ 앞에 컴포넌트명 없이 사용합니다.주의할 점은 Document명을 붙이지 않을 때 뷰어내에서 여러 개의 oza가 실행된 경우에는 다른 Document의 함수가 호출될 수도 있습니다.var b1 = Document._GetBoard("Board1");


var b2 = _GetBoard("Board1");_MessageBox("메시지창");

_TraceLn("콘솔창에 보여지는 텍스트");

ImageList 컴포넌트를 추가합니다. 툴바에서 ImageList를 클릭하면 ‘Invisibles 컴포넌트’ 창에 추가됩니다.

컴포넌트 속성 값 설명

ImageList1

ImageListUrl

ozp://northwind/img/treeicon.gif

메뉴 앞 아이콘을 설정할 이미지 파일입니다.

ImageList1

ImageSize 12, 12설정된 이미지를 ImageSize에 설정한 width * height 픽셀로 잘라서 index로 참조할 수

있습니다.

Panel_Left 위에 TreeView 컴포넌트를 추가합니다.컴포넌트 속성 값 설명

TreeView1 ItemHeight 18 각 노드의 높이를 설정합니다.

TreeView1 Indent 14 자식 노드의 들여쓰기 너비 설정

TreeView1ShowPlusMinus

False 트리 노트 앞의 +, - 기호를 생략합니다.

TreeView1 ImageList ImageList1위에서 만든 ImageList1 컴포넌트의 이미지를

트리 노드 앞에 보여주기 위해 설정합니다.TreeView1 Location 15, 15 X, Y 좌표 설정

TreeView1 Size 230, 423 Width, Height 설정

TreeView1 Anchor Top, Bottom, Left, Right

부모 컨테이너(Panel_Left)의 테두리에서

TreeView의 상대 위치를 고정 시키기 위한

방향을 설정. 화면이 resize될 때 TreeView도 같이

늘어납니다.

TreeView의 팝업 메뉴에서 ‘마법사’를 클릭하고 ‘Member’ 박스에 아래 텍스트를 입력합니다.상위 메뉴에 대한 하위 메뉴는 탭으로 구분됩니다.


입력된 각 라인은 TreeNode 컴포넌트로 참조가 됩니다.

각 텍스트에 대해 오른쪽 속성 창에 ImageIndex를 0으로 SelectedImageIndex를 1로 설정합니다.

상위 메뉴인 ‘제품 및 수주 관련 정보’, ‘보고서 인쇄’ 의 NodeID는 ‘-1’로 설정하고, ‘제품 목록’ 부터 ‘0’, ‘1’, ‘2’,

‘3’, ‘4’, ‘5’ 로 각각 설정합니다. 하위 메뉴만 Bold를 True로 설정하세요.

컴포넌트 이벤트 값 설명

TreeView1

OnInitialize//모든 자식 트리노드를 펼침

TreeView1.ExpandAll(true);

화면이 로딩될 때 트리뷰의

모든 노드가 펼친 상태로

보여지게 합니다.TreeView1

OnLMouseDown

// 메뉴 클릭

_BeginWaitCursor(); // 모래시계 모양 시작

var TreeNode = TreeView1.GetNodeByPos(ozarg_x, ozarg_y);

트리에서 왼쪽 마우스가

눌릴 때 선택된 노드가

있으면 해당 노드의

NodeID에 해당하는

제품 및 수주 관련 정보제품 목록공급 업체수주 내역

보고서 인쇄국가별 직원 판매 실적총 판매액제품 분류별 판매 실적


if(TreeNode == null){return;

}

var selectedNodeID = TreeNode.NodeID;if(selectedNodeID > -1 && selectedNodeID < menuArray.length){

_TraceLn("선택된 메뉴 파일 : " + menuArray[sel

ectedNodeID]);

BoardView1.BoardName = menuArray[selectedN

odeID];

if (BoardView1.GetChildBoard() != null) {

BoardView1.GetChildBoard().Size = Bo

ardView1.Size;

}

}

_EndWaitCursor(); // 모래시계 모양 끝

텍스트를 menuArray

배열에서 가져와서 BoardVi

ew 에 보여줍니다.

menuArray 배열은 Docume

nt의 GlobalFunction

이벤트에 선언되어

있습니다.

[참고] 이벤트의 패러미터

컴포넌트의 각 이벤트에는 시스템상에 미리 정의된 패러미터가 있습니다. (도움말의 이벤트 부분 참고) 예를

들어 OnLMouseDown 이벤트에는 현재 마우스가 클릭된 X, Y 좌표를 가져오는 ‘ozarg_x’, ‘ozarg_y’ 패러미터가 정의되어 있습니다.

‘파일’ 메뉴의 ‘저장’ 버튼을 누른 후 작업폴더 위치가 “C:\Repository’ 폴더라면 ‘C:\Repository\northwind\oza\northwind.oza’ 로 저장을 합니다.

Ctrl+P를 눌러 미리보기하여 결과를 확인할 수 있습니다.

5. 공통 함수 개발

JavaScript의 “.js” 파일처럼 Application에서도 “.ozf” 란 파일에 함수를 정의하여 사용할 수 있습니다.

OZ Application Designer의 ‘도구’ 메뉴에서 ‘함수 편집기’를 클릭하면 “오즈 애플리케이션 함수 편집기”가

실행됩니다.

“Ctrl + N” 키를 누릅니다.


아래의 내용을 복사한 후 “C:\Repository\northwind\ozf\northwind_common.ozf” 로 저장합니다./* 팝업 띄우기

*/function openPopup(Board, popupOzaName, popupBoardName, title, Values) {

Board.ShowDialog(popupOzaName, title, false, 0, 0, true, true, true);

// 팝업보드에 값 설정하고 팝업보드의 OnUserEvent 호출

var otherDocument = Document._GetDocument(popupOzaName);if(otherDocument) {

otherDocument._GetBoard(popupBoardName).UserValue = Values;

otherDocument._GetBoard(popupBoardName).TriggerEvent(EventNameConst.OnUserEvent);}

}

/*

* 그리드를 다른 포맷으로 저장하기

* @param Grid 데이터 저장 그리드 컴포넌트

* @param bOpen 직접 열기 여부

* @param exe 저장데이터 확장자명 excel,text,image

*/

function exportGrid(Grid,bOpen,exe)

{

var result="";

var filter,filePath,run;

if(exe=="text"){

filter = "Text Files (*.txt)|*.txt|All Files (*.*)|*.*||";filePath = Document._FileDialog(false, "", "DataFile.txt","",filter);if(filePath=="") return;Grid.SelectCellRange(-1,-1,-1,-1);result = Grid.SaveCSVToFilePathInRange(filePath,true,true," ");run = "notepad.exe";

} else if (exe == "excel") {filter = "Worksheet Files (*.xls)|*.xls|All Files (*.*)|*.*||";filePath = Document._FileDialog(false, "", "DataFile.xls","",filter);


if(filePath=="") return;

if(Grid.GetProperty(PropertyNameConst.Type)==ComponentTypeConst.CrossTab){var CrossTab = Grid;result = CrossTab.ExcelExport(filePath);

}else {Grid.SelectCellRange(-1,-1,-1,-1);result = Grid.SaveExcelToFilePathInRange(filePath,true,true,true,true,true);

}

run = "excel.exe";

} else {

filter = "BMP FILE(*.bmp)|*.bmp|JPEG FILE(*.jpg;*.jpeg)|*.jpg;*.jpeg|All Files (*.*)|*.*||";

filePath = Document._FileDialog(false, "", "DataFile.bmp","",filter);

if(filePath=="") return;

result = Grid.SaveBMPFile(filePath, null,null,null,null,false);run = "mspaint.exe";

}

if(!result){var msg = "자료받기에 실패 하였습니다. 재저장 하시기 바랍니다";

_ChoiceButtonBox(msg, "OZ XStudio", MessageBoxOptionsConst.OK, MessageBoxOptionsConst.IconStop);

return;

}

//직접 실행

if(bOpen && result) Document._RunProcess(run, "\""+filePath+"\"");

}

다시 “Ctrl + N” 키를 누릅니다.

아래의 내용을 복사한 후 “C:\Repository\northwind\ozf\northwind_dataaction.ozf” 로

저장합니다.

이 ozf 파일은 데이터 저장과 관련된 함수들을 제공합니다./*


단건 저장 (입력/수정/삭제)

*/function saveData(crud, s_fields, s_values, t_fields, t_values, tableName) {

var odiName = "dataaction";var datasetName = "DataAction";

// _GetDataManager() 는 northwind.oza에서 미리보기 할때는 northwind.oza의 dataaction.odi 가

실행되며

// northwind_supplier.oza에서 미리보기 할 때는 northwind_supplier.oza의 dataaction.odi 가 실행됨.var DataModule = _GetDataManager().GetDataModule(odiName);var DataSet = DataModule.GetDataSet(datasetName);

// Transaction을 묶는 전체 데이터 액션 Arrayvar DataAction = new Array();

if (crud == "INSERT") { // INSERT SQL을 작성한다.DataAction[0] = insertDataAction(DataSet, s_fields, s_values, tableName);

} else if(crud == "UPDATE") { // Update SQL을 작성한다.DataAction[0] = updateDataAction(DataSet, s_fields, s_values, t_fields, t_values,

tableName);} else if (crud == "DELETE") { // Delete SQL을 작성한다.

DataAction[0] = deleteDataAction(DataSet, t_fields, t_values, tableName);} else {

return null;}

// COMMITDataModule.QueueActionObjects(DataAction);var result = DataModule.CommitQueuedActions();DataModule.CleanUpQueuedActions();

return result;}

/* 입력 DataAction 생성

*/function insertDataAction(DataSet, fields, values, DBTableName){


var DataAction = DataSet.MakeDefaultDataAction();DataAction.DataActionType = DataActionTypeConst.Insert;var len = fields.length;var sql = "INSERT INTO "+DBTableName+" ( ";for(var i=0; i<len; i++){

if(i!=0) sql += " ,";sql += fields[i];

}sql += " ) VALUES ( ";for(var i=0; i<len; i++){

if(i!=0) sql += " ,";sql += values[i];

}sql += " ) ";_TraceLn("INSERT : "+sql);DataAction.SetSourceValue(sql, "INSERT");return DataAction;

}

/* 삭제 DataAction 생성

*/function deleteDataAction(DataSet, fields, values, DBTableName){

var DataAction = DataSet.MakeDefaultDataAction();DataAction.DataActionType = DataActionTypeConst.Delete;var len = fields.length;

var sql = "DELETE FROM "+DBTableName+" WHERE ";for(var i=0; i<len; i++){

if(i!=0) sql += " AND ";

if(values[i].indexOf(" in")==0 || values[i].indexOf(" IN")==0){sql += fields[i]+values[i];

}else{sql += fields[i]+" = "+values[i];

}}_TraceLn("DELETE : "+sql);


DataAction.SetTargetValue(sql, "DELETE");return DataAction;

}

/*

수정 DataAction 설정

*/

function updateDataAction(DataSet, s_fields, s_values, t_fields, t_values, DBTableName){var DataAction = DataSet.MakeDefaultDataAction();DataAction.DataActionType = DataActionTypeConst.RowUpdate;

var len = s_fields.length;var sql = "UPDATE "+DBTableName+" SET ";for(var i=0; i<len; i++){

if(i!=0) sql += " , ";sql += s_fields[i]+" = "+s_values[i];

}sql += " WHERE ";len = t_fields.length;for(var i=0; i<len; i++){

if(i!=0) sql += " AND ";sql += t_fields[i]+" = "+t_values[i];

}_TraceLn(sql);DataAction.SetSourceValue(sql, "UPDATE");return DataAction;

}

/*

문자를 DB에 입력할 수 있도록 수정

*/

function to_char(str){

return "'"+str+"'";

}

생성된 ozf 파일들을 northwind.oza에 추가합니다. 추가하는 방법은 OZ Application Designer의 ‘

리파지토리’ 탭의 ‘로컬 탐색기’ – ‘작업폴더’ 에서 위에서 생성한 ozf 파일들을 더블 클릭하시면 됩니다.


이 함수들은 northwind.oza에서는 사용하지 않지만 BoardView에 보여지는 oza에서 공통으로

사용됩니다.

6. 공통 데이터 입력 ODI 개발

데이터베이스 연결 정보 파일 설정

아래 내용을 디자이너 아래 각각 db.properties 란 이름으로 저장합니다.

(db.properties 파일 내용)northwind.vendor=odbcnorthwind.dsn=northwindnorthwind.user=northwind.password=northwind.maxconns=5northwind.initconns=2northwind.timeout=5

C:\Program Files\FORCS\OZ XStudio 4.0\OZ Query Designer 4.0\db.propertiesC:\Program Files\FORCS\OZ XStudio 4.0\ OZ Application Designer 4.0\db.propertiesC:\Program Files\FORCS\OZ XStudio 4.0\ OZ Report Designer 4.0\db.properties

[참고] db.properties가 이미 존재하는 경우 위의 테이블내의 내용을 기존 파일 내용 아래 추가하시면

됩니다.

OZ Query Designer를 실행합니다.

스토어 추가

‘오즈 데이터 트리’ – ‘데이터베이스’ 의 팝업 메뉴에서 ‘스토어 추가’를 클릭하세요.

‘데이터 정보 이름’에 ‘northwind_conn’ 이라고 입력하세요.

‘DB 앨리어스’에 ‘northwind’를 입력하세요.‘앨리어스 정보 파일’에 ‘db.properties’라고 입력한 후 ‘확인’ 버튼을 누릅니다.


데이터 셋 추가

‘northwind_conn’의 팝업 메뉴에서 ‘데이터 셋 추가’를 클릭하세요.‘데이터 셋 이름’ 에 ‘DataAction’ 이라고 입력합니다.

쿼리문 입력, 실행

쿼리문을 마법사를 이용하여 작성하지 않고 직접 입력하기 위해 툴바의 ‘매뉴얼’ 아이콘을 클릭합니다.

아래과 같이 입력한 후 F5번을 눌러 쿼리를 실행합니다.

select 'HELLO' as DUMMY

행 삽입, 삭제, 변경 쿼리 생성

Insert, Update, Delete 쿼리문은 데이터셋의 ‘행 삽입 쿼리’, ‘행 삭제 쿼리’, ‘행 변경 쿼리’ 팝업 메뉴에서

작성할 수 있습니다.

쿼리문을 직접 입력할 수도 있으나 Application에서 스크립트로 설정한 쿼리문으로 실행되도록 하기 위해

아래와 같이 각각 입력합니다.


구분 실행문

행 삽입 쿼리 #@ARG_SF1#

행 삭제 쿼리 #@ARG_DF1#

행 변경 쿼리 #@ARG_SF1#

‘저장’ 버튼을 클릭한 후에 “C:\Repository\northwind\odi\dataaction.odi” 로 저장합니다.

northwind.oza에 추가된 ‘northwind_dataaction.ozf’ 함수에서

_GetDataManager().GetDataModule(“dataaction”) 함수가 호출되면 northwind.oza의 odi를

참조하기 때문에 northwind.oza에 dataaction.odi를 추가해야 합니다. 추가 방법은 ozf처럼 ‘리파지토리’

창에서 파일을 더블 클릭하면 됩니다.

7. 공통 스타일 개발

이제 northwind.oza 에서 메뉴가 클릭되면 BoardView에 보여질 oza들을 개발하도록 하겠습니다.

그에 앞서 화면 디자인시 중복되는 속성을 일일히 설정하지 않기 위해서 JavaScript의 ‘.css’ 파일처럼

스타일을 설정해 놓는 ‘.ozs’ 파일을 만들도록 하겠습니다.

OZ Application Designer의 ‘도구’ 메뉴의 ‘스타일 편집기’를 클릭하세요.

‘Ctrl+N’ 키를 누르세요.

Style1을 클릭한 후 ‘Name’을 ‘label’로 수정하세요.

‘label’의 팝업메뉴에서 ‘새 속성 추가’를 클릭하세요.

아래 속성들을 ‘속성 목록’에서 찾은 후 더블 클릭하면 속성 창에 추가됩니다.

추가된 속성들을 값을 아래와 같이 변경하세요.

구분 실행문

Transparent True

Font 굴림, 12pt, Bold

TextAlign MiddleLeftFrameLineSize 0, 0, 0, 0

이와 같은 방식으로 아래의 스타일들을 생성한 파일이 “C:\Repository\northwind\ozs\


northwind.ozs” 입니다.

스타일 설명 적용 컴포넌트 적용 이미지

label 제목, 일반 텍스트의 스타일 Label

button‘조회’ 버튼, ‘닫기’ 버튼, ‘수정’

버튼, ‘삭제’ 버튼, ‘저장’ 버튼, ‘목록’ 버튼 등의 스타일

Button

picturebox_titleicon 제목 텍스트 앞의 아이콘 스타일 PictureBoxpicturebox_labelicon 라벨 앞의 아이콘 스타일 PictureBoxbutton_searchicon 검색 아이콘 스타일 PictureBox

gridcelltitle1 테이블 제목 스타일 (색상1)Table, Grid 컴포넌트의

GridCellTitle


GridCellTitle


GridCellTitle

gridcelllabel_left테이블 데이터 스타일 (왼쪽

정렬)

Table, Grid 컴포넌트의

GridCellLabel

gridcelllabel_center테이블 데이터 스타일 (중앙

정렬)


GridCellLabel

gridcelllabel_num테이블 데이터 스타일 (

오른쪽정렬, 숫자 포맷)


GridCellLabellabel_back 배경 라벨 Label

gridcellcheckbox테이블 데이터 스타일

(ColumnType이 CheckBox인

경우)


GridCellCheckBox

label_info페이지 정보를 보여주는 라벨의

스타일Label

picturebox_infoicon 기타 아이콘 스타일 PictureBox

label_num숫자 포맷으로 데이터를 보여주는

라벨의 스타일Label


이 스타일 파일은 각 oza에 추가되어 집니다.

8. 코드 조회 ODI 개발


스토어 추가



‘DB 앨리어스’에 ‘northwind’를 입력하세요.

‘앨리어스 정보 파일’에 ‘db.properties’라고 입력한 후 ‘확인’ 버튼을 누릅니다.


‘northwind_conn’의 팝업 메뉴에서 ‘데이터 셋 추가’를 클릭하세요.‘데이터 셋 이름’ 에 ‘categories’ 라고 입력합니다.




select DISTINCT Categories.CategoryID, Categories.CategoryName, Categories.Description from CategoriesORDER BY Categories.CategoryName

이 쿼리문은 ‘제품 분류 번호’, ‘제품 분류 이름’, ‘설명’ 필드를 조회합니다.



‘northwind_conn’의 팝업 메뉴에서 ‘데이터 셋 추가’를 클릭하세요.‘데이터 셋 이름’ 에 ‘suppliers’ 라고 입력합니다.




SELECT DISTINCT Suppliers.SupplierID, Suppliers.CompanyName FROM Suppliers ORDER BY Suppliers.CompanyName

이 쿼리문은 ‘공급자 번호’, ‘공급 회사명’ 필드를 조회합니다.


‘저장’ 버튼을 클릭한 후에 “C:\Repository\northwind\odi\northwind_code.odi” 로 저장합니다.9. 제품 목록 ODI 개발


스토어 추가





사용자 패러미터 추가


‘사용자 지정 패러미터’의 팝업 메뉴에서 ‘패러미터 설정’을 클릭하세요.

‘Member’ 창에 ‘categoryId’ 라고 입력하고 ‘확인’ 버튼을 누르세요.


‘northwind_conn’의 팝업 메뉴에서 ‘데이터 셋 추가’를 클릭하세요.‘데이터 셋 이름’ 에 ‘listOfProduct’ 라고 입력합니다.

데이터 셋의 속성창에 ‘스크립트 사용’을 ‘True’로 설정합니다. 스크립트로 쿼리문을 설정하는 이유는

categoryId가 패러미터로 넘어오지 않는 경우 WHERE 구문을 작성하지 않기 위해 필요합니다.




string query;string categoryId;

categoryId= #OZParam.categoryId#;

query = "SELECT Products.ProductID, Products.ProductName, Products.QuantityPerUnit, Products.UnitsInStock, ";query = query + "Products.Discontinued, Products.UnitPrice, ";query = query + "Categories.CategoryName ";query = query + "FROM Categories INNER JOIN Products ON Categories.CategoryID = Products.CategoryID ";if (categoryId != "") {

query = query + "WHERE Products.CategoryID = " + categoryId;}query = query + " ORDER BY Products.ProductName ";

setQueryString(query);

이 쿼리문은 categoryId 패러미터에 해당하는 제품 목록(‘제품 번호’, ‘제품 이름’, ‘포장 단위’, ‘재고량’, ‘단종품’, ‘단가’, ‘제품 분류’)를 조회합니다.


‘저장’ 버튼을 클릭한 후에 “C:\Repository\northwind\odi\northwind_product.odi” 로

저장합니다.

10. 리포트 출력 화면 개발

파일명 /northwind/ozc/ReportBoard.ozc보드명 Board1

오즈 리포트를 애플리케이션에서 호출하기 위해서는 ReportControl이란 컴포넌트를 사용할 수 있습니다.

화면을 리포트로 다시 그리는 이유는 출력이나 다른 포맷으로 (doc, xls, hwp, 이미지, ppt, pdf, html, hml, csv, text, tif, svg) 저장하기 위해서 입니다.리포트를 보여주는 공통 팝업을 ReportBoard.ozc란 파일로 생성하는 방법을 설명하도록 하겠습니다.

OZ Application Designer의 ‘파일’ 메뉴에서 ‘새로 만들기’를 클릭하세요.

Board위에 ReportControl 컴포넌트를 하나 추가합니다.



ReportControl1 Dock FillFill로 도킹하면 화면(Board1) 사이즈가 변경될 때

ReportControl의 높이와 너비가 동일하게 변경됩니다.

[참고] ozc 파일이란?Document 하위의 모든 컴포넌트는 ozc란 파일로 저장할 수 있습니다. 컴포넌트의 속성과 이벤트가 같이

저장됩니다. 컨테이너 컨트롤(패널, 수직박스, 수평박스, 그룹박스, 탭컨트롤, 보드뷰, 보드)를 .ozc 파일로


저장할 경우에는 컨테이너 내의 모든 컴포넌트도 같이 저장됩니다.

생성된 보드를 ozc파일로 저장하기 위해 컴포넌트 트리에서 Board1을 선택한 다음에 팝업 메뉴에서 ‘

컴포넌트 내보내기’를 클릭한 후 “C:\Repository\northwind\ozc\ReportBoard.ozc” 파일로

저장하시기 바랍니다.

[참고] 상위 컴포넌트 선택

‘ESC’ 키를 누르면 컴포넌트의 상위 컨테이너가 선택됩니다.ReportControl이 Board 사이즈와 동일하기 때문에 화면상에서 보드를 선택하기가 쉽지 않습니다.그래서 ReportControl이 선택된 상태에서 ‘ESC’키를 누르면 상위 컨테이너인 Board가 선택됩니다.

생성된 ozc 파일은 화면 디자인할 때 팝업 메뉴에서 ‘컴포넌트 가져오기’ 메뉴를 통해 추가할 수 있습니다. 또한 스크립트상에서 동적으로 추가할 때 보드인 경우에는 _ImportNewBoard 함수를 사용할 수 있고, 일반

컴포넌트를 추가할 경우에는 ImportNewChild, _ImportNewInvisible 함수를 사용할 수 있습니다.

추후 앞에서 생성한 보드는 다음과 같이 스크립트로 추가됩니다.

var ReportBoard = _ImportNewBoard("ozp://northwind/ozc/ReportBoard.ozc");

ReportControl 컴포넌트에 보고서 파일(ozr)을 보여주는 방법은 11번 “제품 목록” 화면 개발 부분을

참고하시기 바랍니다.

11. 제품 목록 화면 개발

파일명 /northwind/oza/northwind_product.oza보드명 product


‘제품 목록’ 화면은 제품 분류 별로 제품을 조회하는 화면입니다.

제품 목록 보고서를 클릭하면 오즈 리포트로 보고서가 보여집니다.


‘Invisible 컴포넌트’ 창에 앞에서 만든 ‘/northwind/ozs/northwind.ozs’ 파일을 추가합니다. 추가 방법은

‘리파지토리’ 창에서 해당 파일을 더블 클릭하면 됩니다.

‘데이터 정보’ 창에 앞에서 만든 ‘/northwind/odi/northwind_code.odi’와

‘/northwind/odi/northwind_product.odi’를 추가합니다. 추가 방법은 ‘리파지토리’ 창에서 해당 파일을

더블 클릭하면 됩니다.

추가된 northwind_code.odi를 클릭한 후 속성 창에 아래와 같이 설정하세요.컴포넌트 속성 값 설명

northwind_code

ODIFetchUnitDM_PER_DATAMODULE

ODIFetchUnit이 ‘DM_PER_DATASET’ 이면 데이터셋 별로 서버에

요청을 하지만, ‘DM_PER_DATAMODULE’ 이면 odi 단위로 한번에

서버에 요청을 합니다. 예를 들어, northwind_code.odi의

ODIFetchUnit이 ‘DM_PER_DATAMODULE’ 이면 categories


셋을 조회할 때 suppliers 까지 한번에 서버에서 조회되어

가져옵니다.한번에 가져와도 되는 조건 필드들의 코드성 데이터 들은

‘DM_PER_DATAMODULE’으로 설정하는게 좋지만, 조건에 따라

검색되는 데이터셋은 해당 셋만 조회되도록 ‘DM_PER_DATASET’으로 설정하는 것이 좋습니다.

컴포넌트 트리에서 Document를 선택한 후 아래와 같이 이벤트를 설정하세요.컴포넌트 이벤트 값 설명

Document

GlobalFunction

이벤트

// mainScript 전역변수에 northwind.oza의 스크립트를

가져옵니다.

var mainScript;var mainDocument = Document._GetDocument("/northwind/oza/northwind.oza");if(mainDocument != null){

mainScript = mainDocument._GetGlobalScript();}else{ // northwind.oza가 뷰어에 로딩되지 않은 경우

현재 oza에 ozf를 import

var category_array = new Array();var item_array = new Array();category_array[0] = "/northwind/ozf";item_array[0] =

"northwind_common.ozf";mainScript =

_GetFunctionObject(category_array,item_array);}

현재 oza에 사용할 ozf 파일을 추가할 수 있지만

스크립트 파싱 횟수를 줄이기

위해 northwind.oza에 있는

스크립트(ozf, globalfunction)를 가져오는

방법입니다. northwind.oza에서 미리보기 할 때는

northwind.oza의

스크립트를 가져와

northwind_product.oza에서 사용하고, northwind_product.oza에서 미리보기 할 때는

동적으로 ozf 파일을

추가하는 스크립트 입니다.

Board1 이름을 ‘product’로 변경하고 아래와 같이 속성과 이벤트를 설정하세요.컴포넌트 속성 값 설명

product AutoDelete Trueproduct 화면이 사라질 때 뷰어내에서 보드를 삭제합니다. True로 설정한

이유는 화면을 띄울 때 마다 초기화 이벤트(OnInitialize, OnPostInitialize) 가 다시 발생하도록 하기 위해서입니다.

product Size 730, 453 Width, Height 설정


product OnInitialize 이벤트

// 보드가 뜰 때 한번만 코드값 설정됨.

ComboBox1.FillItem("northwind_code", categories 데이터셋의


"categories", null, "CategoryName", "CategoryID");ComboBox1.InsertItem("0", "-전체-");

ComboBox1.SelectedIndex = 0;

데이터를 가져와서 ‘제품

분류’ 콤보박스 아이템에

추가합니다.

화면을 아래와 같이 그립니다.

화살표의 텍스트는 스타일 이름입니다.

[참고] 스타일 적용 방법

컴포넌트의 속성창에 ‘Style’ 속성을 클릭하여 ozs 파일내의 스타일로 설정할 수 있습니다. 또는 ‘Invisibles 컴포넌트’창에서 해당 스타일을 적용할 컴포넌트로 Drag&Drop 해서 설정할 수 있습니다.

테이블 그리는 방법은 화면에 ‘Table’ 컴포넌트를 추가한 후에 ‘Table1’의 속성창에서 ‘ODIKey’를

‘northwind_product’로 선택하고 ‘DataSet’에 ‘listOfProduct’를 선택합니다.

picturebox_titleicon

label

label_info button

picturebox_labelicon

label_backgridcelltit

le1gridcelltitle2

gridcellcheckbox

gridcelllabel_num

gridcelllabel_left

gridcelllabel_center


화면에서 테이블의 팝업 메뉴에서 ‘마법사’를 클릭하세요.

‘선택한 필드’에 아래 그림처럼 추가하세요.

각 필드는 TableItem 컴포넌트로 참조가 가능합니다.TableItem 속성창에서 아래와 같이 설정합니다.


ProductID SortType Numeric 테이블에서 해당 필드의 정렬 타입을 숫자로 설정

ProductName SortType Text 테이블에서 해당 필드의 정렬 타입을 문자로 설정

CategoryName SortType Text 테이블에서 해당 필드의 정렬 타입을 문자로 설정

QuantityPerUnit SortType Text 테이블에서 해당 필드의 정렬 타입을 문자로 설정

UnitsInStock SortType Numeric 테이블에서 해당 필드의 정렬 타입을 숫자로 설정

UnitPrice SortType Numeric 테이블에서 해당 필드의 정렬 타입을 숫자로 설정

Discontinued SortType Text 테이블에서 해당 필드의 정렬 타입을 문자로 설정

Discontinued ColumnType CheckBox 테이블 셀에 체크박스로 표시함

컴포넌트들의 스타일을 설정한 후에 아래와 같이 각 컴포넌트의 속성을 설정하세요.컴포넌트 속성 값 설명

타이틀 아이콘 Location 10, 10 X, Y 좌표 설정


PictureBox1‘제품 목록’ Label1 Location 30, 10 X, Y 좌표 설정

Button_search (조회버튼)

Location 58, 22 X, Y 좌표 설정



배경 Label2 Location 10, 40 X, Y 좌표 설정

배경 Label2 Size 700, 30 Width, Height 설정

‘제품 분류’

ComboBox1AutoSelect True 편집 중 가장 유사한 Item을 자동 선택해 줍니다.

‘제품 분류’

ComboBox1Size 156, 20 Width, Height 설정

‘내용’ TextBox1 ReadOnly True 편집이 안되도록 설정

‘내용’ TextBox1 TextColor 128, 128, 128 글자색 회색으로 설정

‘내용’ TextBox1 TextVAlign Middle 텍스트의 세로 정렬을 가운데로 설정

‘내용’ TextBox1 Size 224, 20 Width, Height 설정

‘내용’ TextBox1 ODIKeynorthwind_code

컴포넌트에 보여줄 데이터셋의 ODI명 설정

‘내용’ TextBox1 DataSet categories 컴포넌트에 보여줄 데이터셋 설정

‘내용’ TextBox1 Field Description 컴포넌트에 보여줄 데이터 필드 설정

하단 Label5 Location 10, 434 X, Y 좌표 설정

하단 Label5 Size 240, 20 Width, Height 설정

하단 Label5 Anchor Bottom, Left부모 컨테이너(product Board)의 테두리에서 라벨의

상대 위치를 고정 시키기 위한 방향 설정. 화면이

resize될 때 왼쪽 하단으로 보여지게 됩니다.

Table1SelectedCellColor

232, 235, 240테이블을 마우스로 클릭했을 때 선택된 라인의

배경색을 연한 회색으로 설정합니다.Table1 ShowIndicator False 테이블 맨 앞의 index를 보여주는 셀을 감춥니다.

Table1 Cursor - Type Hand테이블 위에 마우스가 올라가 있을 때 마우스 커서를

손모양으로 바꿉니다. 테이블을 클릭했을 때 어떤

엑션이 있다는 표시를 하기 위함입니다.Table1 Location 10, 80 X, Y 좌표 설정

Table1 Size 718, 353 Width, Height 설정

Table1 AnchorTop, Bottom, Left

부모 컨테이너(product Board)의 테두리에서

테이블의 상대 위치를 고정 시키기 위한 방향을 설정. 화면이 resize될 때 밑으로 같이 늘어납니다.

각 컴포넌트의 이벤트를 아래와 같이 설정하세요.




OnClick

// 제품 분류에 따른 제품 조회

var datamanager = _GetDataManager();var datamodule = datamanager.GetDataModule("northwind_product");datamodule.UpdateOZParam("categoryId", ComboBox1.SelectedItemValue);var dataset = datamodule.GetDataSet("listOfProduct", null, true);

northwind_product.odi의

categoryId 패러미터 값을

콤보의 선택되어 있는 값으로

업데이트 한 후에

listOfProduct 데이터셋을

다시 조회하는 스크립트

입니다.

ComboBox1

OnSelectedIndexChanged

// 제품 분류에 따라 내용이 변경되게 하기 위해 커서를

변경합니다.

var DataSet = _GetDataManager().GetDataModule("northwind_code").GetDataSet("categories");DataSet.SetCurrentRowIndex(This.SelectedIndex-1, true);

// 조회 버튼의 OnClick 이벤트가 발생하도록 합니다.

Button_search.TriggerEvent(EventNameConst.OnClick);

데이터셋의 커서가 변경되면

동일 데이터셋을 사용하는

컴포넌트의

SynchronizeToDate 속성값이 True면 해당

커서의 값으로 자동

변경됩니다. (커서 개념은

쉽게 row index 로 생각할

수 있습니다.)

TriggerEvent함수는 특정

이벤트를 스크립트로 발생할

수 있게 합니다. 콤보박스의

선택된 값이 변경되면

조회버튼이 눌려서 다시 제품

목록이 조회됩니다.

Table1

OnPostDataSetChanged

Label_totalCount.Value = "(총 " + This.GetRowCount()+ "

건)";

테이블에 보여지는 데이터가

변경될 때 마다

OnPostDataSetChanged 이벤트가 발생합니다. 이때

총 건수를 테이블 라인수로

다시 설정합니다.Table1 OnLDo

ubleClick

// 테이블에서 선택된 제품번호

var selectedProductID = This.GetCell(This.GetCurrentRow, 0).Value;

// '제품 상세' 팝업 띄우기

var Values = new Array();

테이블에서 왼쪽 마우스를

더블 클릭하면 선택된 row의

제품 상세 정보를 팝업에

띄우는 스크립트 입니다.팝업 보드로 넘길 값을

배열에 설정합니다.


Values[0] = "/northwind/oza/northwind_product.oza"; // o

pener 이름

Values[1] = selectedProductID; // 팝업에 넘길 데이터

mainScript.openPopup(This.GetBoard(), "/northwind/oza/n

orthwind_productDetail.oza", "productDetail", "제품 상세",

Values);

openPopup 함수는 northwind

_common.ozf에 정의되어

있습니다.

[참고] 상수

F1키를 눌러 ‘스크립트 도움말’을 보시면 ‘목차’ 탭에 ‘Constant’라고 있습니다. 여기에 속성값이나 이벤트명

등 스크립트에서 설정할 값을 미리 정의해 놓았습니다.아래 두 줄은 같은 뜻이지만 두 번째 줄은 속성에 없는 값을 잘못 설정할 수도 있기 때문에 첫 번째 줄처럼

상수를 이용하는 것이 바람직합니다.Label1.TextAlign = AlignmentConst.MiddleCenter;Label1.TextAlign = "MiddleCenter";

다음은 테이블에 출력된 데이터를 인쇄나 다른 포맷으로 저장하기 위해 오즈 리포트로 출력하는 방법입니다.

아래 스크립트로 앞에서 만든 ReportBoard.ozc파일을 현재 oza에 추가한 다음 ReportControl에 보여줄

ozr파일과 리포트 뷰어 패러미터를 설정할 수 있습니다.컴포넌트 이벤트 값

Button_report(제품목록보고

서 버튼)

OnClick // ReportControl이 있는 보드를 현재 oza에 추가

var ReportBoard = _ImportNewBoard("ozp://northwind/ozc/ReportBoard.ozc");var ReportControl = ReportBoard.GetChild("ReportControl1");

//Parameter 초기화

ReportControl.InitUserParameter();

// 보고서 설정

ReportControl.ReportViewerURL = "ozp://northwind/ozr/northwind_product.ozr";// 보고서에서 사용하는 ODI 파라미터 설정

ReportControl.AddReportParameter("odi.odinames","northwind_product");ReportControl.AddReportParameter("information.debug","true");ReportControl.AddReportParameter("odi.northwind_product.pcount","1");ReportControl.AddReportParameter("odi.northwind_product.args1","categoryId=" + ComboBox1.SelectedItemValue);

// 미리보기


ReportControl.AddReportParameter("viewer.isframe", "false");ReportControl.AddReportParameter("viewer.mode", "preview");ReportControl.ApplyReport();

// 제품 목록 보고서 화면을 팝업으로 띄우기

This.GetBoard().ShowDialog(ReportBoard.Name, "제품 목록 보고서", false, 0, 0, true, true, true);

12. 제품 상세 ODI 개발


스토어 추가







‘Member’ 창에 ‘productId’ 라고 입력하고 ‘확인’ 버튼을 누르세요.


‘northwind_conn’의 팝업 메뉴에서 ‘데이터 셋 추가’를 클릭하세요.‘데이터 셋 이름’ 에 ‘detailOfProduct’ 라고 입력합니다.

데이터 셋의 속성창에 ‘스크립트 사용’을 ‘True’로 설정합니다. 스크립트로 쿼리문을 설정하는 이유는 productI

d가 패러미터로 넘어오지 않는 경우 WHERE 구문을 작성하지 않기 위해 필요합니다.




아래과 같이 입력한 후 F5번을 눌러 쿼리를 실행합니다.string query;string productId;

productId = #OZParam.productId#;

if (#OZParam.productId# == "") {productId = "0";

}

query = "SELECT * FROM Products WHERE ProductID = " + productId;


이 쿼리문은 productId 패러미터에 해당하는 제품 상세 정보(‘제품 번호’, ‘제품 이름’, ‘공급업체 번호’, ‘제품분류 번호’, ‘포장 단위’, ‘단가’, ‘재고량’, ‘발주량’, ‘추가발주량’, ‘단종품’)를 조회합니다.

‘저장’ 버튼을 클릭한 후에 “C:\Repository\northwind\odi\northwind_productDetail.odi” 로

저장합니다.

13. 제품 상세 화면 개발파일명 /northwind/oza/northwind_productDetail.oza보드명 productDetail


‘제품 상세’ 화면은 제품 목록에서 선택한 제품에 대해 상세 정보를 보여주는 화면입니다. 또한 제품 정보를

수정하고 삭제할 수도 있습니다.





‘/northwind/odi/northwind_productDetail.odi’, ‘/northwind/odi/dataaction.odi’ 를 추가합니다. 추가

방법은 ‘리파지토리’ 창에서 해당 파일을 더블 클릭하면 됩니다.

추가된 northwind_code.odi를 클릭한 후 속성 창에 아래와 같이 설정하세요.컴포넌트 속성 값 설명

northwind_code





ODIFetchUnit이 ‘DM_PER_DATAMODULE’ 이면 categories 셋을 조회할 때 suppliers 까지 한번에 서버에서 조회되어

가져옵니다.

한번에 가져와도 되는 조건 필드들의 코드성 데이터 들은




컴포넌트 트리에서 Document를 선택한 후 아래와 같이 이벤트를 설정하세요.컴포넌트 이벤트 값 설명

Document

GlobalFunction

이벤트


가져옵니다.











방법입니다. northwind.oza에서 미리보기 할 때는

northwind.oza의





Board1 이름을 ‘productDetail’로 변경하고 아래와 같이 속성과 이벤트를 설정하세요.


productDetail Size 352, 364 Width, Height 설정

[참고] UserValue와 OnUserEvent컴포넌트마다 UserValue 속성과 OnUserEvent 이벤트가 있습니다. UserValue 속성은 해당 컴포넌트에

대해 사용자가 임의로 값을 설정할 때 사용합니다. 속성값은 숫자, 문자, 배열 모두 가능합니다. OnUserEvent는 TriggerEvent 함수로 호출되는 사용자 이벤트입니다.

앞서 ‘제품 목록’ 화면의 테이블에서 마우스를 더블 클릭할 때 openPopup 함수가 호출되는데, openPopup 함수에서는 팝업을 띄우고 opener 보드에서 설정한 패러미터 값을 popup 보드에 설정하고 popup 보드의

OnUserEvent를 호출합니다. 즉, ‘제품 목록’에서 선택된 제품 ID로 팝업을 띄울 때 조회한 후 ‘제품 상세’

팝업에 보여줍니다.


컴포넌트 이벤트 값

productDetail

OnUserEvent

// opener에서 넘겨온 값 확인

if (This.UserValue == null || This.UserValue.length != 2) {

_MessageBox("팝업창의 조건값이 존재하지 않습니다.", "경고");

return;

}

// opener 보드가 supplier 인 경우만 수정,삭제 버튼 보여줌

else if (This.UserValue[0] == "/northwind/oza/northwind_supplier.oza") {

Button_update.Visible = true;

Button_delete.Visible = true;} else {

Button_update.Visible = false;Button_delete.Visible = false;

}

// 제품 상세 조회

if (This.UserValue[1] != "") {var datamanager = _GetDataManager();var datamodule =

datamanager.GetDataModule("northwind_productDetail");datamodule.UpdateOZParam("productId", This.UserValue[1]);var dataset = datamodule.GetDataSet("detailOfProduct", null, true);

// 조회결과가 1건이면 조회된 ID 데이터로 '공급 업체' 콤보, '제품 분류'

콤보박스를 선택함

if (dataset.GetRowCount() == 1) {ComboBox_Supplier.SelectedItemValue =

dataset.GetStringData(0, "SupplierID");ComboBox_Category.SelectedItemValue =

dataset.GetStringData(0, "CategoryID");}

} else {

_MessageBox("제품번호가 존재하지 않습니다.", "경고");

}

보드 위에 컴포넌트들을 그린 후 ‘제품 목록’ 화면에서와 같이 스타일을 적용하시기 바랍니다.

TextBox_productID

TextBox1

ComboBox_SupplierComboBox_Category

TextBox2

TextBox3

TextBox4

TextBox5

TextBox6

CheckBox1

Button_close

Button_update

Button_delete


화살표의 텍스트는 입력 컴포넌트 명입니다. 컴포넌트 명을 변경한 다음 아래와 같이 속성을 설정하세요.컴포넌트 속성 값 설명

TextBox 모두 TextVAlign Middle 텍스트의 세로 정렬을 가운데로 설정

TextBox_productID Size 92, 20 Width, Height 설정

TextBox, CheckBox 모두

ODIKey northwind_productDetail 컴포넌트에 보여줄 데이터셋의 ODI명 설정

TextBox, CheckBox 모두

DataSet detailOfProduct 컴포넌트에 보여줄 데이터셋 설정

TextBox_productID Field ProductID 컴포넌트에 보여줄 데이터 필드 설정

TextBox1 Field ProductName 컴포넌트에 보여줄 데이터 필드 설정

TextBox2 Field QuantityPerUnit 컴포넌트에 보여줄 데이터 필드 설정

TextBox3 Field UnitPrice 컴포넌트에 보여줄 데이터 필드 설정

TextBox4 Field UnitsInStock 컴포넌트에 보여줄 데이터 필드 설정

TextBox5 Field UnitsOnOrder 컴포넌트에 보여줄 데이터 필드 설정

TextBox6 Field ReorderLevel 컴포넌트에 보여줄 데이터 필드 설정

CheckBox1 Field Discontinued 컴포넌트에 보여줄 데이터 필드 설정

ComboBox 모두 AutoSelect True편집 중 가장 유사한 Item을 자동 선택해

줍니다.ComboBox 모두 ODIKey northwind_code 컴포넌트에 보여줄 데이터셋의 ODI명 설정

ComboBox_Supplie DataSet suppliers 컴포넌트에 보여줄 데이터셋 설정


rComboBox_Supplier

Field CompanyName 콤보에 텍스트로 보여줄 필드 설정

ComboBox_Supplier

ValueField SupplierID 콤보의 값 필드 설정(보이지는 않음)

ComboBox_Category

DataSet categories 컴포넌트에 보여줄 데이터셋 설정

ComboBox_Category

Field CategoryName 콤보에 텍스트로 보여줄 필드 설정

ComboBox_Category

ValueField CategoryID 콤보의 값 필드 설정(보이지는 않음)

‘수정’ 버튼(Button_update)의 OnClick 이벤트에 아래와 같이 작성하세요.

아래 스크립트는 배열에 입력 컴포넌트들의 값을 넣은 후에 ‘northwind_dataaction.ozf’ 의 saveData 함수로 배열 값과 수정할 DB 테이블 명을 넘겨서 제품 정보를 수정하는 스크립트 입니다.

_BeginWaitCursor(); // 마우스 커서를 모래시계로 바꿈

var i=0;

var s_fields = new Array(); // 입력 필드 Array

var s_values = new Array(); // 입력 값 Array

var t_fields = new Array(); // 조건 필드 Array

var t_values = new Array(); // 조건 값 Array

s_fields[i] = "ProductName"; s_values[i++] = mainScript.to_char( TextBox1.Value );

s_fields[i] = "SupplierID"; s_values[i++] = ComboBox_Supplier.SelectedItemValue;s_fields[i] = "CategoryID"; s_values[i++] = ComboBox_Category.SelectedItemValue;s_fields[i] = "QuantityPerUnit"; s_values[i++] = mainScript.to_char( TextBox2.Value );s_fields[i] = "UnitPrice"; s_values[i++] = TextBox3.Value;s_fields[i] = "UnitsInStock"; s_values[i++] = TextBox4.Value;s_fields[i] = "UnitsOnOrder"; s_values[i++] = TextBox5.Value;s_fields[i] = "ReorderLevel"; s_values[i++] = TextBox6.Value;if (CheckBox1.Value == "TRUE") {

s_fields[i] = "Discontinued"; s_values[i++] = "Yes";} else {

s_fields[i] = "Discontinued"; s_values[i++] = "No";}


i=0;t_fields[i] = "ProductID"; t_values[i++] = TextBox_productID.Value;

var result = mainScript.saveData("UPDATE", s_fields, s_values, t_fields, t_values, "Products"); // 저장

// 결과 확인

if(result==""){_MessageBox("성공하였습니다.");

// 오프너보드의 조회버튼의 OnClick 이벤트 호출

var openerOZAName = This.GetBoard().UserValue[0];var otherDocument = Document._GetDocument(openerOZAName);if(otherDocument) {

otherDocument._GetBoardAt(0).GetChild("Button_search").TriggerEvent(EventNameConst.OnClick);}

}else{

_MessageBox("실패하였습니다.\n"+result);

}

_EndWaitCursor(); // 마우스 커서를 화살표로 바꿈

‘삭제’ 버튼(Button_delete)의 OnClick 이벤트에 아래와 같이 작성하세요.

아래 스크립트는 배열에 제품 ID 값을 넣은 후에 ‘northwind_dataaction.ozf’ 의 saveData 함수로 배열

값과 삭제할 DB 테이블 명을 넘겨서 제품 정보를 삭제하는 스크립트 입니다.


var i=0;

var t_fields = new Array(); // 조건 필드 Array

var t_values = new Array(); // 조건 값 Array

t_fields[i] = "ProductID"; t_values[i++] = TextBox_productID.Value;

var result = mainScript.saveData("DELETE", null, null, t_fields, t_values, "Products"); // 저장


// 결과 확인

if(result==""){

_MessageBox("성공하였습니다.");

// 오프너보드의 조회버튼의 OnClick 이벤트 호출

var openerOZAName = This.GetBoard().UserValue[0];var otherDocument = Document._GetDocument(openerOZAName);if(otherDocument) {

otherDocument._GetBoardAt(0).GetChild("Button_search").TriggerEvent(EventNameConst.OnClick);}

}else{


}


‘닫기’ 버튼(Button_close)의 OnClick 이벤트에 아래와 같이 작성하세요.팝업 창을 닫는 스크립트 입니다.

This.GetBoard().OkDialog();

14. 공급업체 ODI 개발


스토어 추가







‘northwind_conn’의 팝업 메뉴에서 ‘데이터 셋 추가’를 클릭하세요.‘데이터 셋 이름’ 에 ‘suppliers’ 라고 입력합니다.




SELECT * FROM Suppliers ORDER BY CompanyName

이 쿼리문은 공급업체 정보를 조회합니다.


‘northwind_conn’의 팝업 메뉴에서 ‘데이터 셋 추가’를 클릭하세요.‘데이터 셋 이름’ 에 ‘productBySupplier’ 라고 입력합니다.

‘productBySupplier’ 데이터 셋의 속성 창에 ‘마스터셋’을 ‘suppliers’로 설정합니다.마스터 셋을 설정하는 이유는 ‘suppliers’ 데이터 셋의 결과에 따라 제품 목록이 자동으로 조회되도록 하기

위해서 입니다.





select * from products where supplierID = #suppliers.SupplierID#

이 쿼리문은 마스터 셋의 ‘SupplierID’에 해당되는 ‘제품’ 데이터를 조회합니다.

‘저장’ 버튼을 클릭한 후에 “C:\Repository\northwind\odi\ northwind_supplier.odi” 로

저장합니다.

15. 공급업체 화면 개발

파일명 /northwind/oza/northwind_supplier.oza보드명 supplier

‘공급업체’ 화면은 제품을 공급하는 회사 목록을 조회한 후에 특정 공급업체의 상세 정보를 보여주는


화면입니다. 또한 특정 공급업체가 제공하는 제품 목록을 보여줍니다.

‘공급업체 별 제품 목록’을 더블 클릭하면 ‘제품 상세’ 팝업이 뜹니다.





‘/northwind/odi/northwind_supplier.odi’, ‘/northwind/odi/dataaction.odi’ 를 추가합니다. 추가 방법은


추가된 northwind_code.odi를 클릭한 후 속성 창에 아래와 같이 설정하세요.


northwind_code






가져옵니다.




컴포넌트 트리에서 Document를 선택한 후 아래와 같이 이벤트를 설정하세요.


Document

GlobalFunction

이벤트


가져옵니다.






방법입니다. northwind.oza







에서 미리보기 할 때는

northwind.oza의





Board1 이름을 ‘supplier’로 변경하고 아래와 같이 속성과 이벤트를 설정하세요.


product AutoDelete Trueproduct 화면이 사라질 때 뷰어내에서 보드를 삭제합니다. True로 설정한


product Size 730, 453 Width, Height 설정

‘공급업체’ 목록 테이블 그리는 방법은 화면에 ‘Table’ 컴포넌트를 추가한 후에 ‘Table1’의 속성창에서

‘ODIKey’를 ‘northwind_supplier’로 선택하고 ‘DataSet’에 ‘suppliers’를 선택합니다.

화면에서 테이블의 팝업 메뉴에서 ‘마법사’를 클릭하세요.‘선택한 필드’에 아래 그림처럼 추가하세요.


‘공급업체 별 제품 목록’ 테이블 그리는 방법은 화면에 ‘Table’ 컴포넌트를 추가한 후에 ‘Table1’의

속성창에서 ‘ODIKey’를 ‘northwind_supplier’로 선택하고 ‘DataSet’에 ‘productBySupplier’를

선택합니다.

화면에서 테이블의 팝업 메뉴에서 ‘마법사’를 클릭하세요.‘선택한 필드’에 아래 그림처럼 추가하세요.

‘제품 목록’ 화면에서와 같이 스타일을 설정한 후에 아래와 같이 각 컴포넌트의 속성을 설정하세요.컴포넌트 속성 값 설명

모든 텍스트 박스 ReadOnly True 편집이 안되도록 설정


모든 텍스트 박스 ODIKeynorthwind_supplier


모든 텍스트 박스 DataSetnorthwind_supplier

컴포넌트에 보여줄 데이터셋 설정

‘공급업체번호’ TextBox Field SupplierID 컴포넌트에 보여줄 데이터 필드 설정

‘회사이름’ TextBox Field CompanyName 컴포넌트에 보여줄 데이터 필드 설정

‘담당자 이름’ TextBox Field ContactName 컴포넌트에 보여줄 데이터 필드 설정

‘직위’ TextBox Field ContactTitle 컴포넌트에 보여줄 데이터 필드 설정

‘주소’ TextBox Field Address 컴포넌트에 보여줄 데이터 필드 설정

‘우편 번호’ TextBox Field PostalCode 컴포넌트에 보여줄 데이터 필드 설정

‘도시’ TextBox Field City 컴포넌트에 보여줄 데이터 필드 설정

‘지역’ TextBox Field Region 컴포넌트에 보여줄 데이터 필드 설정

‘국적’ TextBox Field Country 컴포넌트에 보여줄 데이터 필드 설정

‘전화 번호’ TextBox Field Phone 컴포넌트에 보여줄 데이터 필드 설정

‘팩스 번호’ TextBox Field Fax 컴포넌트에 보여줄 데이터 필드 설정

‘홈페이지’ TextBox Field HomePage 컴포넌트에 보여줄 데이터 필드 설정

HNavigator1 Location 192, 146 X, Y 좌표 설정

HNavigator1 Size 328, 24 Width, Height 설정

HNavigator1LinkComponentName

Table1Navigator에 연결되는 테이블명. Table1(공급업체목록)에 FixCount 개수만큼 한 페이지에

보여짐.

Table1ShowIndicator

False 테이블 맨 앞의 index를 보여주는 셀을 감춥니다.

Table1 Location 10, 36 X, Y 좌표 설정


Table1 RowAutosize FixCount 테이블에 고정된 개수만큼 보여주도록 함.

Table1 RowCount 5 테이블에 한 화면에 보여지는 개수 설정

Table1FireRowCursorChange

True

테이블에서 선택된 row가 달라질 경우 테이블의

데이터셋과 같은 데이터셋 필드로 설정된

컴포넌트들의 값이 바뀌게 됩니다. 또한 마스터-디테일 구조에서는 디테일셋도 다시 조회됩니다.이 화면에서는 공급업체 목록을 클릭할 때 자동으로

선택된 공급업체 상세정보가 하단 텍스트 박스에

보여지고 선택된 공급업체의 제품 목록이 하단

테이블에 보여지도록 하는 기능입니다.Table2 Location 10, 352 X, Y 좌표 설정



각 컴포넌트의 이벤트를 아래와 같이 설정하세요.컴포넌트 이벤트 값 설명

Table1OnPostDataSetChanged

Label_totalCount1.Value = "(총 " + This.GetDataSet().Get

RowCount()+ " 건)";

테이블에 보여지는

데이터가 변경될 때 마다

OnPostDataSetChanged 이벤트가 발생합니다. 이때 총 건수를 테이블

라인수로 다시 설정합니다.


Label_totalCount2.Value = "(총 " + This.GetRowCou

nt()+ " 건)";

라벨의 총 건수를 두번째

테이블 라인수로 다시

설정합니다.

Table2OnLDoubleClick

// 테이블에서 선택된 제품번호




Values[0] = "/northwind/oza/northwind_supplier.oz

a"; // opener 이름

Values[1] = selectedProductID; // 팝업에 넘길

데이터

mainScript.openPopup(This.GetBoard(), "/northwind

/oza/northwind_productDetail.oza", "productDetail",

"제품 상세", Values);


더블 클릭하면 선택된 row의 제품 상세 정보를

팝업에 띄우는 스크립트

입니다.팝업 보드로 넘길 값을

배열에 설정합니다.openPopup 함수는 northwi

nd_common.ozf에

정의되어 있습니다.

Button_save

OnClick

var datamanager = _GetDataManager();var datamodule = datamanager.GetDataModule("northwind_supplier");var dataset = datamodule.GetDataSet("productBySupplier", null, true);

제품 목록을 다시

조회합니다.

Button_add

OnClick This.GetBoard().ShowDialog("productInsert", "제품

입력", false, 0, 0, true, true, true);

// 팝업보드에 opener보드명 설정

productInsert.UserValue =

‘제품 추가’ 버튼을

클릭하면 ‘제품 추가’

팝업이 뜨는 스크립트

입니다.팝업 보드에 현재


This.GetBoard().Name; 보드이름을 설정합니다.

16. 제품 추가 화면 개발

파일명 /northwind/oza/northwind_supplier.oza보드명 productInsert

‘제품 입력’ 화면은 공급업체 대해 제품 정보를 추가하는 화면입니다.

‘/northwind/oza/northwind_supplier.oza’를 여시고 ‘파일’ 메뉴에서 ‘새 보드 추가’를 클릭하세요.

Board1 이름을 ‘productInsert’ 로 변경하고 아래와 같이 속성과 이벤트를 설정하세요.


productInsert ManageType - Type AutoproductInsert 명을 참조할 때 자동

로딩됩니다.

productInsertManageType - SaveType

AutoSavenorthwind_supplier.oza를

디자이너에서 수정 후 저장할 때 ozc 파일에도 반영됩니다.

productInsertManageType -Category

/northwind/ozc ozc 경로

productInsert ManageType -Itemnorthwind_productInsert.ozc

ozc 이름


productInsert Size 352, 348 Width, Height 설정

[참고] ManageType이 무엇인가요?ManageType에는 None, Auto, Manual이 있습니다. 일반적으로 컴포넌트를 추가하면 None으로 되어 있습니다. Auto나 Manual인 경우에는 item의 ozc 파일로 컴포넌트가 존재하며 현재 oza에는 이 ozc의 링크 정보만

존재하게 됩니다.Auto인 경우에는 해당 컴포넌트명을 참조할 때 자동으로 ozc가 현재 oza에 로드되지만 Manual인 경우에는

_ImportNewBoard, ImportNewChild 함수를 이용해야 oza에 로드됩니다. ManageType의 SaveType은 현재 oza를 저장할 때 ozc에 자동으로 반영할지 여부입니다.ManageType의 Category는 ozc파일이 저장되는 위치입니다. (작업폴더 기준)ManageType의 Item은 컴포넌트가 저장되는 ozc 파일명입니다.

보드 위에 컴포넌트들을 그린 후 ‘제품 목록’ 화면에서와 같이 스타일을 적용하시기 바랍니다.

화살표의 텍스트는 입력 컴포넌트명입니다. 컴포넌트 명을 변경한 다음 아래와 같이 속성을 설정하세요.컴포넌트 속성 값 설명

TextBox 모두 TextVAlign Middle 텍스트의 세로 정렬을 가운데로 설정

제품이름’ TextBox1 Size 224, 20 Width, Height 설정

ComboBox 모두 AutoSelect True 편집 중 가장 유사한 Item을 자동 선택해

TextBox1

ComboBox_SupplierComboBox_Category

TextBox2

TextBox3

TextBox4

TextBox5

TextBox6

CheckBox1

Button_close

Button_save


줍니다.ComboBox 모두 ODIKey northwind_code 컴포넌트에 보여줄 데이터셋의 ODI명 설정

ComboBox_Supplier

DataSet suppliers 컴포넌트에 보여줄 데이터셋 설정

ComboBox_Supplier

Field CompanyName 콤보에 텍스트로 보여줄 필드 설정

ComboBox_Supplier

ValueField SupplierID 콤보의 값 필드 설정(보이지는 않음)

ComboBox_Category

DataSet categories 컴포넌트에 보여줄 데이터셋 설정

ComboBox_Category

Field CategoryName 콤보에 텍스트로 보여줄 필드 설정

ComboBox_Category

ValueField CategoryID 콤보의 값 필드 설정(보이지는 않음)

‘저장’ 버튼(Button_save)의 OnClick 이벤트에 아래와 같이 작성하세요.

아래 스크립트는 배열에 입력 컴포넌트들의 값을 넣은 후에 ‘northwind_dataaction.ozf’ 의 saveData 함수로 배열 값과 입력할 DB 테이블 명을 넘겨서 제품 정보를 신규로 저장하는 스크립트 입니다._BeginWaitCursor(); // 마우스 커서를 모래시계로 바꿈

var i=0;

var s_fields = new Array(); // 입력 필드 Array

var s_values = new Array(); // 입력 값 Array

s_fields[i] = "ProductName"; s_values[i++] = mainScript.to_char( TextBox1.Value );

s_fields[i] = "SupplierID"; s_values[i++] = ComboBox_Supplier.SelectedItemValue;s_fields[i] = "CategoryID"; s_values[i++] = ComboBox_Category.SelectedItemValue;s_fields[i] = "QuantityPerUnit"; s_values[i++] = mainScript.to_char( TextBox2.Value );s_fields[i] = "UnitPrice"; s_values[i++] = TextBox3.Value;s_fields[i] = "UnitsInStock"; s_values[i++] = TextBox4.Value;s_fields[i] = "UnitsOnOrder"; s_values[i++] = TextBox5.Value;s_fields[i] = "ReorderLevel"; s_values[i++] = TextBox6.Value;if (CheckBox1.Value == "TRUE") {

s_fields[i] = "Discontinued"; s_values[i++] = "Yes";} else {

s_fields[i] = "Discontinued"; s_values[i++] = "No";}


var result = mainScript.saveData("INSERT", s_fields, s_values, null, null, "Products"); // 저장

// 결과 확인

if(result==""){

_MessageBox("성공하였습니다.");

var openerBoardName = This.GetBoard().UserValue;

_GetBoard(openerBoardName).GetChild("Button_search").TriggerEvent(EventNameConst.OnClick);}else{


}


‘닫기’ 버튼(Button_close)의 OnClick 이벤트에 아래와 같이 작성하세요.팝업 창을 닫는 스크립트 입니다.This.GetBoard().OkDialog();

‘Ctrl+S’ 버튼을 눌러 ‘/northwind/oza/northwind_supplier.oza’를 저장합니다. ManageType의

SaveType이 AutoSave인 ‘productInsert’ 보드가 ‘C:\Repository\northwind\ozc\northwind_productInsert.ozc’ 파일로 생성되었는지 확인해 보세요.

17. 수주 내역 ODI 개발


스토어 추가








‘Member’ 창에 ‘orderId’ 라고 입력하고 ‘확인’ 버튼을 누르세요.


‘northwind_conn’의 팝업 메뉴에서 ‘데이터 셋 추가’를 클릭하세요.‘데이터 셋 이름’ 에 ‘orders’ 라고 입력합니다.쿼리문 입력, 실행



SELECT Orders.OrderID, Orders.CustomerID, Orders.EmployeeID, Orders.OrderDate, Orders.RequiredDate, Orders.ShippedDate, Orders.ShipVia, Orders.Freight, Orders.ShipName, Orders.ShipAddress, Orders.ShipCity, Orders.ShipRegion, Orders.ShipPostalCode, Orders.ShipCountry, Customers.CompanyName, Customers.Address, Customers.City, Customers.Region, Customers.PostalCode, Customers.CountryFROM Customers INNER JOIN Orders ON Customers.CustomerID = Orders.CustomerIDORDER BY Orders.OrderDate DESC

이 쿼리문은 주문 정보를 조회합니다.


‘northwind_conn’의 팝업 메뉴에서 ‘데이터 셋 추가’를 클릭하세요.‘데이터 셋 이름’ 에 ‘orderDatails’ 라고 입력합니다.

‘orderDatails’ 데이터 셋의 속성 창에 ‘스크립트 사용’을 ‘True’로 설정하세요.





string query;string orderid;

orderid = #OZParam.orderId#;if (orderid == "") {

orderid = "-1";}query = " SELECT DISTINCTROW [Order Details].OrderID, [Order Details].ProductID, Products.ProductName, ";query = query + " [Order Details].UnitPrice, [Order Details].Quantity, [Order Details].Discount, ";query = query + " CCur([Order Details].UnitPrice*[Quantity]*(1-[Discount])/100)*100 AS ExtendedPrice ";query = query + " FROM Products INNER JOIN [Order Details] ON Products.ProductID = [Order Details].ProductID ";query = query + " WHERE [Order Details].OrderID = " + orderid;query = query + " ORDER BY [Order Details].OrderID ";


이 쿼리문은 특정 수주 번호에 해당되는 상세 내역 데이터를 조회합니다.

‘저장’ 버튼을 클릭한 후에 “C:\Repository\northwind\odi\northwind_order.odi” 로 저장합니다.

이번에는 ‘수주 내역’ 화면에 들어가는 코드 정보를 조회하는 ODI를 만들겠습니다.

QueryDesigner의 ‘파일’ 메뉴에서 ‘새로 만들기’를 클릭하세요.

스토어 추가







‘northwind_conn’의 팝업 메뉴에서 ‘데이터 셋 추가’를 클릭하세요.‘데이터 셋 이름’ 에 ‘customers’ 라고 입력합니다.



아래과 같이 입력한 후 F5번을 눌러 쿼리를 실행합니다.SELECT DISTINCT Customers.CustomerID, Customers.CompanyName FROM Customers ORDER BY Customers.CompanyName

이 쿼리문은 콤보에 보여줄 제품 청구 회사 정보를 조회합니다.


‘northwind_conn’의 팝업 메뉴에서 ‘데이터 셋 추가’를 클릭하세요.‘데이터 셋 이름’ 에 ‘employees’ 라고 입력합니다.




아래과 같이 입력한 후 F5번을 눌러 쿼리를 실행합니다.SELECT DISTINCT Employees.EmployeeID, Employees.LastName, Employees.FirstNameFROM Employees

ORDER BY LastName

수식 필드 추가

‘employees’ 데이터 셋의 팝업 메뉴에서 ‘수식 필드 추가’를 클릭하세요.

‘수식필드이름’에 ‘Salesperson’ 라고 넣고, ‘스크립트’에 아래와 같이 작성하세요.

setFieldData(#employee.LastName# + ", " + #employee.FirstName#);

‘확인’ 버튼을 누른 후 F5번을 눌러 쿼리를 실행합니다.이 쿼리문은 콤보에 보여줄 직원 데이터를 조회합니다.


‘northwind_conn’의 팝업 메뉴에서 ‘데이터 셋 추가’를 클릭하세요.‘데이터 셋 이름’ 에 ‘products’ 라고 입력합니다.



아래과 같이 입력한 후 F5번을 눌러 쿼리를 실행합니다.SELECT DISTINCT Products.ProductID, Products.ProductName, Products.UnitPrice FROM ProductsWHERE Products.Discontinued = FalseORDER BY Products.ProductName

이 쿼리문은 콤보에 보여줄 제품 데이터를 조회합니다.


‘저장’ 버튼을 클릭한 후에 “C:\Repository\northwind\odi\northwind_order_code.odi” 로

저장합니다.

18. 수주 목록 화면 개발

파일명 /northwind/oza/northwind_order.oza보드명 order


‘수주목록’ 화면은 제품 주문 목록을 보여주는 화면입니다. 목록을 더블 클릭하면 ‘수주내역’ 화면으로

이동합니다.




‘데이터 정보’ 창에 앞에서 만든 ‘/northwind/odi/dataaction.odi’ 와

‘/northwind/odi/northwind_order_code.odi’, ‘/northwind/odi/northwind_order.odi’ 를 추가합니다. 추가 방법은 ‘리파지토리’ 창에서 해당 파일을 더블 클릭하면 됩니다.

추가된 northwind_order_code.odi를 클릭한 후 속성 창에 아래와 같이 설정하세요.


northwind_order_code






가져옵니다.




컴포넌트 트리에서 Document를 선택한 후 ‘GlobalFunction’ 이벤트에 아래와 같이 작성하세요.

여기 선언된 함수와 변수는 northwind_order.oza 내의 다른 컴포넌트에서 사용할 수 있습니다./*

Products.ProductID, Products.UnitPrice 정보를 배열에 저장

*/

var productsUnitPrice = new Array();

var DataModule = _GetDataManager().GetDataModule("northwind_order_code");

var DataSet = DataModule.GetDataSet("products");

DataSet.BeforeFirst();while(DataSet.Next()) {


productsUnitPrice[DataSet.GetCurStringData("ProductID")] = DataSet.GetCurStringData("UnitPrice");}

/*

mainScript 전역변수에 northwind.oza의 스크립트를 가져옵니다.

*/var mainScript;var mainDocument = Document._GetDocument("/northwind/oza/northwind.oza");if(mainDocument != null){

mainScript = mainDocument._GetGlobalScript();}else{ // northwind.oza가 뷰어에 로딩되지 않은 경우 현재 oza에 ozf를 import

var category_array = new Array();var item_array = new Array();category_array[0] = "/northwind/ozf";item_array[0] = "northwind_common.ozf";category_array[1] = "/northwind/ozf";item_array[1] = "northwind_dataaction.ozf";mainScript = _GetFunctionObject(category_array,item_array);

}

/*

"제품 이름" 변경시 "단가" 설정, "포장 단위 가격" 재계산

*/function changeProductInfo(row, col, newValue) {

var ComboBox = _GetBoard("orderDetails").GetChild("ComboBox_hiddenProducts")var productID;var comboIndex = ComboBox.FindStringExact( newValue );if (comboIndex >= 0) {

productID = ComboBox.GetItemObject( comboIndex ).ItemValue;}

calcData(row, col, productID);

}

/*

"단가"/"수량"/"할인율" 변경시 "포장 단위 가격" 재계산

*/


function calcData(row, col, newValue) {var Table = _GetBoard("orderDetails").GetChild("Table1");

var unitPrice = 0;var quantity = 0;var discount = 0;

if (col == 2) { // "제품 이름" 변경된 경우

unitPrice = productsUnitPrice[newValue];quantity = parseInt(Table.GetCellInPage( row , 4).Value);discount = Table.GetCellInPage( row , 5).Value;

} else if (col == 3){ // "단가" 변경된 경우

unitPrice = newValue;quantity = parseInt(Table.GetCellInPage( row , 4).Value);discount = Table.GetCellInPage( row , 5).Value;

} else if (col == 4){ // "수량" 변경된 경우

unitPrice = parseInt(Table.GetCellInPage( row , 3).Value);quantity = newValue;discount = Table.GetCellInPage( row , 5).Value;

} else if (col == 5){ // "할인율" 변경된 경우

unitPrice = parseInt(Table.GetCellInPage( row , 3).Value);quantity = parseInt(Table.GetCellInPage( row , 4).Value);discount = newValue;

}

var extendedPrice = (unitPrice*quantity*(1-discount)/100) * 100;Table.GetCellInPage( row , 3).ApplyValue(unitPrice); // "단가" 재설정 -> DataAction을 위해 Insert

또는 Update 마킹을 합니다.// Table.GetCellInPage( row , 3).Value = unitPrice;

Table.GetCellInPage( row , 6).Value = extendedPrice; // "포장 단위 가격" 재설정

}

/* "수량" 입력값 체크

*/function checkQuantity(cell){

if (cell.Value == "") cell.Value = 1;


if(parseInt(cell.Value) <= 0){_MessageBox("수량은 0보다 큰 숫자여야 합니다.");return false;

} else {return true;

}}

/* "할인율" 입력값 체크

*/function checkDiscount(cell){

if (cell.Value == "") cell.Value = 0;if(parseInt(cell.value) > 1 || parseInt(cell.value) < 0){

_MessageBox("할인율은 0과 1사이의 값이어야 합니다.");

return false;} else {

return true;}

}

/* "단가" 입력값 체크

*/function checkUnitPrice(cell){

if (cell.Value == "") cell.Value = 0;if(parseInt(cell.value) < 0){

_MessageBox("단가는 양수를 입력해야 합니다.");return false;


}

}

/*

여러건 저장 (입력/수정/삭제)

*/function saveList(id, Table, ComboBox) {


var odiName = "dataaction";var datasetName = "DataAction";var tableName = "[Order Details]";

var DataModule = _GetDataManager().GetDataModule(odiName);var DataSet = DataModule.GetDataSet(datasetName);

var DataAction = new Array(); // Transaction을 묶는 전체 데이터 액션 Arrayvar da_idx = 0; // 데이터 액션 인덱스

var comboIndex = -1;var comboValue = "";

// Insert Datavar insertRowCount = Table.GetInsertedRowCount(0); for (var idx =0 ; idx < insertRowCount; idx++){

_TraceLn("입력 " + idx);var i = 0; // 데이터 배열

인덱스

var fields = new Array(); // 입력 필드 Arrayvar values = new Array(); // 입력 값 Array

fields[i] = "OrderID"; values[i++] = id;

comboIndex = ComboBox.FindStringExact( Table.GetCellInPage(idx, 2).Value );if (comboIndex < 0) {

comboValue = "";} else {

comboValue = ComboBox.GetItemObject( comboIndex ).ItemValue;}if(comboValue == "") continue;fields[i] = "ProductID"; values[i++] = comboValue;fields[i] = "UnitPrice"; values[i++] = Table.GetCellInPage(idx, 3).Value;fields[i] = "Quantity"; values[i++] = Table.GetCellInPage(idx,

4).Value;fields[i] = "Discount"; values[i++] = Table.GetCellInPage(idx,

5).Value;


// INSERT SQL을 작성한다.DataAction[da_idx++] = mainScript.insertDataAction(DataSet, fields, values,

tableName);}

// Delete Datavar deleteFlagedIndexArray = new Array();Table.GetDeleteFlagedIndexArray( deleteFlagedIndexArray ); for (var idx = 0 ; idx < deleteFlagedIndexArray.length; idx++){

_TraceLn("삭제 " + idx);

var i = 0; // 데이터 배열

인덱스

var fields = new Array(); // 조건 필드 Arrayvar values = new Array(); // 조건 값 Array

fields[i] = "OrderID"; values[i++] = id;

comboIndex = ComboBox.FindStringExact( Table.GetCellInPage(deleteFlagedIndexArray[idx] + insertRowCount, 2).Value );

if (comboIndex < 0) {comboValue = "";

} else {comboValue = ComboBox.GetItemObject( comboIndex ).ItemValue;

}fields[i] = "ProductID"; values[i++] = comboValue;// Delete SQL을 작성한다.DataAction[da_idx++] = mainScript.deleteDataAction(DataSet, fields, values,

tableName);}

// Update Datavar changedCount = Table.GetUserChangedRowCount(0); var arr = new Array();

for(var idx = 0; idx < changedCount; idx++){


_TraceLn("수정 " + idx);

Table.GetUserChangedData(0, idx, arr); var i = 0;

// 데이터 배열 인덱스

var s_fields = new Array(); // 입력 필드 Arrayvar s_values = new Array(); // 입력 값 Arrayvar t_fields = new Array(); // 조건 필드 Arrayvar t_values = new Array(); // 조건 값 Array

comboIndex = ComboBox.FindStringExact( arr[2] );if (comboIndex < 0) {

comboValue = "";} else {

comboValue = ComboBox.GetItemObject( comboIndex ).ItemValue;}s_fields[i] = "ProductID"; s_values[i++] = comboValue;s_fields[i] = "UnitPrice"; s_values[i++] = arr[3];s_fields[i] = "Quantity"; s_values[i++] = arr[4];s_fields[i] = "Discount"; s_values[i++] = arr[5];

i=0;t_fields[i] = "OrderID"; t_values[i++] = id;t_fields[i] = "ProductID"; t_values[i++] = arr[1];

// Update SQL을 작성한다.

DataAction[da_idx++] = mainScript.updateDataAction(DataSet, s_fields, s_values, t_fields, t_values, tableName);

}

// COMMITDataModule.QueueActionObjects(DataAction);var result = DataModule.CommitQueuedActions();DataModule.CleanUpQueuedActions();

// 결과 확인

if(result!=""){



} else {

_MessageBox("저장되었습니다.");

_GetBoard("orderDetails").TriggerEvent(EventNameConst.OnUserEvent);

}

}

Board1 이름을 ‘order’로 변경하고 아래와 같이 속성과 이벤트를 설정하세요.


order AutoDelete Trueproduct 화면이 사라질 때 뷰어내에서 보드를 삭제합니다. True로 설정한


order Size 730, 453 Width, Height 설정

‘수주목록’ 테이블 그리는 방법은 화면에 ‘Table’ 컴포넌트를 추가한 후에 ‘Table1’의 속성창에서 ‘ODIKey’를

‘northwind_order’ 로 선택하고 ‘DataSet’에 ‘orders’를 선택합니다.

화면에서 테이블의 팝업 메뉴에서 ‘마법사’를 클릭하세요.



‘선택한 필드’에 있는 각 라인을 클릭한 후 속성 창에서 ‘SortType’을 지정하시기 바랍니다.

‘제품 목록’ 화면에서와 같이 컴포넌트들의 스타일을 설정한 후에 아래와 같이 테이블 컴포넌트의 속성을

설정하세요.


Table1 SelectedCellColor 232, 235, 240테이블을 마우스로 클릭했을 때 선택된 라인의 배경색을

연한 회색으로 설정합니다.Table1 ShowIndicator False 테이블 맨 앞의 index를 보여주는 셀을 감춥니다.

Table1 Cursor - Type Hand테이블 위에 마우스가 올라가 있을 때 마우스 커서를

손모양으로 바꿉니다. 테이블을 클릭했을 때 어떤 엑션이

있다는 표시를 하기 위함입니다.Table1 Location 10, 40 X, Y 좌표 설정


Table1 Anchor Top, Bottom, Left부모 컨테이너(order Board)의 테두리에서 테이블의 상대

위치를 고정 시키기 위한 방향을 설정. 화면이 resize될 때 밑으로 같이 늘어납니다.


테이블 컴포넌트의 이벤트를 아래와 같이 설정하세요.



Label_totalCount1.Value = "(총 " + This.GetDataSet().Get

RowCount()+ " 건)";

테이블에 보여지는

데이터가 변경될 때 마다

OnPostDataSetChanged 이벤트가 발생합니다. 이때 총 건수를 테이블

라인수로 다시 설정합니다.

Table1 OnTableBind

if (OrderDate.Value.length > 10) {OrderDate.Value =

OrderDate.Value.substr(0,10);}

if (RequiredDate.Value.length > 10) {RequiredDate.Value =

RequiredDate.Value.substr(0,10);}

테이블에 데이터가 그려질

때 날짜 필드값은 앞의 10자리만 보여지게 합니다.

Table2 OnLDoubleClick

// 테이블에서 선택된 주문번호

if (This.GetCurrentRow < 0) return;var selectedOrderID = This.GetCell(This.GetCurrentRow, 0).Value;

// '수주 내역' 조회

if (selectedOrderID != "") {orderDetails.UserValue =

selectedOrderID;

orderDetails.TriggerEvent(EventNameConst.OnUserEvent);

// '수주 내역' 화면으로 이동

This.GetBoard().ShowBoard("orderDetails");} else {

_MessageBox("주문번호가 존재하지

않습니다.", "경고");


더블 클릭하면 선택된 row의 주문번호를

팝업 보드에 설정합니다.또한 팝업 보드의

OnUserEvent를 호출해서

주문번호로

주문상세정보를

조회합니다. 그리고 나서

팝업을 띄웁니다.


}

19. 수주 내역 화면 개발

파일명 /northwind/oza/northwind_order.oza보드명 orderDetails

‘수주 내역’ 화면은 주문 상세 정보를 보여주는 화면입니다.

주문한 제품 정보를 입력, 수정, 삭제할 수 있고, 다른 포맷으로 (엑셀, 텍스트, 이미지) 테이블의 내용을

저장할 수도 있습니다.

하단의 소계는 테이블의 포장 단위 가격의 합으로 계산됩니다. 하단의 총계는 소계와 운임의 합으로

계산됩니다.

OZ Application Designer의 ‘파일’ 메뉴에서 ‘새 보드 추가’를 클릭하세요.

Board1 이름을 ‘orderDetails’로 변경하고 아래와 같이 속성과 이벤트를 설정하세요.컴포넌트 속성 값 설명


orderDetails

AutoDelete TrueorderDetails 화면이 사라질 때 뷰어내에서 보드를 삭제합니다. True로

설정한 이유는 화면을 띄울 때 마다 초기화 이벤트(OnInitialize, OnPostInitialize) 가 다시 발생하도록 하기 위해서입니다.

orderDetails


앞서 ‘수주 목록’ 화면의 테이블에서 마우스를 더블 클릭할 때 ShowBoard 함수가 호출되면서

‘orderDetails’ 보드로 이동이 되는데, 그 때 ‘수주 목록’에서 선택된 주문번호를 ‘orderDetails’ 보드에

UserValue에 설정하고 ‘orderDetails’ 보드의 OnUserEvent를 호출합니다. 즉, ‘수주 목록’에서 선택된

주문번호로 화면이 이동될 때 상세 데이터를 조회한 후 ‘수주 내역’ 화면에 보여줍니다.

호출된 OnUserEvent는 아래와 같이 작성됩니다.컴포넌트 이벤트 값

orderDetails

OnUserEvent

// 주문번호로 "Order Details" 테이블 조회 및 "수주 내역" 화면 초기화

var datamanager = _GetDataManager();var datamodule = datamanager.GetDataModule("northwind_order");datamodule.UpdateOZParam("orderId", This.UserValue);var orderDetailSet = datamodule.GetDataSet("orderDatails", null, true);var orderSet = datamodule.GetDataSet("orders");

ComboBox_customer.SelectedItemValue = orderSet.GetStringData(orderSet.GetCurrentRowIndex(), "CustomerID");ComboBox_employee.SelectedItemValue = orderSet.GetStringData(orderSet.GetCurrentRowIndex(), "EmployeeID");var ShipVia = orderSet.GetStringData(orderSet.GetCurrentRowIndex(), "ShipVia");

if (ShipVia == 2) {RadioButton2.Checked = true;

} else if (ShipVia == 3) {RadioButton3.Checked = true;

} else {RadioButton1.Checked = true;

}

Label_orderSubTotal.Value = parseInt( orderDetailSet.GetSum("ExtendedPrice")) ;Label_freight.Value = parseInt(orderSet.GetSum("Freight"));


var total = parseInt( orderDetailSet.GetSum("ExtendedPrice")) + parseInt(orderSet.GetSum("Freight"));Label_orderTotal.Value = total;

중앙의 ‘제품목록’ 테이블 그리는 방법은 화면에 ‘Table’ 컴포넌트를 추가한 후에 ‘Table1’의 속성창에서

‘ODIKey’를 ‘northwind_order’로 선택하고 ‘DataSet’에 ‘orderDatails’를 선택합니다.화면에서 테이블의 팝업 메뉴에서 ‘마법사’를 클릭하세요.


각 필드는 TableItem 컴포넌트로 참조가 가능합니다.

TableItem 속성창에서 아래와 같이 설정합니다.


#OZDeleteFlag#ColumnEditable

True 테이블에서 해당 필드를 편집할 수 있도록 설정

ProductName ColumnType ComboBox 테이블 셀을 콤보박스로 표시함

ProductName ColumnEditabl True 테이블에서 해당 필드를 편집할 수 있도록 설정


e

UnitPriceColumnEditable


QuantityColumnEditable


DiscountColumnEditable


화면을 아래와 같이 그립니다. 상단의 ‘ComboBox_hiddenProducts’ 콤보박스는 함수에서 제품목록 값을

가져올 때 임의로 사용하기 위해 visible=false로 설정된 컴포넌트입니다. 하단 소계, 운임, 총계 데이터를

보여주는 라벨의 스타일 이름은 ‘northwind.label_num’ 입니다.

‘제품 목록’ 화면에서와 같이 컴포넌트들의 스타일을 설정한 후에 아래와 같이 각 컴포넌트의 속성을

설정하세요.컴포넌트 속성 값 설명

모든 텍스트 박스 ReadOnly True 편집이 안되도록 설정

모든 텍스트 박스 ODIKey northwind_order 컴포넌트에 보여줄 데이터셋의 ODI명 설정

모든 텍스트 박스 DataSet orders컴포넌트에 보여줄 데이터셋 설정. 수주목록과 같은

데이터셋을 사용하기 때문에 다시 목록에서 클릭했을

때 다시 조회되지 않습니다.

ComboBox_hiddenProducts

northwind.label_num


‘주문번호’ TextBox Field OrderID 컴포넌트에 보여줄 데이터 필드 설정

‘청구지 주소’

TextBoxField Address 컴포넌트에 보여줄 데이터 필드 설정

‘청구지 도시’

TextBoxField City 컴포넌트에 보여줄 데이터 필드 설정

‘청구지 지역’

TextBoxField Region 컴포넌트에 보여줄 데이터 필드 설정

‘청구지 우편번호’

TextBoxField PostalCode 컴포넌트에 보여줄 데이터 필드 설정

‘청구지 국가’

TextBoxField Country 컴포넌트에 보여줄 데이터 필드 설정

‘수하인 이름’

TextBoxField ShipName 컴포넌트에 보여줄 데이터 필드 설정

‘수하인 주소’

TextBoxField ShipAddress 컴포넌트에 보여줄 데이터 필드 설정

‘수하인 도시’

TextBoxField ShipCity 컴포넌트에 보여줄 데이터 필드 설정

‘수하인 지역’

TextBoxField ShipRegion 컴포넌트에 보여줄 데이터 필드 설정

‘수하인 우편번호’

TextBoxField ShipPostalCode 컴포넌트에 보여줄 데이터 필드 설정

‘수하인 국가’

TextBoxField ShipCountry 컴포넌트에 보여줄 데이터 필드 설정

‘수주일’ TextBox Field OrderDate 컴포넌트에 보여줄 데이터 필드 설정

‘납기일’ TextBox Field RequiredDate 컴포넌트에 보여줄 데이터 필드 설정

‘선적일’ TextBox Field ShippedDate 컴포넌트에 보여줄 데이터 필드 설정


Visible False제품목록을 갖고있는 콤보박스. 데이터만 사용할

것이기 때문에 실제 보여주지는 않음.ComboBox_hiddenProducts

ODIKeynorthwind_order_code



DataSet products 컴포넌트에 보여줄 데이터셋 설정.


Field ProductName 콤보박스에 텍스트로 보여지는 이름


ValueField ProductID 콤보박스의 값

‘판매사원’

ComboBoxODIKey

northwind_order_code



‘판매사원’

ComboBoxDataSet employees 컴포넌트에 보여줄 데이터셋 설정.

‘판매사원’

ComboBoxField Salesperson 콤보박스에 텍스트로 보여지는 이름

‘판매사원’

ComboBoxValueField EmployeeID 콤보박스의 값

‘청구지’ ComboBox ODIKeynorthwind_order_code


‘청구지’ ComboBox DataSet customers 컴포넌트에 보여줄 데이터셋 설정.‘청구지’ ComboBox Field CompanyName 콤보박스에 텍스트로 보여지는 이름

‘청구지’ ComboBox ValueField CustomerID 콤보박스의 값

‘운임’ Label ODIKey northwind_order 컴포넌트에 보여줄 데이터셋의 ODI명 설정

‘운임’ Label DataSet orders 컴포넌트에 보여줄 데이터셋 설정.‘운임’ Label Field Freight 콤보박스에 텍스트로 보여지는 이름

Table1ShowIndicator

False 테이블 맨 앞의 index를 보여주는 셀을 감춥니다.

Table1 Location 10, 228 X, Y 좌표 설정


Table1 ODIKey northwind_order 컴포넌트에 보여줄 데이터셋의 ODI명 설정

Table1 DataSet orderDatails 컴포넌트에 보여줄 데이터셋 설정.

CheckBox_checkAll Location 40, 232테이블 ‘삭제’ 타이틀 옆의 체크박스입니다. X, Y 좌표

설정

Table1의 ’제품이름’

GridCellCombo1DropDownStyle

DropDownList콤보의 텍스트를 편집할 수 없고 선택만 할 수 있도록

설정

Table1의 ’제품이름’

GridCellCombo1

ODIKey, DataSet, Field, ValueField

‘ComboBox_hiddenProducts’ 와

동일하게 설정

컴포넌트에 보여줄 ODI, 데이터셋, 텍스트 필드, 값

필드 설정

각 컴포넌트의 이벤트를 아래와 같이 설정하세요.


CheckBox_checkAll

OnValueChanged

for(var i = Table1.GetInsertedRowCount(0); i < Table1.GetRowCount(); i++) {

if (Table1.GetCellInPage(i, 0) != null) {Table1.GetCellInPage(i,

0).ApplyValue( CheckBox_checkAll.Checked );}

콤보 박스가 체크되면

테이블의 ‘삭제’ 필드의

콤보들이 모두 선택되도록

하는 스크립트


}

‘목록’

ButtonOnClick

// '수주 목록' 화면으로 이동

This.GetBoard().ShowBoard("order");

‘수주 목록’ 보드가 보여짐. orderDetails 보드의

AutoDelete속성이 True이기 때문에 화면이동시

보드가 삭제됨

‘다른

포맷으로

저장’

Button

OnClick

if (Table1.GetRowCount() > 0) {

This.GetBoard().ShowDialog("fileSelect", "

자료받기 파일유형 선택", true, 250, 150, true);

} else {

_MessageBox("선택된 데이터가 없습니다.");

}

테이블을 다른 포맷으로

저장하기 위해 fileSelect 보드를 팝업으로 띄움.

‘빈칸추가’

ButtonOnClick

CheckBox_checkAll.Checked = false; // 빈칸 추가시

체크가 사라지기 때문

Table1.InsertNewRow(0); // 테이블 첫라인 추가

테이블에 빈칸을 첫번째

라인에 추가

‘빈칸삭제’

ButtonOnClick

CheckBox_checkAll.Checked = false; // 빈칸 추가시

체크가 사라지기 때문

// 포커스된 row 삭제. 포커스된 row가 없으면 첫번째 row

삭제

Table1.DeleteInsertedNewRow( Table1.GetFocusRowIndex

() );

테이블의 빈칸 삭제

‘조회’

ButtonOnClick

// 주문 상세 조회

var datamanager = _GetDataManager();

var datamodule = datamanager.GetDataModule("northwin

d_order");

var orderDetailSet = datamodule.GetDataSet("orderDatail

s", null, true);

테이블 데이터 다시 조회

‘저장’

ButtonOnClick

Table1.EndEdit(); // 테이블이 편집중일 때 편집종료

Table1.DeselectAll(); // 테이블 포커스 이동


Table1.SuspendLayout(); // 화면 정지

saveList(TextBox_orderID.Value, Table1, ComboBox_hidde

nProducts); // 저장

Table1.ResumeLayout(); // 화면 보여줌


테이블 내용 저장. Northwind_order.oza의

Document의

GlobalFunction이벤트의

saveList 함수 호출

Table1 OnTableBind This.HideColumn(1); // 원래제품번호 숨기기 제품번호를 감춥니다.


테이블의 이벤트는 아래과 같이 각각 작성하세요.

Table1의 OnCellEdit 이벤트에 아래 내용을 입력하세요. 테이블의 각 셀은 보여질때는 라벨이지만

편집상태가 되면 각 셀의 EditComponent 속성에 설정된 컴포넌트로 바뀝니다. OnCellEdit 이벤트에서

GetCurrentEditor로 바뀐 컴포넌트(editor)를 가져올 수 있습니다.

아래 스크립트는 테이블의 셀이 편집중일 때 ‘단가’와 ‘포장단위가격’을 재계산하여 설정합니다.var editor = This.GetCurrentEditor(); // 현재 편집중인 editorvar editComp = This.GetFocusCell().EditComponent; // editor의 컴포넌트 타입

var col_idx = This.GetFocusColumnIndex(); // 테이블에서 포커스된 컬럼 indexvar row_idx = This.GetFocusRowIndex();var script = "";

if(editComp==CellEditComponentTypeConst.ComboBox){ // 제품이름 속성 지정

script = "if(ozarg_type != ValueChangeTypeConst.DataBinding && ozarg_old_value != ozarg_new_value){ ";

script = script + "changeProductInfo(" + row_idx + ", " + col_idx + ", ozarg_new_value); } ";editor.SetEvent(EventNameConst.OnValueChanged, script);

} else if(editComp==CellEditComponentTypeConst.TextBox){ // 숫자입력 속성 지정

if(col_idx==4){ // 수량script = "This.MaxLength=8; ";editor.SetEvent(EventNameConst.OnFocus, script);

}

script = "if(ozarg_type != ValueChangeTypeConst.DataBinding && ozarg_old_value != ozarg_new_value){ ";

script = script + "calcData(" + row_idx + ", " + col_idx + ", ozarg_new_value); } ";editor.SetEvent(EventNameConst.OnValueChanged, script);

} else if(editComp==CellEditComponentTypeConst.DateTimePicker){ // 달력 속성 지정

editor.Format = FormatConst.Custom;editor.CustomFormat = "yyyyMMdd";editor.SetProperty(PropertyNameConst.DateTimeBindingType, "DateOnlyString");

}

Table1의 OnPreCellFocus 이벤트에 아래 내용을 입력하세요.셀이 포커스를 떠나고 다른 셀을 선택하기 전에 이전 셀에서 입력한 데이터의 유효성 여부를 체크하는


스크립트 입니다.//이전 포커스된 Cell 이 없을 경우 return;

if(ozarg_oldFocusCell==null) return;

/* ozarg_oldFocusCell : 이전 포커스된 Grid Cell Ojbect ozarg_newFocusCell : 현재 포커스될 Grid Cell Object*/

//_TRACELN("ozarg_oldFocusCell.Value=" + ozarg_oldFocusCell.Value + ", ozarg_newFocusCell.Value=" + ozarg_newFocusCell.Value);

// 이전셀 값의 validation 체크 로직 구현 부분

var row_idx = ozarg_oldFocusCell.GetRow();var col_idx = ozarg_oldFocusCell.GetColumn();var result = true;

if(col_idx==3){ // 단가

result = checkUnitPrice(ozarg_oldFocusCell);

} else if(col_idx==4){ // 수량

result = checkQuantity(ozarg_oldFocusCell);

} else if (col_idx==5){ // 할인율

result = checkDiscount(ozarg_oldFocusCell);

}

/*

(주 의)

Grid.SetFocusCell(r,c) 를 사용할경우 이벤트(OnPreFocus<->OnFocus) 루프가 발생됨

Grid.StartEdit(r,c) 를 사용하면 OnFocus 이벤트는 발생되지 않고 해당 셀을 편집모드로 변경합니다.

*/if ( !result) {

This.StartEdit(row_idx, col_idx);return false;


}

Table1의 OnLDoubleClick 이벤트에 아래 내용을 입력하세요.


선택된 제품의 상세 페이지를 팝업으로 띄우는 스크립트 입니다.// 테이블에서 선택된 제품번호




Values[0] = "/northwind/oza/northwind_order.oza"; // opener 이름

Values[1] = selectedProductID; // 팝업에 넘길 데이터

mainScript.openPopup(This.GetBoard(), "/northwind/oza/northwind_productDetail.oza", "productDetail", "제품 상세", Va

lues);

테이블의 내용을 다른 포맷으로 저장하기 위해 ‘파일’ 메뉴의 ‘새 보드 추가’를 클릭하세요. 추가된 보드의

이름을 ‘fileSelect’ 로 변경합니다.

아래와 같이 화면을 그리세요.

속성과 이벤트를 아래와 같이 설정하세요.컴포넌트 속성/이벤트 값 설명

fileSelect 보드

Size 332, 140Width, Height 설정

‘확인’ Button OnClick // 테이블을 엑셀이나 텍스트, 이미지로 저장

var Grid = _GetBoard("orderDetails").GetChild("Table1");var open = CbOpen.Checked;var exe = "excel";if (RbText.Checked) exe = "text";else if (RbImage.Checked) exe = "image";mainScript.exportGrid(Grid,open,exe);This.GetBoard().OkDialog();

테이블의

내용을 다른

포맷으로

저장하기 위해

‘northwind_common.ozf ‘ 파일의

exportGrid함수 호출후


팝업 닫음

‘취소’ Button OnClick This.GetBoard().CancelDialog(); 팝업 닫기

20. 배포이제 화면 개발이 모두 완료되었습니다.개발된 소스를 웹 브라우저에서 확인하기 위해 C:\Repository\northwind 폴더를 오즈서버폴더의

repository_files\northwind 폴더로 업로드하세요.

오즈 서버의 conf/db.properties 파일에 위에서 디자이너 db.properties에 작성한 내용을 추가하세요.

화면을 호출하는 HTML을 아래와 같이 작성하세요

뷰어 설치 부분은 Application Viewer와 Report Viewer가 같이 설치됩니다. (“http://oztn.net/kb/article/kbapp/119131522020700” 참고하세요)

<HTML> <HEAD><TITLE>OZ Application - Northwind Sample</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=8859_1"></HEAD>

<BODY leftmargin="0" topmargin="0" scroll="no">

<OBJECT width = "0" height = "0" ID="ZTransferX" CLASSID="CLSID:C7C7225A-9476-47AC-

B0B0-FF3B79D55E67"

codebase="http://127.0.0.1:8080/OZServlet4.0/OZViewer4.0/ZTransferX.cab#version=2,1,1,6"><PARAM NAME="download.Server" VALUE="http://127.0.0.1/OZServlet4.0/OZViewer4.0/"><PARAM NAME="download.Port" VALUE="8080"><PARAM NAME="download.Instruction" VALUE="ozviewer.idf"><PARAM NAME="install.Base" VALUE="<PROGRAMS>/Forcs"><-- 설치되는 뷰어 경로(C:\Program Files\Forcs\OZ Family) --><PARAM NAME="install.Namespace" VALUE="OZViewer4.0"></OBJECT>




<OBJECT bgcolor="#FFFFFF" width = "100%" height = "100%" ID="OZApplicationViewer"

CLASSID="CLSID:907A00F3-7390-4EF2-931B-360546587804" VIEWASTEXT>

<PARAM NAME="repository_agent.type" value="FROM_OZSERVER"><PARAM NAME="repository_agent.ozserver.servlet" value="http://127.0.0.1:8080/OZServlet4.0/server"><PARAM NAME="repository_agent.try_usl_check" value="true"><PARAM NAME="application.namespace" value="OZViewer4.0\bin"><PARAM NAME="ozadoc.autoadjustsize" value="true"> <PARAM NAME="ozadoc.errormessage_type" value="Trace"><PARAM NAME="ozadoc.path" value="northwind/oza/northwind.oza"><PARAM NAME="ozadoc.isframe" value="false"></OBJECT>

</BODY> </HTML>

Html을 실행하여 미리보기한 결과입니다.

Documents

1 · Web view샘플 데이터베이스 odbc 등록 2 2. 제품 설치 3 3. 로그인 화면 개발 4 4. 메뉴 화면 개발 7 5. 공통 함수 개발 13 6. 공통 데이터 입력