Visualforce로 화면을 작성할 때, Visualforce 고유의 태그나 속성만을 이용해서는 구현하기 힘든 부분들이 있습니다.
예를 들면, 버튼 클릭 이벤트가 처리되기 이전에, 확인용 dialog를 표시한다던가, 체크 박스를 일괄 선택/해제 하는 기능 구현 한다던가 등등 이 있습니다.
이러한 경우, Javascript를 연동하면 추가적인 기능을 구현할 수 있습니다.
이번 포스팅에서는 간단히 Visualforce 개발 시, javascript를 연동하여 사용하는 방법에 대해서 설명하겠습니다.
# 목차
-
Javascript 함수 정의 방법
-
Visualforce 태그 내에서 Javascript 함수를 호출하는 방법
-
Javascript 함수 내에서 Apex 컨트롤러에 정의한 변수 및 함수 사용 방법
-
Javascript 사용 예시
# Javascript 함수 정의 방법
Visualforce 내에서 javascript 코드를 사용하는 방법은 <script type="text/javascript"> 태그 내부에 함수를 작성하는 것으로 사용할 수 있습니다.
<script type="text/javascript">
// javascript methods 정의
</script>
또는 Visualforce 태그 내에서 직접적으로 정의하는 것도 가능합니다.
<apex:commandButton onclick="[JavaScript Code]"/># Visualforce 태그 내에서 Javascript 함수를 호출 하는 방법
정의한 javascript를 호출하기 위해서는 Visualforce의 각 태그의 속성 중, javascript 코드를 호출하는 onclick, oncomplete 등과 같은 속성에 지정하여 호출해야 합니다.
하지만, Visualforce의 모든 태그가 javascript 를 호출 할 수 있는 속성을 갖고 있는 것은 아니니, 항상 개발자 가이드를 확인하여 사용할 수 있는 속성을 파악하는 것이 중요합니다.
여기서는 <apex:commandButton> 태그를 예시로 사용하겠습니다.
<apex:page>
<script type="text/javascript">
function jsMethod() {
// javascript 코드
}
</script>
<apex:form id="form">
<!-- javascript 호출용 버튼 -->
<apex:commandButton value="JS호출" onclick="jsMethod()"/>
<!-- 아래의 방법으로도 javascript 코드 실행 가능 -->
<!-- <apex:commandButton value="JS호출" onclick="[javascript 코드]"/> -->
</apex:form >
</apex:page>
commandButton의 속성은 다음의 개발자 가이드를 확인해주세요.
Visualforce 개발자 가이드 - apex:commandButton
# Javascript 함수 내에서 Apex 컨트롤러에 정의한 변수 및 함수 사용 방법
Apex 컨트롤러에서 정의한 변수나 함수를 호출하기 위해서는, 먼저 각 변수와 함수의 정보를 Visualforce 내에 지정할 필요가 있습니다.
예시로 다음과 같은 Apex 컨트롤러 클래스가 있습니다.
/**
* @description Visualforce Javascript 연동 페이지의 컨트롤러
*/
public with sharing class CntrlVfCallJs{
/**
* @description javascript에서 호출할 변수
*/
public String myVariable { get; set; }
/**
* @description 생성자
*/
public CntrlVfCallJs() {
myVariable = 'Hello World';
}
/**
* @description javascript에서 호출할 변수
*/
public void myMethod() {
// 화면에 메세지 표시
ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.INFO, 'Apex method called'));
}
}
Visualforce에서 Apex의 변수와 메서드를 지정하는 방법은 다음과 같습니다.
<!-- Apex 변수 지정 -->
<apex:inputHidden id="myVar" value="{!myVariable}"/>
<!-- Apex 메서드 지정 -->
<apex:actionFunction name="myMthd" action="{!myMethod}"/>
위에서 지정한 Apex 변수와 메서드를 호출하는 방법은 다음의 샘플 코드와 같습니다.
<!-- Apex의 변수를 사용하기 위해 해당 Apex클래스를 "controller" 속성을 지정 -->
<apex:page controller="CntrlVfCallJs" sidebar="false">
<script type="text/javascript">
function callApexVarMethod() {
// Visualforce에 지정한 Apex 변수를 javscript 내에서 습득(apex:inputHidden에 지정한 id 속성으로 대상을 지정)
var myVar = document.getElementById('{!$Component.form.myVar}').value;
// 역으로, Apex 변수의 내용을 변경하는 것도 가능
// document.getElementById('{!$Component.form.myVar}').value = 'Bye World';
// Apex 메서드 실행(apex:actionFunction에 지정한 name 속성으로 대상을 지정)
myMthd();
}
</script>
<apex:form id="form">
<!-- 화면 메시지 표시란 -->
<apex:pageMessages id="messagearea" showDetail="false"/>
<!-- Apex 변수 지정 -->
<apex:inputHidden id="myVar" value="{!myVariable}"/>
<!-- Apex 메서드 지정 -->
<apex:actionFunction name="myMthd" action="{!myMethod}"/>
<apex:pageBlock title="Apex 변수 및 메서드 호출">
<!-- 화면 메시지 표시란 -->
<apex:pageMessages id="messagearea" showDetail="false"/>
<apex:commandButton value="JS호출" oncomplete="callApexVarMethod()"/>
</apex:pageBlock>
</apex:form>
</apex:page>
☞ 버튼 클릭 결과 화면
# Javascript 사용 예시
1. 실행 확인 dialog 표시
<apex:page>
<script type="text/javascript">
function checkConfirm() {
if(confirm('javascript 호출 테스트')){
return true;
}
return false;
}
</script>
<apex:form id="form">
<!-- javascript 호출용 버튼 -->
<apex:commandButton value="JS호출" onclick="checkConfirm()"/>
<!-- 아래의 방법으로도 javascript 코드 실행 가능 -->
<!-- <apex:commandButton value="JS호출" onclick="if(confirm('javascript 호출 테스트')){return true;}; return false;"/> -->
</apex:form >
</apex:page>
☞ 버튼 클릭 결과 화면
2. 체크박스 전체 선택/ 전체 해제
Apex 컨트롤러 샘플
/**
* @description javascript로 체크박스 전체 선택/해제 컨트롤러
*/
public with sharing class CntrlAllCheckByJs {
/**
* @description 체크 박스를 표시하기 위한 Wrapper 리스트
*/
public List<MemberWrapper> memWrapperList { get; set; }
/**
* @description 체크박스를 표시하기 위한 Wrapper 클래스
*/
private class MemberWrapper {
public Boolean isSelected { get; set; } // 체크 박스에 사용할 Boolean형
public String memName { get; set; } // 회원 이름
// 개체 변수도 사용 가능
// 예) public Member__c member { get; set; }
/**
* @description 생성자
*/
public MemberWrapper() {
isSelected = false;
}
}
/**
* @description 생성자
*/
public CntrlAllCheckByJs() {
memWrapperList = new List<MemberWrapper>();
for (integer i = 0; i < 10; i++) {
MemberWrapper memWrapper = new MemberWrapper();
memWrapper.memName = '홍길동' + i;
memWrapperList.add(memWrapper);
}
}
}
Visualforce 샘플
<apex:page controller="CntrlAllCheckByJs" sidebar="false">
<script type="text/javascript">
/**
* @description 체크 박스의 전체 선택/해제
*/
function checkAll(cb,cbid) {
var inputElem = document.getElementsByTagName("input");
for (var i =0 ; i < inputElem.length; i++) {
if(inputElem[i].id.indexOf(cbid) != -1){
inputElem[i].checked = cb.checked;
}
}
}
</script>
<apex:form id="form">
<apex:pageBlock title="체크박스 전체 선택/해제">
<!-- 리스트를 표 형식으로 출력 -->
<apex:pageBlockTable value="{!memWrapperList}" var="member" style="width:10%;">
<apex:column style="width:2%; text-align:center;">
<!-- 헤더 부분에 체크박스 추가 -->
<apex:facet name="header">
<apex:inputCheckbox id="checkAll" onclick="checkAll(this, 'selectRow')"/>
</apex:facet>
<!-- 데이터 부분에 체크박스 추가 -->
<apex:inputCheckbox id="selectRow" value="{!member.isSelected}"/>
</apex:column>
<apex:column value="{!member.memName}" headerValue="회원 이름" style="width:8%;"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:form>
</apex:page>
☞ 결과 화면
2-1. 체크 박스로 선택한 요소의 정보 습득
2의 코드에서 다음 메서드와 버튼을 추가
Apex 컨트롤러 샘플(추가)
/**
* @description 체크 박스로 선택된 회원의 회원명 습득
*/
public void getSelectedItem() {
List<String> selMembersNameList = new List<String>();
for (MemberWrapper memWrap : memWrapperList) {
if (memWrap.isSelected) {
// 체크 박스가 선택된 경우
selMembersNameList.add(memWrap.memName);
}
}
System.debug('선택된 멤버명 ' + selMembersNameList);
}
Visualforce 샘플(추가)
<apex:pageBlock title="체크박스 전체 선택/해제">
<apex:pageBlockButtons location="top">
<apex:commandButton id="btnGetSelItems" value="선택" action="{!getSelectedItem}"/>
</apex:pageBlockButtons>
<!-- 리스트를 표 형식으로 출력 -->
---- 생략 ----
☞ 결과 화면
3. 링크로 선택한 요소의 정보 습득
※ 코드는 2에서 작성한 코드에 추가 기능을 추가하는 방법으로 구현하겠습니다.
Apex 컨트롤러 샘플(추가)
/**
* @description "선택" 링크로 선택된 회원명
*/
public String selMemberName { get; set; }
---- 생략 -----
/**
* @description "선택" 링크로 선택된 회원의 회원명 습득
*/
public void getMemberNameByLink() {
System.debug('선택된 멤버명 : ' + selMemberName);
}
Visualforce 샘플(추가)
<script type="text/javascript">
/**
* @description "선택" 링크로 선택한 회원 정보 습득
*/
function selectMember(mName) {
document.getElementById('{!$Component.form.selMemName}').value = mName;
getMemNameByLink();
}
</script>
<apex:form id="form">
<apex:inputHidden id="selMemName" value="{!selMemberName}"/>
<apex:actionFunction name="getMemNameByLink" action="{!getMemberNameByLink}"/>
----- 생략 -----
<apex:column style="width:3%;">
<apex:facet name="header">선택</apex:facet>
<apex:commandLink id="selectLink" value="선택" onclick="selectMember('{!member.memName}');"/>
</apex:column>
전체 샘플 코드는 아래의 링크에서 확인하실 수 있습니다.
github.com/mokochi/Blog_SFDC_UseJavaScriptInVisualforce.git
이상으로 Visualforce 내에서 javascript를 연동하여 사용하는 방법에 대해 알아보았습니다.
이 포스트의 사용 예시 이외에도 화면 전환, 팝업 표시, pdf화면 표시 등
여러 방면에서 javascript를 필연적으로 사용해야만 하는 상황이 자주 발생하니,
이 부분은 개발자 가이드를 통해 확실하게 익혀두는 것이 중요합니다.
추가로 이곳에서는 사용하지 않았지만, Visualforce 내에서 ajax 나 jQuery도 사용 가능합니다.
'Salesforce.com > Force.com' 카테고리의 다른 글
| [SFDC] Apex에서 Email 송신 (0) | 2020.08.29 |
|---|---|
| [SFDC] Visualforce로 csv 출력 (1) | 2020.08.22 |
| [SFDC] Salesforce 기초5) Apex와 Visualforce 개발 연습 - 도서 관리 프로그램 ver2 (0) | 2020.07.20 |
| [SFDC] Salesforce 기초4) Apex와 Visualforce 개발 연습 - 도서 관리 프로그램 (2) | 2020.07.02 |
| [SFDC] Salesforce 기초3) 개체(오브젝트)의 생성 및 사용법 (0) | 2020.06.30 |
