如何国际化你的闪电网络组件(LWC)

后端之巅
392 阅读10分钟

国际化你的Lightning Web组件(LWC)

即使你的LWC现在不需要国际化，但遵循i18n模式和保持DRY合规性也是无妨的。此外，这也很容易。

说每个人都至少有一个小毛病并不夸张。几年前，当我看"70年代秀"的时候，我觉得Red Foreman这个角色有点过分，他的观点、小毛病，以及那些似乎毫无征兆地刺激到他的东西。

几十年后的今天，年长的我可以体会到他的智慧之珠。好吧，也许有一两颗珍珠。

我最讨厌的事情之一是当我看到任何硬编码的应用程序的源代码。虽然程序代码风格扫描器和铸造机在保持开发人员的诚实方面做得很好，避免了像神奇的数字和表现层项目--如表格标签和文本--经常发现它们进入源代码库的方式。

早在2015年，我就注意到了这一点，当时我在做了几个多语种的应用程序后，接受了一份新工作。想象一下，当我无法在代码中找到任何资源文件，并最终发现所有的文本直接硬编码（英文）在Angular应用程序的HTML模板中时，我的挣扎。当我问一位QA分析师为什么会这样时，我被告知 "我们只支持英语"。有趣的是，就在我离开那份工作之前，一个新出现的优先事项正在冲击着功能团队：支持法裔加拿大人的用户。事实证明，英语不再是他们的应用程序需要支持的唯一语言了。

在这里，我将通过一个例子来说明用Lightning Web组件（LWC）可以多么容易地实现这一目标。

国际化（i18n）的重要性

国际化（i18n）将你的应用程序的自然语言方面外部化，其中包括以下项目：

  • 信息性文本

  • 帮助

  • 标签

  • 选项和值

考虑一下下面的HTML：

HTML

<html>
  <body>
    <h1>Welcome</h1>
    <p>This is welcome text</p>
  </body>
</html>

使用i18n，它将显示为如下所示：

HTML

<html>
  <body>
    <h1>{{ welcomeHeader }}</h1>
    <p>{{ welcomeMessage }}</p>
  </body>
</html>

由于这一变化，对于大多数语言来说，正在显示的文本可以很容易地被替换。(从右到左的语言是一个例外，可以作为另一个出版物的主题。)

使用i18n的另一个好处是，基于语言的应用程序的内容被从源代码中提取出来。这意味着产品所有者可以选择经常进行语言修改，而不需要部署应用程序。

在LWC中包括i18n

让我们假设我们的LWC有以下用例：

  • 欢迎页头

  • 欢迎文本

  • 文本字段的标签(姓名)

  • 货币的数字字段(Amount Due)

  • 日期字段(到期日期)

  • 下拉列表选项(最喜爱的季节)

  • 支持3种语言（英语、西班牙语和法语）

使用Salesforce的自定义标签和翻译

有许多不同的方法可以将应用程序的元素外部化，以实现i18n。由于我们将使用LWC，在Salesforce中使用自定义标签是一个内置的解决方案。

如果你还没有一个可以使用的Salesforce org，只需使用下面的URL就可以开始了。

developer.salesforce.com/signup

接下来，我们需要通过访问 "设置|翻译"部分，确保所有三种语言都已配置好，如下图所示。

启用了英语、西班牙语和法语后，我们现在可以访问设置|自定义标签部分，创建如下所示的表格。

下表提供了我们需要配置的标签和数值的摘要。

现在我们已经准备好了一切，是时候在一个新的组件中使用外部化元素了。

使用VS代码进行LWC开发

关于使用Visual Studio (VS)代码创建新的LWC的更详细说明，请查阅以下出版物。

将条形码支持添加到Salesforce移动应用程序中

在运行VS Code并安装了Salesforce扩展包后，开始使用i18n示例应用程序就像使用Cmd+Shift+P（在我的MacBook Pro上）或Ctrl+Shift+P（Windows机器）并输入以下命令一样简单。

SFDX: Create Project

为了使事情简单快捷，我选择了标准选项，并将我的项目称为LWCi18n。

接下来，我们需要连接到上面使用的Salesforce org。使用下面的Cmd+Shift+P/Ctrl+Shift+P命令，将VS Code连接到该组织。

SFDX: Authorize an Org

VS Code会提示登录URL选项。我选择了项目默认选项。当一个浏览器窗口出现时，我登录了我的沙盒org。VS Code现在已经连接到我的沙盒，我们准备开始使用LWCi18n组件。

从Salesforce检索标签

现有的对象和配置可以很容易地下载到VS Code中，只需点击左侧工具栏上的云图标。在这种情况下，我找到了自定义标签部分并下载了所有内容。

我还用同样的方法检索了所有的翻译。

创建i18nExample组件

我们可以使用以下Cmd+Shift+P/Ctrl+Shift+P命令来创建i18nExampleLightning Web组件。

SFDX: Create Lightning Web Component

我们需要做的第一件事是更新i18nExample.js-meta.xml ，使这个组件可以在Lightning页面上使用。

XML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

接下来，我们需要更新i18nExample.js ，如下图所示。

JavaScript

import { LightningElement, track } from 'lwc';
import welcomeHeader from '@salesforce/label/c.Welcome_Header';
import welcomeText from '@salesforce/label/c.Welcome_Text';
import labelName from '@salesforce/label/c.Label_Name';
import placeholderName from '@salesforce/label/c.Placeholder_Name';
import labelAmountDue from '@salesforce/label/c.Label_Amount_Due';
import placeholderAmountDue from '@salesforce/label/c.Placeholder_Amount_Due';
import labelDueDate from '@salesforce/label/c.Label_Due_Date';
import placeholderDueDate from '@salesforce/label/c.Placeholder_Due_Date';
import labelSeason from '@salesforce/label/c.Label_Season';
import placeholderSeason from '@salesforce/label/c.Placeholder_Season';
import valueSpring from '@salesforce/label/c.Value_Spring';
import valueSummer from '@salesforce/label/c.Value_Summer';
import valueFall from '@salesforce/label/c.Value_Fall';
import valueWinter from '@salesforce/label/c.Value_Winter';

export default class I18nExample extends LightningElement {

    label = {
        welcomeHeader,
        welcomeText,
        labelName,
        labelAmountDue,
        labelDueDate,
        labelSeason
    };

    placeholder = {
        placeholderName,
        placeholderAmountDue,
        placeholderDueDate,
        placeholderSeason
    };

    option = {
        valueSpring,
        valueSummer,
        valueFall,
        valueWinter
    };

    name;
    amountDue;
    dueDate;
    season;

    seasons = [
        {value: "1", label: valueSpring},
        {value: "2", label: valueSummer},
        {value: "3", label: valueFall},
        {value: "4", label: valueWinter},
    ];
}

上面的代码完成了以下任务。

  • 导入对Salesforce中创建的所有自定义标签的引用

  • 建立label,placeholder, 和option 对象来放置自定义标签。

  • 为组件将使用的四个表单字段创建变量:

    • 名称

    • 应付金额

    • 应付日期

    • 季节

  • 为季节字段的下拉列表的选择创建一个季节数组

请注意--为了保持对国际化的关注，我有意在Salesforce中没有一个与此表单相关的对象。这只是一个高层次的例子，以显示适当的信息，基于用户的地域。

接下来，我们更新i18nExample.html 模板，如下所示:

HTML

<template>
    <div class="slds-text-heading_large slds-border_bottom">{label.welcomeHeader}</div>
    <div class="slds-text-body_regular slds-m-top_xx-small slds-m-bottom_medium">{label.welcomeText}</div>
    
    <lightning-input 
        type="text" 
        label={label.labelName} 
        value={name} 
        placeholder={placeholder.placeholderName}></lightning-input>

    <lightning-input 
        type="number" 
        label={label.labelAmountDue} 
        value={amountDue} 
        placeholder={placeholder.placeholderAmountDue} 
        step="0.01"
        formatter="currency"></lightning-input>

    <lightning-input 
        type="date" 
        label={label.labelDueDate} 
        value={dueDate} 
        placeholder={placeholder.placeholderDueDate}></lightning-input>

    <lightning-combobox
        name="season"
        label={label.labelSeason}
        value={season}
        placeholder={placeholder.placeholderSeason}
        options={seasons}></lightning-combobox>
</template>

正如你所看到的，模板中没有一个硬编码的项目。相反，自定义标签被引用并根据用户的地域信息返回。

现在，我们准备将应用程序部署到Salesforce。

部署到Salesforce

将我的所有代码从本地机器推送到Salesforce很简单。我所需要做的就是在导航器中右击force-app/main/default，然后选择SFDX：将源码部署到机关选项。

完成后，我们就可以将Lightning Web组件添加到Salesforce的新应用中。

我切换到浏览器标签，登录到我的Salesforce组织，并打开设置视角。接下来，我浏览了Apps | App Manager页面并点击了New Lightning App按钮。

我决定将新的应用程序称为i18n Example，甚至还找到了一个漂亮的小图标来使用。我使用了向导中其余的默认设置，除了最后一个屏幕，在那里我授予所有用户对这个应用的访问权。

然后，我导航到用户界面|Lightning App Builder屏幕。在这里，我创建了一个新的Lightning App Page，名为i18n Example，它被设计成一个具有单一区域的App Page。

在屏幕的左侧，我可以在自定义部分看到我的i18nExample LWC。我所要做的就是把这个组件拖过来，然后把它放到基于Lightning的页面的单一区域中。

保存组件后，我使用了激活程序，将Lightning页面展示给客户使用。

在激活阶段，我将应用名称设置为i18n Example ，并在列表中找到了最佳图标。对于移动导航，我添加了i18n ExampleLighting应用，并确保它接近列表的顶部。

点击保存按钮后，i18n Example应用程序就可以使用了。

验证i18nExample组件

使用Salesforce，我打开了i18n示例应用程序，它像预期的那样显示了标签和占位符。

甚至最喜欢的季节下拉选项也完全按照我的要求出现。

使用移动应用程序，我打开了i18n示例应用程序，并填充了如下所示的表格。

我更新了我的Salesforce资料，将我的语言改为西班牙语，并在Salesforce中重新加载了该应用程序，显示了正确的标签和值。

下面是同样的表格，样本数据和下拉列表项目显示正确。

然后我把语言改为法语，并再次重新加载应用程序，这时显示的是我的应用程序的法语版本。

货币和日期格式也在这里调整了，还有下拉列表的选项。

包括对Lightning Web组件的i18n支持的真正酷的地方在于，Salesforce已经被设计为适应必要的外部化标签和价值。

今后，可以在Salesforce内部进行更新，而不需要改变代码或部署。

结论

从2021年开始，我一直在努力践行以下的使命宣言，我觉得它可以适用于任何IT专业人士。

"将你的时间集中在提供特性/功能上，以扩大你的知识产权的价值。充分利用框架、产品和服务来处理其他事情。

- J. Vester

通过引入将应用程序的自然语言方面外部化的能力，你实际上是在遵守我的个人使命宣言。Salesforce平台允许Lightning Web组件轻松地采取这种方法，这表明Salesforce是如何坚持我的使命宣言的另一个例子。

我最近向我的大儿子--他将在几周内完成他的计算机科学大学学位--表示，你永远不会后悔第一次以正确的方式做事情。如果有机会，你分配给适当计划的额外时间将在你生产的任何东西的长期支持性方面得到巨大回报。

虽然简单地开始在你的主要语言或框架中添加文本和标签是快速和容易的，但对于每个被迫参与这项工作的人来说，转换为外部化模型的技术债务将是痛苦的。

想想看，这就像试图用Fix-A-Flat来修理你车上的轮胎。虽然这罐溶液能提供足够的空气让你恢复运行，但你雇来清理轮胎内部混乱的机械师肯定会向你收取额外的费用，以 "正确 "的方式进行修理。

如果你对本出版物的源代码感兴趣，你可以在GitLab上找到它，地址如下。

gitlab.com/johnjvester…

祝你有一个非常棒的一天!

avatar
文章
阅读
粉丝