How to Lightning Components - Part 2: Account Register

01_LightningAccountRegister.app

<aura:application>    
    <link rel="stylesheet" href="/resource/BootstrapSF1/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="/resource/BootstrapSF1/dist/css/docs.min.css" />
    <script type="text/javascript" src="/resource/jQuery" />
    <script type="text/javascript" src="/resource/BootstrapSF1/dist/js/bootstrap.min.js" />
    <script type="text/javascript" src="/resource/BootstrapSF1/js/docs.js" />
    <!-- Header Component -->
    <devjp:LightningBootstrapSF1Header header="How to Lightning Component" detail="- Sample Application -"  />
    <!-- Input Component -->
    <devjp:LightningAccountRegisterComponent />
</aura:application>

02_LightningAccountRegisterComponent.cmp

<aura:component controller="devjp.LightningAccountRegisterController"> 
    <!-- Account -->
    <aura:attribute name="newAccount" type="Account" default="{ 'sobjectType': 'Account',
                                                                  'Name': 'Sample Account !!',
                                                                  'AccountNumber': 'A-0001',
                                                                  'NumberOfEmployees': 100,
                                                                  'Phone': '000-111-2222'
                                                                }" />
    <!-- Message -->
    <aura:attribute name="message" type="String" default="" />
    
    <div class="padding">
        <form>
            <fieldset>
                <ui:InputText aura:Id="acc-name" label="Name" value="{!v.newAccount.Name}" class="form-control" placeholder="Account Name" />
                <ui:InputText aura:Id="account-number" label="AccountNumber " value="{!v.newAccount.AccountNumber}" class="form-control" placeholder="000" />
                <ui:InputNumber aura:Id="number-of-employees" label="NumberOfEmployees" value="{!v.newAccount.NumberOfEmployees}" class="form-control" placeholder="100"/>
                <ui:inputPhone aura:Id="phone" label="Phone"  value="{!v.newAccount.Phone}" class="form-control" placeholder="000-111-2222" />
                <br/>
            </fieldset>
            <div class="btnMargin">
                <ui:button label="Create Account!!" press="{!c.createAccountBtn}" />
            </div>
        </form>
        <aura:renderIf isTrue="{!v.message != ''}">
            <div class="message">
                <ui:outputText aura:Id="message" value="{!v.message}" />
            </div>
        </aura:renderIf>
    </div>
</aura:component>

03_LightningAccountRegisterComponentController.js

({
    createAccountBtn : function(component, event, helper) {
        helper.createAccount(component);
    }
})

04_LightningAccountRegisterComponentHelper.js

({
    createAccount : function(component) {
        var newAccount = component.get("v.newAccount");
        this.saveAccount(component, newAccount, function(a) {
            var messageField = component.find("message");
            var message = messageField.set("v.value", "新しい取引先「" +  a.returnValue.Name +"」を登録しました。");
        });        
    },
    saveAccount : function(component, account, callback) {
        var action = component.get("c.saveAccount");
        action.setParams({
            "account": account
        });
        
        if (callback) {
            action.setCallback(this, callback);
        }
        
        $A.enqueueAction(action);
    },
})

05_LightningAccountRegisterComponent.css

.THIS {
}
.THIS.padding {
    padding: 10px;
}
.THIS .btnMargin {
    margin-top: 20px;
}
.THIS .message {
    margin: 20px 0;
    padding: 10px;
    background-color: #4169e1;
    border-radius: 10px;
    color: #FFFFFF;
    font-weight:bold;
}

06_LightningAccountRegisterController.cls

public with sharing class LightningAccountRegisterController {
    
    @AuraEnabled
    public static Account saveAccount(Account account) {
        insert account;
        return account;
    }
}