How to Use eclipse to develop the sencha touch framework

UseEclipseDevelopmentSencha touch frameworkIs the content of this article, mainly to understandSencha touch frameworkDevelopment quick start learning. For details about the implementation of specific content, see this article.

First, it is the same as many other frameworks.Sencha touchWe provide a series of controls that allow us to easily build HTML5 pages comparable to iPhone apps. The perfect support for touch operations makes up for the poor Touch Experience of traditional mobile websites.

Sencha touchIt is an HTML5 framework that uses JavaScript as a development language and is closely related to JSON. Before getting started, we recommend that you first learn about JSON-related materials.

Sencha touch

Development Environment

There are too many ide options for JS development. We recommend that you use eclipse and install the skpet plug-in for development. The Code prompts are complete.

Help-> install new software-> Add in the pop-up window, enter the following content

Spket

1. Window → preferences → spket → JavaScript profiles → new;

2. Enter"Sencha touchClick OK;

3. Select "sencha touch" and click "add library". Then, select "extjs" in the pull-down list ";

4. Select extjs and click Add file, and then select the sencha-touch-1.1.0 file in your sencha-touch-debug-w-comments.js directory;

5. Set the new extjs profile, select and click the "defalut" button on the right hand side of the "javascript profiles" dialog box;

6. Create a New. js file with smart prompts.

7. Finally, confirm that your. js file is opened with spket JavaScript editor. Right-click a file,

Open with-> skpet JavaScript Editor: dreamwaver can use spket (Dreamweaver plug-in)

 

The code prompt function is weak and cannot be fully supported.Sencha touch. However, its cs5.5 version provides excellent support for HTML5.

Visual Studio cannot find the appropriate method. For more information, see this article.

Debugging tools

CurrentlyFrameworkThe support for desktop browsers is generally poor, but the support for iOS and Android browsers is quite perfect.

Use Chrome for debugging, which is not supported by Firefox.

Use thisFrameworkDevelopment Configuration

Step 1: Create a blank HTML page and use the <SCRIPT> label to introduce the sencha-touch.js <link> label to import sencha-touch.css.

Step 2: Create a JS file for our HTML page. We will use this file to create our sencha touch page.

Simple helloworld Program

VaR APP = new Ext. application ({// use the constructor of the Framework Application class to construct an application name: 'myapp', // specify the name useloadmask: true for this application, launch: function () {// This is the entry of the program Ext. MSG. alert ('hi', 'Hello sencha touch', ext. emptyfn); // display a pop-up window }});

For details, see the supporting source code hellotouch.

Use Controls

You can use controls in either of the following ways. The following uses the panel control as an example:

1. Use the New Keyword to instantiate the control.

var myPanel = new Ext.Panel({  id: 'myPanel' ,  html: 'Oh, this is a Panel!'  }); 

2. Define controls in JSON format.

VaR mypanel = {xtype: 'panel ', // take a closer look at the differences between them. It is easy to understand ID: mypanel, HTML: 'Oh, This Is A panel! '}

First, the browser renders the Panel immediately. Second, the browser renders the Panel only when mypanel is called.

Next, use mypanel as the display content of the application.

Add the following statement to the launch () method:

myApp.views.viewport = myPanel;  

Summary: UseEclipseDevelopmentSencha touch frameworkThe content of this tutorial has been introduced. I hope this article will help you!

 

Turn: http://mobile.51cto.com/others-288964.htm