Jurusan Teknik Informatika

Fakultas Teknik Universitas Islam Riau

Arbi Haza Nasution, B.IT(Hons), M.IT Teori Bahasa dan Automata Sem Genab 2013-2014

Jurusan Teknik Informatika

Fakultas Teknik Universitas Islam Riau

Sencha Touch is a high-performance HTML5 mobile

application framework.

You can use Sencha Touch to produce a native-app-like

experience inside a browser or in a hybrid shell.

Sencha Touch supports Android, iOS, Windows Phone,

Microsoft Surface Pro and RT, and BlackBerry devices.

Arbi Haza Nasution, B.IT(Hons), M.IT Teori Bahasa dan Automata Sem Genab 2013-2014

Jurusan Teknik Informatika

Fakultas Teknik Universitas Islam Riau

Sencha Touch requires Chrome or Safari. On a mobile device, you can use Chrome,

Safari, or Internet Explorer 10 or 11.

Sencha Cmd.
Java Runtime Environment version 1.7. Sencha Cmd is written in Java and needs the

JRE to run.

Ruby to create the compiled CSS used by Touch.

Windows: Download Ruby from rubyinstaller.org. Download the

RubyInstaller .exe file and run it.

Mac: Ruby is pre-installed. You can verify its presence with the ruby v command.
Ubuntu: Use sudo apt-get install ruby2.0.0 to download and install Ruby.

Ar
Sem Genab 2013-2014

bi Haza Nasution, B.IT(Hons), M.IT Teori Bahasa dan Automata

Jurusan Teknik Informatika

Fakultas Teknik Universitas Islam Riau

For optimal debugging, use a modern web browser such

as Chrome or Safari.

To view Sencha Cmd options after installing Sencha Cmd,

type sencha from the command line:

Windows: Press the Windows key + r and type cmd to get a Command

Prompt.
Mac: Open a Terminal from Finder > Go > Utilities > Terminal.
Ubuntu: Click the Ubuntu Dashboard and type terminal in the search
box.

Ar
Sem Genab 2013-2014

bi Haza Nasution, B.IT(Hons), M.IT Teori Bahasa dan Automata

Jurusan Teknik Informatika

Fakultas Teknik Universitas Islam Riau

Create a project directory where you want to serve applications, and

ensure the directory is writable:

Windows: Right-click the directory name, click Properties, and uncheck

Read-only on the General tab.

Mac or Ubuntu: Use chmod o+w <dir_name>

Start your web server. If using the Sencha Cmd web server, change

directory to the location from which you want to serve your

application, and start the Sencha Cmd web server with the sencha
web start command. You can access served applications with the

http://localhost:1841/>ProjectName< URL. To stop the web server, press

CTRL+C, or open another command line window and type sencha web
stop.

Arbi Haza Nasution, B.IT(Hons), M.IT Teori Bahasa dan Automata Sem Genab 2013-2014

Jurusan Teknik Informatika

Fakultas Teknik Universitas Islam Riau

Sencha Cmd is a cross-platform command line tool that

provides many automated tasks around the full life-cycle of

your applications from generating a new project to
deploying an application to production.

Sencha Cmd provides a collection of powerful, time-saving

features that work together and in conjunction with the

Sencha Ext JS and Sencha Touch frameworks.

Sencha Cmd Web Server

sencha fs web -port 8000 start -map C:\touch-2.3.1

Arbi Haza Nasution, B.IT(Hons), M.IT Teori Bahasa dan Automata Sem Genab 2013-2014

Jurusan Teknik Informatika

Fakultas Teknik Universitas Islam Riau

Code Generation Tools

Tuning Tools

JS Compiler

Workspace Management

Web Server

Image Capture

Native Packaging

Flexible Configuration System

Package Management System

Logging

Build Scripts

Third-party Software
Code Generation Hooks

Arbi Haza Nasution, B.IT(Hons), M.IT Teori Bahasa dan Automata Sem Genab 2013-2014

Jurusan Teknik Informatika

Fakultas Teknik Universitas Islam Riau

Extract the Sencha Touch download zip file to your projects directory.
If you are using the Sencha Cmd web server, you can unzip the Sencha Touch

software anywhere and point the Sencha Cmd web server at that directory.

If you are using another web server, unzip the Sencha Touch download zip file and

move the touch-n.n.n directory to where the web server can serve your apps.

You can also navigate to the installed http://localhost/touch-n.n directory from your

browser and see the Sencha Touch documentation.

To check that you have correctly installed Sencha Cmd, change to your Sencha

Touch directory, and type the sencha command, for example:

Arbi Haza Nasution, B.IT(Hons), M.IT Teori Bahasa dan Automata Sem Genab 2013-2014

Jurusan Teknik Informatika

Fakultas Teknik Universitas Islam Riau

Now that you have Sencha Touch and Sencha Cmd installed,

you can generate an application.

Note When using the sencha command to generate an app,

you must be inside either the downloaded SDK directory or

a generated Touch app. For further details see the Sencha
Cmd documentation.

While still in the Sencha Touch SDK folder, type the

following:

C:\touch-2.3.1>sencha generate app MyApp C:/touch-2.3.1/project/MyApp

Arbi Haza Nasution, B.IT(Hons), M.IT Teori Bahasa dan Automata Sem Genab 2013-2014

Jurusan Teknik Informatika

Fakultas Teknik Universitas Islam Riau

This generates a skeleton Sencha Touch application namespaced to

the MyApp variable and located in the ../MyApp directory (one level
up from the Sencha Touch SDK directory). The skeleton app contains
all the files you need to create a Sencha Touch application, including
the default index.html file, a copy of the Touch SDK, the CSS file,
images and configuration files for creating native packages for your
app.

You can verify if your application has generated successfully by

opening it in a web browser. Assuming that you started the Sencha

Cmd Web Server, you should be able to navigate to
http://localhost:8000/project/MyApp.

Arbi Haza Nasution, B.IT(Hons), M.IT Teori Bahasa dan Automata Sem Genab 2013-2014

10

Jurusan Teknik Informatika

Fakultas Teknik Universitas Islam Riau

The following listing provides a short description of each

file and directory, the complete list of the generated files

can be found in the Sencha Cmd documentation:
app - The directory containing the Models, Views, Controllers, and Stores for

your app.
app.js - The main JavaScript entry point for your app.
app.json - The configuration file for your app.
index.html - The HTML file for your app.
packager.json - The configuration file used by Sencha Cmd for creating native
packages for your application.
resources - The directory containing the CSS and the images for your app

Arbi Haza Nasution, B.IT(Hons), M.IT Teori Bahasa dan Automata Sem Genab 2013-2014

11

Jurusan Teknik Informatika

Fakultas Teknik Universitas Islam Riau

Arbi Haza Nasution, B.IT(Hons), M.IT Teori Bahasa dan Automata Sem Genab 2013-2014

12