[WebSquare] 웹스퀘어 개발 시 자주 쓰이는 유틸 함수($p.~) 정리

 

웹스퀘어 개발 시 자주 쓰이는 유틸 함수($p.~) 정리

1. 데이터 관련 유틸 함수

1.1 $p.getComponent()

설명: 특정 컴포넌트를 ID로 가져옵니다.

var textbox = $p.getComponent("textboxId");
textbox.setValue("Hello, World!");

 

 

 

 

1.2 $p.executeSubmission()

설명: 특정 Submission을 실행하여 서버와 데이터를 송수신합니다.

$p.executeSubmission("submissionId");

 

 

 

 

 

1.3 $p.getDataCollection()

설명: 특정 DataCollection을 가져옵니다.

var dc = $p.getDataCollection("dataCollectionId");
console.log(dc.getAllData());

 

 

 

 

 

1.4 dc.setJSON()

설명: DataCollection에 JSON 데이터를 설정합니다.

var jsonData = [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }];
dc.setJSON(jsonData);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. 화면 제어 관련 유틸 함수

2.1 $p.openPopup()

설명: 팝업 화면을 엽니다.

$p.openPopup({
    id: "popupId",
    url: "popupPage.xml",
    width: 400,
    height: 300
});

 

 

 

 

 

 

2.2 $p.closePopup()

설명: 현재 팝업 화면을 닫습니다.

$p.closePopup();

 

 

 

 

 

 

2.3 $p.getPopupComponent()

설명: 팝업 내부의 특정 컴포넌트를 가져옵니다.

var component = $p.getPopupComponent("componentId");

 

 

 

 

 

 

2.4 $p.reload()

설명: 현재 화면을 다시 로드합니다.

$p.reload();

 

 

 

 

 

 

 

 

 

 

 

 

3. 이벤트 처리 관련 유틸 함수

3.1 $p.getEvent()

설명: 현재 이벤트 객체를 반환합니다.

var event = $p.getEvent();
console.log(event.type);

 

 

 

 

 

 

 

3.2 $p.addEvent()

설명: 특정 컴포넌트에 이벤트를 추가합니다.

$p.addEvent("buttonId", "onclick", function() {
    alert("Button clicked!");
});

 

 

 

 

 

 

3.3 $p.removeEvent()

설명: 특정 컴포넌트에서 이벤트를 제거합니다.

$p.removeEvent("buttonId", "onclick");

 

 

 

 

 

 

 

 

 

 

 

 

4. 화면 요소 제어 관련 유틸 함수

4.1 $p.show()

설명: 특정 컴포넌트를 화면에 표시합니다.

$p.show("componentId");

 

 

 

 

 

4.2 $p.hide()

설명: 특정 컴포넌트를 숨깁니다.

$p.hide("componentId");

 

 

 

 

 

 

4.3 $p.setStyle()

설명: 특정 컴포넌트의 스타일을 변경합니다.

$p.setStyle("componentId", { color: "red", fontSize: "16px" });

 

 

 

 

 

 

 

 

 

 

5. 데이터 유효성 검사 관련 유틸 함수

5.1 $p.validate()

설명: 특정 컴포넌트의 데이터 유효성을 검사합니다.

var isValid = $p.validate("inputId");
if (!isValid) {
    alert("유효하지 않은 데이터입니다.");
}

 

 

 

 

 

 

5.2 $p.clearValidation()

설명: 특정 컴포넌트의 유효성 검사 메시지를 초기화합니다.

$p.clearValidation("inputId");

 

 

 

 

 

 

 

 

 

 

 

 

6. 디버깅 및 로그 관련 유틸 함수

6.1 console.log()

설명: 디버깅을 위해 콘솔에 메시지를 출력합니다.

console.log("현재 값: ", $p.getComponent("inputId").getValue());

 

 

 

 

 

6.2 $p.alert()

설명: 알림 창을 띄웁니다.

$p.alert("알림 메시지");

 

 

 

 

 

 

 

 

 

 

7. 기타 유틸 함수

7.1 $p.getCurrentServerDate()

설명: 서버에서 현재 날짜와 시간을 가져옵니다.

var currentDate = $p.getCurrentServerDate("yyyyMMdd");
console.log(currentDate);

 

 

 

 

 

 

7.2 $p.clear()

설명: 특정 컴포넌트의 데이터를 초기화합니다.

$p.clear("inputId");

 

 

 

 

 

 

 

 

 

결론

위의 유틸 함수들은 WebSquare5에서 화면 개발 시 자주 사용되는 함수들로, 데이터를 관리하고 화면 요소를 제어하는 데 매우 유용합니다. 이러한 함수들을 적절히 활용하면 개발 생산성을 높이고 유지보수를 간편하게 할 수 있습니다.