Native mobile app for Salesforce Communities - Part 3 (Mobile UI Design)

Gist: Build a custom branded native mobile UI with Titanium Appcelerator and integrate it with Salesforce communities. Continued from Part 1 (overview) and Part 2 (authentication).

Once the mobile app has successfully authenticated and extracted the OAuth Access token (Part 2), its initial 'Authentication and Authorization' with the Salesforce communities is complete. Our app now loads its main UI.

While a native app can offer a differentiated UX, it adds more complexity and development effort. This is where Salesforce1 accelerates the pace of developing and deploying mobile apps.

This UI is build with Titanium SDK. Newer Titanium projects use an MVC style architecture referred to as 'Alloy'. A Titanium Alloy project has separate folders for model, view and controller, as well as for styles. Here is how a typical Alloy project is organized.


Organization of a typical Alloy project.

The mobile app UI screenshot above is declared in XML and stored in main.xml file under the 'views' folder. This xml layout is converted to corresponding Objective C code during compilation by Titanium SDK.

<!--main.xml sample code-->

<Window class="container">
<ImageView id="image" image="/images/Sample_Header.png" top="0" />
<Label id="lblOpen" top="19%" onClick="Click_open"></Label>
<Label id="lblView" top="36%" onClick="Click_view"></Label>
<Label id="lblChatter" top="53%" onClick="Click_chatter"></Label>
<Label id="lblOther1" top="70%" onClick="Click_other1"></Label>

Notice the 'Click_open' event connected to the 'lblOpen' label control in the main.xml. This event is implemented using JavaScript in a separate controller file (main.js) under the 'controllers' folder as shown here...

function Click_open(e) {"Creating Case Open controller");

function Click_view(e) {"Creating Case View controller");

//and so on....Code left out for clarity.

$.lblOpen.text = 'Open Case';
$.lblView.text = 'View Case';

The styling of Titanium UI follows a .css type approach and is stored in files with a  .tss extension. The .tss formatting can be applied globally within the app by specifying control styles in app.tss as shown here...

For overriding the global styles, individual .tss files with the same name as the corresponding .xml files (main.tss for main.xml) can be created.

//app.tss sample code

"Label": {
font: {
fontSize: '24dp'
color: '#fff',
backgroundColor: '#444',
left: 0,
right: '30%',
height: '53dp',
opacity: 0.9
"TextField": {
font: {
fontSize: '18dp'
color: '#fff',
backgroundColor: '#444',
//and so on...

Now that we have a custom branded UI with some controls, we need to figure out how we can pull data from our Salesforce communities instance. What transpires when a user clicks the 'View case' label, and how do we display it within our mobile app?

Stay tuned for part 4 on integrating with REST API.