Application Component Bundle (Parts of Lightning Application)
The basic use of lightning applications is to preview the lightning components for development purposes. But the lightning application does have its own bundle just as the lightning components.
The application component bundle consists of the following:
- Application
- Controller
- Helper
- Style
- Documentation
- Renderer
- SVG
Application
The application consists of the markup for the application (just like the component for the lightning component bundle). We need to put our component in this application part to view it by the application preview.
For example :
<aura:application > <c:HelloWorld/> </aura:application>
Here ‘<c:HelloWorld/>’ is the custom lightning component that we wish to preview with the app. The syntax is, <(namespace):(component name)/>, so ‘c’ represents the default namespace of the org. If we want to use a managed package component then we need to use the managed package namespace instead of ‘c’.
The ‘preview’ button on the right hand side allows you to preview the component (if you see an error for enabling a custom domain, go to the enabling custom domain part of our guide to fix it).
Screenshot for the preview button :
Output became:
Hello World
Controller
Click the ‘Create’ link on the right hand side breakdown to create the javascript controller for your application.
The javascript controller houses javascript functions for our application, these javascript functions can be called from our application markup. For example :
We can use this in the same way we use the controller for the lightning components.
Helper
The helper part of an application also stores javascript, but it is used to store reusable javascript functions which can be used multiple times in our javascript controller.
Click create on the helper to create the helper for your application.
Once created, we can define javascript functions inside the helper as well.
CODE:
({ helperMethod : function() { alert('Helper!'); } })
Then, this helper method can be called from our javascript controller multiple times, implementing reusability.
CODE:
({ method1 : function(component, event, helper) { helper.helperMethod(); }, method2 : function(component, event, helper) { helper.helperMethod(); } })
NOTE : A method inside a helper class can call other methods in the helper, but a JavaScript method inside the controller cannot call other methods in the controller.
Style
The ‘style’ is used to apply custom css to the application. This is a .css file which can be used to apply custom css, since the application doesn’t support using a <style> tag.
Click on ‘Style’ to create the application’s style.css.
This supports all standard css validators (by class, by id), we just need to use the ‘.THIS’ keyword to apply CSS to the lightning markup. For example :
Documentation
The ‘Documentation’ part is used to document information about your lightning application. Click create on the ‘Documentation’ to create the .aura doc file for your application.
Once created, you go to https:///<your-salesforce-instance>/auradocs to view the documentation for your lightning component. The screen will look like this :
The default code will look like this :