Salesforce Visualforce：创建和编辑Visualforce页面

Salesforce VF：创建和编辑Visualforce页面

---

创建Visualforce页面简介

Visualforce页面是应用程序开发人员的基本构建块。Visualforce页面类似于标准网页，但是包含访问，显示和更新组织数据的强大功能。页面可以通过唯一的URL进行引用和调用，就像在传统的Web服务器上一样。

Visualforce使用类似于HTML的基于标记的标记语言。每个Visualforce标签对应一个粗略或细粒度的用户界面组件，例如页面的一部分，列表视图或单个字段。Visualforce拥有近150个内置组件，并为开发人员提供了一种创建自己的组件的方式。Visualforce标记可以与HTML标记，CSS样式和JavaScript库自由混合，从而为您实现应用程序用户界面的方式提供了极大的灵活性。

您可以在Salesforce中以几种不同的方式查看，创建和编辑Visualforce页面。还可以使用Salesforce API创建和修改Visualforce页面，从而启用各种外部工具。

---

在开发人员控制台中创建Visualforce页面

使用开发人员控制台创建和编辑Visualforce页面，并可以访问其他功能强大的Lightning Platform开发工具。

开发者控制台具有自动语法突出显示，标签对匹配，自动建议和自动完成，智能缩进以及许多其他功能，这些功能使其可用于编辑标记和代码。当您在同一页面上工作一段时间，或使用带有自定义控制器，更长，更复杂的代码等的Visualforce页面时，它是最好的内置工具。

请按照以下步骤在开发人员控制台中创建Visualforce页面。

1. 在您的姓名或快速访问菜单（设置齿轮图标）下打开开发者控制台。
   开发人员控制台将在新窗口中打开。
2. 单击 File | New | Visualforce页面。
3. 输入HelloWorld新页面的名称，然后单击 确定。
4. 在开发人员控制台中将打开一个空白的Visualforce新页面。
   在编辑器中，为页面输入以下标记。

<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>

5. 保存。
6. 要查看新页面，请点击 Preview预览。

---

添加和组成组件以形成页面结构

1. 在你的 hello，world 页面上，添加一个 <apex：pageBlock> 文字“ Hello World”下方的组件。
   <apex：pageBlock>是将页面上的相关项目分组的结构化用户界面元素。使用自动建议添加它，并设置title 属性为“块标题”。
2. 添加一个 <apex：pageBlockSection> 内部的组件 <apex：pageBlock> 零件。设置title 属性为“栏目标题”。
   <apex：pageBlockSection>是向页面添加结构和层次结构的另一个组件。渲染后， <apex：pageBlockSection> 元素可以由用户折叠以隐藏除节标题以外的所有标题。
3. 在里面添加一些文字 <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:pageBlock>
</apex:page>

4. 加上另一个 <apex：pageBlockSection> 在第一个之后，并设置 title 就像在第一个部分中一样，将一些文本添加到组件主体中。

<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> 标签。

---

最后

• 更多参考精彩博文请看这里：《陈永佳的博客》

• 喜欢博主的小伙伴可以加个关注、点个赞哦，持续更新嘿嘿！

---