059_Lightning Dev Sample1

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了059_Lightning Dev Sample1相关的知识，希望对你有一定的参考价值。

???????????????   ??????   ??????   ext   ????????????   ?????????   ??????   sample   output   

Lightning????????????

Lightning?????????Salesforce?????????????????????????????????????????????????????????????????????????????????Single Page Application??????????????????????????????Visualforce????????????????????????????????????????????????

Lightning???????????????????????????????????????aura???????????????????????????

  • ????????????XML??????????????????????????????????????????????????????????????????????????????html?????????Lightning??????????????????????????????????????????
  • ?????????Lightning?????????????????????????????????????????????????????????????????????Lightning??????????????????Lightning??????

????????????????????????????????????

  • ???????????????????????????javascript???????????????????????????????????????
  • ?????????????????????????????????????????????????????????????????????JavaScript????????????
  • CSS????????????????????????????????????CSS

Lightning??????????????????????????????????????????????????????????????????????????????????????????????????????Apex???????????????????????????????????????

Lightning??????

??????????????????????????????Hello World????????????????????????????????????Lightning?????????????????????????????????????????????

??????Lightning??????

???Developer Console???????????????File?????????????????????New???????????????Lightning Component?????????????????????helloworld???????????????Submit??????????????????????????????Lightning?????????

??????????????????

??????Lightning??????????????????????????????????????????????????????????????????????????????helloworld??????????????????Developer Console??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

??????Lightning??????????????????????????????.cmp???????????????????????????helloworld.cmp??????

??????????????????

???????????????????????????????????????????????????????????????

<aura:component >
</aura:component>

?????????Lightning????????????????????????aura:component???????????????

??????aura:component????????????????????????HTML?????????

<aura:component >
    <p> Hello world! </p>
</aura:component>

?????????????????????????????????????????????????????????

??????Lightning??????

Lightning??????????????????????????????????????????????????????Lightning??????????????????????????????Lightning????????????????????????????????????

Lightning????????????????????????????????????????????????Developer Console???????????????File?????????????????????New???????????????Lightning Application?????????????????????helloworld_APP???????????????Submit??????????????????????????????Lightning?????????

Lightning?????????????????????????????????Lightning?????????????????????????????????Lightning???????????????????????????

??????Lightning??????????????????????????????.app???????????????????????????helloworld_APP.app??????

????????????Lightning????????????????????????????????????????????????

<aura:application >
</aura:application>

?????????Lightning????????????????????????aura:application???????????????

??????????????????????????????????????????

<aura:application >
    <c:helloworld />
</aura:application>

????????????????????????????????????Preview??????????????????????????????Lightning?????????

??????????????????

??????Lightning??????????????????????????????????????????Hello world!?????????????????????????????????????????????????????????????????????????????????

???????????????CSS??????

??????helloworld????????????????????????????????????Hello world!?????????????????????????????????????????????????????????Developer Console????????????????????????STYLE??????????????????????????????helloworld.css????????????????????????????????????????????????CSS?????????

????????????????????????????????????CSS????????????????????????????????????????????????????????????.THIS????????????????????????????????????????????????????????????????????????

??????helloworld.css????????????????????????CSS?????????

p.THIS {
    font-size: 48px;
    color: blue;
}

?????????????????????????????????????????????????????????????????????????????????

??????????????????

?????????????????????

????????????helloworld??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

??????????????????????????????aura:attribute?????????????????????????????????????????????????????????????????????????????????{!v.?????????}????????????????????????

????????????helloworld???????????????????????????message???????????????????????????p???????????????

<aura:component >
    <aura:attribute name="message" type="String" default="test user" />
    <p> Hello world! - {!v.message} </p>
</aura:component>

????????????Lightning??????????????????????????????????????????Hello world!???????????????Hello world! - test user??????

????????????????????????????????????????????????????????????????????????????????????message???????????????????????????????????????????????????????????????

???????????????

?????????????????????????????????????????????????????????{!v.?????????}???????????????????????????v??????????????????????????????Value Provider??????????????????????????????????????????????????????????????????????????????????????????????????????{! }???????????????

?????????Lightning??????????????????????????????????????????????????????ui:outputText??????????????????value?????????????????????????????????????????????helloworld??????????????????????????????

<aura:component >
    <aura:attribute name="message" type="String" default="test user" />
    <p> <ui:outputText value="{! ???Hello world! - ??? + v.message}" /> </p>
</aura:component>

????????????????????????????????????????????????????????????????????????{! }??????????????????????????????????????????message???????????????????????????????????????????????????

???????????????

????????????????????????????????????????????????????????????????????????????????????????????????sObject???????????????

?????????

<!--????????????sObject????????????????????????-->
<aura:attribute name="account" type="Account" />
<!--????????????sObject???????????????????????????????????????????????????-->
<aura:attribute name="account" 
                type="Account" 
                default="{ ???Name???: ???Salesforce???,
                            ???Type???: ???Prospect???}"/>
<!--???????????????sObject????????????????????????-->
<aura:attribute name="address" type="Address__c" />
<!--???????????????sObject???????????????????????????????????????????????????-->
<aura:attribute name="address" 
                type="Address__c" 
                default="{ ???Name???: ???ExampleAddress???,
                            ???Street_name__c???: ???Example Street Name???}"/>
<!--??????????????????????????????-->
<aura:attribute name="contactList" type="List" />
<!--???????????????????????????????????????????????????-->
<aura:attribute name="textList" 
                type="List" 
                default="[???text 1???,
                            ???text 2???,
                            ???text 3???]" />

<!--??????????????????sObject???????????????-->
<aura:outputText value="{!v.account.Name}" />

????????????????????????????????????

??????????????????????????????????????????????????????????????????????????????????????????????????????aura:iteration??????????????????????????????

?????????

<aura:attribute name="textList" 
                type="List" 
                default="[???text 1???,
                            ???text 2???,
                            ???text 3???]" />

<!--??????????????????????????????-->
<aura:iteration items="{! v.textList }" var="singleText">
    <p> {! singleText } </p>
</aura:iteration>

????????????????????????????????????????????????aura:iteration???????????????????????????????????????textList?????????????????????????????????items?????????????????????singleText???????????????????????????????????????????????????????????????for(String singleText : textList)??????????????????????????????????????????{! }?????????????????????????????????????????????????????????????????????????????????v?????????

?????????????????????

????????????helloworld?????????????????????????????????????????????????????????message?????????????????????

??????????????????ui:button???????????????????????????????????????????????????????????????????????????????????????????????????????????????

???Developer Console??????????????????????????????CONTROLLER?????????????????????????????????????????????????????????helloworldController.js??????????????????JavaScript???????????????????????????????????????JS?????????????????????

???Developer Console??????????????????????????????HELPER??????????????????????????????????????????????????????helloworldHelper.js??????????????????JavaScript???????????????????????????????????????JS?????????????????????????????????????????????????????????

?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????helper.??????????????????????????????

????????????????????????????????????handleClick??????????????????????????????message??????????????????

handleClick : function(component, event, helper) {
    component.set(???v.message???, ???Updated Message!???);
}

???????????????????????????????????????????????????????????????handleClick????????????

<ui:button label="Change text" press="{!c.handleClick}"/>

?????????label??????????????????????????????????????????press???????????????????????????????????????????????????press????????????????????????

???????????????????????????{!c.?????????}?????????????????????JS????????????????????????????????????c?????????????????????Controller??????

???????????????????????????????????????????????????????????????????????????Hello world! - test user???????????????Hello world! - Updated Message!??????

?????????????????????

?????????????????????????????????????????????????????????

  • component???????????????????????????
  • event???????????????????????????
  • helper??????????????????????????????????????????????????????HELPER???????????????????????????????????????????????????helper.?????????()???????????????????????????HELPER?????????????????????

??????component.set(???v.????????????, ???????????????)?????????????????????????????????????????????????????????????????????????????????????????????

???????????????????????????component.get(???v.????????????)????????????????????????????????????

?????????

exampleFunction : function(component, event, helper) {
    // ??????message????????????
    var messageValue = component.get(???v.message???);

    // ??????message????????????
    component.set(???v.message???, ???value to set???);

    // ??????helper?????????????????????
    var resultFromHelper = helper.exampleHelperFunction();
}

????????????????????????????????????????????????????????????????????????event?????????

?????????????????????????????????????????????????????????????????????handleClick()??????????????????handleClick()????????????????????????event.getSource()??????????????????????????????

?????????????????????

<ui:button label="button text" press="{!c.handleClick}" />

???????????????

handleClick : function(component, event, helper) {
    // ??????????????????????????????
    var buttonClicked = event.getSource();

    // ?????????????????????????????????label?????????
    var buttonValue = buttonClicked.get(???v.label???);
    // buttonValue????????????button text???
}

???????????????????????????????????????????????????????????????????????????

?????????Apex??????

??????helloworld????????????????????????????????????????????????????????????????????????????????????GenePoint??????Account?????????????????????????????????????????????????????????????????????????????????????????????????????????Apex?????????????????????????????????????????????????????????

?????????????????????????????????????????????????????????

  • ??????Apex????????????????????????????????????????????????
  • ????????????????????????????????????sObject?????????????????????????????????????????????????????????????????????
  • ????????????Apex???????????????
  • ??????????????????Apex???????????????Apex???????????????????????????????????????????????????

??????Apex????????????

??????????????????Apex???????????????Lightning???????????????????????????????????????

  1. ???????????????????????????@AuraEnabled?????????
  2. ????????????????????????

?????????????????????Apex???????????????

public class LightningAccountController {
    @AuraEnabled
    public static Account getAccount(String name) {
        List<Account> accountList = [SELECT Id, Name, Phone 
                                     FROM Account
                                     WHERE Name LIKE :name
                                    ];
        if(accountList.size() > 0) {
            return accountList[0];
        } else {
            return null;
        }
    }
}

????????????????????????

??????helloworld????????????????????????????????????Account????????????

<aura:attribute name="account" type="Account" />

<ui:button label="Get Account" press="{!c.handleClick}" />
        
<p>
    <ui:outputText value="{!v.account.Name}" />
</p>

<p>
    <ui:outputText value="{!v.account.Phone}" />
</p>

????????????Apex???????????????

?????????Apex???????????????????????????aura:component?????????????????????controller????????????Apex???????????????

<aura:component controller="LightningAccountController">

??????????????????Apex???????????????Apex???????????????????????????????????????????????????

??????????????????Apex???????????????????????????????????????

??????helloworldController.js?????????????????????handleClick()???????????????

handleClick : function(component, event, helper) {
    // 1. ??????Apex??????????????????
    var action = component.get("c.getAccount");

    // 2. ??????Apex???????????????
    // ?????????????????????????????????????????????????????????component.get(???v.userInput???)
    action.setParams({
        "name": ???GenePoint???
    });

    // 3. ??????Apex??????????????????????????????
    action.setCallback(this, function(response) {
        // ??????Apex???????????????
        var state = response.getState();

        if (state === "SUCCESS") {
            // ??????Apex??????????????????????????????????????????????????????sObject??????????????????
            var result = response.getReturnValue();

            component.set(???v.account???, result);
        } else {
            // ????????????
            // Do nothing
        }
    });

    // 4. ????????????Apex??????
    $A.enqueueAction(action);
}

???????????????

  1. ??????Apex????????????????????????????????????Apex???????????????????????????????????????????????????
  2. Apex??????????????????????????????????????????????????????????????????????????????Apex???????????????????????????????????????????????????????????????????????????action.setCallback()???????????????????????????????????????????????????action.setCallback()???????????????????????????$A.enqueueAction(action);???????????????????????????
  3. ???Apex?????????????????????????????????????????????????????????????????????getReturnValue()??????????????????????????????????????????????????????????????????????????????????????????????????????????????????
  4. $A?????????????????????????????????????????????????????????????????????????????????

?????????????????????????????????????????????Get Account????????????????????????????????????Account??????????????????

??????????????????

?????????Event???????????????Handler???

???????????????????????????????????????????????????????????????Apex????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

Lightning???????????????Event???????????????Handler??????????????????????????????

???????????????????????????????????????

  1. ???????????????????????????????????????????????????
  2. ?????????????????????????????????????????????????????????????????????
  3. ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
  4. ??????????????????????????????A???????????????????????????????????????????????????????????????????????????B????????????????????????B???????????????????????????????????????????????????????????????A???B??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

?????????????????????type????????????????????????????????????APPLICATION?????????COMPONENT??????????????????????????????????????????????????????

???????????????????????????Account????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

???????????????????????????

  1. ????????????
  2. ????????????????????????
  3. ????????????????????????
  4. ???Lightning?????????????????????????????????

????????????

???Developer Console????????????File???????????????New?????????????????????Lightning Event??????????????????FindAccount????????????????????????????????????????????????FindAccount.evt?????????????????????????????????????????????

<aura:event type="COMPONENT" description="Event template" >
    <aura:attribute name="accountName" type="String" />
</aura:event>

???????????????????????????type?????????????????????COMPONENT????????????????????????????????????

?????????????????????????????????accountName??????????????????????????????Account??????????????????

????????????????????????

???????????????????????????????????????????????????????????????????????????????????????????????????aura:registerEvent?????????????????????????????????aura:handler??????????????????????????????????????????????????????????????????

???Developer Console??????????????????????????????FindAccountEventRegister?????????????????????????????????????????????

<aura:component >
    <aura:registerEvent name="findAccountEvent" type="c:FindAccount"/>

    <ui:button label="Get Account" press="{!c.handleClick}" />
</aura:component>

???????????????????????????????????????????????????????????????????????????????????????????????????

?????????????????????????????????handleClick()????????????

handleClick : function(component, event, helper) {
    var cmpEvent = component.getEvent(???findAccountEvent???);
    
    cmpEvent.setParams({
        "accountName": ???GenePoint???
    });
    
    cmpEvent.fire();
}

?????????????????????????????????component.getEvent()????????????????????????????????????????????????????????????????????????????????????????????????fire()????????????????????????

????????????????????????

???????????????????????????FindAccountEventHandler?????????????????????????????????????????????

<aura:component controller="LightningAccountController">
    <aura:attribute name="account" type="Account" />
    
    <aura:handler name="findAccountEvent" event="c:FindAccount" action="{!c.handleEvent}"/>

    <c:FindAccountEventRegister />
    
    <p>
        <ui:outputText value="{!v.account.Name}" />
    </p>
    
    <p>
        <ui:outputText value="{!v.account.Phone}" />
    </p>
</aura:component>

???????????????

  1. ?????????????????????????????????Account?????????????????????p??????????????????????????????????????????
  2. ?????????????????????????????????????????????Apex?????????????????????????????????????????????????????????Account?????????
  3. ??????????????????aura:handler???????????????????????????????????????????????????FindAccountEventRegister?????????????????????????????????????????????aura:handler?????????name??????????????????FindAccountEventRegister???????????????aura:registerEvent?????????name???????????????????????????findAccountEvent????????????????????????????????????????????????????????????????????????????????????
  4. ???????????????aura:handler??????????????????action??????????????????????????????????????????????????????????????????????????????????????????????????????????????????

??????????????????????????????????????????

handleEvent : function(component, event, helper) {
    var accountName = event.getParam(???accountName???);

    // ??????Apex?????????????????????Account?????????????????????????????????
    var action = component.get("c.getAccount");
    action.setParams({
        "name": accountName
    });
    action.setCallback(this, function(response) {
        var state = response.getState();

        if (state === "SUCCESS") {
            var result = response.getReturnValue();

            component.set(???v.account???, result);
        } else {
            // Do nothing
        }
    });

    $A.enqueueAction(action);
}

???????????????????????????event.getParam()???????????????????????????????????????????????????????????????????????????????????????FindAccountEventRegister????????????????????????????????????????????????????????????????????????FindAccountEventHandler????????????????????????????????????

???Lightning?????????????????????????????????

???Lightning????????????????????????????????????FindAccountEventHandler????????????????????????????????????????????????????????????Account?????????????????????????????????????????????????????????????????????????????????

???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

??????

?????????????????????????????????????????????Lightning??????????????????????????????????????????????????????????????????????????????????????????

Lightning?????????????????????????????????aura???????????????????????????????????????Vue???React??????????????????????????????Lightning??????????????????

 

以上是关于059_Lightning Dev Sample1的主要内容，如果未能解决你的问题，请参考以下文章

Atcoder arc059_b

051_Lightning 定义 直接翻译来的

使用 pytorch-lightning 进行简单预测的示例

053_Salesforce Lightning与Classic对比

[POI2011]Lightning Conductor

「POI2011」Lightning Conductor