+ Start a Discussion
Jayant DasJayant Das 

Need help with Android Hybrid App

Hi All,

 

I am a novice and 4 days old on mobile development. I have been trying to do a POC as a learning path and have successfully implemented the ContactExplorer example using the Local/Remote App Start Data. And now I wish to extend the functionality to Offline capabilities but am facing a blocker. I had initially started with Local (index.html), but since the Remote approach allows the flexibility of using VF page mobile components in the pages (https://github.com/forcedotcom/MobileComponents/tree/master/Visualforce/src/pages), hence moved to that approach. But currently am stuck with the navigation flow.

 

1. Remote App Start Data approach:

I modified the MobilePageWithComponents' page "Contact List" to navigate to MobilePage (<a href="#listPage" data-role="button">Contact List</a> TO <a href="/apex/MobilePage" data-role="button">Contact List</a>) so that I could display the contacts in split view. In bootconfig.js, I have pointed the Remote App Start Data to point to MobilePageWithComponents page. This works like a charm in browser but when I test this in emulator in eclipse, the navigation is stuck at MobilePageWithComponents page and is not forwarded to the MobilePage. I could see no logs as such and have been struggling to implement multi page flows in a mobile device.

 

2. Local App Start Data approach:

I wanted to extend the index.html to point to my VF pages, so that if the device is offline, at least the index.html is rendered and rest of the pages are rendered when the device is online. But am not sure how to invoke the VF page from index.html since the application would have started in the Local App Start Data approach.

 

I am looking for some help at this stage with someone who have tried out something similar and have been able to successfully implement. Any pointers on this is highly appreciated.

 

Regards,

Jayant

Gaurav KheterpalGaurav Kheterpal

Can you share your complete code snippet for #1?

 

Regards,
Gaurav

Jayant DasJayant Das

Hi Gaurav,

 

Please find the snippet below.

 

bootconfig.js

// The authorization/access scope(s) you wish to define for your application.
var oauthScopes = ["visualforce", "api"];

//The start data associated with the application.  Use SFHybridApp.LocalAppStartData for a "local"
//PhoneGap-based application, and SFHybridApp.RemoteAppStartData for a Visualforce-based
//application.  The default representations are below, or you can look at the data
//classes in SFHybridApp.js to see how you can further customize your options.
//var startData = new SFHybridApp.LocalAppStartData();  // Used for local REST-based "index.html" PhoneGap apps.
var startData = new SFHybridApp.RemoteAppStartData("/apex/MobileHomePage"); // Used for Visualforce-based apps.

 

MobileHomePage.page

<apex:page showHeader="false" standardStylesheets="false" cache="false" doctype="html-5.0">
    <c:App > 
        <!--  H O M E  (single) -->
        <c:Page name="homePage" theme="touch">
            <c:Header >
                <h1>Welcome!</h1> 
            </c:Header>
            <c:Content >
                <a href="/apex/MobilePage" data-role="button">Contact List</a>
            </c:Content>
        </c:Page>
    </c:App>
    
    <style>
        [data-role="panel"][data-id="main"] [data-role="page"].ui-page .ui-content {
        background: white;
    }
    
        .ui-body-touch, .ui-overlay-touch {
	        font-family: Helvetica, Arial, sans-serif
	    }
    </style>
</apex:page>

 

MobilePage.page

<apex:page showHeader="false"  standardStylesheets="false" cache="false" doctype="html-5.0">
<c:App > 
    <apex:composition template="SplitViewTemplate"> 
        <apex:define name="menu">
            <c:Page name="list"  back="true" theme="touch">
                <c:Header >
                    <h1 style="font-size: 20px; margin: 0px;">All Contacts</h1> 
                </c:Header>
                <c:Content >
                    <c:List sobject="Contact" labelField="Name" subLabelField="Account.Name" sortByField="FirstName" listFilter="true"/>
                </c:Content>
                <c:Footer >
                <!--  ,'iconCls':'star' -->
                <c:Nav elemId="listNav"
                    pages="[{'page':'/apex/MobileHomePage','name':'Home'}]"/>
            </c:Footer>
            </c:Page>
        </apex:define>
        <apex:define name="main">
            <c:Page name="main" theme="touch">
                <c:Header >
                    <h1 style="font-size: 22px; margin: 0px;">Contact Details</h1>
                </c:Header>
                <c:Content >
                    <c:Detail sobject="Contact"/>
                </c:Content>
            </c:Page>
        </apex:define>
    </apex:composition>
</c:App>
<style>
    .ui-body-touch, .ui-overlay-touch {
        font-family: Helvetica, Arial, sans-serif
    }
</style>
</apex:page>

 

 

 

Jayant DasJayant Das

For the issue faced in approach 1. above, I am seeing the following in the logs:

 

04-10 05:54:35.445: D/CordovaLog(1328): Uncaught TypeError: Cannot call method 'invoke' of undefined
04-10 05:54:35.453: D/CordovaLog(1328): https://c.ap1.visual.force.com/resource/1365572424000/MobileVisualforceSDKjsMin: Line 18 : Uncaught TypeError: Cannot call method 'invoke' of undefined
04-10 05:54:35.453: E/Web Console(1328): Uncaught TypeError: Cannot call method 'invoke' of undefined at https://c.ap1.visual.force.com/resource/1365572424000/MobileVisualforceSDKjsMin:18

 

However as mentioned earlier, this is working fine in the browser.

Jayant DasJayant Das

After digging down further, it seems that the Mobile components are having issue and are not cross platform. I checked the same page from my Android phone browser and could see the same result (links not working). When I implemented the plain old anchor tag, it worked fine on the emulator.

 

Need to check more on this of overcoming the issue when the Mobile components are being used.