PowerPoint 프레젠테이션
Download
Report
Transcript PowerPoint 프레젠테이션
퀘
TrustForm System
[초급 교육 자료]
컴스퀘어 주식회사
Updated : 2003년 7월 23일
www.comsquare.co.kr
Next Generation Web Platform Solution
1. 배경지식
2. 제품의 구성
Index퀘
Of
Contents
3. XForms의 구성
4. 다자이너 사용방법
5. 컨트롤 리스트 (자세한 사용법은 중급과정에서)
6. 컨트롤 사용법 익히기
7. 기타 컨트롤 사용법 익히기
8. Event 사용하기
9. 실습
10. Q & A
www.comsquare.co.kr
Next Generation Web Platform Solution
1. 배경지식
퀘
배경
지식
1.
가. XML 이란 ?
나. Script 란 ?
다. XPath 란 ?
라. XForms 란?
www.comsquare.co.kr
Next Generation Web Platform Solution
가. XML이란
- 인터넷상의 데이터 교환을 위한 표준규격
- XML(http://www.w3c.org/XML)
퀘
배경
지식
1.
- HTML은 웹 페이지에서 데이터베이스처럼 구조화된 데이터를 지원할 수 없지만 XML은
사용자가 구조화된 데이터베이스를 뜻대로 조작할 수 있다. 구조적으로 XML 문서들은
SGML(standard generalized markup language) 문서 형식을 따르고 있다. XML은 SGML의
부분집합이라고도 할 수 있기 때문에 응용판 또는 축약된 형식의 SGML이라고 볼 수 있다.
<메모>
<헤더>
<송신자> &me;</송신자>
<수신자> 홍길동</수신자>
<수신자> 이순신</수신자>
<날짜>
<년>2000</년>
<월>12</월>
<일>9</일>
</날짜>
<제목>XML의 기본개념 과 활용방안</제목>
<키워드> XML</키워드>
<키워드> 문서구조</키워드>
</헤더>
</메모>
www.comsquare.co.kr
Next Generation Web Platform Solution
나. Script란
- 비주얼 베이직 스크립트(VBScript)
퀘
배경
지식
1.
비주얼 베이식의 서브세트로, 넷스케이프 커뮤니케이션즈사에서 개발한 자바 스크립트와 마찬가
지로 대화형 월드 와이드 웹(WWW) 홈 페이지를 작성하기 위하여 사용된다. 하이퍼텍스트 생성 언
어(HTML) 파일 중에 매입하여 기술한다. 액티브 X 제어(Active X control)나 자바 애플릿(Java
applet)을 조작할 수 있다.
- 자바 스크립트(JAVAScript)
다. XPath란
-
language for addressing parts of an XML document
XPath(http://www.w3c.org/TR/xpath)
XML문서의 일부를 찾는 또 다른 형식의 XML언어이다
라. XForms란
- 현재 W3C(www.w3c.org) Candidate Recommendation 단계에 있는 XML의
Form Application 으로 차세대 웹 폼의 표준안 (The Next Generation of Web
Forms ) 입니다
www.comsquare.co.kr
Next Generation Web Platform Solution
2. 제품의 구성
2.
퀘
제품의 구성
가.
나.
다.
라.
TrustForm System 구성
TFDesigner
TFViewer
시스템 구성도
1)
2)
3)
4)
www.comsquare.co.kr
TFSystem 구성
Apache + Tomcat
IIS
WebLogic
Next Generation Web Platform Solution
가. TrustForm System 구성
2.
퀘
TrustForm System 구성
Repository
TrustForm
제품의 구성
Server
TrustForm Designer
(Lib)
업무나 서비스에 사용될 화면을 가장
빠르게 제작할 수 있는 XML 기반의
Form-Based Development Tool
TrustForm Viewer
XML 통신을 기반으로 하는 화면작성
및 프로세싱을 수행하는 운영환경
TrustForm
TrustForm
Designer
Viewer
www.comsquare.co.kr
TrustForm Server
화면과 DB Transaction을 연결해주는
instance 생성 모듈
Next Generation Web Platform Solution
나. TrustForm Designer
Menu Bar
ToolBar
2.
퀘
Align
Control
File View
제품의 구성
Submit/Template
Change
Working
Area
Instance
View Change
www.comsquare.co.kr
Attribute
Change
Next Generation Web Platform Solution
다. TrustForm Viewer
2.
퀘
제품의 구성
TrustForm
Viewer
[ActiveX]
www.comsquare.co.kr
Control
용량
(KB)
기능
TFViewer.OCX
1,300
뷰어(Plug-In)
TFTimer.OCX
148
타이머 컨트롤
TFDate.OCX
40
날짜컨트롤
TFMenu.OCX
96
메뉴컨트롤
비고
Next Generation Web Platform Solution
라. 시스템 구성도
1) TFStarter
Web Server
퀘
2. 제품의
구성
request
TFStarter.ocx
Config.xml
Download
StartPage.html
OpenPage.html
Viewer.ocx
[Statr Page]
Parse Config.xml
Download
POST
Form,OCX Package
TFViewer.ocx
TFTimer.ocx
…
XFM.Zip
WAS
JSP / Servlet / EJB
XML
Database
www.comsquare.co.kr
Next Generation Web Platform Solution
라. 시스템 구성도
1) TFStarter (OpenPage.html)
2.
퀘
제품의
구성
<script language = "javascript">
function window::onLoad()
{
var ret=TFStarter.getConfig( "http://www.comsquare.co.kr/hcpark/wwwconfig.xml" );
if (ret==true)
{
window.location.href = "http://www.comsquare.co.kr/hcpark/kb_index.html";
//"file:///C:/TFS/kb/kb_index.html";
}
else
{
alert( "TFStarter Error!" );
}
}
</script>
</HEAD>
<BODY>
<object classid="CLSID:8FBA34A9-697D-405D-B9B2-306531A66590"
codebase="http://www.comsquare.co.kr/hcpark/tfstarter.cab#version=1,0,0,1"
width = 0 height = 0 id = "TFStarter">
</object>
<p><font face="돋움" size="2">
Loading...... 국민은행 카드채권관리시스템 데모 (include mfc42sp4, msxml4sp1)</font>
</p>
</BODY>
www.comsquare.co.kr
Next Generation Web Platform Solution
라. 시스템 구성도
1) TFStarter (Config.xml)
2.
퀘
제품의
구성
<root>
<content name="vsflex7" ver="7.0"
url="http://www.comsquare.co.kr/hcpark/Vsflex7.ocx" target="{system}" type="reg" />
<content name="TFViewer" ver="1.0" url="http://www.comsquare.co.kr/hcpark/TFViewer.ocx"
target="c:\TFS" type="reg" q="yes" />
<content name="TFDate" ver="1.0" url="http://www.comsquare.co.kr/hcpark/TFDate.ocx"
target="c:\TFS" type="reg" />
<content name="TFTimer" ver="1.0" url="http://www.comsquare.co.kr/hcpark/TFTimer.ocx"
target="c:\TFS" type="reg" />
<content name="TFPush" ver="1.0" url="http://www.comsquare.co.kr/hcpark/TFPush.ocx"
target="c:\TFS" type="reg" />
<content name="kbInt" ver="1.2" url="http://www.comsquare.co.kr/hcpark/kb.zip"
target="c:\TFS\kb" type="zip" q="yes" />
</root>
www.comsquare.co.kr
Next Generation Web Platform Solution
라. 시스템 구성도
2) Apache + Tomcat 서버구성
2.
퀘
제품의
구성
Apache Server
request
reponse
POST
Tomcat
JSP / Servlet
Viewer.ocx
[XFM]
JDBC
Database
XML
xFormsXmlLib.jar
www.comsquare.co.kr
Next Generation Web Platform Solution
라. 시스템 구성도
2) IIS 서버구성
2.
퀘
제품의
구성
IIS Server
request
reponse
ASP
POST
Viewer.ocx
[XFM]
ODBC
XML
COM +
Database
XFormsUtil.dll
www.comsquare.co.kr
Next Generation Web Platform Solution
라. 시스템 구성도
3) WebLogic 서버 구성
2.
퀘
제품의
구성
Web Server
request
Viewer.ocx
[XFM]
Apache
reponse
WAS Server
(WebLogic)
Database
POST
XML
Servlet
JSP
EJB
JDBC
xFormsXmlLib.jar
www.comsquare.co.kr
Next Generation Web Platform Solution
3. XForms의 구성
3.
퀘
XForms의
구성
가. 문서의 구성
나. 생성 및 동작 방법
www.comsquare.co.kr
Next Generation Web Platform Solution
가. 문서의 구성
3.
퀘
XForms의
구성
XForms
Model
UI
Controls
Event
Handlers
www.comsquare.co.kr
• Instance
• Bind
• SubmitInfo
• HTML like – 8개
• New – 6개
•
•
•
•
initialization
interaction
notification
error
<xhtml:head>
<xhtml:title>Untitle</xhtml:title>
<model>
<instance>
<my:root
xmlns:my="http://www.comsquare.co.kr/example">
<my:example>Sample</my:example>
</my:root>
</instance>
<bind id="input1" ref="my:root/my:example"/>
</model>
</xhtml:head>
<xhtml:body>
<input id="input1" bind="input1" style="left:210px; top:120px;
width:100px; height:20px; vertical-align:middle;">
<script type="vbscript" id="script1"
ev:event="DOMFocusOut">
<![CDATA[
MsgBox "기본 문서"
]]>
</script>
</input>
</xhtml:body>
Next Generation Web Platform Solution
나. 생성 및 동작 방법
3.
퀘
XForms의
구성
<HTML>
<HEAD>
</HEAD>
<BODY>
<OBJECT id="TFViewer" classid="CLSID:506B0FD4-B7B2-4F4C-BE3F-B61855AB7CAF"
codebase="http://trustform.comsquare.co.kr/download/tfviewer.cab#version=1,0,0,7" width="970"
height="600">
<PARAM name="ControlName" value="TFViewer"/>
<PARAM name="src" value=“.\crdt\ResultViewJ.xfm"/>
</OBJECT>
</BODY>
TFViewer.OCX
www.comsquare.co.kr
Next Generation Web Platform Solution
4. 디자이너 사용방법
4.
퀘
디자이너 사
용방법
가. 컨트롤 그리기
나. Instance 만들기
다. 연결하기
라. 이벤트 넣기
마. 실 습
www.comsquare.co.kr
Next Generation Web Platform Solution
가. 컨트롤 그리기
4.
퀘
디자이너 사
용방법
www.comsquare.co.kr
Next Generation Web Platform Solution
나. Instance만들기
4.
퀘
디자이너 사
용방법
www.comsquare.co.kr
Next Generation Web Platform Solution
다. 연결하기
4.
퀘
디자이너 사
용방법
www.comsquare.co.kr
Next Generation Web Platform Solution
라. Event 넣기
4.
- Event란 ? 컨틀롤이 행동한 일련의 행동을 말하며 그 컨트롤의 행동을 받아
특정행동을 정의 할 수 있다.
퀘
디자이너 사
용방법
www.comsquare.co.kr
Next Generation Web Platform Solution
마. 실습
-
4.
퀘
디자이너 사
용방법
컨트롤 삽입과 이벤트를 넣어 “Hello World”를 찍어보자
1) Input과 Button컨트롤을 삽입한다.
2) Instance를 만든다.
3) Instance와 Control 을 Bind한다.
4) Button컨트롤에 “xforms-activate” 액션을 삽입한다
5) 액션에 Script를 삽입하여 Edit버튼을 클릭한다.
6) Script에 model.setValue와 MsgBox를 설정한다.
7) 페이지를 로드한다.
Ex-1-1
www.comsquare.co.kr
Next Generation Web Platform Solution
5. 컨트롤 리스트
5.
가. Input계열
퀘
컨트롤
스트
리
나. Button계열
다. Select계열
라. 확장 컨트롤
www.comsquare.co.kr
Next Generation Web Platform Solution
가. Input계열
1)
5.
퀘
컨트롤
스트
Input
- 값을 입력하거나 출력 할 때 사용
리
2)
Secret
- 비밀번호 같은 화면에 출력되지 않는 문자를 입력 받을 때 사용
3)
Textarea
4)
- 많은 입력 문자를 받을 때 사용
Output
- 입력은 되지 않으며 출력만을 위한 컨트롤
www.comsquare.co.kr
Next Generation Web Platform Solution
나. Button계열
1)
5.
퀘
컨트롤
스트
Button
- 이벤트를 받고 일련의 행동을 얻기 위해 사용
리
www.comsquare.co.kr
Next Generation Web Platform Solution
다. Select계열
1)
5.
퀘
컨트롤
스트
CheckBox
- 다중이나 단일의 값을 선택 할 때 사용
리
2)
Radio
- 여러 값중 한가지를 선택 시 사용
3)
ListBox
4)
- 여러 값이나 단일 값을 보여주거나 선택시 사용
Combo
- 여러 리스트에서 한값을 선택시 사용
www.comsquare.co.kr
Next Generation Web Platform Solution
라. 확장 컨트롤 계열
5.
1)
Shape계열
- 선, 사각형, 원, 둥근 사각형등 도형을 그릴수 있다.
2)
Browser
- IE 컨트롤을 붙여 HTML을 로드 할 수 있다.
3)
Grid
- 여러 데이터를 반복해서 보여 줄 수 있다.
4)
Calendar
- 달력 컨트롤로써 년,월,일 값을 얻어 올 수 있다.
5)
Object
- ActiveX로 지원되는 컨트롤을 삽입 할 수 있다.
6)
TreeView
- 트리 모양으로 메뉴기능을 이용 할 수 있다.
퀘
컨트롤
스트
리
www.comsquare.co.kr
Next Generation Web Platform Solution
마. 기타 컨트롤
5.
퀘
컨트롤
스트
1)
Switch
- 탭 컨트롤 형태로 한 위치에 여러 페이지를 선택적으로 보여 줄때 사용
2)
Upload
- 서버에 파일을 Upload 할 때 사용
리
www.comsquare.co.kr
Next Generation Web Platform Solution
6. 컨트롤 사용법 익히기
가. Input
퀘
나. Select 계열
6.
컨트롤 사용
법 익히기
www.comsquare.co.kr
Next Generation Web Platform Solution
가. Input 컨트롤
퀘
6.
컨트롤 사용
법 익히기
1) 패턴 주기 (input, output)
- type : NNNN-NN-NN, ZcZZZcZZZ, NNNdNN …
- bind에 코드 생성 (type="cs:NNNN-NN-NN”)
- 패턴 형식 :
N : 자연수
Z : 금액패턴 사용 (오른쪽 정렬)
c : 콤마
d : 소수점
% : 백분율
2) Grid input 패턴 주기
가) 패턴 (input ,output)
- 그리드의 모든 컨트롤의 패턴을 정의 한다.
- pattern = "*^*^NNNN-NN-NN^ZZZcZZZcZZZcZZZ“
나) Editmask (input)
- 입력 타임에 패턴을 보여준다.
- 날짜 패턴 적용 시 : Editmask = “####-##-##”
다) Format (input)
- 입력 타임에는 보이지 않지만 입력후 보이게 된다.
- 금액 패턴 적용 시 : format = “###,###,###”
=> 주의 사항 : Grid Input에 Fomat과 패턴을 중복 사용하지 않으면 인스턴스에 들어가
는 데이타값이 변질됨.
www.comsquare.co.kr
Next Generation Web Platform Solution
가. Input 컨트롤
퀘
6.
컨트롤 사용
법 익히기
3) 데이터 입력 모드, 입력 길이 제한
a) inputMode
- 한글 (hangul)
- 영문 (latin)
- 숫자 (digits)
- 대문자 (upperCase)
- 소문자 (lowerCase)
b) maxlength
www.comsquare.co.kr
Next Generation Web Platform Solution
나. Select 계열 컨트롤
• item 추가 버튼
• item 삭제 버튼
퀘
• item 위로 이동 버튼
• item 아래로 이동 버튼
6.
컨트롤 사용
법 익히기
• 동적 Item 설정
• item별 action 버튼
www.comsquare.co.kr
Next Generation Web Platform Solution
7. 기타컨트롤 사용법 익히기
7.
가. Switch
퀘
나. Browser
기타컨트롤
사용법 익히
기
다. Object
라. TreeView
마. Upload
www.comsquare.co.kr
Next Generation Web Platform Solution
가. Switch
7.
퀘
기타컨트롤
사용법 익히
기
• Case 추가 삭제
• Switch ID 바꾸기
www.comsquare.co.kr
Next Generation Web Platform Solution
가. Switch
• Case 추가 삭제
7.
퀘
기타컨트롤
사용법 익히
기
• Event 삽입
• Case 선택
www.comsquare.co.kr
Next Generation Web Platform Solution
나. Browser
• Browser 개체삽입
7.
퀘
기타컨트롤
사용법 익히
기
• URL 입력
www.comsquare.co.kr
Next Generation Web Platform Solution
나. Object
• Object 개체삽입
7.
퀘
• 삽입될 크기 설정
기타컨트롤
사용법 익히
기
• 개체 삽입버튼
• 개체선택 다이얼로그
www.comsquare.co.kr
Next Generation Web Platform Solution
나. TreeView
• TreeView 삽입
7.
• Branch 삽입
퀘
기타컨트롤
사용법 익히
기
• Branch 정보 입력 다이얼로그
• Event 삽입버튼
www.comsquare.co.kr
Next Generation Web Platform Solution
나. Upload
7.
퀘
기타컨트롤
사용법 익히
기
• Upload 컨트롤
www.comsquare.co.kr
Next Generation Web Platform Solution
나. Event 입력
• Event 대상선택
퀘
8.
• Event 선택
Event 사용
하기
• Event 탭 선택
• Action 선택
www.comsquare.co.kr
Next Generation Web Platform Solution
가. 동적 UI 제작 (ItemSet)
•
퀘
ItemSet으로 동적으로 생성
•
9. 실습
ItemSet으로 선택
• 동적으로 생성될 Instance
• Instance와 연결
www.comsquare.co.kr
Next Generation Web Platform Solution
정리 및 복습
1. XForms 문서의 이해
퀘
2. TFSystem구조 이해
정리 및 복
습
3. TFDesigner 사용법 이해 (기초)
www.comsquare.co.kr
Next Generation Web Platform Solution
퀘
10.
Q&A
Q&A
www.comsquare.co.kr
Next Generation Web Platform Solution
퀘
Thanks You
www.comsquare.co.kr
Next Generation Web Platform Solution