Blackberry App

Using Visualforce

After seeing Visualforce for the first time in Marc Benioff’s keynote at Dreamforce 2007, I headed to the Developer’s Lounge to try it out. I have a Blackberry 8800 and wanted to try to build a custom screen interface that would include a Search box, run in the Blackberry browser and present the data in a readable format on the small screen. I accomplished this in a few sessions in between break-out sessions with the invaluable help of the Visualforce developers that were on hand in the Lounge. Ron Hess helped me get started and when he didn't know the answers we found Doug, Steve and others who did have the details I would need, thanks to all of you for your help. What follows is a list of the issues that came up in this process and how we addressed them.

Enabling, editing and coding

First I made sure that Visualforce developer mode was enabled for my login under Setup -> My Personal Information -> Personal Information. I clicked Edit and selected the Visualforce Developer checkbox.

Then I created a page under Build -> Pages -> New Apex Page. I used the handy Visualforce Developer’s Guide provided in the Lounge, the contextual editor and the Component Reference to write the code. In order to be able to see the results of my edits right after saving them, I navigated to the URL of my page (www.salesforce.com/apex/elainesbbapp). This allowed me to view and edit pages in a single window. Here is the resulting code:

Page Source

<apex:page showheader="false" controller="searchAccount" >
<h2> This is my Blackberry App </h2><br />
<h4>Elaine's search app</h4>

<form name="searchForm" method="post" action="#" >
Account Name:
<input type="text" name="q" size="10" id="input" />
<input type="submit" class="button" name="aid" />
</form>
<hr />

<apex:dataList value="{!accounts}" var="each" >
{!each.Name}, {!each.phone}
</apex:dataList>

</apex:page>


Controller Source

public class searchAccount {
  private List<Account> accounts;
  public List<Account> getAccounts() { return accounts; }
  public searchAccount() { // constructor
    String q = System.currentPageReference().getParameters().get('q');
    if (q != null) {
      String fuzzy = '%' + q + '%'; // add wild cards
      accounts = [select id,name,phone from Account where name like :fuzzy ];
    }
  }

}

Code structure

When you save the first page, it asks you to create the controller, after creating that, you can paste in this controller code, it just looks at a query string parameter and uses that to query the account table.


User login considerations

The next hurdle we encountered was that a user had to be logged in to see the page. This was easily solved by putting the username id and password in the URL in this manner:

http://www.salesforce.com/login.jsp?un=yoursalesforceusername&pw=yourpassword&startURL=/apex/elainesbbapp

This works well for speeding through development and testing but the more secure way to do this for real use would be to have the user go through the login process with this URL:

http://www.salesforce.com/login.jsp?startURL=/apex/elainesbbapp

Displaying in Blackberry Browser considerations

The final challenge was that the blackberry browser displayed the Developer Mode editor (iframe) by default instead of the page. At first we could not figure out how to toggle between the iframes on the Blackberry browser so we came up with a workaround by creating a new user that was not a sys admin user and hence would not see the Developer Mode editor when viewing the page. Doug was there working with me on this and planned to take this as product feedback that perhaps Visualforce should detect when a user is viewing a page on a Blackberry and should not present the Developer Mode editor by default when this is the case.

To simplify the page for the small Blackberry screen, I turned the tabs and header off (apex:page showheader="false"). I tried two query buttons, one in HTML, normal <form tag> where the user hits “return” to enter text and the other in apex (Search Account Button) where the user clicks on the button to submit the query using a component. We got the HTML command button to work as shown above.

Visualforce development tools and team

Love the idea of developing the page right on the web. As soon as you hit the editor save button, it’s published. No resident software environment to hold me to a specific computer for development. In fact, Doug shared that he was able to view and edit the context sensitive text on his iPhone although admitting that developing on the iPhone was ludicrous. At any rate, Visualforce is ground-breaking technology that I hope paves the way for more on demand application development environments. I like the way the Visualforce team was on hand in the Lounge to see developers trying it out and seeing where it can be improved.


Elaine G. aka "elaine" on Force.com Discussion Boards