세일즈포스 Visualforce Basics

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 없이 액세스하면 페이지에 빈 데이터 입력 양식이 표시됩니다. 저장 을 클릭 하면 양식 데이터에서 새 레코드가 생성됩니다.
• 레코드 ID로 액세스하면 페이지에서 해당 연락처 레코드에 대한 데이터를 조회하고 편집 가능한 형식으로 표시합니다. 저장 을 클릭 하면 연락처에 대한 변경 사항이 데이터베이스에 다시 저장됩니다.
• 각 입력 필드는 값을 표시하는 방법에 대해 현명합니다.
  • 이메일 필드는 유효한 이메일 주소가 무엇인지 알고 있으며 잘못된 이메일을 입력하면 오류를 표시합니다.
  • 날짜 필드를 클릭하면 날짜를 더 쉽게 입력할 수 있도록 날짜 필드에 날짜 위젯이 표시됩니다.
• 저장 버튼 동작 방법, 표준 컨트롤러가 제공하는 표준 작업 중 하나를 저장 호출합니다.

Visualforce를 사용할 수 있는 곳

Salesforce는 조직 내에서 Visualforce를 사용할 수 있는 다양한 방법을 제공합니다. 

Salesforce의 기본 제공 기능을 확장하고 새로운 기능으로 교체하며 완전히 새로운 앱을 구축할 수 있습니다.

다음은 조직에 Visualforce를 추가할 수 있는 몇 가지 방법입니다. 

이 스크린샷은 예를 보여주고 있으며 조직의 사용자 지정 페이지와 앱을 반영하지 않는다는 점을 기억하십시오.

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

Visualforce 앱과 사용자 정의 탭은 모두 앱 시작 관리자에서 사용할 수 있습니다. 

앱 시작 관리자를 열려면 

 탐색 모음에서 을 클릭 합니다. 모든 앱과 항목을 보려면 모두 보기 를 선택 합니다.

사용자 지정 앱(1)을 클릭하여 활성화합니다. 앱에 추가한 Visualforce 탭을 포함하여 앱의 항목이 탐색 모음에 표시됩니다. 

앱 시작 관리자에서 액세스하려면 Visualforce 페이지를 탭에 추가해야 합니다. 

앱에 없는 Visualforce 탭은 모든 항목(2)에서 찾을 수 있습니다.

탐색 모음에 Visualforce 페이지 추가

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

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

Visualforce 페이지를 포함하여 페이지 레이아웃을 확장하여 표준 페이지에 완전히 사용자 정의된 콘텐츠를 표시합니다. 

여기에서의 동작은 페이지 레이아웃을 보기 위해 레코드의 세부 정보를 봐야 한다는 점을 제외하고 Salesforce Classic과 동일합니다.

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

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

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

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

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

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

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

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

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

Quiz

1. Visualforce is:

A.A web-based suite of tools designed for administrators and developers to interact with Salesforce via the Force.com APIs.

B.A web development framework that lets you build custom user interfaces for apps that can be hosted on the Force.com platform.

C.An integrated development environment with a collection of tools to create, debug, and test applications in your Salesforce organization.

D.A dynamic environment for viewing and modifying all the objects and relationships in a Salesforce organization.

 

2. You can display Visualforce pages in all of the following places, except:

A.From standard buttons or links

B.Within a standard page layout

C.From a tab

D.Within any Setup page

E.In Salesforce1

 

Visualforce 페이지 생성 및 편집

 

학습 목표

이 단원을 완료하면 다음을 수행할 수 있습니다.

• Visualforce 페이지가 무엇인지 설명하고 주요 속성을 설명합니다.
• 조직의 기존 Visualforce 페이지를 나열하고 엽니다.
• 개발자 콘솔을 사용하여 Visualforce 페이지를 만들고 편집합니다.
• 편집기에서 Visualforce 태그와 속성을 식별, 추가 및 사용자 지정합니다.

Visualforce 페이지 생성 소개

Visualforce 페이지는 애플리케이션 개발자를 위한 기본 빌딩 블록입니다. Visualforce 페이지는 표준 웹 페이지와 유사하지만 조직의 데이터에 액세스, 표시 및 업데이트할 수 있는 강력한 기능이 포함되어 있습니다. 페이지는 기존 웹 서버에서와 마찬가지로 고유한 URL을 통해 참조 및 호출할 수 있습니다.

Visualforce는 HTML과 유사한 태그 기반 마크업 언어를 사용합니다. 각 Visualforce 태그는 페이지 섹션, 목록 보기 또는 개별 필드와 같은 거칠거나 세분화된 사용자 인터페이스 구성 요소에 해당합니다. Visualforce는 거의 150개의 기본 제공 구성 요소를 자랑하며 개발자가 고유한 구성 요소를 생성할 수 있는 방법을 제공합니다. Visualforce 마크업은 HTML 마크업, CSS 스타일 및 JavaScript 라이브러리와 자유롭게 혼합할 수 있으므로 앱의 사용자 인터페이스를 구현하는 방법에 상당한 유연성을 제공합니다.

Salesforce에서 다양한 방법으로 Visualforce 페이지를 보고, 만들고, 편집할 수 있습니다. 또한 Salesforce API를 사용하여 Visualforce 페이지를 만들고 수정할 수 있으므로 다양한 외부 도구를 사용할 수 있습니다.

개발자 콘솔에서 Visualforce 페이지 만들기

Developer Console을 사용하여 다른 강력한 Lightning Platform 개발 도구에 액세스하여 Visualforce 페이지를 만들고 편집할 수 있습니다. 개발자 콘솔에는 자동 구문 강조 표시, 태그 쌍 일치, 자동 제안 및 자동 완성, 스마트 들여쓰기 및 마크업 및 코드 편집에 유용하게 사용할 수 있는 기타 여러 기능이 있습니다. 같은 페이지에서 잠시 작업하거나 사용자 정의 컨트롤러가 있는 Visualforce 페이지, 더 길고 복잡한 코드 등을 작업할 때 사용할 수 있는 최고의 기본 제공 도구입니다.

개발자 콘솔에서 Visualforce 페이지를 생성하려면 다음 단계를 따르십시오.

1. 귀하의 이름 또는 빠른 액세스 메뉴( 

   

   ) 에서 개발자 콘솔을 엽니다 . 개발자 콘솔이 새 창에서 열립니다.
2. 클릭 파일 | 새로운 | Visualforce 페이지 .
3. 새 페이지의 이름으로 HelloWorld를 입력하고 확인을 클릭 합니다. 개발자 콘솔에서 비어 있는 새 Visualforce 페이지가 열립니다.
4. 편집기에서 페이지에 대해 다음 마크업을 입력합니다.<apex:page> <h1>Hello World</h1> </apex:page>복사
5. 클릭 파일 | 저장 .
6. 새 페이지를 보려면 미리보기 를 클릭하십시오 . 렌더링된 페이지가 새 창에서 열립니다. 이 페이지 미리보기에는 Salesforce 스타일 지정이 없는 페이지가 표시됩니다. Lightning Experience 컨텍스트에서 페이지를 보려면 기본 Lightning Experience 브라우저 창으로 돌아가십시오. 브라우저의 JavaScript 콘솔을 열고 다음 코드를 입력합니다. pageName페이지 이름 으로 바꾸는 것을 잊지 마십시오 .$A.get("e.force:navigateToURL").setParams( {"url": "/apex/pageName"}).fire();복사이 JavaScript는 Lightning Experience navigateToURL이벤트를 실행하고 클래식 /apex/PageNameURL 에 입력하는 것과 동일 합니다. 코드에서 해당 URL 패턴을 볼 수도 있습니다.
7. 편집기에서 페이지에 텍스트를 추가하고 저장합니다.

   

    미리보기 창은 페이지를 저장할 때 변경 사항을 반영하도록 자동으로 새로 고쳐집니다. 앞으로 저장 지침을 생략할 것이지만 단계 사이에 페이지를 저장해야 합니다.

클릭 파일 | 기존 Visualforce 페이지 목록을 보려면 엽니다 . 페이지를 두 번 클릭하여 엽니다. Apex 클래스 및 트리거, Visualforce 구성 요소 등과 같은 다른 Salesforce 엔터티를 열 수도 있습니다.

자동 제안을 사용하여 속성 추가

Visualforce 구성 요소의 특성을 설정하여 해당 동작을 사용자 지정합니다. 자동 제안을 사용하여 Visualforce 구성 요소 태그에 속성과 값을 빠르게 추가합니다.

Visualforce 태그에 속성을 추가하고 수정하려면 다음 단계를 따르십시오.

1. HelloWorld 페이지 <apex:page>에서 닫기 바로 전에 여는 태그 내부를 클릭 합니다 >. 공백을 입력한 다음 s. 자동 제안은 입력한 내용에 대해 가능한 완성 목록을 표시합니다. 추가 문자를 입력하면 제안 목록이 일치하는 값으로만 ​​줄어듭니다.

   

2. sidebar가 선택 될 때까지 아래쪽 화살표 키를 누릅니다 . 리턴을 누릅니다. 사이드바 속성이 <apex:page>마크업 의 태그에 추가 되고 자동 제안이 가능한 값을 표시합니다.
3. 화살표 키를 사용하거나 입력 f하여 false를 선택하고 Return 키 를 누릅니다. 코드는 다음과 같아야 합니다.<apex:page sidebar="false"> <h1>Hello World</h1> </apex:page>복사
4. 변경 사항을 저장합니다.
5. 위의 단계를 반복하여 태그 에 추가 showHeader="false"하고 <apex:page>변경 사항을 저장합니다. 코드는 다음과 같아야 합니다.<apex:page sidebar="false" showHeader="false"> <h1>Hello World</h1> </apex:page>복사

자동 제안은 사용하려는 구성 요소와 각 속성의 기능과 기능을 이미 알고 있는 경우에 유용합니다. 특히 Visualforce를 배우는 동안에는 표준 구성 요소 참조를 자주 참조 하여 어떤 구성 요소가 있는지, 어떤 역할을 하는지, 사용 및 사용자 지정하는 방법을 알고 싶을 것입니다.

기본을 넘어

sidebar및 showHeader속성은 모두 Lightning Experience에 영향을 미치지 않으며 Lightning Experience 헤더를 억제할 방법이 없습니다. 기본값 showHeader은 이지만 trueLightning Experience에는 영향을 주지 않습니다.

페이지에는 글꼴, 크기 등에 대한 Salesforce 선택 항목을 일치시킬 수 있는 일부 Salesforce 스타일 시트가 여전히 포함되어 있습니다. 모든 Salesforce 출력을 억제하려면 standardStylesheets="false"스타일도 추가 하여 제거하십시오.

페이지 구조를 형성하기 위해 구성 요소 추가 및 구성

Visualforce 페이지에 구성 요소를 추가하고 정렬하여 페이지 구조를 구축합니다.

다음 단계에 따라 페이지에 새 Visualforce 태그를 추가하고 페이지 구조를 만드는 데 사용합니다.

1. HelloWorld 페이지 <apex:pageBlock>에서 텍스트 아래 에 구성 요소를 추가 합니다 “Hello World”. <apex:pageBlock>페이지의 관련 항목을 그룹화하는 구조화된 사용자 인터페이스 요소입니다. 자동 제안을 사용하여 추가하고 제목 속성을 로 설정합니다 “A Block Title”.
2. <apex:pageBlockSection>구성 요소 내부에 <apex:pageBlock>구성 요소를 추가합니다 . 제목 속성을 로 설정합니다 “A Section Title”. <apex:pageBlockSection>페이지에 구조와 계층을 추가하는 또 다른 구성 요소입니다. 렌더링되면 <apex:pageBlockSection>사용자가 요소를 축소하여 섹션 제목을 제외한 모든 요소를 ​​숨길 수 있습니다.
3. <apex:pageBlockSection>와 같은 구성 요소 내부에 일부 텍스트를 추가합니다 “I’m three components deep!”. 코드는 다음과 같아야 합니다.<apex:page> <h1>Hello World</h1> <apex:pageBlock title="A Block Title"> <apex:pageBlockSection title="A Section Title"> I'm three components deep! </apex:pageBlockSection> </apex:pageBlock> </apex:page>복사최상위 제목, 제목이 있는 접을 수 있는 섹션 및 일부 일반 텍스트가 있는 일부 구조를 표시하는 페이지가 있습니다.

   

4. <apex:pageBlockSection>첫 번째 다음에 다른 것을 추가 하고 제목을 로 설정하십시오 “A New Section”. 첫 번째 에서 했던 것처럼 구성 요소의 본문에 일부 텍스트를 추가합니다 <apex:pageBlockSection>. 코드는 다음과 같아야 합니다.

   <apex:page>     <h1>Hello World</h1>     <apex:pageBlock title="A Block Title">         <apex:pageBlockSection title="A Section Title">             I'm three components deep!         </apex:pageBlockSection>         <apex:pageBlockSection title="A New Section">             This is another section.         </apex:pageBlockSection>     </apex:pageBlock> </apex:page>

   <apex:pageBlockSection>태그가 태그 내에서 어떻게 중첩 되는지 확인하십시오 <apex:pageBlock>. <apex:pageBlockSection>부모 <apex:pageBlock>태그 안에 넣지 않고 자식 태그를 사용할 수 없습니다 .

페이지 만들기, 페이지에 속성 및 구성 요소 추가, 구성 요소를 함께 배열하여 페이지에 구조와 디자인을 제공하는 등 페이지를 함께 구성하는 모든 기본 사항을 배웠습니다.

좀 더 이야기 해줘...

개발자 콘솔은 Salesforce 조직 내에서 Lightning Platform 개발을 위한 가장 강력하고 기능이 완벽한 도구입니다.

Salesforce에서 Visualforce 페이지를 만들고 편집하는 두 가지 다른 기본 제공 방법이 있습니다.

• 개발 모드 "빠른 수정" 및 바닥글을 사용하면 새 페이지를 빠르게 만들거나 기존 페이지를 짧게 편집할 수 있습니다. 빠른 변경을 위해 또는 짧은 페이지를 만들어 앱 페이지에 통합하기 전에 백지에서 새 코드를 테스트하려는 경우에 좋습니다.
• 빠른 찾기 상자에 Visualforce Pages 를 입력한 다음 Visualforce Pages 를 선택하여 설정에서 사용할 수 있는 설정 편집기가 가장 기본적인 편집기이지만 개발자 콘솔 또는 개발 모드 바닥글에서 사용할 수 없는 페이지 설정에 대한 액세스를 제공합니다.

또한 Salesforce 조직에 연결하고 Visualforce 개발에 사용할 수 있는 Eclipse용 Lightning Platform IDE 플러그인과 같은 여러 외부 도구를 사용할 수 있습니다.

페이지에 추가 한 <apex:pageBlock>및 <apex:pageBlockSection>구성 요소는 Salesforce Classic 인터페이스 요소와 일치하는 사용자 인터페이스를 렌더링합니다. <apex:pageBlockSectionItem>및 를 포함하여 플랫폼 비주얼 스타일을 일치시킬 수 있는 다른 구성요소도 있습니다 <apex:pageBlockButtons>. 어느 것이 안에 둥지를 틀고 있는지 추측할 수 있습니까 <apex:pageBlockSection>?

Visualforce에는 다양한 사용자 인터페이스 요소와 동작을 제공하는 거의 150개의 기본 제공 구성 요소가 포함되어 있습니다. Visualforce 표준 구성 요소 참조 는 이러한 구성 요소를 나열하고 구성 요소 사용 방법에 대한 예제 코드를 포함하여 해당 속성을 문서화합니다.

 

Create a simple Visualforce page that displays an image Create a Visualforce page without the standard Salesforce header and display an image using the Visualforce image component. Challenge Requirements Create a new Visualforce page: Name: DisplayImage Label: DisplayImage It must not display the standard Salesforce header It must use a Visualforce apex:image component to display this image: https://developer.salesforce.com/files/salesforce-developer-network-logo.png

<apex:page showHeader="false" title="DisplayImage" sidebar="false">      <apex:form>         <table>             <tr>                 <td width="1000px" height="600px;" align="center">                     <apex:image url="https://developer.salesforce.com/files/salesforce-developer-network-logo.png" />                 </td>            </tr>         </table>     </apex:form> </apex:page>