Simple Caluclator using lightning components

Step 1: Create a component with the name caluclator, once you save this it becomes caluclator.cmp

Step 2: Copy the below code and paste it in the component section of the bundle.



<aura:component >
    <aura:attribute name="num1" type="Integer"/>
    <aura:attribute name="num2" type="Integer"/>
    <aura:attribute name="num3" type="Integer"/>
    <ui:inputNumber label="Number 1" value="{!v.num1}"  />
    <ui:inputNumber label="Number 2" value="{!v.num2}"   />
    <aura:attribute name="addbo1" type="Boolean" default="false"/>
    <aura:attribute name="subbo1" type="Boolean" default="false"/>
    <aura:attribute name="mulbo1" type="Boolean" default="false"/>
    <aura:attribute name="divbo1" type="Boolean" default="false"/>
    <aura:attribute name="refreshbo1" type="Boolean" default="false"/>
   
   
   
<aura:if isTrue="{!v.addbo1}">
    Addition of Two Numbers is :  {!num3}
    <ui:outputNumber value="{!v.num3}"/>
</aura:if>
   
    <aura:if isTrue="{!v.subbo1}">
     Substraction of Two Numbers is :  {!num3}
         <ui:outputNumber value="{!v.num3}"/>
</aura:if>
   
    <aura:if isTrue="{!v.mulbo1}">
    multiplication of Two Numbers is :  {!num3}
         <ui:outputNumber value="{!v.num3}"/>
</aura:if>
   
    <aura:if isTrue="{!v.divbo1}">
    Division of Two Numbers is :  {!num3}
         <ui:outputNumber value="{!v.num3}"/>
</aura:if>
   
   
     <ui:button press="{!c.Add}" label="Addition" />
     <aura:if isTrue="{!v.refreshbo1}">
     <ui:button press="{!c.Refresh}" label="Refresh" />
    </aura:if>
    <ui:button press="{!c.Sub}" label="Substraction" />
 
    <ui:button press="{!c.Mul}" label="Multiplication" />
 
    <ui:button press="{!c.Div}" label="Division" />

   
 
</aura:component>

Step 3: copy the below code and paste it in the controller section of the bundle.

({
Add : function(component, event, helper) {
        var num1=component.get("v.num1");
        var num2=component.get("v.num2");
        var num3=num1+num2;
        component.set("v.num3", num3);
         component.set("v.addbo1", true);
        component.set("v.refreshbo1", true);
            component.set("v.mulbo1", false);
          component.set("v.subbo1", false);
          component.set("v.divbo1", false);
     

},
    Mul : function(component, event, helper) {
        var num1=component.get("v.num1");
        var num2=component.get("v.num2");
        var num3=num1*num2;
        component.set("v.num3", num3);
         component.set("v.mulbo1", true);
          component.set("v.refreshbo1", true);
            component.set("v.divbo1", false);
          component.set("v.subbo1", false);
          component.set("v.addbo1", false);
     

},
    Sub : function(component, event, helper) {
        var num1=component.get("v.num1");
        var num2=component.get("v.num2");
        var num3=num1-num2;
        component.set("v.num3", num3);
         component.set("v.subbo1", true);
          component.set("v.refreshbo1", true);
            component.set("v.mulbo1", false);
          component.set("v.divbo1", false);
          component.set("v.addbo1", false);
     

},
    Div : function(component, event, helper) {
        var num1=component.get("v.num1");
        var num2=component.get("v.num2");
        var num3=num1/num2;
        component.set("v.num3", num3);
         component.set("v.divbo1", true);
          component.set("v.refreshbo1", true);
            component.set("v.mulbo1", false);
          component.set("v.subbo1", false);
          component.set("v.addbo1", false);
     

},
   
     Refresh : function(component, event, helper) {
     
         component.set("v.num1", 0);
          component.set("v.num2", 0);
         component.set("v.divbo1", false);
          component.set("v.mulbo1", false);
          component.set("v.subbo1", false);
          component.set("v.addbo1", false);
           component.set("v.refreshbo1", false);
     

}
})

Step 4: Save the component.

Step 5: Create a new lightning application and replace the code with the below code

<aura:application >
    <c:caluclator />
</aura:application>

Step 6: Save the application and then click on preview.

Salesforce to Salesoforce Rest API

===============================

vf page: need to provide username, pwd+securitytoken

==================================

<apex:page controller="othersfaccounts" standardStylesheets="true">

<style type="text/css">

.errorMsg{

    font-size:0.8 em;

    color:red;

}

</style>

<apex:pageBlock >

<apex:form >

<apex:outputLabel value="UserName : " for="userName"/>

<apex:inputText required="true" id="userName" value="{!userName}" />

<br />

<apex:outputLabel value="Password : " for="pwd"/>

<apex:inputsecret id="pwd" value="{!pwd}"/>

<br />

<apex:commandButton id="getRecords" value="Get Records" action="{!fetch}" rerender="wrapper" status="waitStatus" />

<apex:actionStatus startText="Requesting..." stopText="" id="waitStatus"/>

<hr />

<apex:outputPanel id="wrapper">

<div class="errorMsg" style="display:{!displayError}"> {!errMsg} </div>

<apex:pageBlockTable value="{!acc}" var="account" id="accTable" rowClasses="odd,even" styleClass="tableClass">

    <apex:column >

        <apex:facet name="header">Account Name</apex:facet>

         <apex:outputText value="{!account.name}"/>

    </apex:column>

    <apex:column >

        <apex:facet name="header">Created By</apex:facet>

         <apex:outputText value="{!account.CreatedBy.FirstName}"/>

    </apex:column>

    <apex:column >

        <apex:facet name="header">Phone</apex:facet>

         <apex:outputText value="{!account.Phone}"/>

    </apex:column>

</apex:pageBlockTable>

</apex:outputPanel>

</apex:form>

</apex:pageBlock>

</apex:page>

==================================================

Integration ccontroller

==================================================

public with sharing class othersfaccounts {

    //Login Domain May be test, prerellogin.pre

    String LOGIN_DOMAIN = 'chitti-sp-testing-dev-ed.my';

    public String pwd{get;set;}

    public String userName{get;set;}

    public List<Account> acc{get;set;}

    public String errMsg{get;set;}

    public String displayError{get;set;}

    public othersfaccounts()

    {

        displayError = 'none';

    }

    public void fetch()

    {

        errMsg  = 'Some error occurred, please try again';

        try

        {

        //-----------------------------------

        // Login via SOAP/XML web service api

        //-----------------------------------

        HttpRequest request = new HttpRequest();

        request.setEndpoint('https://' + LOGIN_DOMAIN + '.salesforce.com/services/Soap/u/37.0');

        request.setMethod('POST');

        request.setHeader('Content-Type', 'text/xml;charset=UTF-8');

        request.setHeader('SOAPAction', '""');

        //not escaping username and password because we're setting those variables above

        //in other words, this line "trusts" the lines above

        //if username and password were sourced elsewhere, they'd need to be escaped below

        request.setBody('<Envelope xmlns="http://schemas.xmlsoap.org/soap/envelope/"><Header/><Body><login xmlns="urn:partner.soap.sforce.com"><username>' + userName+ '</username><password>' + pwd+ '</password></login></Body></Envelope>');

        Dom.XmlNode resultElmt = (new Http()).send(request).getBodyDocument().getRootElement()

          .getChildElement('Body', 'http://schemas.xmlsoap.org/soap/envelope/')

          .getChildElement('loginResponse', 'urn:partner.soap.sforce.com')

          .getChildElement('result', 'urn:partner.soap.sforce.com');

        //-------------------------------

        // Grab session id and server url

        //--------------------------------

        final String SERVER_URL = resultElmt.getChildElement('serverUrl', 'urn:partner.soap.sforce.com') .getText().split('/services')[0];

        final String SESSION_ID = resultElmt.getChildElement('sessionId', 'urn:partner.soap.sforce.com') .getText();

        //----------------------------------

        // Load first 10 accounts via REST API

        //---------------------------------

        final PageReference theUrl = new PageReference(SERVER_URL + '/services/data/v37.0/query/');

        theUrl.getParameters().put('q','Select a.Phone, a.Name, a.CreatedBy.FirstName, a.CreatedById From Account a limit 10');

        request = new HttpRequest();

        request.setEndpoint(theUrl.getUrl());

        request.setMethod('GET');

        request.setHeader('Authorization', 'OAuth ' + SESSION_ID);

        String body = (new Http()).send(request).getBody();

        JSONParser parser = JSON.createParser(body);

        do{

            parser.nextToken();

        }while(parser.hasCurrentToken() && !'records'.equals(parser.getCurrentName()));

        parser.nextToken();

        acc = (List<Account>) parser.readValueAs(List<Account>.class);

        }

        catch(Exception e)

        {

            displayError = 'block';

        }

    }

}

Salesforce to salesforce SOAP API

Salesforce Org to Salesforce Org Integration using soap api(Partner wsdl)

Steps:

1) Download the partner wsdl of one org(destination).
setup --> Develop --> api --> Click on Generate Partner WSDL.

Save the file as xml for example partnerwsdl.xml
sample wsdl will be as follows

2)Open another sf org(source).
Goto setup -->develop --> Click on Apex Classes --> click on Generate from WSDl button.

select the downloaded xml file and then click "parse wsdl" button.
It results in generation of four classes.
1)sobjectPartnerSoapSforceCom
2)faultPartnerSoapSforceCom
3)partnerSoapSforceCom
4)AsyncPartnerSoapSforceCom.

3)Now you can interact with partner or destination org as follows.

Open Developer console and place the below code in execute anonymous block.

partnerSoapSforceCom.Soap  s=new partnerSoapSforceCom.Soap ();
String username = 'username';
String password = 'password+securitytoken';

partnerSoapSforceCom.LoginResult lr = s.login(username, password);
s.SessionHeader = new partnerSoapSforceCom.SessionHeader_element();
s.endpoint_x=lr.serverurl;
s.Sessionheader.sessionid = lr.sessionid;
s.getUserInfo();
system.debug('sssssssssssssss'+s.getUserInfo());

Lightning Component frame work

What is Salesforce Lightning?

Lightning includes the Lightning Component Framework and some exciting tools for developers. Lightning makes it easier to build responsive applications for any device.Lightning includes these technologies:

• Lightning components give you a client-server framework that accelerates development, as well as app performance, and is ideal for use with the Salesforce1 mobile app and Salesforce Lightning Experience.

• The Lightning App Builder empowers you to build apps visually, without code, quicker than ever before using off-the-shelf and custom-built Lightning components. You can make your Lightning components available in the Lightning App Builder so administrators can build custom user interfaces without code.

Using these technologies, you can seamlessly customize and easily deploy new apps to mobile devices running Salesforce1. In fact, theSalesforce1 mobile app and Salesforce Lightning Experience are built with Lightning components.

Lightning scripting vs visual force java scripting

We all know when we want to refer any element inside javascript which is embedded in the visual force page, we will be using "document.getelementbyid". Once we get reference of the element we usually perform what ever operations that we want to do inside the scripting.

Well there is no mystery inside the lightning component as well, we all know ,  mostly we are using javascripting inside the aura components , this is pretty simple. Refer any element by using "component.find("Id");" and do what ever you wish on that attribute or element.

----------------------------------------------------------------------------------------------------------------------
<aura:component >
    <ui:button label="Toggle" press="{!c.toggle}"/>
    <p aura:id="text">Now you see me</p>
</aura:component>

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

/*toggleCssController.js*/
({
    toggle : function(component, event, helper) {
     
//following statement gets the reference of the attribute by id :text and hence we can do what ever we //want on that attribute like hiding and rendering and so on...
        var toggleText = component.find("text");
//if we want to refer the attribute by name, we have to use component.get("v.nameofattribute")
//if we want to set data to the any attribute, we have to use component.set("v.nameofattribute",value )
//which we want to pass..
        $A.util.toggleClass(toggleText, "toggle");
    }
})
--------------------------------------------------------------------------------------------------------------------------

If above components did not give clear picture on referring aura components by ID, following example will definitely drive out any sort of confusion. copy paste below code and keep the component inside the lightning app.
--------------------------------------------------------------------------------------------------------------------------

<aura:component >
<ui:inputNumber label="First number" aura:id="fn" placeholder="0"/>
    <ui:inputNumber label="second number" aura:id="sn" placeholder="0"/>
    <ui:button aura:id="outputButton" label="Addition" press="{!c.calci}"/>
    <ui:outputNumber aura:id="opn" value=""/>
</aura:component>

-----------------------------------------------------------------------------------------------------------------------
/*Aura controller code */

({
calci : function(cmp, event) {
var firstnumber = cmp.find("fn").get("v.value");
var secondnumber = cmp.find("sn").get("v.value");
var outnumber = cmp.find("opn");
        var finalnumber=0;
        finalnumber=firstnumber+secondnumber;
 
outnumber.set("v.value", finalnumber);
       
}
})
---------------------------------------------------------------------------------------------------------------------------

Caluclator with lightning vs visual force page

This will be super example to understand lightning basics interms of  getters, setters and rendering partial page options, I'am sure this code will solve lot of doubts that new bees has.

Compare vf code and lightning code which I have provided below and execute in your org..
You will get much more confidence on lightning
------------------------------------------------------------------------------------------------------------------------
Component code
------------------------------------------------------------------------------------------------------------------------

<aura:component >
    <aura:attribute name="num1" type="Integer"/>
    <aura:attribute name="num2" type="Integer"/>
    <aura:attribute name="num3" type="Integer"/>
    <ui:inputNumber label="Number 1" value="{!v.num1}"  />
    <ui:inputNumber label="Number 2" value="{!v.num2}"   />
    <aura:attribute name="addbo1" type="Boolean" default="false"/>
    <aura:attribute name="subbo1" type="Boolean" default="false"/>
    <aura:attribute name="mulbo1" type="Boolean" default="false"/>
    <aura:attribute name="divbo1" type="Boolean" default="false"/>
    <aura:attribute name="refreshbo1" type="Boolean" default="false"/>
<aura:if isTrue="{!v.addbo1}">
    Addition of Two Numbers is :  {!num3}
    <ui:outputNumber  value="{!v.num3}"/>
</aura:if>
    <aura:if isTrue="{!v.subbo1}">
     Substraction of Two Numbers is :  {!num3}
         <ui:outputNumber  value="{!v.num3}"/>
</aura:if>
    <aura:if isTrue="{!v.mulbo1}">
    multiplication of Two Numbers is :  {!num3}
         <ui:outputNumber  value="{!v.num3}"/>
</aura:if>
    <aura:if isTrue="{!v.divbo1}">
    Division of Two Numbers is :  {!num3}
         <ui:outputNumber  value="{!v.num3}"/>
</aura:if>
     <ui:button press="{!c.Add}" label="Addition" />
     <aura:if isTrue="{!v.refreshbo1}">
     <ui:button press="{!c.Refresh}" label="Refresh" />
    </aura:if>
    <ui:button press="{!c.Sub}" label="Substraction" />
 
    <ui:button press="{!c.Mul}" label="Multiplication" />
 
    <ui:button press="{!c.Div}" label="Division" />

   
 
</aura:component>

-----------------------------------------------------------------------------------------------------------------------
Controller code
------------------------------------------------------------------------------------------------------------------------


({
Add : function(component, event, helper) {
        var num1=component.get("v.num1");
        var num2=component.get("v.num2");
        var num3=num1+num2;
        component.set("v.num3", num3);
         component.set("v.addbo1", true);
        component.set("v.refreshbo1", true);
            component.set("v.mulbo1", false);
          component.set("v.subbo1", false);
          component.set("v.divbo1", false);
     

},
    Mul : function(component, event, helper) {
        var num1=component.get("v.num1");
        var num2=component.get("v.num2");
        var num3=num1*num2;
        component.set("v.num3", num3);
         component.set("v.mulbo1", true);
          component.set("v.refreshbo1", true);
            component.set("v.divbo1", false);
          component.set("v.subbo1", false);
          component.set("v.addbo1", false);
     

},
    Sub : function(component, event, helper) {
        var num1=component.get("v.num1");
        var num2=component.get("v.num2");
        var num3=num1-num2;
        component.set("v.num3", num3);
         component.set("v.subbo1", true);
          component.set("v.refreshbo1", true);
            component.set("v.mulbo1", false);
          component.set("v.divbo1", false);
          component.set("v.addbo1", false);
     

},
    Div : function(component, event, helper) {
        var num1=component.get("v.num1");
        var num2=component.get("v.num2");
        var num3=num1/num2;
        component.set("v.num3", num3);
         component.set("v.divbo1", true);
          component.set("v.refreshbo1", true);
            component.set("v.mulbo1", false);
          component.set("v.subbo1", false);
          component.set("v.addbo1", false);
     

},
   
     Refresh : function(component, event, helper) {
     
         component.set("v.num1", 0);
          component.set("v.num1", 0);
         component.set("v.divbo1", false);
          component.set("v.mulbo1", false);
          component.set("v.subbo1", false);
          component.set("v.addbo1", false);
           component.set("v.refreshbo1", false);
     

}
})

-------------------------------------------------------------------------------------------------------------------------
visual force page for the caluclator code with same results as above ligtnening
---------------------------------------------------------------------------------------------------------------------------
<apex:page controller="Calculator">
<apex:form >
 
    <apex:pageBlock title="Simple caluclator">
        <apex:pageBlockSection columns="1">
            <apex:pageBlockSectionItem >
Please Give First Number<apex:inputText value="{!number1}"/>
 </apex:pageBlockSectionItem>
 <apex:pageBlockSectionItem >
Please Give Second Number<apex:inputText value="{!number2}"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
Please Provide The Operator <apex:inputText value="{!operator}"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
<apex:pageBlockButtons location="bottom">
<apex:commandButton value="ShowResult" action="{!calculation}" ></apex:commandbutton>
<apex:commandButton value="Refresh" action="{!Refresh}" rendered="{!flag}" ></apex:commandbutton>
 </apex:pageBlockButtons>

 <apex:pageBlockSection rendered="{!flag}">
 <apex:pageblockSectionItem >

 Result <apex:outputText value="{!result}"  >


 </apex:outputText>

 </apex:pageblockSectionItem>
  </apex:pageBlockSection>



 </apex:pageBlock>
</apex:form>
</apex:page>


------------------------------------------------------------------------------------------------------------------------
Controller
-------------------------------------------------------------------------------------------------------------------------


public class Calculator
{


 public boolean flag { get; set; }
public integer number1{get;set;}
public integer number2{get;set;}
public string operator{get;set;}
public double result{get;set;}


public Calculator()
{
flag=false;
}
public void calculation()
{
flag=true;
if(operator.contains('+'))
result=number1+number2;
if(operator.contains('-'))
result=number1-number2;
if(operator.contains('*'))
result=number1*number2;
if(operator.contains('%'))
result=number1/number2;
}
public void Refresh()
{
flag=false;
number1=null;
number2=null;
operator=null;


}

}

Compare Vf page and Lightning page

Some of us feel like lightning is altogether different from visual force pages but the fact is when we try to co relate the vf page with the lightning component , it would be very easy to understand the lightning concepts.

Following vf page displays different colors with text by making use of css styles and next followed lightning component also displays same  by making use css styles again.   Both are almost similar with minor differences.
 


Visual force page with "Hello world" multiple colors
--------------------------------------------------------------------------------------------------------------------------
<apex:page >

   <style>

.container {
    padding-top: 20px;
     background-color: yellow;
}

.blue1
{
   background-color: blue; }
   .red1
{
   background-color: red; }
 
   .green1
{
   background-color: green; }
 


   </style>

<div class="container">
<h1>Hello Visul force styles!</h1>

 <div >
         <h1>This is thimma code</h1>
         <div class="red1">I'm red.</div>
         <div class="blue1">I'm blue.</div>
         <div class="green1">I'm green.</div>
     </div>


</div>

 </apex:page>
--------------------------------------------------------------------------------------------------------------------------

Lightning  page with "Hello world" multiple colors
CMP name: Helloworld

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

<aura:component implements="force:appHostable">
<h1>Hello Lightning Component!</h1>
    <style>
     
    .THIS {
    background-color: yellow;
    padding-top: 10px;
}

h1.THIS {
    font-size:60px;
}

.THIS h1{
    font-weight: bold;
    padding: 10px;
}

.THIS.container {
    padding-top: 20px;
}

.THIS .red {
    background-color: red;
    padding: 10px;
}

.THIS .blue {
    background-color: blue;
    padding: 10px;
}

.THIS .green {
    background-color: green;
    padding: 10px;
}
 
 
 
    </style>
    <div class="container">
         <h1>This is thimma code</h1>
         <div class="red">I'm red.</div>
         <div class="blue">I'm blue.</div>
         <div class="green">I'm green.</div>
     </div>
 

</aura:component>
-------------------------------------------------------------------------------------------------------------------------