240131 웹스퀘어 교육

• websquare 개발자 교육 재생목록
  https://www.youtube.com/watch?v=Xw9htiuCztI&list=PL7a9HhkvOVb09T_2Xdxs4sPgyDjkGlT9G&index=2&t=2394s

시작

• websquare page component 생성
  
  

• inputbox 생성
  
  
  

• calendar 생성
  
  
  

DataMap vs DataList

• DataCollection
  
  • datamap: 각각의 항목에 값이 하나일 때
  • datalist: 값이 여러개일 때 ex) 인사팀 사람들의 이름, 성별 등

DataList, LinkedDataList

• DataList 추가
  
  

• LinkedDataList 추가
  • DataList와 bind하기
    
    

iframe vs wframe

참고: https://inswave.com/confluence/pages/viewpage.action?pageId=11895122

• iframe 추가
  
  

• wframe 추가(권장됨)
  • iframe보다 메모리를 적게 차지함
    
    

---

• 브라우저 실행 단축키
  • ctrl + S 후, F7

---

뷰

• 뷰 초기화시키기 ex) 실수로 palette 뷰 닫았을 때
  

• 뷰 추가하기
  
  

---

Property

속성

• Placeholder
  
  
  

• initValue
  
  

이벤트

• trigger 추가
  
  
  

• script 버튼 클릭
  
  

scwin.btnSelect_onclick = function(e) {
    alert("처리중입니다.")
};

• 결과 확인
  

• 이벤트 생성하는 다른 방법
  

스타일

inline 적용법

internal 적용법

external 적용법 (권장됨)

• css파일 생성
  
  

• class 이름 지정
  

• css 파일을 화면에 드래그하면 적용됨
  

API

• id 부여
  

scwin.onpageload = function() {
	// if (로그인자 == '0001') {
        ipt1.setValue("123456789");
    // }
}; 

Outline

Design

Head

---

실습

SelectBox

• all option
  
  

• choose option
  
  

radio button

scwin.onpageload = function() { 
    // if (로그인자 여자 == "F") 
    ui_gender.addItem("F", "여자", 0);
    ui_gender.addItem("M", "남자", 1);
};

DataCollection

• datalist 추가
  

• 행 추가
  

• nodeset, label, value 연결
  

• 데이터 입력(권장되지 않는 방법!!)
  

• 결과 확인
  

• datacollection 보기
  
  

Submission

• request용 datamap 추가 (dc_reqUserInfo)
  
  

• response용 datamap 추가 (dc_userInfo)
  

• submission 추가
  

• submission test, send
  

• 조회버튼 onclick
  

scwin.btn_select_onclick = function(e) {
    $p.executeSubmission("sub_select")
};

• 조회버튼 클릭
  
  

• datamap의 key를 각각의 폼에 드래그&드랍해서 reference 걸기
  

• 결과 확인
  

• reference 확인
  

Grid

• grid의 datalist 지정
  

• 값의 id 지정
  

• 조회 버튼 클릭
  

• datalist 드래그&드랍
  

• 그리드에 모두 추가되었음
  
  

• 성별을 M/F가 아닌 남성/여성으로 표시
  
  

• autofit으로 간격 맞추기
  
  

• sortable
  

• ctrl + 더블클릭으로 멀티소트 가능
  

• usefilter
  
  

• context menu