Code your own Lightning ComponentsIncluding Lightning Chess

Amsterdam World Tour - April 14th 2016

Lieven Juwet• Developer @ ABSI

• @LievenJuwet

Samuel De Rycke• Technical Solution Architect @ ABSI

• Salesforce MVP

• Co-Leader BE User Group

• @SamuelDeRycke

#SalesforceDevs

#SalesforceTour

#Lightning

Agenda

• Chess demo

• Lightning component framework

• Lightning components

• Communication between components

• Calling Apex

Demo: Lightning Chess

Lightning Component Framework

• Javascript/HTML5/CSS3 client

• Databinding & UI Rendering

• Stateful client & Stateless server

• Improved performance

• Component Encapsulation

• Event-driven approach

Lightning Component Framework

● Lightning Application

● Lightning Component

● Lightning Event

Lightning Component

• A Component bundle can contain multiple elements

• Component: UI Markup

• Controller

• Helper

• Style

• Renderer

Component Bundle

With each component comes its own responsibility!

Component Controller HelperStyle

RendererApex

Controller

Chess Components• Main_Game_Component

• Manage any type of game.

• Chessboard_Component• Manage the state of the chessboard by handling location and streaming events + chess logic

• Chessboard_Location_Component• Handle action events and render the correct state of his location.

• Player_List_Component• Manage and display the online players and issue challenges.

• Challenge_List_Component• Manage incoming challenges

• Streaming_API_Component• Subscribe to PushTopics and convert streaming events into lightning events

Lightning ComponentChessboard Component markup

<!-- Chessboard Component --><aura:component controller='ChessGameController' extends="c:Abstract_Game" > <!-- Set Attributes --> <aura:attribute type="Array" name="locations"></aura:attribute>

<!-- Set Event Listeners --> <aura:handler event="c:StreamingEvent" action="{!c.handleStreamingEvent}"/> <aura:handler event="c:Promotion_Complete" action="{!c.handlePromotion}"/> <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

<!-- Set Event thrown --> <aura:registerEvent name="LocationAction" type="c:LocationAction"/> <aura:iteration var="row" items="{!v.locations}"> <aura:iteration var="location" items="{!row}"> <c:ChessBoardLocation location="{!location}" click="{!c.handleLocationClick}" />

</aura:iteration> </aura:iteration> </aura:component>

Lightning Component

• Declare the attribute components

• Attribute values are stored on the value provider (v)

• Access and set the values in Javascript

• Set by parent components

• Define access: Global, Public, Private

• Use them to bind your data to HTML/Components

Component Attributes

<aura:attribute name=”locations” type=”Array”></aura:attribute>

<aura:iteration var="row" items="{!v.locations}">

Lightning Component

• Locations updated by issuing component.set(‘v.locations’,newLocations)

• Re-render both iterations

• 64 new components created each time

• Move render responsibility from a central point for many components (heavy) to components individually.

Component rendering/re-rendering

<aura:iteration var="row" items="{!v.locations}"> <aura:iteration var="location" items="{!row}"> <c:ChessBoardLocation location="{!location}" click="{!c.handleLocationClick}" /> </aura:iteration> </aura:iteration>

Lightning Chess: Event driven approach

<!-- Chessboard Component --><aura:component controller='ChessGameController' extends="c:Abstract_Game" > ... <!-- Set Event Listeners --> <aura:handler event="c:StreamingEvent" action="{!c.handleStreamingEvent}"/> <aura:handler event="c:Promotion_Complete" action="{!c.handlePromotion}"/> <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

<!-- Set Event thrown --> <aura:registerEvent name="LocationAction" type="c:LocationAction"/>

... </aura:component>

Lightning Chess: Component Communication

Chessboard

Chessboard Location

x64Location Clicked

Location Action

Chess Logic

Event driven approach: Benefits

• Each component has its own responsibility

• Loose coupling• Chessboard does not know who receives the event and what it does.• Location doesn’t know the subscriber and doesn’t know what happens

• Subscribe more components to these events• Example: Overview of fallen pieces

• Reusability of components• Example: History of chess games

Component Controller

Component Controller

• Contains Javascript functions

• Bind controller functions in the component markup

• Access component attributes in the controller

Component Controller

• Contains the Javascript functions

• Bind controller functions in the component markup

• Access component attributes in the controller

<div … onclick=”{!c.handleLocationClick}”>…

</div>

Component Controller

• Obtain and update component attribute values

• Send out new events

• Make a server call

handleLocationClick : function(cmp,event,helper){

var location = cmp.get(‘v.location’);

var e = cmp.getEvent(‘click’);e.setParams({‘location’ : location});e.fire();

}

Communication with Events

2 types of events

• Component event• Parent component can register a handler function directly• Send upwards in the component hierarchy through event bubbling

• Application Event• Functions as a broadcast.• All components in the application can register a handler

Component Event<aura:event type="COMPONENT">

<aura:attribute name="location" type="Object" />

</aura:event>

<aura:registerEvent name="click" type="c:ChessboardLocationClicked"/>

var e = cmp.getEvent('click'); e.setParams({'location':location}); e.fire();

<aura:handler name="click" event="c:ChessboardLocationClicked" action="{!c.handleLocationClick}"/>

<c:ChessBoardLocation location="{!location}" click="{!c.handleLocationClick}" />

Application Event <aura:event type="APPLICATION">

<aura:attribute name="payload" type="Object"/>

<aura:attribute name="actionType" type="String"/>

</aura:event>

<aura:registerEvent name="LocationAction" type="c:LocationAction"/>

var e = $A.get('e.c:LocationAction');

e.setParams({'payload':{'locations':possibleLocations},'actionType':'setSelectable'});

e.fire();

<aura:handler event="c:LocationAction" action="{!c.handleActionEvent}"/>

Component Helper: sharing functionality• Each component can have helper functions

• Contains functions that are used on multiple locations in the controller

• Avoid duplicate code!

Component Controller Helper

Component style

• Component CSS is encapsulated

Component Controller HelperStyle

Component style

Component renderer

Perform your DOM manipulations in the render/re-render functions

Component Controller HelperStyle

Renderer

Component renderer

Calling Apex

Component Controller HelperStyle

Renderer Apex Controller

Calling Apex

Use AuraEnabled methods retrieve/send data to the server

Link the APEX controller to the component

public class ChessboardController{

@AuraEnabledpublic static Object getBoardPieces(Id game) {

return [select Active__c,Piece_Color__c, … from ChessPiece__c where Chessboard__c = :game];

}}

<aura:component controller=”ChessboardController”> … </aura:component>

Calling Apex

var action = cmp.get(‘c.getBoardPieces’);action.setParams( {‘game’:chessboard.Id});action.setCallback(this,function(response){

if(!cmp.isValid())return

if(response.getState() == ‘SUCCESS’){

//Handle the response}

}

$A.enqueueAction(action);if

Overview

• Chess demo

• Lightning component framework

• Lightning components

• Communication between components

• Calling Apex

Go to Developer User Groups!

Belgium: http://bit.ly/1Xqlu5p

The Netherlands: http://bit.ly/1Sbdzuo

thank y uQuestions?

thank y u