Skip to content

Instantly share code, notes, and snippets.

@forcementor

forcementor/PocketCRM.page

Created October 18, 2012 17:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save forcementor/3913337 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save forcementor/3913337 to your computer and use it in GitHub Desktop.
Download ZIP
Developing Mobile Applications with Force.com and Sencha Touch - Part 1 - Complete Project
Raw
PocketCRM.page
<!--
========================================================
Name: PocketCRM
Type: Visualforce Page
Purpose: For Sencha Touch PocketCRM App
Created by: Don Robins - www.ForceMentor.com
Created on: August 1, 2012
Copyright 2012 Outformations, Inc.
Rev # Revised on Revised by Revision Description
----- ---------- -------------------------------------
1.0 08/01/2012 Don Robins Initial Release
=========================================================
-->
<apex:page docType="html-5.0" showHeader="false" standardStylesheets="false" cache="false">
<head>
<meta charset="UTF-8" />
<title>Pocket CRM</title>
<!-- Use the Visualforce tags for scripts and stylesheets rather than their HTML counterparts -->
<apex:includeScript value="http://cdn.sencha.io/try/touch/2.0.1/sencha-touch-all.js" />
<apex:stylesheet value="http://cdn.sencha.io/try/touch/2.0.1/resources/css/sencha-touch.css" />
<!-- Custom Application Style Sheet -->
<c:PocketCRM_CSS />
<!-- Our custom Visualforce component containing our Sencha Touch application -->
<c:PocketCRM_APP />
</head>
<body>
<!-- An animated image that displays while loading -->
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
</apex:page>
Raw
PocketCRM_APP.component
<!--
========================================================
Name: PocketCRM_APP
Type: Visualforce Component
Purpose: For Sencha Touch PocketCRM App
Created by: Don Robins - www.ForceMentor.com
Created on: August 1, 2012
Copyright 2012 Outformations, Inc.
Rev # Revised on Revised by Revision Description
----- ---------- -------------------------------------
1.0 08/01/2012 Don Robins Initial Release
=========================================================
-->
<apex:component controller="PocketCRMLeadController" >
<script type="text/javascript">
//================================================================================================================
//APPLICATION
//The Application class is the entry point into your Sencha Touch application.
//================================================================================================================
Ext.application({
name: "PocketCRM",
//Load the various MVC components into memory.
models: ["Lead"],
stores: ["Leads"],
controllers: ["Leads"],
views: ["LeadsList"],
//The application's startup routine once all components are loaded.
launch: function () {
//Instantiate your main list view for Leads.
var leadsListView = {
xtype: "leadslistview"
};
//Launch the primary fullscreen view and pass in the list view.
Ext.Viewport.add([leadsListView]);
}
});
//==============================================================================================
//VIEWS
//Views display data to your users and gather input from them;
//they also emit events about your user interaction.
//==============================================================================================
//The Lead list view.
Ext.define("PocketCRM.view.LeadsList", {
extend: "Ext.Container",
//It uses the base list class.
requires: "Ext.dataview.List",
alias: "widget.leadslistview",
config: {
//Take up the full space available in the parent container.
layout: {
type: 'fit'
},
//Add the components to include within the list view.
items: [
{
//A simple top title bar.
xtype: "titlebar",
title: "PocketCRM: Leads",
docked: "top",
},
{
//The main list and its properties.
xtype: "list",
store: "Leads",
itemId: "leadsList",
onItemDisclosure: false,
grouped: true,
disableSelection: false,
//The template for display if the Store is empty of records.
//Note the style to control visual presentation.
loadingText: "Loading Leads...",
emptyText: '<div class="leads-list-empty-text">No leads found.</div>',
//The template for the display of each list item representing one record.
//One row will display for each record in the data Store.
//The fields referenced are from the entity's Model.
itemTpl: '<div class="list-item-line-main">{LastName}, {FirstName}</div>' + '<div class="list-item-line-detail">{Company}</div>' + '<div class="list-item-line-detail">{Title} - Phone: {Phone} </div>' + '<div class="list-item-line-detail">{Email}</div>',
}],
}
});
//==============================================================================================
//CONTROLLERS
//Controllers manage the communication of your application and the coordination between the
//views and the model; they listen for the events emitted by the views and react accordingly.
//==============================================================================================
//The controller for the Leads list view
Ext.define("PocketCRM.controller.Leads", {
extend: "Ext.app.Controller",
config: {},
// Base Class functions.
launch: function () {
console.log("launch");
this.callParent(arguments);
//Load up the Store associated with the controller and its views.
console.log("load Leads");
var leadsStore = Ext.getStore("Leads");
leadsStore.load();
},
init: function () {
this.callParent(arguments);
console.log("init");
}
});
//==============================================================================================
//MODELS
//Models are the objects on your application.
//==============================================================================================
//The Lead model will include whatever fields are necssary to manage.
Ext.define("PocketCRM.model.Lead", {
extend: "Ext.data.Model",
config: {
idProperty: 'id',
fields: [
{
name: 'id',
type: 'string'
},
{
name: 'FirstName',
type: 'string',
required: true
},
{
name: 'LastName',
type: 'string',
required: true
},
{
name: 'Company',
type: 'string'
},
{
name: 'Title',
type: 'string'
},
{
name: 'Phone',
type: 'string',
required: true
},
{
name: 'Email',
type: 'string',
required: true
},
{
name: 'Status',
type: 'string',
required: true
}, //This is a derived field using an anonymous 'convert'
//anonymous function to calculate a string value.
{
name: 'FullName',
convert: function (value, record) {
var fn = record.get('FirstName');
var ln = record.get('LastName');
return fn + " " + ln;
}
},
],
},
});
//==============================================================================================
//STORES
//Stored serve as the client-side cache of your data; they loading data into your app's views.
//==============================================================================================
//The Lead Store, this version will simply load with mock JSON data.
Ext.define("PocketCRM.store.Leads", {
extend: "Ext.data.Store",
requires: "Ext.data.proxy.LocalStorage",
config: {
model: "PocketCRM.model.Lead",
//Fetch the data from the custom Apex controller method
//which will return a simple list of Leads as JSON on load.
data: {!Leads},
//Create a grouping; be certain to use a field with content or you'll get errors!
groupField: "Status",
groupDir: "ASC",
//Create additional sorts for within the Group.
sorters: [{
property: 'LastName',
direction: 'ASC'
}, {
property: 'FirstName',
direction: 'ASC'
}]
}
});
</script>
</apex:component>
Raw
PocketCRM_CSS.component
<!--
========================================================
Name: PocketCRM_CSS
Type: Visualforce Component for Style Development
Purpose: For Sencha Touch PocketCRM App
Created by: Don Robins - www.ForceMentor.com
Created on: August 1, 2012
Copyright 2012 Outformations, Inc.
Rev # Revised on Revised by Revision Description
----- ---------- -------------------------------------
1.0 08/01/2012 Don Robins Initial Release
=========================================================
-->
<apex:component >
<style type="text/css">
/**
* Example of an initial loading indicator.
* It is recommended to keep this as minimal as possible to provide instant feedback
* while other resources are still being loaded for the first time
*/
html, body {
height: 100%;
background-color: #1985D0
}
#appLoadingIndicator {
position: absolute;
top: 50%;
margin-top: -15px;
text-align: center;
width: 100%;
height: 30px;
-webkit-animation-name: appLoadingIndicator;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
}
#appLoadingIndicator > * {
background-color: #FFFFFF;
display: inline-block;
height: 30px;
-webkit-border-radius: 15px;
margin: 0 5px;
width: 30px;
opacity: 0.8;
}
@-webkit-keyframes appLoadingIndicator {
0% {
opacity: 0.8
}
50% {
opacity: 0
}
100% {
opacity: 0.8
}
}
/**
* PocketCRM Custom styles
*/
.x-title {
padding: 0 .3em;
}
.x-title .x-innerhtml {
padding: 0;
}
/* Increase height of list item so title and narrative lines fit */
.x-list .x-list-item .x-list-item-label {
min-height: 3.5em!important;
}
/* Move up the disclosure button to account for the list item height increase */
.x-list .x-list-disclosure {
position: absolute;
bottom: 0.85em;
right: 0.44em;
}
.list-item-line-1 {
float:left;
width:100%;
font-size:90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right:25px;
line-height:150%;
}
.list-item-line-2 {
float:left;
width:95%;
color:#666666;
font-size:80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right:25px;
}
.x-item-selected .list-item-name {
color:#ffffff;
}
.x-item-selected .list-item-email {
color:#ffffff;
}
.leads-list-empty-text {
padding:10px;
}
</style>
</apex:component>
Raw
PocketCRMLeadController.cls
//========================================================
// Name: PocketCRMLeadController
// Type: Controller
// Purpose: For Sencha Touch PocketCRM App
// Created by: Don Robins - www.ForceMentor.com
// Created on: August 1, 2012
// Copyright 2012 Outformations, Inc.
//
// Rev # Revised on Revised by Revision Description
// ----- ---------- -------------------------------------
// 1.0 08/01/2012 Don Robins Initial Release
//=========================================================
public class PocketCRMLeadController {
private string leads;
//Constructor.
public PocketCRMLeadController() {
//Fetch a limited set of Leads to return to the Sencha Data Store on load.
List < Lead > leadsList = [SELECT
FirstName
, LastName
, Company
, Title
, Phone
, Email
, Status
FROM Lead LIMIT 25];
//Serialize the list as JSON and assign to the private string member.
leads = JSON.serialize(leadsList);
system.debug('Leads as JSON: ' + leads);
}
//Public getter method to return the Leads as JSON to the view.
public String getLeads() {
return leads;
}
//UnitTest for code coverage.
testMethod static void canTestConstruction() {
//Build some mock data for the test.
List < Lead > leadList = new List < Lead > ();
for (Integer i = 0; i < 10; i++) {
leadList.add(new Lead(
Firstname = 'Test', Lastname = 'Lead' + String.valueOf(i), Company = 'Acme', Status = 'Open - Not Contacted'));
}
//Insert mock leads
INSERT leadList;
//Instantiate the controller which will fetch the Leads.
PocketCRMLeadController c = new PocketCRMLeadController();
system.assertNotEquals(c.getLeads(), null);
//Output to the debug for visual confirmation during testing.
system.debug(leadList);
system.debug(c.getLeads());
}
}
@forcementor

forcementor commented Oct 18, 2012

Copy link
Copy Markdown
Author

Completed Visualforce page, components and Apex controller for Part 1.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment