We will start by creating a project with the Sencha Touch Cmd. Let's generate the application (we already learned this in Chapter 2, Setting Up a Project Structure with Sencha Touch):
$ cd /Development/touch-2.4.1 $ sencha generate app Imaginary ~/Projects/phonegap-by-example/imaginary
I will not explain what the parameters mean here because we already looked into it. The initial folders and files structure looks like this:
. ├── app ├── app.js ├── app.json ├── bootstrap.js ├── bootstrap.json ├── build ├── build.xml ├── cordova ├── index.html ├── packages ├── resources └── touch
Also, we will install several Cordova plugins:
$ cd cordova $ cordova plugin add org.apache.cordova.statusbar, $ cordova plugin add org.apache.cordova.camera $ cordova plugin add org.apache.cordova.file
Each of them is responsible for status bar display, camera access, and filesystem access respectively. We will use these plugins in the upcoming chapters.
We only add configuration for the status bar. We add it before closing the widget section in the cordova/config.xml file:
<preference name="StatusBarOverlaysWebView" value="false" /> <preference name="StatusBarBackgroundColor" value="#000000" /> <preference name="StatusBarStyle" value="lightcontent" />
The preceding code just defines the color of the status bar, its overlay web view, and its style.
In the app.json config section, we specify our targeting platform, "platforms": "ios". In app.js, we add a single view and controller:
views: [ 'Main' ], controllers: [ 'Main' ]
The Main.js view represents the Sencha Touch panel component with TitleBar and tabs at the bottom:
Ext.define('Imaginary.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Button',
'Ext.Img'
],
config: {
tabBarPosition: 'bottom',
items: [
//...
]
}
});Let's define two different tabs. The first one will contain the Take Photo button. When we click on the button, we should be able to see the camera popup screen. We will place this button in the middle of the container:
{
title: 'New Photo',
iconCls: 'lens',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'New Photo'
},
{
xtype: 'container',
width: '100%',
height: '100%',
layout: {
type: 'vbox',
pack: 'center',
align: 'center'
},
items: [
{
xtype: 'button',
id: 'takePhotoBtn',
text: 'Take Photo',
iconCls: 'photo',
iconAlign: 'top',
height: 70,
width: 120,
padding: 10,
margin: 5
}
]
}
]
}As you can see, there are iconCls with the value photo assigned to the button. It is the icon class we define in resources/sass/app.scss. We add some other icon class's definitions as well to the button:
@include icon('lens', 'L'),
@include icon('photo', 'v'),
@include icon('globe', 'G'),
@include icon('check', '3'),
@include icon('gallery', 'P'),On the second tab, we define only an empty container to display the pictures we will capture with the camera:
{
title: 'My Photos',
iconCls: 'gallery',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'My Photos'
},
{
xtype: 'container',
id: 'photos',
width: '100%',
height: '100%',
scrollable: {
direction: 'vertical',
directionLock: true
}
}
]
}You can see that we created the container with 100 percent width and height and made it vertically scrollable.
There is not much inside the Main.js controller. We added only two references to the buttons and container for pictures:
Ext.define('Imaginary.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
takePhotoBtn: '#takePhotoBtn',
photoContainer: '#photos'
},
control: {
//...
}
},
//...
});Now, we can see our initial application by running this command:
$ sencha app build -run native
It will show us the following screen:
And that is it! Now, let's go to the photo capture implementation.