Aura extension to Visualforce

 Aura is a UI framework for developing dynamic web apps for mobile and desktop devices. Aura comes with a rich and extensible component set to kick start building apps. You don't have to spend your time optimizing your apps for different devices as the components take care of that for you.The framework intelligently utilizes your server, browser, devices, and network so you can focus on the logic and interactions of your apps.   

Some key features of aura include:

·         Tag-based layout & component definition

·         Encapsulated UI development with a strongly typed event model

·         Object-oriented programming behaviors (extends, implements, abstract)

·         Encapsulated bundles with models, controllers, CSS, static resources and markup

·         Integrated functional and performance testing (did you expect any less?)

·         Mobile, mobile and mobile-ready

Salesforce1 is indeed built on Aura It is also using the Salesforce Mobile SDK as well. This great collection of Dreamforce 2013 sessions featuring Salesforce1 also references the Aura session.   Aura really is, the journey SF have taken with it since Salesforce Touch  and a sneak peak at where it is going as native platform feature!. The source code is shared in GitHub, so you can even try it out and contribute!.Aura uses standard HTML5 features and thus infact runs in most modern browsers, you can modify your own browser url to see it, via /one/one.app (note that Salesforce don't support this, but it is a useful way to explore and test). As regards the container Salesforce1 uses thats driven by the Salesforce Mobile SDK, which itself hosts an instance of the mobile devices own HTML5 container. You can read more about via the Salesforce Mobile SDK link. 

You can go through the Aura docs and they have an excellent tutorial that guides you through building an app. You can view the Salesforce1 source when viewing the one/one.app in your browser and see where they use some of the components, such as the abstractList component. It is a very interesting and powerful framework. Aura comes with a rich and extensible component set to kick start building apps. You don’t have to spend your time optimizing your apps for different devices as the components take care of that for you.The framework intelligently utilizes your server, browser, devices, and network so you can focus on the logic and interactions of your apps. On top of that, Aura has a bunch of other benefits. Some other interesting things to note about Aura: It is open source Aura lives on GitHub and can be forked/modified at any time. You can even contribute bug fixes or functionality changes! Aura is not native to the Force.com platform Unlike languages like Apex and Visualforce, Aura does not require Salesforce. It was built for Salesforce, but it can be used by any developer. This will open Aura up to a much larger set of developers. In conjunction with it being open source, this framework will grow at a drastic rate Aura is built using object-oriented principles Aura provides the basic constructs of inheritance, polymorphism, and encapsulation from classic object-oriented programming and applies them to presentation layer development. Aura heavily utilizes events to interact with different components It is important to understand to the concept of event-driven programming If you have ever developed with JavaScript or Java Swing, you should be familiar with the idea of event-driven programming. You write handlers that respond to interface events as they occur. The events may or may not have been triggered by user interaction. In my opinion, Aura is the way of the future. It is going to be a fast, heavily tested mobile-first option. With the ability to quickly transition between desktop and mobile, Aura provides an incredibly powerful framework to create applications for all mediums. Take some time to start learning Aura now and get a head start! Aura is built using object-oriented principles. Aura provides the basic constructs of inheritance, polymorphism, and encapsulation from classic object-oriented programming and applies them to presentation layer development.

How to create a Flexi Page?

   Flexible page is used to display object listviews  inside salesforce1. The advantage is flexible page can behave as custom Home page for your app in SF1.  It is added to the Navigation menu.  Once you click on  flexi page menu you can see object list view. You can add publisher actions inside the flexi page to show inside the flexi home page and do whatever stuffs you can do with the help of a visualforce page.

                                               
Below is a sample flexi page from my Dev org

    Do not expect too much from a flexi page it is only for list view and for accommodating publisher actions.  Creating a flexi page is little different but it is easy. Its all about uploading an xml file into your org.

How to create a Flexible page?

Creating a Flexible page is as simple as downloading a zip and upload it to SF :) . Just you want do some modifications.

Here you can download the zip file to upload into your org.

Steps to upload  flexi pages.

1.  Login to your org.

2.  Login to workbench

3.  In workbench go to Migration Main menu and then Deploy sub menu.

4.  Choose the zip file you downloaded from here.

5.  Select single package and click next.

6.  Now click Deploy. Wait for SF asynchronus operation to finish.

 Now the flexi page along with required objects, layouts, publisher actions uploaded to your org.

Now There are few steps before you view your flexi page in SF1

In your org go to

1. Create-->Tabs--> flexi tabs (Once you uploaded flexi page only flexi tab section will appear)

2. Create new flexi tab.

To View the flexi page in SF1 do the following setup.

1. Under settings--> Mobile administration --> Mobile Navaigation.

 Your flexi page will appear under available items section. Move this as it comes under "Smart search items" and then click save.

Now you are ready to see the flexi home page under SF1.

Test the Flexible Page in Salesforce1

Open SF1 from mobile app or    '/one/one.app' from your browser.  Now under APPS section you can see the flexi tab you created.  The page will show you a list view with Delivery objects fields. This list view is depend on your Delivery object standard list view  named "Today's deliveries". If you add a column, delete column change sort order it will reflect in SF1 flexi home page.

     You can access the publisher action by clicking on the  '+' icon  bottom left. For this example there is a publisher action called New delivery to create a delivery record.

                                 

  

For more details please comment here or visit

http://www.salesforce.com/us/developer/docs/salesforce1/salesforce1_guide.pdf

visualforce: Advanced Javascript Remoting

 

We have discussed the basic remote javascripting, here I will go with advance visualforce remote javascripting. Adavnced remote javascripting provides you flexibilty and high perfomance of pages.

  

Adding JavaScript Remoting to a Visualforce Page

To use JavaScript remoting in a Visualforce page, add the request as a JavaScript invocation with the following form:

[namespace.]controller.method(

    [parameters...,]

    callbackFunction,

    [configuration]

);

namespace is the namespace of the controller class. This is required if your organization has a namespace defined, or if the class comes from an installed package.      There are two alternatives to define remote javascript without manually adding namespace. Below two examples generate namespace by its own.

 1.  Use  remoteaction global variable.

            {!$RemoteAction.classname.methodname}(

                                [parameters...,]

                                callbackFunction,

                                [configuration]

                );  

2. Use visualforce remoting manager  

        Visualforce.remoting.Manager.invokeAction(

            '{!$RemoteAction.AccountRemoter.getAccount}',

            accountName,

            handleResult

        );

 controller is the name of your Apex controller.

 method is the name of the Apex method you’re calling.

   

 parameters is the comma-separated list of parameters that your method takes.callbackFunction is the name of the JavaScript function that will handle the response from the controller. You can also declare an anonymous function inline. callbackFunction receives the status of the method call and the result as parameters.

configuration configures the handling of the remote call and response. Use this to change the behavior of a remoting call, such as whether or not to escape the Apex method’s response.

The remote method call executes synchronously, but it doesn’t wait for the response to return. When the response returns, the callback function handles it asynchronously.  

Here I will explain about  the configuration option  in detail. The default configuration parameters look like this: 

{ buffer: true, escape: true, timeout: 30000 } 

buffer

 Of type Boolean, whether to group requests executed close to each other in time into a single request. The default is true.

JavaScript remoting optimizes requests that are executed close to each other in time and groups the calls into a single request. This buffering improve the efficiency of the overall request-and-response cycle, but sometimes it’s useful to ensure all requests execute independently.

escape

Of type  Boolean, whether to escape the Apex method’s response. The default is true.

timeout  

 Of type integer, the timeout for the request, in milliseconds. The default is 30000 (30 seconds). The maximum is 120000 (120 seconds, or 2 minutes).

The response to a remote method call is handled asynchronously by the callback function provided in the remote method call. Your callback function will receive as parameters an event object representing the status of the remote call, and theresult object returned by the remote Apex method. Your function can update information and user interface elements on the page based on the data returned.

The event object provides values that let you act upon the success or failure of the remote call:

event.status is true on success, false on error.

event.type is the type of the response: rpc for a successful call, exception if the remote method threw an exception, and so on.

event.message contains any error message that is returned.

event.where contains the Apex stack trace, if one was generated by the remote method.

Apex primitive data types returned by result—such as strings or numbers—are converted to their JavaScript equivalents. Apex objects that are returned are converted to JavaScript objects, while collections are converted to a JavaScript array. Keep in mind that JavaScript is case-sensitive, so id, Id, and ID are considered different fields.

As part of a JavaScript remote call, if the Apex method response contains references to the same object, the object won't be duplicated in the returned JavaScript object, and instead, the rendered JavaScript object will contain references to the same object. An example is an Apex method which returns a list that contains the same object twice.

By default, the response of the remote call must return within 30 seconds, after which the call will time out. If your request needs longer to complete, configure a longer timeout, up to 120 seconds.

The response of the remote call has a maximum size of 15 MB.

If your JavaScript remoting code is exceeding this limit, you have several options:

Reduce the size of the response for each request. Only return data that’s required.

Break up large data retrieval into requests that return smaller chunks.

Ensure that you’re using non-batched requests. Set { buffer: false } in your remoting request configuration block.

Make batched requests less frequently, reducing the size of the batch.

Javascript Remoting and Action Fuction

<apex:actionFunction> component also lets you call controller action methods through JavaScript. Here are some differences between the two:

The <apex:actionFunction> tag:

lets you specify rerender targets

submits the form

does not require you to write any JavaScript

JavaScript remoting:

lets you pass parameters

provides a callback

requires you to write some JavaScript

In general, <apex:actionFunction> is easier to use and requires less code, while JavaScript remoting offers more flexibility.

How to create a Remote Call?

Visualforce remote javascripting  is a powerfull feature of force.com. It has an advantage over the actionfunction or similar ajax components which is perfomance. It is superfast and light weight, higly customisable. Here I will explain how to create remote method and call using a javascript.


Create a static controller method with @remoteaction annotation.

         public static string testRemoteCall(String input){

The method can be either public or gobal not private. Always the method has to be static. Return type can be any apex Type. @Remoteaction will make the method avaliable to a VF page through javascript object. which I will discuss later.

Here is the complete controller code.

public class testRemote{   
 
 public testRemote(){
 }

@remoteAction
public static string testRemoteCall(String input){
  return 'Hello'
}
 
public class wrapper{
  public string name;
  public integer id;
}
}

In the visualforce page the class should be added is either controller or extensions. Now you can call the controller method using a javascript.  For the above controller method  testRemoteCall there is one parameter so the remote call will have total  two parameter the latest being a callback function. Below is the javascript to call the testRemoteCall method.

 testRemote.testRemoteCall(textBoxValue ,function(result,event){ 
 //do some stuff
});
   
the second argument  is a function which is callback to hold the result of the call.  the result object will hold the return value from the controller method. Event is an object which holds the status and other parameters.
Inside the callback function you can update DOM elements.

Below is the complete code for controller and Vf.

public class testRemote{
 
 public testRemote(){
 }

@remoteAction
public static string testRemoteCall(String input){
  return  'Hello';
}
 
public class wrapper{
  public string name;
  public integer id;
}
}

<apex:page controller="testRemote">
 <input type="textbox" id="textbox"/>
 <button type="button" onclick="callRemote()" >Click</button>
 <div id="output"></div>
 <script>
function callRemote(){
 var textBoxValue = document.getElementById('textbox').value;
 testRemote.testRemoteCall(textBoxValue ,function(result,event){ 
console.log(event);
document.getElementById('output').innerHTML =  result;
 },{escape:false});
}
 </script>
</apex:page> 

Salesforce Rest API Vs SOAP API

 

A)SOAP API and REST API are two commonly used API's to expose your data from force.com platform to the other platforms(JAVA , .NET ,etc) or to allow external application to invoke Apex methods.

What is SOAP ?

The Simple Object Access Protocol (SOAP) is an attempt to define a standard for creating web service APIs. It is a pattern, a web service architecture, which specifies the basic rules to be considered while designing web service platforms. It typically uses HTTP as a layer 7 protocol, although this is not mandatory. The SOAP message itself consists of an envelope, inside of which are the SOAP headers and body, the actual information we want to send. It is based on the standard XML format, designed especially to transport and store structured data. SOAP may also refer to the format of the XML that the envelope uses.

SOAP is a mature standard and is heavily used in many systems, but it does not use many of the functionality build in HTTP. While some consider it slow, it provides a heavy set of functionality which is a necessity in many cases. It might now be the best solution for browser-based clients, due to its custom format.

 What is REST ?

The Representational State Transfer (REST) is another architectural pattern (resource-oriented), an alternative to SOAP. Unlike SOAP, RESTful applications use the HTTP build-in headers (with a variety of media-types) to carry meta information and use the GET, POST, PUT and DELETE verbs to perform CRUD operations. REST is resource-oriented and uses clean URLs (or RESTful URLs).

For example :

http://www.developingthefuture.com/index.php?page=foo

becomes

http://www.developingthefuture.com/foo

This kind of URLs syntax greatly improves both visibility and usability. It doesn’t use any query strings, and it also provides certain SEO benefits (the crawlers just love plain text). The body of the REST message can be XML, JSON or any other format, although JSON is usually the preferred choice. On the other hand, you can’t use JSON with SOAP. Or at least not entirely, because SOAP uses XML by definition for it’s envelope. It should also mentioned that REST is, by design, protocol-agnostic, although it is usually used with HTTP. 

SOAP API

1)Supports data in the form of XML only

2)Requires WSDL for the integration

3)Use SOAP API in any language that supports Web services.

REST API

1)Supports both XML and JSON format

2)Preferred for mobile and web apps since JSON being Lighter the app runs smoother and faster