1 / 46

TrustForm System [ 초급 교육 자료 ]

TrustForm System [ 초급 교육 자료 ]. 컴스퀘어 주식회사. Updated : 2003 년 7 월 23 일. 1. 배경지식 2. 제품의 구성 3. XForms 의 구성 4. 다자이너 사용방법 5. 컨트롤 리스트 ( 자세한 사용법은 중급과정에서 ) 6. 컨트롤 사용법 익히기 7. 기타 컨트롤 사용법 익히기 8. Event 사용하기 9. 실습 10. Q & A . Index Of Contents. 1. 배경 지식. 1. 배경지식. 가 . XML 이란 ?

dakota
Download Presentation

TrustForm System [ 초급 교육 자료 ]

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. TrustForm System [초급 교육 자료] 컴스퀘어 주식회사 Updated : 2003년 7월 23일

  2. 1. 배경지식 • 2. 제품의 구성 • 3. XForms의 구성 • 4. 다자이너 사용방법 • 5. 컨트롤 리스트 (자세한 사용법은 중급과정에서) • 6. 컨트롤 사용법 익히기 • 7. 기타 컨트롤 사용법 익히기 • 8. Event 사용하기 • 9. 실습 • 10. Q & A Index Of Contents

  3. 1. 배경 지식 1. 배경지식 • 가. XML 이란 ? • 나. Script 란 ? • 다. XPath 란 ? • 라. XForms 란?

  4. 1. 배경 지식 가. XML이란 - 인터넷상의 데이터 교환을 위한 표준규격 - XML(http://www.w3c.org/XML) - HTML은 웹 페이지에서 데이터베이스처럼 구조화된 데이터를 지원할 수 없지만 XML은 사용자가 구조화된 데이터베이스를 뜻대로 조작할 수 있다. 구조적으로 XML 문서들은 SGML(standard generalized markup language) 문서 형식을 따르고 있다. XML은 SGML의 부분집합이라고도 할 수 있기 때문에 응용판 또는 축약된 형식의 SGML이라고 볼 수 있다. <메모> <헤더> <송신자> &me;</송신자> <수신자> 홍길동</수신자> <수신자> 이순신</수신자> <날짜> <년>2000</년> <월>12</월> <일>9</일> </날짜> <제목>XML의 기본개념 과 활용방안</제목> <키워드> XML</키워드> <키워드> 문서구조</키워드> </헤더> </메모>

  5. 1. 배경 지식 나. Script란 - 비주얼 베이직 스크립트(VBScript)비주얼 베이식의 서브세트로, 넷스케이프 커뮤니케이션즈사에서 개발한 자바 스크립트와 마찬가지로 대화형 월드 와이드 웹(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 ) 입니다

  6. 2.제품의 구성 2. 제품의 구성 • 가. TrustForm System 구성 • 나. TFDesigner • 다. TFViewer • 라. 시스템 구성도 • 1) TFSystem 구성 • 2) Apache + Tomcat • 3) IIS • 4) WebLogic

  7. 2.제품의 구성 Repository TrustForm Server (Lib) TrustForm System 구성 TrustForm Designer 업무나 서비스에 사용될 화면을 가장 빠르게 제작할 수 있는 XML 기반의 Form-Based Development Tool TrustForm Viewer XML 통신을 기반으로 하는 화면작성 및 프로세싱을 수행하는 운영환경 TrustForm Viewer TrustForm Designer TrustForm Server 화면과 DB Transaction을 연결해주는 instance 생성 모듈 가. TrustForm System 구성

  8. 2.제품의 구성 나. TrustForm Designer Menu Bar ToolBar Align Control File View Working Area Submit/Template Change Instance View Change Attribute Change

  9. 2.제품의 구성 다. TrustFormViewer TrustForm Viewer [ActiveX]

  10. 2. 제품의 구성 라. 시스템 구성도 1) TFStarter Web Server request TFStarter.ocx Config.xml StartPage.html Download Form,OCX Package Parse Config.xml TFViewer.ocx TFTimer.ocx … XFM.Zip OpenPage.html Download Viewer.ocx [Statr Page] POST WAS JSP / Servlet / EJB XML Database

  11. 2. 제품의 구성 라. 시스템 구성도 1) TFStarter(OpenPage.html) <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>

  12. 2. 제품의 구성 라. 시스템 구성도 1) TFStarter(Config.xml) <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>

  13. 2. 제품의 구성 Apache Server Tomcat JSP / Servlet xFormsXmlLib.jar 라. 시스템 구성도 2) Apache + Tomcat 서버구성 request reponse Database POST Viewer.ocx [XFM] JDBC XML

  14. 2. 제품의 구성 IIS Server ASP COM + XFormsUtil.dll 라. 시스템 구성도 2) IIS 서버구성 request reponse POST Viewer.ocx [XFM] Database ODBC XML

  15. 2. 제품의 구성 Web Server Apache WAS Server (WebLogic) Servlet EJB JSP xFormsXmlLib.jar 라. 시스템 구성도 3) WebLogic 서버 구성 request Viewer.ocx [XFM] reponse Database POST JDBC XML

  16. 3.XForms의 구성 3. XForms의 구성 • 가. 문서의 구성 • 나. 생성 및 동작 방법

  17. 3.XForms의 구성 가. 문서의 구성 XForms <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> Model • Instance • Bind • SubmitInfo UI Controls • HTML like – 8개 • New – 6개 • initialization • interaction • notification • error Event Handlers

  18. 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

  19. 4.디자이너 사용방법 4. 디자이너 사용방법 • 가. 컨트롤 그리기 • 나. Instance 만들기 • 다. 연결하기 • 라. 이벤트 넣기 • 마. 실 습

  20. 4.디자이너 사용방법 가. 컨트롤 그리기

  21. 4.디자이너 사용방법 나. Instance만들기

  22. 4.디자이너 사용방법 다. 연결하기

  23. 4.디자이너 사용방법 라. Event 넣기 - Event란 ? 컨틀롤이 행동한 일련의 행동을 말하며 그 컨트롤의 행동을 받아 특정행동을 정의 할 수 있다.

  24. 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

  25. 5.컨트롤 리스트 5. 컨트롤 리스트 • 가. Input계열 • 나. Button계열 • 다. Select계열 • 라. 확장 컨트롤

  26. 5.컨트롤 리스트 가. Input계열 • Input • - 값을 입력하거나 출력 할 때 사용 • Secret • - 비밀번호 같은 화면에 출력되지 않는 문자를 입력 받을 때 사용 • 3)Textarea • - 많은 입력 문자를 받을 때 사용 • Output • - 입력은 되지 않으며 출력만을 위한 컨트롤

  27. 5.컨트롤 리스트 나. Button계열 • Button • - 이벤트를 받고 일련의 행동을 얻기 위해 사용

  28. 5.컨트롤 리스트 다. Select계열 • CheckBox • - 다중이나 단일의 값을 선택 할 때 사용 • Radio • - 여러 값중 한가지를 선택 시 사용 • 3) ListBox • - 여러 값이나 단일 값을 보여주거나 선택시 사용 • Combo • - 여러 리스트에서 한값을 선택시 사용

  29. 5.컨트롤 리스트 라. 확장 컨트롤 계열 • Shape계열 • - 선, 사각형, 원, 둥근 사각형등 도형을 그릴수 있다. • Browser • - IE 컨트롤을 붙여 HTML을 로드 할 수 있다. • 3) Grid • - 여러 데이터를 반복해서 보여 줄 수 있다. • Calendar • - 달력 컨트롤로써 년,월,일 값을 얻어 올 수 있다. • Object • - ActiveX로 지원되는 컨트롤을 삽입 할 수 있다. • TreeView • - 트리 모양으로 메뉴기능을 이용 할 수 있다.

  30. 5.컨트롤 리스트 마. 기타 컨트롤 • Switch • - 탭 컨트롤 형태로 한 위치에 여러 페이지를 선택적으로 보여 줄때 사용 • Upload • - 서버에 파일을 Upload 할 때 사용

  31. 6.컨트롤 사용법 익히기 6. 컨트롤 사용법 익히기 • 가. Input • 나. Select 계열

  32. 6.컨트롤 사용법 익히기 가. Input 컨트롤 • 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과 패턴을 중복 사용하지 않으면 인스턴스에 들어가는 데이타값이 변질됨.

  33. 6.컨트롤 사용법 익히기 가. Input 컨트롤 • 3) 데이터 입력 모드, 입력 길이 제한 • a) inputMode • - 한글 (hangul) • - 영문 (latin) • - 숫자 (digits) • - 대문자 (upperCase) • - 소문자 (lowerCase) • b) maxlength

  34. 6.컨트롤 사용법 익히기 나. Select 계열 컨트롤 • item 추가 버튼 • item 삭제 버튼 • item 위로 이동 버튼 • item 아래로 이동 버튼 • 동적 Item 설정 • item별 action 버튼

  35. 7.기타컨트롤 사용법 익히기 7. 기타컨트롤 사용법 익히기 • 가. Switch • 나. Browser • 다. Object • 라. TreeView • 마. Upload

  36. 7.기타컨트롤 사용법 익히기 가. Switch • Case 추가 삭제 • Switch ID 바꾸기

  37. 7.기타컨트롤 사용법 익히기 가. Switch • Case 추가 삭제 • Event 삽입 • Case 선택

  38. 7.기타컨트롤 사용법 익히기 나. Browser • Browser 개체삽입 • URL 입력

  39. 7.기타컨트롤 사용법 익히기 나. Object • Object 개체삽입 • 삽입될 크기 설정 • 개체 삽입버튼 • 개체선택 다이얼로그

  40. 7.기타컨트롤 사용법 익히기 나. TreeView • Branch 삽입 • TreeView 삽입 • Branch 정보 입력 다이얼로그 • Event 삽입버튼

  41. 7.기타컨트롤 사용법 익히기 나. Upload • Upload 컨트롤

  42. 8.Event 사용하기 나. Event 입력 • Event 대상선택 • Event 선택 • Event 탭 선택 • Action 선택

  43. 9.실습 가. 동적 UI 제작 (ItemSet) • ItemSet으로 동적으로 생성 • ItemSet으로 선택 • 동적으로 생성될 Instance • Instance와 연결

  44. 정리 및 복습 정리 및 복습 • 1. XForms 문서의 이해 • 2. TFSystem구조 이해 • 3. TFDesigner 사용법 이해 (기초)

  45. 10.Q & A Q & A

  46. Thanks You

More Related