Visualforce 시작하기

Lightning 웹 구성 요소는 Salesforce로 UI를 구축하는 데 선호되는 방법이므로 Visualforce에서 Lightning 웹 구성 요소로 마이그레이션 트레일을 살펴보고 LWC를 사용하고 현재 웹 표준을 준수하는 방법을 알아보세요. 그렇지 않으면 이 배지를 계속 사용하여 Visualforce에 대해 자세히 알아보세요.

학습 목표

이 유닛을 완료하면 다음을 수행할 수 있습니다.

• Visualforce의 정의와 유용한 기능에 대해 설명할 수 있습니다.
  
• Visualforce를 사용 가능한 경우를 세 가지 이상 나열할 수 있습니다.
  

Visualforce 소개

Visualforce는 개발자가 Lightning Platform에서 호스팅할 수 있는 모바일 및 데스크탑 앱을 위한 정교한 사용자 정의 사용자 인터페이스를 구축할 수 있게 해주는 웹 개발 프레임워크입니다. Visualforce를 사용하여 Lightning Experience의 스타일과 일치하는 앱을 구축할 수 있을 뿐만 아니라 완벽하게 사용자 정의된 고유한 인터페이스를 구축할 수 있습니다.

Visualforce를 통해 개발자는 Salesforce의 기본 제공 기능을 확장하고 새로운 기능으로 교체하며 완전히 새로운 앱을 구축할 수 있습니다. 강력한 기본 제공 표준 컨트롤러 기능을 사용하거나 Apex에서 사용자 정의 비즈니스 로직을 작성합니다. 조직을 위한 기능을 구축하거나 AppExchange에서 판매용 앱을 만들 수 있습니다.

Visualforce 앱 개발은 웹 앱을 구축한 사람이라면 누구에게나 익숙합니다. 개발자는 구성 요소, HTML 및 선택적 스타일 요소를 구성하여 Visualforce 페이지를 만듭니다. Visualforce는 모든 표준 웹 기술 또는 JavaScript 프레임워크와 통합하여 보다 생동감 있고 풍부한 사용자 인터페이스를 제공할 수 있습니다. 각 페이지는 고유한 URL로 액세스할 수 있습니다. 페이지에 사용자가 액세스하면 서버는 페이지에 필요한 모든 데이터를 처리하고 페이지를 HTML로 렌더링하고 결과를 브라우저에 반환하여 표시합니다.

Visualforce 페이지의 예

다음은 작동하는 Visualforce 페이지의 간단한 예입니다.

<apex:page standardController="Contact" >
	<apex:form >
		<apex:pageBlock title="Edit Contact">
			<apex:pageBlockSection columns="1">
				<apex:inputField value="{!Contact.FirstName}"/>
				<apex:inputField value="{!Contact.LastName}"/>
				<apex:inputField value="{!Contact.Email}"/>
				<apex:inputField value="{!Contact.Birthdate}"/>
			</apex:pageBlockSection>
			<apex:pageBlockButtons >
				<apex:commandButton action="{!save}" value="Save"/>
			</apex:pageBlockButtons>
		</apex:pageBlock>
	</apex:form>
</apex:page>

이 페이지는 연락처 데이터 입력 양식을 표시합니다.

이 페이지는 12줄이 넘는 마크업에서 많은 작업을 수행합니다.

• 자동 데이터 액세스 및 수정, 표준 작업 등을 제공하는 Visualforce 프레임워크의 일부인 Visualforce 표준 컨트롤러에 연결합니다.
  
• 레코드 ID 없이 액세스하면 페이지에 빈 데이터 입력 양식이 표시됩니다. Save(저장)를 클릭할 경우 양식 데이터에서 새 레코드가 생성됩니다.
  
• 레코드 ID로 액세스하면 페이지에서 해당 연락처 레코드에 대한 데이터를 조회하고 편집 가능한 형식으로 표시합니다. Save(저장)를 클릭할 경우 연락처에 대한 변경 사항이 데이터베이스에 다시 저장됩니다.
  
• 각 입력 필드는 값을 표시하는 방법에 유용하게 사용됩니다.
  

• 이메일 필드는 유효한 이메일 주소에 대해 알고 있으며 잘못된 이메일을 입력하면 오류를 표시합니다.
  
• 날짜 필드를 클릭할 경우 날짜를 더 쉽게 입력할 수 있도록 날짜 필드에 날짜 위젯이 표시됩니다.
  

• Save(저장) 버튼은 표준 컨트롤러에서 제공하는 표준 작업 중 하나인 저장 작업 메서드를 호출합니다.
  

Visualforce를 사용할 수 있는 경우

Salesforce는 조직 내에서 Visualforce를 사용할 수 있는 다양한 방법을 제공합니다. Salesforce의 기본 제공 기능을 확장하고 새로운 기능으로 변경하여 완전히 새로운 앱을 구축할 수 있습니다.

다음은 조직에 Visualforce를 추가할 수 있는 몇 가지 방법입니다. 이 스크린샷은 예시를 보여주며 조직의 사용자 정의 페이지와 앱을 반영하지 않는다는 점을 기억하세요.

앱 시작 관리자에서 Visualforce 페이지 열기

Visualforce 앱과 사용자 정의 탭은 모두 앱 시작 관리자에서 사용할 수 있습니다. 앱 시작 관리자를 열려면 탐색 막대에서 를 클릭합니다. 모든 앱과 항목을 보려면 View All(모두 보기)을 선택합니다.

사용자 정의 앱 (1)을 클릭하여 활성화합니다. 앱에 추가한 Visualforce 탭을 포함하여 앱의 항목이 탐색 막대에 표시됩니다. 앱 시작 관리자에서 액세스하려면 Visualforce 페이지를 탭에 추가해야 합니다. 앱에 없는 Visualforce 탭은 모든 항목 (2)에서 찾을 수 있습니다.

탐색 막대에 Visualforce 페이지 추가

앞의 예에서 설명한 대로 Visualforce 탭을 앱에 추가할 수 있으며 앱의 탐색 막대에 항목으로 표시됩니다.

표준 페이지 레이아웃에 Visualforce 페이지 표시

Visualforce 페이지를 포함하여 페이지 레이아웃을 확장하여 표준 페이지에 완전히 사용자 정의된 컨텐츠를 표시합니다. 여기에서의 동작은 페이지 레이아웃을 보기 위해 레코드의 세부 사항을 확인해야 한다는 점을 제외하고 Salesforce Classic과 동일합니다.

Lightning 앱 빌더에서 Visualforce 페이지를 구성 요소로 추가

Lightning 앱 빌더에서 사용자 정의 앱 페이지를 생성할 경우 Visualforce 구성 요소를 사용하여 페이지에 Visualforce 페이지를 추가할 수 있습니다.

Visualforce 페이지에 대해 "Lightning Experience, Lightning 커뮤니티 및 모바일 앱에서 사용 가능"을 활성화하여 Lightning 앱 빌더에서 이를 사용할 수 있도록 해야 합니다.

빠른 작업으로 Visualforce 페이지 시작

Lightning Experience 사용자 인터페이스에서의 배치는 Salesforce Classic과 상당히 다르지만 빠른 작업을 추가하는 프로세스는 거의 동일합니다. 개체의 페이지 레이아웃에서 적절한 게시자 영역에 추가합니다.

표준 버튼 또는 링크를 재정의하여 Visualforce 페이지 표시

Visualforce 페이지를 사용하여 개체에서 사용 가능한 작업을 재정의할 수 있습니다. 사용자가 재정의된 버튼이나 링크를 클릭하면 표준 페이지 대신 페이지가 표시됩니다. 이 설정은 Salesforce Classic과 거의 동일합니다. 실제로 작업 재정의를 정의할 때 Lightning Experience에 있다고 하기 어려울 수 있습니다.

사용자 정의 버튼 또는 링크를 사용하여 Visualforce 페이지 표시

개체에 대해 정의하여 버튼 및 링크 형태로 개체에 대한 새 작업을 만들 수 있습니다. JavaScript 버튼 및 링크는 Lightning Experience에서 지원되지 않지만 Visualforce(및 URL) 항목은 지원됩니다. Visualforce 버튼 및 링크를 정의하는 프로세스는 Salesforce Classic의 프로세스와 동일하므로 여기에 표시하지 않겠습니다.

리소스

• Visualforce 개발자 가이드
• Dreamforce 세션: Visualforce 소개
• Trailhead: Lightning 앱 빌더
• Trailhead: Lightning Experience에서 Visualforce 사용