Intro to Start Sencha Touch

8/19/2019 Intro to Start Sencha Touch

1/12

Jurusan Tekn

Fakultas Teknik Univers

Arbi Haza Nasution, B.IT(Hons), M.IT –

Teori Bahasa dan Automata Sem Genab2013-2014


2/12

Sencha Touch is a high-performance HTML5 mobileapplication framework.

You can use Sencha Touch to produce a native-app-lexperience inside a browser or in a hybrid shell.

Sencha Touch supports Android, iOS, Windows PhonMicrosoft Surface Pro and RT, and BlackBerry device

Jurusan Tekn





3/12

Sencha Touch requires Chrome or Safari. On a mobile device, you can usSafari, or Internet Explorer 10 or 11.

Sencha Cmd.

Java Runtime Environment version 1.7. Sencha Cmd is written in Java and JRE to run.

Ruby to create the compiled CSS used by Touch.

Windows: Download Ruby from rubyinstaller.org. Download theRubyInstaller .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 Ru

Jurusan Tekn


Ar bi Haza Nasution, B.IT(Hons), M.IT –

Teori Bahasa dan AutomataSem Genab 2013-2014


4/12

For optimal debugging, use a modern web browser suchas 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 ComPrompt.

Mac: Open a Terminal from Finder > Go > Utilities > Terminal.

Ubuntu: Click the Ubuntu Dashboard and type terminal in the sbox.

Jurusan Tekn


Ar bi Haza Nasution, B.IT(Hons), M.IT –

Teori Bahasa dan AutomataSem Genab 2013-2014


5/12

Create a project directory where you want to serve applicatioensure the directory is writable:

Windows: Right-click the directory name, click Properties, and uRead-only on the General tab.

Mac or Ubuntu: Use chmod o+w

Start your web server. If using the Sencha Cmd web server, cdirectory to the location from which you want to serve yourapplication, and start the Sencha Cmd web server with the se web start command. You can access served applications with

http://localhost:1841/>ProjectName< URL. To stop the web servCTRL+C, or open another command line window and type senchstop.

Jurusan Tekn




http://localhost:1841/%3EProjectName%3Chttp://localhost:1841/%3EProjectName%3Chttp://localhost:1841/%3EProjectName%3Chttp://localhost:1841/%3EProjectName%3Chttp://localhost:1841/%3EProjectName%3Chttp://localhost:1841/%3EProjectName%3C


6/12

Sencha Cmd is a cross-platform command line tool tprovides many automated tasks around the full life-cyour applications from generating a new project todeploying an application to production.

Sencha Cmd provides a collection of powerful, time-features that work together and in conjunction with tSencha Ext JS and Sencha Touch frameworks.

Sencha Cmd Web Server

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

Jurusan Tekn




http://www.sencha.com/products/sencha-cmd/http://www.sencha.com/products/sencha-cmd/http://www.sencha.com/products/sencha-cmd/


7/12


8/12

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 Tosoftware anywhere and point the Sencha Cmd web server at that director

If you are using another web server, unzip the Sencha Touch download zimove the touch-n.n.n directory to where the web server can serve your a

You can also navigate to the installed http://localhost/touch-n.n directorybrowser and see the Sencha Touch documentation.

To check that you have correctly installed Sencha Cmd, change to your STouch directory, and type the sencha command, for example:

Jurusan Tekn




http://localhost/touch-n.nhttp://localhost/touch-n.nhttp://localhost/touch-n.nhttp://localhost/touch-n.n


9/12

Now that you have Sencha Touch and Sencha Cmd inyou can generate an application.

Note When using the sencha command to generate you must be inside either the downloaded SDK direca generated Touch app. For further details see the SeCmd documentation.

While still in the Sencha Touch SDK folder, type thefollowing:

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

Jurusan Tekn





10/12

This generates a skeleton Sencha Touch application namespthe MyApp variable and located in the ../MyApp directory (oup from the Sencha Touch SDK directory). The skeleton app call the files you need to create a Sencha Touch application, inthe default index.html file, a copy of the Touch SDK, the CSS fimages and configuration files for creating native packages f

app. You can verify if your application has generated successfully

opening it in a web browser. Assuming that you started the SCmd Web Server, you should be able to navigate to

http://localhost:8000/project/MyApp.

Jurusan Tekn




http://localhost/MyApphttp://localhost/MyApphttp://localhost/MyApp


11/12

The following listing provides a short description of file and directory, the complete list of the generatedcan be found in the Sencha Cmd documentation: app - The directory containing the Models, Views, Controllers, and Sto

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 creatinpackages for your application.

resources - The directory containing the CSS and the images for your a

Jurusan Tekn




http://localhost:8000/docs/#!/guide/commandhttp://localhost:8000/docs/#!/guide/command


12/12

Jurusan Tekn




Documents

Intro to Start Sencha Touch