This document summarizes a presentation about building a Lightning Chess application using Lightning Components. It includes:
1) A demo of the Lightning Chess application built using several Lightning Components like the Chessboard Component and Chessboard Location Component that communicate through events.
2) An overview of the Lightning Component framework and how components are made up of markup, controllers, helpers, styles and renderers.
3) Details on how the Chess application components like the Chessboard Component were built to manage the chessboard state through attributes and handle events to update locations.
4) How the components communicate through events, both component and application events, and how Apex controllers can be used to call Apex
9. 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
Renderer
Apex
Controller
10. 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
12. 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}">
13. 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>
16. 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
17. Component Controller
Component Controller
• Contains Javascript functions
• Bind controller functions in the component markup
• Access component attributes in the controller
18. Component Controller
• Contains the Javascript functions
• Bind controller functions in the component markup
• Access component attributes in the controller
<div … onclick=”{!c.handleLocationClick}”>
…
</div>
19. 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();
}
20. 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
23. 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
29. Calling Apex
Use AuraEnabled methods retrieve/send data to the server
Link the APEX controller to the component
public class ChessboardController{
@AuraEnabled
public 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>
30. 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
31. Overview
• Chess demo
• Lightning component framework
• Lightning components
• Communication between components
• Calling Apex
32.
33. Go to Developer User Groups!
Belgium: http://bit.ly/1Xqlu5p
The Netherlands: http://bit.ly/1Sbdzuo