Lightning Notes

force:appHostable --> Custom Tab
flexipage:availableForAllPageTypes --> Makes your component available for record pages and any other type of page, including a Lightning app’s utility bar.
flexipage:availableForRecordHome --> If your component is designed for record pages only, implement this interface instead of flexipage:availableForAllPageTypes.
force:hasRecordId -->  Add the force:hasRecordId interface to a Lightning component to enable the component to be assigned the ID of the current record.
forceCommunity:availableForAllPageTypes --> To appear in the Community Builder, a component must implement the forceCommunity:availableForAllPageTypes interface.
force:lightningQuickAction --> to a Lightning component to enable it to be used as a custom action in Lightning Experience or the Salesforce mobile app.
--------------------------
access = "global" --> To use it outside of the component name space.
-------------------------------

There are three ways of inserting a style sheet:

Inline style --> not supported in lightning compnent
Internal style sheet --> style resource
External style sheet --> <ltng:require styles="{!$Resource.***resourceName***}" />

The element Selector
---------------------
p {
    text-align: center;
    color: red;
}

The id Selector
----------------
#para1 {
    text-align: center;
    color: red;
}

The class Selector
------------------
.center {
    text-align: center;
    color: red;
}

specify that only specific HTML elements should be affected by a class
---------------------------
p.center {
    text-align: center;
    color: red;
}

p.large {
    font-size: 300%;
}

<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>

Grouping Selectors
---------------------
h1, h2, p {
    text-align: center;
    color: red;
}

CSS Comments
----------------
p {
    color: red;
    /* This is a single-line comment */
    text-align: center;
}

/* This is
a multi-line
comment */


---------------

Difference between lightning:button & ui:button
-----------
If you go thru the Lightning base components release notes, you will notice that the Base components are more of an extended implementation of the existing UI components.

here's an extract of the related section

You can find base Lightning components in the lightning namespace to complement the existing ui namespace components. In instances where there are matching ui and lightning namespace components, we recommend that you use the lightning namespace component. The lightning namespace components are optimized for common use cases. Beyond being equipped with the Lightning Design System styling, they handle accessibility, real-time interaction, and enhanced error messages.

Over a period, the base components will have more features built into it which can be easily configured / controlled by additional attributes.

---------------------
JavaScript Basics
=================
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    fullName : function() {
       return this.firstName + " " + this.lastName;
    }
};

document.getElementById("demo").innerHTML = person.fullName();
</script>

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            // Removes the first element "Banana" from fruits

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // Removes the last element ("Mango") from fruits

Understanding JavaScript Controllers Versus Helpers In Lightning Components
https://developer.salesforce.com/blogs/developer-relations/2015/06/understanding-javascript-controllers-versus-helpers-lightning-components.html

https://developer.salesforce.com/blogs/author/rraodv


Component Rendering -
https://developer.salesforce.com/blogs/developer-relations/2015/06/understanding-system-events-lightning-components-part-2.html

Loading External JavaScript And CSS Libraries To Lightning Components -
https://developer.salesforce.com/blogs/developer-relations/2015/05/loading-external-js-css-libraries-lightning-components.html

Event Propagation -
https://developer.salesforce.com/blogs/developer-relations/2017/08/depth-look-lightning-component-events.html

-----------------------------------------------------------
Different way of handling server callback -
**********************************
// Create server request
var action = component.get("c.getExpenses");

// Send server request
$A.enqueueAction(action);

// ... time passes ...

// Handle server response
var state = action.response.getState();
if (state === "SUCCESS") {
    component.set("v.expenses", action.response.getReturnValue());
}
---------------------------------------------
Map Syntax in Lightning javaScript -
*****************************

var parammap = {

                "sortField" : cmp.get("v.sortField"),

                "sortOrder" : cmp.get("v.sortOrder"),

                "objectName" : cmp.get("v.objectName"),

                "fieldSetName" : cmp.get("v.fieldSetName")

        };

-----------------------------------