Monday, 29 April 2013

New Manifest Attribute support in Summer13 release for Offline Caching Of Data

Offline caching of data is very important feature .This feature is commonly required in mobile applications where we would like the pages to be cached locally in the browser ,so that user can browse through this pages even if the application goes offline temporarily due to network failure .

HTML 5 came with a manifest file concept where the files and pages to be cached in the browser are specified in a text file which is kept in the same server domain as the other pages .This file is basically a text file of content type is text/cache-manifest.

W3schools is a place where i learn basics .Thanks to w3schools for presenting content in simple language .Here is the reference link for all the enthusiastic. 

The App-cache concept is clearly explained on the link above . Summarizing ,its just the manifest file of type text/cache-manifest that tells the browser on the content that will be cached in the server. 

<html manifest="demo.appcache"> 

The html has an attribute to indicate the manifest file .An example shown above where demo.appcache is the text file that holds resources that will be cached once there is no network and still you can access content that's cached on the browser .

Visualforce had some new attributes in recent summer13 and a mainfest attribute was provided in <apex:page> tag to specify manifest file .

This small write up will take you through a very small tutorial where we cache a page and make it accessible even when the browser  is offline .

Lets begin step by step

1)We will first create a page that will be html5 and also specify the manifest file in that page 

Here is the simple visualforce page we create first and lets name it as test

<apex:page doctype="html-5.0" manifest="/apex/CacheManifest" showheader="false" sidebar="false" standardstylesheets="false">  <header>   <h1>  Congratulations!</h1></header> <article>    This page looks almost like HTML5! </article> <img src="/img/seasonLogos/2013_summer_aloha.png" /> </apex:page>

2)The manifest file can also be created from the visualforce page .Naming the page as "CacheManifest"

<apex:page contentType="text/cache-manifest" applyHtmlTag="false" standardStylesheets="false" showHeader="false">CACHE MANIFEST#img/img/seasonLogos/2013_summer_aloha.png</apex:page>

3)Open the visualforce page /apex/test and go offline by disconnecting the network.

Try refreshing and you will see even if your computer has no network still this page will exist due to browser caching of the image .

Here are the some of the snapshots i took from my pre-release org to demonstrate this feature

Observe in chrome how i view the cached resources using the inspect element utility provided by the chrome .

Now let me go offline and view the same page

One thing to note on this is html5 app-cache is  insecure and hence for enterprise applications where data security is primary consideration to develop offline applications this is not the suggested way .

Still this is popular when you want to store some pictures and small data in browser cache for offline .

 Thanks to Bob Buzzard for answering my query on stackexchange  and that had solve the issue of specifying CACHE MANIFEST.


Sunday, 21 April 2013

Mobile Application Development On Touch Platform-Part 2

This blog post is in continuation with Earlier blog post where we explored  some limitations of standard apps provided by salesforce .But every release salesforce keeps improving Salesforce Touch App ,Salesforce Mobile etc and hence its advisable to go through latest release to find out whether the customers requirement can be met from using those standard app and figure out actual need to go for development of completely customized app. Touch Platform offers Salesforce SDK for Android and IOS .Using SDK its possible to develop native ,hybrid or an HTML web application.

There are lot of discussions around which type of application is best. (Hybrid or native or html).The conclusion it really depends on the requirement,developer resource and performance expected .

Native Apps are faster and provides great offline support but we may need to code in different languages depending on platform .Eg:Objective C for IOS and Java for Android .

 Hybrid Apps are developed using Javascript libraries and a web developer with Javascript skills along with knowledge of Jquery mobile and Html5 and CSS3 can handle .The Hybrid applications will provide cross platform support and there is a support for offline as well using Smartstore.js that comes bundled with salesforce mobile SDK.

The above link will take you developerforce where you will see the Javascript libraries that can be used to develop Hybrid Application.To mention few these are i)Angular.js ii)Backbone.js iii)Forcetk

JqueryMobile  is an excellent utility and using this the UI of the mobile application can be developed very quickly.This is also one of the components that comes bundled with mobile SDK .

Lets quickly summarize what are the things that comes bundled with the Salesforce SDK and whats there use (Salesforce SDK for Android ,Salesforce SDK for IOS).

a)bootconfig.js-This boots the app as name suggests .This configures the app .

Settings needed in  bootconfig.js for local Hybrid app 

i)remoteAccessConsumerKey -From your remote access settings  or connected apps place your consumer key in this variable 

var remoteAccessConsumerKey = "3MVG9A2kN3Bn17hvZpJm8_imuGQjzehEPJ94DYLTwjIp811dyZUSv3EEU1L0z5TAZHanF4clFyNF_2jygDscB";

ii)oauthRedirectURI-This variable must be populated with the Callback URL from your remote access settings or connected apps 


// The redirect URI value specified for your remote access object that defines
// your application in Salesforce.
var oauthRedirectURI = "testdemo:///mobilesdk/detect/oauth/done";

iii)startData-This is crucial part of configuration.This decides whether you want to land the app on local html (In case you have developed local hybrid application )or On server side visualforce as the first page as soon as app boots up(In case you have developed server side  hybrid application)

For local app use the following:

var startData = new SFHybridApp.LocalAppStartData();  // Used for local REST-based "index.html" PhoneGap apps.

For Visualforce based Server side application use the following

var startData = new SFHybridApp.RemoteAppStartData("/apex/Visualforcepage?context=container"); 

Where VisualforcePage is the name of Visualforce where you want to land the user when the app boots up

NOTE:I will be expanding in my next blog post whats the difference between local side hybrid app and server side hybrid application

b)Cordova-2.3.0.js-This is open source phonegap plugin.To read more about Phonegap refer the following link

We wonder how can i access the device features(Camera,audio,video,geo location,file storage  etc)from Javascript .It is this open source Javascript library that has Javscript functions to invoke the device features.

c)SalesforceOauthPlugin.Js-This handles the authentication of the application using oauth 2.0 of Note oauth 2.0 is necessary only for local hybrid application

d)SFHybridApp.Js-This provides some utility functions necessary for offline caching of data and functions  to detect whether the device is online or offline etc 

e)Jquerymobile -This library eases the creation of UI for the application and makes it platform independent and also device independent .

There are lot to speak about mobile application development on touch platform and surely i fancy blogging more on this .Happy Learning!!!

Introducing Lightning Base Components

Lightning Base Components are great addition to the platform and in fact revolutionary .One of the concerns around lightning component ...