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页面。
- 在您的姓名或快速访问菜单(设置齿轮图标)下打开开发者控制台。
开发人员控制台将在新窗口中打开。 - 单击 File | New | Visualforce页面。
- 输入HelloWorld新页面的名称,然后单击 确定。
- 在开发人员控制台中将打开一个空白的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>
- 保存。
- 要查看新页面,请点击 Preview预览。
添加和组成组件以形成页面结构
- 在你的 hello,world 页面上,添加一个 <apex:pageBlock> 文字“ Hello World”下方的组件。
<apex:pageBlock>是将页面上的相关项目分组的结构化用户界面元素。使用自动建议添加它,并设置title 属性为“块标题”。 - 添加一个 <apex:pageBlockSection> 内部的组件 <apex:pageBlock> 零件。设置title 属性为“栏目标题”。
<apex:pageBlockSection>是向页面添加结构和层次结构的另一个组件。渲染后, <apex:pageBlockSection> 元素可以由用户折叠以隐藏除节标题以外的所有标题。 - 在里面添加一些文字 <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>
- 加上另一个 <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> 标签。
最后
-
更多参考精彩博文请看这里:《陈永佳的博客》
-
喜欢博主的小伙伴可以加个关注、点个赞哦,持续更新嘿嘿!