function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Pat McQueenPat McQueen 

Visualforce for iPhone Development

We are building a Visualforce page that will work with Salesforce.com mobile on the iPhone.  Our users are going to be in rural and remote areas so we need a VERY light visualforce page.  Right now when we build a VF page with this code it produces includes to three or more JavaScript files and makes the download of the page REALLY slow over low bandwidth.  

 

 

<apex:page controller="CreateOrder" showheader="false" sidebar="false" standardStylesheets="false" action="{!checkPermission}">
<!DOCTYPE HTML>
<meta content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

 What can I do to eliminate much of the JavaScript to make the page lighter?  Here is what results from the pages above.

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<!DOCTYPE HTML>
<html><head><script src="/faces/a4j/g/3_3_0.GAorg.ajax4jsf.javascript.AjaxScript" type="text/javascript"></script><script src="/static/060710/js/functions.js" type="text/javascript"></script><script src="/jslibrary/1281554859000/main.js"></script><script src="/jslibrary/labels/1284058836000/en_US.js" type="text/javascript"></script><script src="/static/060710/desktop/desktopAjax.js" type="text/javascript"></script></head>
<meta content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

 

 

Thanks for any ideas!

 

Pat

 

 

Best Answer chosen by Admin (Salesforce Developers) 
paul-lmipaul-lmi

are you using rerenders/ajax on this page?  one would think that if they weren't in use, the ajax js wouldn't be needed.  i don't have experience with SF mobile, but in our experience with Sites, only the JS files that are acutally needed are included.

 

View the source on our ticket form

http://logmein.force.com/support/selfservicecreatecase

 

you'll notice that the only "automatic" js that's included is the ajax one.

 

 

<apex:page controller="SelfServiceCon" language="{!lang}" id="ticket"  showHeader="false" sidebar="false" cache="false" >
<html>
<head><title>{!$Label.SubmitTicketHeader}</title></head>
<apex:stylesheet value="{!URLFOR($Resource.SelfService, '/css.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.SelfService, '/jquery1_4.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.SelfService, '/CommonValidation.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.SelfService, '/ddl.js')}"/>

 

if it's different in SF Mobile (those files are included when not needed), maybe that's a bug?

 

All Answers

paul-lmipaul-lmi

are you using rerenders/ajax on this page?  one would think that if they weren't in use, the ajax js wouldn't be needed.  i don't have experience with SF mobile, but in our experience with Sites, only the JS files that are acutally needed are included.

 

View the source on our ticket form

http://logmein.force.com/support/selfservicecreatecase

 

you'll notice that the only "automatic" js that's included is the ajax one.

 

 

<apex:page controller="SelfServiceCon" language="{!lang}" id="ticket"  showHeader="false" sidebar="false" cache="false" >
<html>
<head><title>{!$Label.SubmitTicketHeader}</title></head>
<apex:stylesheet value="{!URLFOR($Resource.SelfService, '/css.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.SelfService, '/jquery1_4.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.SelfService, '/CommonValidation.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.SelfService, '/ddl.js')}"/>

 

if it's different in SF Mobile (those files are included when not needed), maybe that's a bug?

 

This was selected as the best answer
Pat McQueenPat McQueen

Paul you nailed it.  I started looking and the number of JavaScript includes was absolutely based on which tags I used later in the page.  I removed some Apex Tags and got rid of much of the JavaScript.  Thanks.

 

pat

paul-lmipaul-lmi

glad i could help

Pat McQueenPat McQueen

Here is an example that uses no JavaScript or Style Sheets.  Note that it has been trial and error to find which tags require JavaScipt or CSS.  It would be ideal if there was a reference *wink wink*  I thought I would share the progress of what I found I can do that requires ZERO CSS and ZERO JS.  For a mobile device this is a quite small page.  Now if I can also learn a little about keeping ViewState small ;-)  Thanks to Sohail whom wrote this!

 

Here is the Page:

 

<apex:page sidebar="false" showHeader="false" controller="Minimalist" standardStylesheets="false">
<apex:form >
    <table>
    <tr><td><apex:commandButton action="{!doSomething}" value="Save"/></td></tr>
    <apex:repeat value="{!strings}" var="test" id="theRepeat">
        <tr>
            <td>{!test.name}</td>
            <td><apex:inputCheckbox value="{!test.checkme}"/></td>
            <td><apex:inputText value="{!test.name}"/></td>
        </tr>
    </apex:repeat>
    </table>
</apex:form>
</apex:page>            

 and the controller:

 

/*** Controller: ***/  
    
public class Minimalist {

    public innerString[] getStrings() {
        List<innerString> is = new List<innerString>();
        is.add(new innerString('sohail',false));
        is.add(new innerString('patm',true));
        is.add(new innerString('astadia',false));                
        return is;
    }
    
    public PageReference doSomething() {
        System.debug('hello');
        return Page.minimalist;
    }
    
    /*Inner Class*/
    public class innerString {       

        public String name{get;set;}
        public boolean checkme {get;set;}
        
        /*Inner Class Constructor*/
        public innerString(String theName, boolean theCheck){
            name = theName;
            checkme = theCheck;        
            
        }/*End Inner class Constructor*/    
    }/*End inner Class*/    
}