Simple Visualforce example for focusing on look and feel and publisher action usage from the VF context.

0 Salesforce1 Visualforce Study

This gist is meant to work through some examples of using Visualforce with Salesforce1. It uses the following features and libraries: 

Features 
  - Visualforce...of course
  - Apex remote method
  - Canvas publisher JS API

Libs
  - onestarter - for S1 look and feel (https://github.com/joshbirk/onestarter)
  - jQuery - dependency for onestarter
  - touch-swipe jQuery plugin - dependency for onestarter but not used in this example

Steps
1. Create a new Apex class called Demos1Controller
2. Copy-paste code from gist file: 1 DemoS1Controller
3. Follow the steps for the TODO section in the remote method. 
4. Create a new Visualforce page called DemoS1Page
5. Copy-paste code from gist file: 2 DemoS1Page
6. Complete the TODO sections. (NOTE: there are other steps to update the look and feel, treat those as optional
7. Add a Visualforce tab to view the page
8. Create a new Visalforce page called DemoS1ActionPage
9. Copy-paste code from gist file: 3 DemoS1ActionPage
10. Add the publisher action to call the page

**Reminders:**
Syntax for invoking remote action
    Visualforce.remoting.Manager.invokeAction(
      '{!$RemoteAction.ControllerClass.createRecords}', 
        param1, 
        param2,
        function(result, event) {...  //<-callback function
        });

1 DemoS1Controller Apex class

global class DemoS1Controller{
    
    /**
    Simple example of remote action.
    
    Why you might need this as a remote method? 
    
    This is a method that packages logic of saving both an account and contact. But try not to focus on 
    Account and Contact. Instead think of pushing complexity into the controller. That's really what we're
    trying to accomplish with this simple example.  
    
    Why this example is only just plausible?
    
    Well...this is kind of what a lead is for. Create a lead, convert it, and you have an acccount and a 
    contact. Lead conversion will also assist with deduping where the account and contact already exist.  
    Again, think in the abstract about removing complexity from the JS code and you'll be on the right
    track. Don't focus too much specificaly on Account and Contact. 
    */
    
    //annotation to allow calling this method from the remote action JS API of visualforce
    @remoteAction
    global static String createRecords(Account acctParam, Contact ctParam){
        /* 
        TODO:
        In this remote method, add the following statements: 
        1. Create an instance of Account. 
        2. Set the name field of account to the acctParam's name value
        3. Create an instance of Contact
        4. Set FirstName and LastName from the corresponding values in ctParam
        5. Set the AccountId value to the new acct.Id value
        6. Fix the current return of an empty string by returning the account Id. 
        */
        
        return '';
    }

}

2 DemoS1Page

<apex:page showHeader="true" docType="html-5.0" controller="DemoS1Controller">
<!-- for use with Salesforce1, change showHeader above to false and include the resource bundles below -->

	<!-- 
	DemoS1Page
	This page is intended to use the onestarter ui styling to appear part of the Salesforce1
	app UI. It only uses standard buttons and visualforce remoting currently. 
	
	This is intended to be a simple example, but have just enough complexity to justify
	using the remote method invocation. 
	
	See DemoS1ActionPage to see examples of use of the publisher action. 
	 -->
<!--For using onestarter, uncomment the below lines after adding static resources TouchSwipe and OneStarter from 
	Josh Birks github repo. You can download from here: https://github.com/joshbirk/onestarter/tree/master/zips    
	 
    <apex:stylesheet value="{!URLFOR($Resource.OneStarter,'icons.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.OneStarter,'styles.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.OneStarter,'OneStarter.css')}"/>
 -->    
    <!-- JavaScript files -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- For using onestarter, uncomment the below lines after adding static resources TouchSwipe and OneStarter from 
	Josh Birks github repo. You can download from here: https://github.com/joshbirk/onestarter/tree/master/zips  
	  
    <apex:includeScript value="{!URLFOR($Resource.TouchSwipe,'jquery.touchSwipe.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.OneStarter,'jquery.onestarter.js')}"/>
 -->
 	<!-- inserting jquery cdn link -->
     
    <script>
		
// If you are using onestarter for Salesforce1 look and feel, uncomment after adding static resources and 
// uncommenting the stylyesheet and includScript lines above. 	
//    $(document).ready(function() {
//       	s1 = $('div#one-app').oneStarter('app');
//    });
    
    //Save Action. See TODOs below
    function doSave(){
        console.log('started save');
        var acctObj = 
        {
            "Name" : $('#in-name').val()
        }
            
        var ctObj = 
        {
            "FirstName" : $('#in-first').val(),
            "LastName" : $('#in-last').val()
        }            
        console.log(JSON.stringify(acctObj)+JSON.stringify(ctObj));
        
/** TODO *****
*
Using the syntax needed, invoke the createRecords method of DemoS1Controller. 
Make the callback update the show-result div with $('#show-result').text('Created Account: ' result);
*/

    }

    </script>
    
    <div id="one-app">
    <h1>Create Account and Contact</h1>
    <article class="padded">
        This is a sample page using Josh's onestarter package.
    </article>

        <div id="form-example">
            <h2>Add a Customer</h2>
            <button onclick="javascript:doSave()">Save</button>
            <section>
                <label class="field-label">{!$ObjectType.Account.fields.Name.label}</label>
                <input class="field-entry" id="in-name" type="text" />
            </section>
            <section>
                <label class="field-label">{!$ObjectType.Contact.fields.FirstName.label}</label>
                <input class="field-entry" id="in-first" type="text" />
            </section>
            <section>
                <label class="field-label">{!$ObjectType.Contact.fields.LastName.label}</label>
                <input class="field-entry" id="in-last" type="text" />
            </section>
        </div>
        <div id="show-result"></div>
    </div>
</apex:page>

3. DemoS1ActionPage

<apex:page showHeader="false" docType="html-5.0" controller="DemoS1Controller">
    <!-- 
    DemoS1ActionPage
    This page is intended to use the onestarter ui styling to appear part of the Salesforce1
    app UI, and include a simple use case for using the publisher API. It gives examples of: 
    - Activating the submit button
    - Deactivating the submit button
    - Subscribing an action to the publisher event
    - Making the publisher close on submit
    
    Like the DemoS1Page Visualforce page, it also uses the onestarter libs by Josh Birk for UI
    and makes use of Apex remote action methods for interaction with the data model.  
    
    Again, if you have added the onestarter static resources you can uncomment the stylesheet and scripts below. 
     -->
    <apex:stylesheet value="{!URLFOR($Resource.OneStarter,'icons.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.OneStarter,'styles.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.OneStarter,'OneStarter.css')}"/>
    
    <!-- JavaScript files -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- <apex:includeScript value="{!URLFOR($Resource.TouchSwipe,'jquery.touchSwipe.min.js')}"/>  -->    
<!-- <apex:includeScript value="{!URLFOR($Resource.OneStarter,'jquery.onestarter.js')}"/> -->    
    <apex:includeScript value="/canvas/sdk/js/publisher.js"/>  
    <script>
    /*
        
    */
    $(document).ready(function() {
    
        // uncomment if using onestarter
        //s1 = $('div#one-app').oneStarter('app');
        
        $(".field-entry").keyup(function(){
            console.log('exec on change function');
            var cname = $('#in-name').val();
            var fname = $('#in-first').val();
            var lname = $('#in-last').val();
            
            if ((cname || cname !== '') && (fname || fname !== '') && (lname || lname !== '')){
            	//TODO: fields all filled in at a minimum, activate publisher submit button
                
            } else {
            	//TODO: fields not all filled in, deactivate publisher submit button 
                
            }
            
        });
        
    });
    
    function doSave(){
        console.log('started save');
        var acctObj = 
        {
            "Name" : $('#in-name').val()
        }
            
        var ctObj = 
        {
            "FirstName" : $('#in-first').val(),
            "LastName" : $('#in-last').val()
        }            
        console.log(JSON.stringify(acctObj)+JSON.stringify(ctObj));
        DemoS1Controller.createRecords(acctObj,ctObj,function(result,event){
            console.log('in callback');
            $('#show-result').text('Created Account' + JSON.stringify(result) + JSON.stringify(event));
            
            //TODO: make the submit happen and close the publisher
            
            });

    }
    
    //TODO: subscribe the doSave() function to the submit button

    
    </script>
    
    <div id="one-app">
    <h1>Create Account and Contact</h1>
    <article class="padded">
        This is a sample page using Josh's onestarter package.
    </article>

        <div id="form-example">
            <h2>Add a Customer</h2>
            <!-- removing  
            <button onclick="javascript:doSave()">Save</button>
            -->
            <section>
                <label class="field-label">Company Name</label>
                <input class="field-entry" id="in-name" type="text" />
            </section>
            <section>
                <label class="field-label">First Name</label>
                <input class="field-entry" id="in-first" type="text" />
            </section>
            <section>
                <label class="field-label">Last Name</label>
                <input class="field-entry" id="in-last" type="text" />
            </section>
        </div>
        <div id="show-result"></div>
    </div>
</apex:page>