刷Trailhead笔记- VF在lightning的使用

Trailhead链接

https://trailhead.salesforce.com/en/content/learn/modules/lex_dev_visualforce/lex_dev_visualforce_intro?trail_id=lex_dev

摘要

1. VF界面风格仍是classic的

2. VF的javascript的运行环境有变化，需检查是否仍能正常运行。

VF可做成custom tab显示在app launcher中，或者在all items中找到它。也可把tab加在app中。

VF仍可显示在standard page layout的detail 页面中。

VF还可作为visualforc component出现在app builder的选项中 (需给这个VF enable “Available for Lightning Experience...”)。

VF可被quick action调用。

Override standard button/link指向VF在Lightning中仍有效。

Custom button/link也可调用VF/URL。但是javascript button不再支持。

开发过程

1.准备开发编辑工具。基本上与classic模式下无区别。唯一例外的是，VF的development mode footer. 在使用这个mode的时候，运行apex/xxxVF会跳转回classic模式。development mode只能用于salesforce classic.

2. 查看页面。apex/xxxVF会跳转到classic 模式，即使你已经设置自己是lightning界面也不影响这一跳转。要想看到lightning界面下的效果，需要先访问VF所在的container app.

方式一，建一个VF tab.

方式二，建一个Lightning app (in development)并把VF添加进去

方式三，在lightning js中跳转这个VF页面：

$A.get("e.force:navigateToURL").setParams( {"url": "/apex/pageName"}).fire();

也可把这段代码加进收藏夹（好吧，还可以这么干）：

javascript:(function(){ var pageName = prompt('Visualforce page name:'); $A.get("e.force:navigateToURL").setParams( {"url": "/apex/" + pageName}).fire();})();

3.多环境的切换

最好是分别建一个环境及浏览器。尽管有些麻烦，但是对于正规测试有帮助。

测试

要分别验证classic/lightning/mobile及各浏览器的表现。

这样如果某些browser/device有问题，可及早发现，使得开发有更多回旋余地。如果在开发快结束才发现某设备不支持就很被动了。

 

VF app container

在classic 模式下VF本身是container,但是lightning模式下VF在一个container里面运行。这个container是一个单页面应用(SPA).它的模式是建立一个html壳然后加载javascript资源。

container负责请求资源，VF必须在container的限制内工作。一个重要的限制是跨域问题。

1. 安全方面的影响

session管理。可通过$Api.Session_ID获得当前session.但是不同的域有各自的session,要确保它们各自正确有效。

作用域影响。包括DOM/javascript scope和javascript全局变量。不能跨域操作。如果想影响其他域，用

window.postMessage给其他域的接收code发送一条信息。

2. 一些默认值的变化。<apex:page>的showHeader, sidebar在lightning下会变为为false。

standardStylesheets 在lightning下不受影响

3. sforce.one在lightning模式下会自动植入。它主要用于触发navigation events。

 

探测当前用户环境

$User.UITheme（应该显示） and $User.UIThemeDisplayed（实际显示）可用来探测当前用户环境。可用它结合rendered="xxx"来决定当前应该显示什么内容。

在apex中可以使用UserInfo.getUiTheme() and UserInfo.getUiThemeDisplayed() 

在javascript中用UITheme.getUITheme()

还有一种玩法（不推荐使用），获取当前用户的preference设定（不是实际显示）：

SELECT UserPreferencesLightningExperiencePreferred FROM User WHERE Id = 'CurrentUserId'

 

页面跳转的方法

传统的pageReference方式仍然可以使用。

javascript方式可以使用sforce.one.navigateToSObject （仅在lightning中有效）

类似还有sforce.one.navigateToURL, navigateToRelatedList, navigateToList, createRecord, editRecord

不要用window.location='xxx'来试图直接跳转

但是在classic里面, sforce.one不能用，此时可以直接用window.location

也不要使用静态链接，比如'/[accountId]/e' 而应该使用'{!URLFOR($Action.Contact.Edit, recordId)}'这样的标签， 或者javascript navigateToSObject(recordId)

 

样式

VF仍会使用classic的样式表。虽然我们可以定义样式模仿lightning 样式，但是lightning的样式仍在不停变化，模仿它是在追循一个移动的目标。

引用lightning design system有一个简单的方式 <apex:slds/>这比使用static resource更好一些。

引用css

<!-- Lightning Desktop extra styles --> <apex:variable var="uiTheme" value="lightningDesktop" rendered="{!$User.UIThemeDisplayed == 'Theme4d'}"> <apex:stylesheet value="{!URLFOR($Resource.AppStyles, 'lightning-styling.css')}" /> </apex:variable>

应该避免用slds模仿lightning来修改原有的VF.

在lightning中有少数component不能使用.有些特性在lightning下会表现不同。随着lightning的改进这些或许会改善。

lightning下，通过VF替换lightning的header, navigation menu是不可能的。同时classic的header/sidebar会被隐藏。

<apex:relatedList>中有些related list在lightning下是无法显示的，称为"blacklisted".

不能使用<apex:iframe>

不要直接window.location = xxx

override object list action在lightning下不能使用