-
ChatterFeed
-
0Best Answers
-
0Likes Received
-
0Likes Given
-
1Questions
-
0Replies
Deeper understanding of Lightning Components and/or JavaScript
I realize this is a relativly new thing but I am new to the salesforce platform in general and not sure if my questions are lightning component specific, or more a general salesforce question, so here goes.
I am working through the workbook: http://www.salesforce.com/us/developer/docs/lightning/lightning.pdf and ran into a couple things I just can't make sense of.
1. Prefix's.
a. I know in visualforce the "c:" prefix means you're using a component. I posted the code below as a reference. In the formhelper.js line " var action = component.get("c.getExpenses");" what is the "c." referencing?
b. in the line "action.setCallback(this, function(a){" what is the "a"? is it related to the "A" in "$A.enqueueAction(action);"?
c. What is the "v" prefix referencing in "var expenses = component.get( "v.expenses");"?
My best guess is that "v" is for accessing a variable, and "c" for a component, while the "a" passed into the function is a generic placeholder for something (but Idk what...). I don't see anywhere in the code where these 3 prefixes are initialed or declared, which is throwing me off. I'm a Java guy and learning javascript as well as salesforce, so i'm sure it's something obvious that I just don't know yet. I just want to thouroughly understand the example and this piece is giving me grief.
FormHelper.js:
({
getExpenses : function(component) {
var action = component.get("c.getExpenses");
var self = this;
action.setCallback(this, function(a){
component.set("v.expenses", a.getReturnValue());
self.updateTotal(component);
});
$A.enqueueAction(action);
},
updateTotal : function(component){
var expenses = component.get( "v.expenses");
var total = 0;
for(var i=0; i<expenses.length; i++){
var e = expenses[i];
total += e.zoidberg__Amount__c;
}
//Update counters
component.set("v.total",total);
component.set("v.exp" ,expenses.length);
},
createExpense : function(component, expense){
this.upsertExpense(component, expense, function(a) {
var expenses = component.get("v.expenses");
expenses.push(a.getReturnValue());
component.set("v.expenses",expenses);
this.updateTotal(component);
});
},
upsertExpense : function(component, expense, callback){
var action = component.get("c.saveExpense");
action.setParams({
"expense":expense
});
if(callback){
action.setCallback(this,callback);
}
$A.enqueueAction(action);
}
})
formController.js:
({
doInit : function(component, event, helper) {
helper.getExpenses(component);
},
createExpense : function (component,event,helper){
var amtField = component.find("amount");
var amt = amtField.get("v.value");
if(isNaN(amt)||amt==''){
amtField.setValid("v.value",false);
amtField.addErrors("v.value",[{message:"Enter an expense amount."}]);
}
else{
amtField.setValid("v.value",true);
var newExpense = component.get("v.newExpense");
helper.createExpense(component,newExpense);
}
},
updateEvent : function(component, event, helper){
helper.upsertExpense(component,event.getParam("expense"));
},
waiting : function(component, event, helper){
component.set("v.wait","updating...");
},
doneWaiting : function(component, event, helper){
component.set("v.wait","");
},
})
form.cmp:
<aura:component controller="zoidberg.ExpenseController">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:handler event="zoidberg:updateExpenseItem" action="{!c.updateEvent}"/>
<aura:handler event="aura:waiting" action="{!c.waiting}"/>
<aura:handler event="aura:doneWaiting" action="{!c.doneWaiting}"/>
<aura:attribute name="wait" type="String"/>
<aura:attribute name="expenses" type="zoidberg.Expense__c[]"/>
<aura:attribute name="newExpense"
type="zoidberg.Expense__c"
default="{ 'sobjectType': 'zoidberg__Expense__c',
'Name': '',
'zoidberg__Amount__c': 0,
'zoidberg__Client__c': '',
'zoidberg__Date__c': '',
'zoidberg__Reimbursed__c': false
}"/>
<!-- Attributes for Expense Counters -->
<aura:attribute name= "total" type="Double" default="0.00"/>
<aura:attribute name="exp" type="Double" default="0" />
<div class="wait">
{!v.wait}
</div>
<!-- Input from using components -->
<form>
<fieldset>
<ui:inputText aura:id="expname" label="Expense Name"
class="form-control"
value="{!v.newExpense.name}"
placeholder="My Expense" required="true"/>
<ui:inputNumber aura:id="amount" label="Amount"
class="form-control"
value="{!v.newExpense.zoidberg__Amount__c}"
placeholder="20.80" required="true"/>
<ui:inputText aura:id="client" label="Client"
class="form-control"
value="{!v.newExpense.zoidberg__Client__c}"
placeholder="ABC Co."/>
<ui:inputDateTime aura:id="expdate" label="Expense Date"
class="form-control"
value="{!v.newExpense.zoidberg__Date__c}"
displayDatePicker="true"/>
<ui:inputCheckbox aura:id="reimbursed" label="Reimbursed?"
class="form-control"
value="{!v.newExpense.zoidberg__Reimbursed__c}"/>
<ui:button label="Submit" press="{!c.createExpense}"/>
</fieldset>
</form>
<!--Expense Counters -->
<div class="row">
<!--Change the counter color to red if total amount is more than 100 -->
<div class= "{!v.total >= 100 ? 'alert alert-danger' : 'alert alert-success'}">
<h3>Total Expenses</h3>$
<ui:outputNumber value="{!v.total}" format=".00" />
</div>
<div class="alert alert-success">
<h3>No. of Expenses </h3>
<ui:outputNumber value="{!v.exp}"/>
</div>
</div>
<!--Display expense records -->
<div class="row">
<aura:iteration items="{!v.expenses}" var="expense">
<zoidberg:expenseList expense="{!expense}"/>
</aura:iteration>
</div>
</aura:component>
I am working through the workbook: http://www.salesforce.com/us/developer/docs/lightning/lightning.pdf and ran into a couple things I just can't make sense of.
1. Prefix's.
a. I know in visualforce the "c:" prefix means you're using a component. I posted the code below as a reference. In the formhelper.js line " var action = component.get("c.getExpenses");" what is the "c." referencing?
b. in the line "action.setCallback(this, function(a){" what is the "a"? is it related to the "A" in "$A.enqueueAction(action);"?
c. What is the "v" prefix referencing in "var expenses = component.get( "v.expenses");"?
My best guess is that "v" is for accessing a variable, and "c" for a component, while the "a" passed into the function is a generic placeholder for something (but Idk what...). I don't see anywhere in the code where these 3 prefixes are initialed or declared, which is throwing me off. I'm a Java guy and learning javascript as well as salesforce, so i'm sure it's something obvious that I just don't know yet. I just want to thouroughly understand the example and this piece is giving me grief.
FormHelper.js:
({
getExpenses : function(component) {
var action = component.get("c.getExpenses");
var self = this;
action.setCallback(this, function(a){
component.set("v.expenses", a.getReturnValue());
self.updateTotal(component);
});
$A.enqueueAction(action);
},
updateTotal : function(component){
var expenses = component.get( "v.expenses");
var total = 0;
for(var i=0; i<expenses.length; i++){
var e = expenses[i];
total += e.zoidberg__Amount__c;
}
//Update counters
component.set("v.total",total);
component.set("v.exp" ,expenses.length);
},
createExpense : function(component, expense){
this.upsertExpense(component, expense, function(a) {
var expenses = component.get("v.expenses");
expenses.push(a.getReturnValue());
component.set("v.expenses",expenses);
this.updateTotal(component);
});
},
upsertExpense : function(component, expense, callback){
var action = component.get("c.saveExpense");
action.setParams({
"expense":expense
});
if(callback){
action.setCallback(this,callback);
}
$A.enqueueAction(action);
}
})
formController.js:
({
doInit : function(component, event, helper) {
helper.getExpenses(component);
},
createExpense : function (component,event,helper){
var amtField = component.find("amount");
var amt = amtField.get("v.value");
if(isNaN(amt)||amt==''){
amtField.setValid("v.value",false);
amtField.addErrors("v.value",[{message:"Enter an expense amount."}]);
}
else{
amtField.setValid("v.value",true);
var newExpense = component.get("v.newExpense");
helper.createExpense(component,newExpense);
}
},
updateEvent : function(component, event, helper){
helper.upsertExpense(component,event.getParam("expense"));
},
waiting : function(component, event, helper){
component.set("v.wait","updating...");
},
doneWaiting : function(component, event, helper){
component.set("v.wait","");
},
})
form.cmp:
<aura:component controller="zoidberg.ExpenseController">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:handler event="zoidberg:updateExpenseItem" action="{!c.updateEvent}"/>
<aura:handler event="aura:waiting" action="{!c.waiting}"/>
<aura:handler event="aura:doneWaiting" action="{!c.doneWaiting}"/>
<aura:attribute name="wait" type="String"/>
<aura:attribute name="expenses" type="zoidberg.Expense__c[]"/>
<aura:attribute name="newExpense"
type="zoidberg.Expense__c"
default="{ 'sobjectType': 'zoidberg__Expense__c',
'Name': '',
'zoidberg__Amount__c': 0,
'zoidberg__Client__c': '',
'zoidberg__Date__c': '',
'zoidberg__Reimbursed__c': false
}"/>
<!-- Attributes for Expense Counters -->
<aura:attribute name= "total" type="Double" default="0.00"/>
<aura:attribute name="exp" type="Double" default="0" />
<div class="wait">
{!v.wait}
</div>
<!-- Input from using components -->
<form>
<fieldset>
<ui:inputText aura:id="expname" label="Expense Name"
class="form-control"
value="{!v.newExpense.name}"
placeholder="My Expense" required="true"/>
<ui:inputNumber aura:id="amount" label="Amount"
class="form-control"
value="{!v.newExpense.zoidberg__Amount__c}"
placeholder="20.80" required="true"/>
<ui:inputText aura:id="client" label="Client"
class="form-control"
value="{!v.newExpense.zoidberg__Client__c}"
placeholder="ABC Co."/>
<ui:inputDateTime aura:id="expdate" label="Expense Date"
class="form-control"
value="{!v.newExpense.zoidberg__Date__c}"
displayDatePicker="true"/>
<ui:inputCheckbox aura:id="reimbursed" label="Reimbursed?"
class="form-control"
value="{!v.newExpense.zoidberg__Reimbursed__c}"/>
<ui:button label="Submit" press="{!c.createExpense}"/>
</fieldset>
</form>
<!--Expense Counters -->
<div class="row">
<!--Change the counter color to red if total amount is more than 100 -->
<div class= "{!v.total >= 100 ? 'alert alert-danger' : 'alert alert-success'}">
<h3>Total Expenses</h3>$
<ui:outputNumber value="{!v.total}" format=".00" />
</div>
<div class="alert alert-success">
<h3>No. of Expenses </h3>
<ui:outputNumber value="{!v.exp}"/>
</div>
</div>
<!--Display expense records -->
<div class="row">
<aura:iteration items="{!v.expenses}" var="expense">
<zoidberg:expenseList expense="{!expense}"/>
</aura:iteration>
</div>
</aura:component>
-
- Chad Hammond
- October 29, 2014
- Like
- 0
- Continue reading or reply