WebSquare5 기본교육과정 - HiroSung/Study GitHub Wiki

교육과정

  • 실습 ] 다건 DataCollection처리
    • 공통코드 처리
    • 조회시 다건 데이터 처리
  • gridView 상세설명
    • 편집기능, 다건 데이터 연동
    • Property, Event, API
    • Master & Detail 처리
  • Q&A 및 샘플설명, WebSquare5 관련 site 소개

교육환경구성

  • WRM.zip 을 C:\에 WRM 폴더 만들어서 옮기고 7zip으로 여기에 풀기 함.
  • C:\WRM\DOC\기본교육문서 교육 자료
  • websquare.exe 실행
    • workspace 지정 : default 사용
    • ws5 만 교육에서 사용함.
    • 오른쪽 Servers - WSS 선택 마우스 오른쪽 서버 start : 혹시나 port 가 충돌이 되는 경우 port 를 변경하면됨.
    • Design View 화면 클릭 : 상단에 빨간 아이콘 클릭 - 브라우저의 화면이 조회됨

개요 (01_이론.pdf)

  • WS5는 이전의 버젼과 다름.
  • 화면 호출시 WebSquare5 Engine 실행 단계 (p12)
  • HTLM 소스 구조 vs WebSquare5 소스 구조 (p16~17)
    • ws5는 Model 영역이 head에 더 구성되어짐.
    • head.Model
      • dataColletction
      • workflowCollection : 주고받는 데이터 통신 정의
      • submission
    • body.UI
      • 컴포넌트 단위로 화면이 그려짐.
  • 프로젝트 시작 전 최소 체크 사항 (p22)
    • IE9 이하 버젼은 멀티업로드 기능은 Flash 로 제공됨. (HTML5 공식적인것임)
    • 대용량/다국어/웹접근성 - 교육 안함. 자료에서 확인하거라~

WebSquare5 Studio

  • Eclipse Oxygen + plugin 형태로 제공된것임.
  • Perspective View
    • WebSquare Designer
    • WebSquare Developer
      • Project View
        • Java Resources : java program (spring 기반)
        • WebContent : webroot
      • Design View
        • 5개의 tab으로 구성됨.
        • Design : 그림을 그림. 왼쪽에 Palette. 80여개의 comp.있음. 검색 가능.
        • Script : 스크립트함수를 만드는 것임.
          • 전역변수/지역변수 선언을 잘 해야 함. 메모리관리가 중요함.
          • onpageunload 시 사용했던 변수와 method 등... 메모리에 올라간 것을 삭제해야하는데. 번거롭지! 그래서, scwin. 이라는 object를 만들고 onpageunload 시 scwin 만 delete 하도록 함. 그런데, ws를 사용하면 engine에서 처리하게 됨.
          • scwin 은 메모리를 한곳에 관리하고자 하는 것임.
          • /ws5/WebContent/websquare/config.xml 파일에서
    <spa>
        <onpageunload value=""/> 
        <variable value="scwin,swing" clone="com" />  
        <scriptCache value="true"/> 
    </spa>
- DataCollection : dataMap, dataList 형태로 생성 가능.
  - 단건은 dataMap, 여러개인 경우는 dataList
  - linkeddatalist : 가져온 데이터 재활용위해. 분류만 사용하고자 할때. 요즘은 사용하지 않음. API 형태로 사용 가능하여 사용하지 않음.
  - aliasMap : 화면에 Frame 생성하여 가능. 부모창에 A map 생성하고, 자식은 alias.A 로 사용할 수 있음.
- submission : 통신 정의. Mode/Method/Media Type ... 등등
  - submission View 
- Source
  - 모든 정의를 하나의 xml로 만들어줌.
  - 여기서 코딩하면 안됨.
  • 기본브라우저

컴포넌트

  • 이벤트/API/속성으로 제어함.
  • property
    • 정적 제어.
    • 컴포넌트 선택하고 property view에서 속성 정보를 볼 수 있음.
  • 이벤트
    • 버튼과 같은... trigger
      1. property view 에서 빨간[E] 누르면 됨.
      2. Degisn에서 컴포넌트 선택하고 마우스 오른쪽 - 이벤트 선택하면 됨
  • API
    • 컴포넌트를 동적으로 제어하고자 할때 script에서 정의함.

WebSquare5 CSS 적용

  • 인라인 적용 방법
  • 인터널 적용 방법 (clsss 정의 후 컴포넌트에 적용)
    • style 탭에 - T 아이콘 클릭 하면 소스로 넘어감.
  • 익스터널 적용 방법 : 외부파일을 내 화면에 적용하는 방법. 3가지
    1. style tab - import external class - 파일선택
    2. design tab - 바닥에서 우클릭 - css 추가 - 파일선택
    3. project explorer에서 css 파일을 선택하고 design 화면에 드래그 하여 둠.
  • 우선순위는...
    • 익스터널 - 인터널 - 인라인

컴포넌트 (http://127.0.0.1:8080/ws5/websquare/websquare.html?w2xPath=/ws5/sample/compList/main_tabControl_wframe.xml)

기본컴포넌트

  • 화면에 포함된 컴포넌트 전체를 조회할 수 있음.
  • Spinner
    • Min/Max/증감의 단위
  • SearchBox : 값이 있는 경우 X 표시 노출
  • 동일 컴포넌트에 띄우기 보다는 독립된 기능으로 각각 띄움.
  • Editor
    • CK Editor을 구매해서 내장하여 지원한것임. (4.2.20)
    • 다른 에디터도 사용할 수 있음.
  • 출력
  • 항목 값, 선택
    • MultiSelect 는 PC에서만 사용. 그래서 checkCombobox 를 주로 사용함
  • 전송/이동
    • 허용가능한 확장자 : config에서 정의 가능

컨테이너

  • 그룹 : div 태그
  • Generator : 반복적으로 처리 할 때. 게시물 댓글
  • Switch 카드뉴스 형태
  • Accordion
  • IFrame
  • WFrame
    • iFrame 보다는 속도/메모리 적으로 향상됨. 파일 include 개념.
  • TabControl
    • property - **alwaysDraw **속성이 있음.

그리드뷰

  • 엑셀다운로드를 그대로 할 수 있음.

Pivot

  • 통계형태의 데이터 조회시 사용

메뉴, 트리

  • 드래그/드랍 가능

차트

  • WebSquare차트 : 막대/이중차트만 지원. 사용하지 않는 것이 좋음.
  • Fusion 차트 : 기본 지원 차트
  • Map 차트 : 행안부 데이터 / OpenAPI 로 적용한것

모바일

  • PC 컴포넌트와 다르게 모바일에 적합한 컴포넌트를 설명
  • DatePicker
  • FlipToggle
  • PageControl

UI Design

화면 구성 방법

  • Absolute Position
    • 파워포인트 또는 그림판의 도형 배치와 매우 흡사. 기준점 (left, top,right,bottom 을 잡고 크기 (width, 를 지정하여 배치하는 방법이다 ex) style="position:absolute ; left:20px; top:10px; width:150px; height:
  • Static Position
    • 이 정의되지 않았거나 position:static; 으로 정의된 경우이다
    • 소스 코드 의 순서와 display 값에 따라 배치되며 위치 속성 (left,top,right, 들은 무시된다 ex) style="width:150px; height:24px;"
  • Relative Postion
    • Static Position 의 확장으로 위치 속성들 (left, top 등 을 사용할 수 있다
  • Fixed Position
    • Absolute Position 의 확장으로 스크롤이 되어도 해당 위치 (left, top 등 에 고정되어있다
  • Sticky Position
    • Relative Position Fixed Position 와 같은 효과로 부모 컨테이너에 고정되어 fixed position 처럼 위치된다 CSS3 기능으로 CSS3 지원 브라우저에서만 적용된다
  • group 컴포넌트는 block 속성이지만 display:inline-table 스타일을 주면 inline 형태로 노출된다.
    • width, height를 주지 않으면 width는 부모의 속성, height는 자식의 높이를 가지게 됨

반응형.적응형

  • 반응형
  • 적응형
    • 내 Device가 무엇인지 인지하여 최적화된 화면으로 인식하는것.
    • tablelayout, grid에서 적용 가능.
    • property - adaptive:layout, adaptiveThreshold:700 으로 선택하는데 700사이즈인 경우 4열에서 2열로 변경함.

실습

  • 브라우저 조회화면에서 ctrl + 마우스우클릭 : 디버기 가능한 메뉴가 조회됨.
  • DataCollection
    • ㅁusedata 해야 등록된 데이터를 사용해서 하고자 함.

데이터 객체와 Submission (p91)

  • 통신하기 위한 정의
  • Error Handler . Submit-error
    • Error Handler 공통적인 Error처리를위해서.
  • Custom Handler . Submit-done
    • 공통처리

실습2

  • $p. : WS5에서 제공하는 util성 수행함수.
  • com.setCommonCode 을 공통으로 사용하는 JS를 정의해두고 ws에서는 가져다 사용함. DataCollection 동적으로 생성하도록 공통script 작성하도록 함 . ==> WRM교육 받으면 좋음.-
  • DataGridView
    • row는 property - dataList에서 datacollection을 매핑하면 됨.
    • col은 property - id 에서 노출하고자 하는 데이터의 컬럼값을 설정함
    • Grid항목에 성별의 코드를 값에 맞추고자 함. - 컬럼선택 - property : inputType - selectbox 를 선택함.
      • inputtype은 여러가지가 있음.
    • autoFit : 그리드의 크기를 지정함. lastColum / allColumn (autoFieMinWidth 최소 사이즈를 지정하는 것이 좋음) /
    • rownumVisible : 번호 넣기
    • sortable : true / 컬럼을 선택하고 설정. ctrl 클릭하고 여러게 설정 하면 됨.
    • sortEvent : onclick/더블클릭
    • useFilter : 헤더에 필터 적용
      • grid선택하고 ture로 하면 코드로 적용된 필터 적용
    • fixedcolumn :컬럼 고정
    • displayFormat
      • 주민번호 표현시 조건에 맞게 출력하고 싶은 경우.
    • column의 viewtype 을 icon으로 해주면 수정가능한 타입으로 노출됨
    • 그리드의 셀을 선택하였을때 큭정 컬럼의 값을 노출하는 등의 처리
	scwin.gridView1_oncellclick = function(row,col) {
		
		var _colId = gridView1.getColumnID(col);
		var _rowObj = dc_userInfoList.getRowJSON(row);
		
		if ( _colId == "EMP_NM") {
			alert("이메일 주소는 : " + dc_userInfoList.getCellData( row, "EMAIL") );
			console.log( _rowObj.EMP_NM + "의 정보" + _rowObj.EMAIL);
		}
		
	};
  • 입력
	scwin.btnInsert_onclick = function(e) {
		dc_userInfoList.insertRow();
		var _row_idx = gridView1.getFocusedRowIndex();
		dc_userInfoList.insertRow(_row_idx); // 현재 선택한 로우의 에 입력
	};
  • Grid의 짝궁은 datalist이다.
    • checkbox에 값을 담으려면 datalist 에 설정해야 함.
      • dc_userInfoList에 CHK 컬럼을 추가함.
      • checkbox는 CRUD에 영향을 주어서는 안되므로, chk로 만든 것은 dc에서 CHK 선택 후 property 에서 ignoreStatus=true로 설정하면 영향을 받지 않음.
  • 초기화
	scwin.btnInit_onclick = function(e) {
		dc_userInfoList.removeAll();
		dc_userInfoList.setJSON([]); // 빈 데이터를 지워라. 속도가 더 빠름.
	};
  • 변경사항 저장
        scwin.trigger1_onclick = function(e) {
		var modObj = dc_userInfoList.getModifiedJSON()
		console.table(modObj);
	};

- sub_save 라는 submission을 만들어서 변경된 Action type에 따라서 달리 호출하여 저장할 수 있음.

질문.

  • 부모에서 자식의 data를 사용할 수 있는지? (aliasmap)
  • iFrame과 wFrame의 차이
  • property - alwaysDraw는 언제적용된 속성인지?
  • 심화

"머리는 차갑게, 가슴은 따뜻하게" | [Top]

⚠️ **GitHub.com Fallback** ⚠️