지난 포스팅에서 LWC 를 활용해서 dataTable 을 만들었는데 이것과 똑같이 vfpage 만들어보려고 한다
(포스팅 참조: https://nnn-ong.tistory.com/243)
컨트롤러는 동일하게 활용하겠다
먼저 vfpage 를 만든다
visualforcePage는 1페이지에서 모든게 관리되기때문에
기본 폼으로 덩어리를 나눠놓고 시작해야한다.
제일 상단부분은 컨트롤러선언
<apex:page controller="tableSampleController">
그 아래는 스타일 , 스크립스 , html 차례대로 선언하면 된다.
아래와 같이 js 에 window.onload 부분은 vfpage가 켜지자 마자 바로 실행되는 함수이다.
lwc 로 따지면 connectedcallback 과 같은느낌
vfpage js를 사용하려면 function 함수명(){} 으로 선언해서 쓰면되고, 아래와 같은 방식으로 함수명을 선언하여
활용하면된다.
<!-- JS -->
<script type="text/javascript">
window.onload = function(){
init();
};
function init(){
console.log(' vf가 켜지면서 바로 실행됩니다 ');
// 함수명을 입력하여 js를 사용
}
</script>
html 을 입력하여 table 을 기릴 수 있다.
<!-- html -->
<html>
<h1> ▼ VF로 만든 데이터테이블 화면입니다</h1>
<table class="custTable" style="width:100%">
<colgroup>
<col width="5%"/>
</colgroup>
<!-- 헤더 -->
<thead>
<tr>
<th>No</th>
<th>이름</th>
<th>폰번호</th>
<th>이메일</th>
</tr>
</thead>
<!-- 내용 -->
<tbody>
<apex:repeat value="{!contactMap}" var="item">
<tr>
<td>{!item}</td>
<td>{!contactMap[item].LastName}</td>
<td>{!contactMap[item].Email}</td>
<td>{!contactMap[item].MobilePhone}</td>
</tr>
</apex:repeat>
</tbody>
</table>
</html>
LWC 같은경우는아래와같이 for:each를 사용해서 for 문을 돌리면되지만 vfpage 에서는 <apex:repeat > 를 사용한다.
LWC 테이블 for문
contactMap 같은 데이터는 전부 controller 에서 데이터를 말아놓는다.
vfpage 에서 작성한 데이터를 controller 에 전송 (DML 처리) 하는 경우는@RemoteAction 이라는 어노테이션을 사용한다. controller 에서 vfpage로 넘기는 데이터는 어노테이션을 사용하지 않아도된다.
[ controller 공유]
LWC 에서는 @AuraEnabled 어노테이션을 사용하여 컨트롤러 메소드를 호출했지만
VF에서는 화면이 켜지는 동시에 controller 가 호출되다보니 , 메소드를 만들고 그 매소드를 실행을 해줘야
컨트롤러가 동작한다. (아래 getContactVf 참고)
vfpageTable.page 가 호출되면서 -> tableSampleController 가 호출 -> 말아진 데이터를 vf에 가져와서 화면에 노출
하는 과정으로 동작한다.
public with sharing class tableSampleController {
public Map<Integer,Object> contactMap {get; set;}
public tableSampleController(){
contactMap = new Map<Integer, Object>();
getContactVf();
}
/*
LWC 전용
연락처(Contact)정보 가져오기
*/
@AuraEnabled
public static List<Contact> getContactData(){
List<Contact> con = [ SELECT id , LastName , email , MobilePhone FROM Contact WHERE MobilePhone !=null LIMIT 1000 ];
return con;
}
/*
VisualForcePage 전용
연락처(Contact)정보를 가져와서 반환
*/
public void getContactVf(){
System.debug(' vf 실행 ~ ');
List<Contact> con = getContactData();
Integer seq = 1;
for(Contact contact : con){
contactMap.put(seq,contact);
seq++;
}
}
}
[vfpage 코드공유]
<apex:page controller="tableSampleController">
<!-- 스타일 -->
<style>
.custTable {
border-collapse: collapse;
}
.custTable th, .custTable td {
border: 1px solid rgb(255, 255, 255);
padding: 8px;
}
.custTable thead tr th {
background-color: #c71616;
/* color: aliceblue; */
}
/* 바디부분 적용 CSS */
.custTable tbody tr{
background-color: rgb(243, 243, 243);
}
/* 바디부분 테이블에 줄무늬 넣기 */
.custTable tbody tr:nth-child(2n-1){
background-color: rgb(210, 211, 210);
}
</style>
<!-- JS -->
<script type="text/javascript">
window.onload = function(){
init();
};
function init(){
console.log(' vf가 켜지면서 바로 실행됩니다 ');
}
</script>
<!-- html -->
<html>
<h1> ▼ VF로 만든 데이터테이블 화면입니다</h1>
<table class="custTable" style="width:100%">
<colgroup>
<col width="5%"/>
</colgroup>
<!-- 헤더 -->
<thead>
<tr>
<th>No</th>
<th>이름</th>
<th>폰번호</th>
<th>이메일</th>
</tr>
</thead>
<!-- 내용 -->
<tbody>
<apex:repeat value="{!contactMap}" var="item">
<tr>
<td>{!item}</td>
<td>{!contactMap[item].LastName}</td>
<td>{!contactMap[item].Email}</td>
<td>{!contactMap[item].MobilePhone}</td>
</tr>
</apex:repeat>
</tbody>
</table>
</html>
</apex:page>
완성! 아래와 같이 노출이 된다 .
다음포스팅에선 이 vfp 를 lwc 에 임배드하는것을 작성하겠다
