Static Resource :-
First download file and save it into "Static Resource".
Download Link
Visualforce Pages :-
<apex:page docType="html-5.0" standardStylesheets="false" showHeader="false" sidebar="false"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Contacts in Backbone.js</title> <!-- ========= --> <!-- CSS --> <!-- ========= --> <link href="{!URLFOR($Resource.MobileSample_Resources_Backbone, 'resources/css/jquery.mobile-1.3.0.min.css')}" rel="stylesheet" /> <!-- ========= --> <!-- Libraries --> <!-- ========= --> <script src="{!URLFOR($Resource.MobileSample_Resources_Backbone, 'resources/lib/jquery-2.0.0.min.js')}" type="text/javascript"></script> <script src="{!URLFOR($Resource.MobileSample_Resources_Backbone, 'resources/lib/underscore-1.4.4.min.js')}" type="text/javascript"></script> <script src="{!URLFOR($Resource.MobileSample_Resources_Backbone, 'resources/lib/backbone-1.0.0.min.js')}" type="text/javascript"></script> <script src="{!URLFOR($Resource.MobileSample_Resources_Backbone, 'resources/lib/forcetk.js')}" type="text/javascript"></script> <script src="{!URLFOR($Resource.MobileSample_Resources_Backbone, 'resources/lib/force.entity.js')}" type="text/javascript"></script> <script> $( document ).on( "mobileinit", // Set up the "mobileinit" handler before including jQuery Mobile function() { $.mobile.ajaxEnabled = false; $.mobile.linkBindingEnabled = false; } ) </script> <script src="{!URLFOR($Resource.MobileSample_Resources_Backbone, 'resources/lib/jquerymobile.js')}" type="text/javascript"></script> </head> <body> <!-- ========= --> <!-- HTML CODE --> <!-- ========= --> <div id="contacts" data-role="page" data-title="Contacts"> <div data-role="header"> <h1>Contacts</h1> </div><!-- /header --> <div data-role="content" id="contacts-content"> </div> </div> <div id="contact" data-role="page" data-title="Contact"> <div data-role="header"> <a href='#' id="back" class='ui-btn-left' data-icon='arrow-l'>Back</a> <h1>Contact</h1> </div><!-- /header --> <div data-role="content" id="contact-content"> </div> </div> <!-- ========= --> <!-- Templates --> <!-- ========= --> <script type="text/template" id="contacts-template"> <form> <button data-role="button" class="new">New Contact</button> </form> <ul data-role="listview" data-inset="true" id="contact-list"> </ul> <div data-role="footer"> <div data-role="fieldcontain"> <label for="select-theme" class="select">UI Theme:</label> <select class="theme-selector" name="select-theme" id="select-theme"> <option value="default">default</option> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> <option value="d">dr</option> <option value="e">e</option> </select> </div> </div> </script> <script type="text/template" id="contact-template"> <% if (typeof(Id) !== 'undefined') { %> <a href="#<%= Id %>"><%- Name %></a> <% } else { %> <%- Name %> <% } %> </script> <script type="text/template" id="contact-detail-template"> <form name="contactform" id="contactform"> <% if (typeof(Id) !== 'undefined') { %> <input type="hidden" name="Id" id="Id" value="<%- Id %>" /> <% } %> <div data-role="fieldcontain"> <label for="Name">First Name:</label> <% if (typeof(FirstName) !== 'undefined') { %> <input name="FirstName" id="FirstName" value="<%- FirstName %>" /> <% } else { %> <input name="FirstName" id="FirstName" /> <% } %> </div> <div data-role="fieldcontain"> <label for="Name">Last Name:</label> <% if (typeof(LastName) !== 'undefined') { %> <input name="LastName" id="LastName" value="<%- LastName %>" /> <% } else { %> <input name="LastName" id="LastName" /> <% } %> </div> <div data-role="fieldcontain"> <label for="Email">Email:</label> <% if (typeof(Email) !== 'undefined') { %> <input name="Email" id="Email" value="<%- Email %>" /> <% } else { %> <input name="Email" id="Email" /> <% } %> </div> <button data-role="button" data-icon="check" data-inline="true" data-theme="b" class="save">Save</button> <% if (typeof(Id) !== 'undefined') { %> <button data-role="button" data-icon="delete" data-inline="true" class="destroy">Delete</button> <% } %> </form> </script> <!-- =============== --> <!-- Javascript code --> <!-- =============== --> <script type="text/javascript"> function changeTheme(theme){ var hfTheme = theme, cTheme = theme; if (theme === 'default') { // "If no theme swatch letter is set at all, the framework uses the // "a" swatch (black in the default theme) for headers and footers // and the "c" swatch (light gray in the default theme) for the page // content to maximize contrast between the both." // http://jquerymobile.com/demos/1.2.1/docs/api/themes.html hfTheme = "a"; cTheme = "c"; } $.mobile.activePage.find('.ui-btn').not('.ui-li-divider') .removeClass('ui-btn-up-a ui-btn-up-b ui-btn-up-c ui-btn-up-d ui-btn-up-e ui-btn-hover-a ui-btn-hover-b ui-btn-hover-c ui-btn-hover-d ui-btn-hover-e') .addClass('ui-btn-up-' + cTheme) .attr('data-theme', cTheme); $.mobile.activePage.find('.ui-li-divider').each(function (index, obj) { if ($(this).parent().attr('data-divider-theme') == 'undefined') { $(this).removeClass('ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e') .addClass('ui-bar-' + cTheme) .attr('data-theme', cTheme); } }) $.mobile.activePage.find('.ui-header, .ui-footer') .removeClass('ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e') .addClass('ui-bar-' + hfTheme) .attr('data-theme', hfTheme); $.mobile.activePage.removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e') .addClass('ui-body-' + cTheme) .attr('data-theme', cTheme); } $(document).ready(function() { var creds = { accessToken: '{!$Api.Session_ID}' }; Force.init(creds); myapp(); }); function myapp() { var app = {}; // create namespace for our app //-------------- // Models //-------------- app.Contact = Force.SObject.extend({ sobjectType:'Contact', fieldlist:['Id', 'FirstName', 'LastName', 'Email'] }); //-------------- // Collections //-------------- app.ContactsCollection = Force.SObjectCollection.extend({ model: app.Contact, fieldlist:['Id', 'Name', 'FirstName', 'LastName', 'Email'], config: function() { return {type:"soql", query:"SELECT " + this.fieldlist.join(",") + " FROM Contact ORDER BY Name LIMIT 25"}; } }), //-------------- // Views //-------------- // renders individual Contact list item (li) app.ContactView = Backbone.View.extend({ tagName: 'li', template: _.template($('#contact-template').html()), render: function(){ this.$el.html(this.template(this.model.toJSON())); return this; // enable chained calls }, initialize: function(){ } }); // renders individual Contact for editing app.ContactDetailView = Backbone.View.extend({ template: _.template($('#contact-detail-template').html()), render: function(){ this.$el.html(this.template(this.model.toJSON())); return this; // enable chained calls }, initialize: function(){ this.model.on('destroy', this.remove, this); this.render(); }, events: { 'change' : 'change', 'click .save' : 'save', 'click .destroy': 'destroy' }, change: function (event) { // Apply the change to the model var target = event.target; var change = {}; change[target.name] = target.value; this.model.set(change); }, save: function(){ this.model.save(null, { success: function(model) { app.router.navigate('contacts', {trigger: true}); }, error: function () { alert('Error saving'); } }); return false; }, destroy: function(){ this.model.destroy({ success: function() { app.router.navigate('contacts', {trigger: true}); }, error: function () { alert('Error deleting'); } }); return false; } }); // renders the full list of Contacts calling ContactView for each one. app.ContactsView = Backbone.View.extend({ template: _.template($('#contacts-template').html()), initialize: function() { this.render(); this.model.on('add', this.render, this); this.model.on('reset', this.render, this); }, events: { 'click .new' : 'newContact', 'change .theme-selector' : 'changeTheme' }, renderOne: function(contact){ var view = new app.ContactView({model: contact}); this.$('#contact-list').append(view.render().el); }, render: function(){ this.$el.html(this.template()); this.$('#contact-list').empty(); for (var i = 0, l = this.model.models.length; i < l; i++) { this.renderOne(this.model.models[i]); } }, changeTheme: function(event){ event.preventDefault(); var theme = $(event.target).children("option").filter(":selected").text(); changeTheme(theme); }, newContact: function(){ app.router.navigate('/new', true); return false; } }); //Define the Application Router app.Router = Backbone.Router.extend({ routes: { "": "contacts", "contacts":"contacts", "new": "newContact", ":id": "contact" }, contacts: function() { var contactsCollection = new app.ContactsCollection(); $.mobile.loading( "show", { text: 'Loading Contacts', textVisible: true } ); contactsCollection.fetch({success: function(){ $.mobile.loading( "hide" ); $("#contacts-content").html(new app.ContactsView({model: contactsCollection}).el); // Let jQuery Mobile do its stuff $("#contacts-content").trigger( 'create' ); $.mobile.changePage( "#contacts" , { reverse: false, changeHash: false } ); }}); }, contact: function(id) { var contact = new app.Contact({Id: id}); $.mobile.loading( "show", { text: 'Loading Contact', textVisible: true } ); contact.fetch({success: function(){ $.mobile.loading( "hide" ); $("#contact-content").html(new app.ContactDetailView({model: contact}).el); $("#contact-content").trigger( 'create' ); $.mobile.changePage( "#contact" , { reverse: false, changeHash: false } ); }}); }, newContact: function(id) { var contact = new app.Contact(); $("#contact-content").empty(); $("#contact-content").html(new app.ContactDetailView({model: contact}).el); $("#contact-content").trigger( 'create' ); $.mobile.changePage( "#contact" , { reverse: false, changeHash: false } ); } }); app.router = new app.Router(); Backbone.history.start(); } </script> </body> </apex:page>
Screenshot 1:-
Screenshot 2:-
Screenshot 3:-
Screenshot 4:-
No comments:
Post a Comment