simpluslabs

<aura:component >
	
    <a><b>My component</b></a>
    
    <h1>This is a test component</h1>
    <p>Your component code goes here.</p>
    
</aura:component>

simpluslabs

<aura:component ><!--myComponent1-->
    <aura:handler name="init" value="{! this}" action="{! c.doInit}" />
    <!--Basic types-->
    <aura:attribute name="ItemName" type="String" default="Bag"/>
    <aura:attribute name="SerialNumber" type="Long" default="1"/>
    <aura:attribute name="Quantity" type="Integer" default="2"/>
    <aura:attribute name="Price" type="Decimal" default="blue"/>
    <aura:attribute name="PurchaseDate" type="Date" default="2018-11-9"/>
    <aura:attribute name="Dispatched" type="Boolean" default="true"/>
    <aura:attribute name="Color" type="String" default="blue"/>

simpluslabs

<aura:component ><!--myComponent1-->
    <aura:handler name="init" value="{! this}" action="{! c.doInit}" />
    <!--Basic types-->
    <aura:attribute name="ItemName" type="String" default="Bag"/>
    <aura:attribute name="SerialNumber" type="Long" default="1"/>
    <aura:attribute name="Quantity" type="Integer" default="2"/>
    <aura:attribute name="Price" type="Decimal" default="blue"/>
    <aura:attribute name="PurchaseDate" type="Date" default="2018-11-9"/>
    <aura:attribute name="Dispatched" type="Boolean" default="true"/>
    <aura:attribute name="Color" type="String" default="blue"/>

simpluslabs

({
	doInit : function(component, event, helper) {
		//javascript to initialize the component
		var color = component.get("v.Color");
        var Price = component.get("v.Price");
        console.log('color is ',color);
        console.log('Price is ',Price);
	}
})

simpluslabs

<!--c:testEvent-->
<aura:event type="COMPONENT">
    <aura:attribute name="message" type="String"/>
</aura:event>

simpluslabs

<!--c:eventNotifier-->
<aura:component>
    <aura:registerEvent name="cmpEvent" type="c:testEvent"/>

    <h1>Simple Component Event Sample</h1>
    <p><lightning:button label="Click here to fire a component event" onclick="{!c.fireComponentEvent}" />
    </p>
</aura:component>

simpluslabs

({
	fireComponentEvent  : function(component, event, helper) 
    {
		// Get the component event by using the
        // name value from aura:registerEvent
        var cmpEvent = component.getEvent("cmpEvent");
        cmpEvent.setParams({
            "message" : "A component event fired me. " +
            "It all happened so fast. Now, I'm here!" });
        cmpEvent.fire();

simpluslabs

<!--c:eventHandler-->
<aura:component>
    <aura:attribute name="messageFromEvent" type="String"/>
    <aura:attribute name="numEvents" type="Integer" default="0"/>

    <!-- Note that name="cmpEvent" in aura:registerEvent
     in ceNotifier.cmp -->
    <aura:handler name="cmpEvent" event="c:testEvent" action="{!c.handleComponentEvent}"/>

    <!-- handler contains the notifier component -->

simpluslabs

({
	handleComponentEvent : function(cmp, event) {
        var message = event.getParam("message");

        // set the handler attributes based on event data
        cmp.set("v.messageFromEvent", message);
        var numEventsHandled = parseInt(cmp.get("v.numEvents")) + 1;
        cmp.set("v.numEvents", numEventsHandled);
    }
})

simpluslabs

<!--c:aeEvent-->
<aura:event type="APPLICATION">
    <aura:attribute name="message" type="String"/>
</aura:event>