After the Hotel Locator application I shared last week, here is another example demonstrating how to build loosely coupled components with the Lightning Components Framework, and how to compose an application using these components in App Builder.

This example highlights some important concepts when building components:

• Two-way data binding
• Change tracking
• Intercomponent communication using events

Watch the end result in this video:

Installation Instructions

To install the MortgageCalculator and MortgageAmortizationChart components, and create the application in your own Developer Org:

1. Enable Lightning Components in your new Developer Org: In Setup, click Develop > Lightning Components, check the Enable Lightning Components checkbox, and click Save.
2. Click this link to install the components using an unmanaged package.
3. Follow along in the video to create the application in App Builder and deploy it to the Salesforce1 mobile app.

Code Highlights

Two-way data binding

Mortage Calculator defines a set of attributes to store the mortgage parameters:

Note: The data type of the principal and rate attributes is set to “String” to enable customization in App Builder (see the Enabling Components for App Builder section below).

The mortgage calculator input fields are bound to these attributes above using the {! } notation:

Data binding is bidirectional:

• Attributes to UI components: If the value of an attribute is changed programmatically anywhere in the component, the UI component automatically displays the new value.
• UI components to attributes: If the user enters a new value in the UI component, the value of the attribute is automatically changed to that new value.

Change Tracking

Notice that there is no Calculate button in this User Interface: Instead, the monthly payment is automatically recalculated when the value of one of the mortgage attributes changes. This is done by defining a change handler for each of the attributes:

When one of the mortgage attributes changes, the calculateMonthlyPayment() function is called in the component’s controller.

Intercomponent Communication

A key objective when developing reusable components is to avoid tight coupling (or hard references) between components: If Component A has a reference to Component B, it means that Component A can’t exist without Component B, and the reusability of these components in different contexts is therefore limited.

In this example, MortgageCalculator doesn’t know about MortgageAmortizarionChart, and MortgageAmortizarionChart doesn’t know about MortgageCalculator. How can components communicate when they don’t know about each other? Through Events… In this example, MortageCalculator fires an event (MortgageChange) every time any of the mortgage attributes changes. This happens in the calculateMonthlyPayment() function:

MortgageAmortizationChart registers as a listener for the MortgageChange event:

When the event is fired, the mortgageChange() function is automatically called in the MortgageAmortizationChart controller: the amortization table is recalculated and the chart is redrawn.

Enabling Components for App Builder

To make a component available in App Builder:

1. The component needs to implement the flexipage:availableForAllPageTypes interface:
2. The component needs a design file. To create a design file, click Design in the right side of the code editor for that component.

   For example, here is the simple design file for the MortgageAmortizationChart component:

   And here is the design file for the MortgageCalculator component. The attributes are component attributes that you want to expose in App Builder so that their default value can be changed:

   Only Boolean, Integer or String attributes can be exposed in design files.

Follow @ccoenraets on Twitter