`
czpae86
  • 浏览: 720575 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

sencha-touch 入门 一 环境配置

阅读更多

首先要配置开发环境。

这个很简单,只要到官方网站下载sencha-touch压缩包即可 http://www.sencha.com/products/touch/

开发工具随便一个编辑器,记事本也可以的。

 

本人用的是myEclipse+tomcat,sencha-touch用的是1.01版本

(使用myEclipse+tomcat我为了以后例子可以跟后台交互)

其实可以直接浏览本地静态html文件的。


 

 

1,编写messageBox.html文件:

 

<!doctype html>
<html>
  <head>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
    <title>messageBox.html</title>
	<link rel="stylesheet" href="../../ext/resources/css/sencha-touch.css" type="text/css">
    <script type="text/javascript" src="../../ext/sencha-touch.js"></script>
    <script type="text/javascript" src="messageBox.js"></script>
  </head>
  
  <body>
    
  </body>
</html>

 
 如果你以前用过Extjs,那么这段代码你很容易明白。

1,引入sencha-touch.css样式文件。

2,引入sencha-touch.js核心库文件。

3,messageBox.js是例子用的文件。

 

2,编写messageBox.js文件:

 

Ext.setup({
    icon: '../icon.png',
    tabletStartupScreen: '../tablet_startup.png',
    phoneStartupScreen: '../phone_startup.png',
    glossOnIcon: false,
    onReady: function() {
    	Ext.Msg.alert('提示', '第一个SenchaTouch程序!');
    }
});

 

现在我们只关心onReady函数里面的代码,其他可以copy。

如果你以前做过Extjs那么看API难不到你。你可以在onReady中使用其他组件进行测试的。

 

3,运行效果:

本人使用的是Opera的手机模拟器(支持HTML5),google浏览器也可以的。

在浏览器输入http://localhost:8080/SenchaTouchTest/myExample/messageBox/messageBox.html

当然你可以直接打开html进行浏览而不必要部署到服务器(我为了以后例子可以跟后台交互)

 


  • 大小: 31.3 KB
  • 大小: 29.5 KB
分享到:
评论

相关推荐

    sencha-touch

    Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件和API,使得开发者可以轻松构建跨平台的触控应用,适用于手机和平板。本文将深入探讨Sencha Touch的相关知识点,包括其核心特性、组件、开发流程...

    sencha-touch-2.1.0-gpl

    7. **入门指南**: `getting-started.html` 文件提供了一个初学者的指南,指导用户如何开始使用Sencha Touch 2.1.0 GPL创建第一个移动应用,包括设置环境、创建基本布局、添加控件等步骤。 8. **主入口文件**: `...

    Sencha_Touch2.0的快速入门.doc

    ### Sencha Touch 2.0 快速入门详解 #### Sencha Touch 2.0:构建卓越的Web应用 Sencha Touch 2.0是一款基于HTML5、CSS3和JavaScript的强大框架,旨在帮助开发者创建高性能、外观媲美原生应用的Web应用。它不仅...

    touch-docs-2.2.1.zip(senchaTouch 离线API参考文档)

    3. **快速入门指南**:针对初学者的教程,引导他们快速上手Sencha Touch的开发环境和基本操作。 4. **用户手册**:全面介绍Sencha Touch的架构、工作原理以及最佳实践。 将这个文档部署到Tomcat的webAPP目录下,...

    Sencha_Touch_2.0用户指南(中文版) (2).pdf

    #### 一、Sencha Touch 2.0 快速入门 **1.1 什么是Sencha Touch?** Sencha Touch是一款强大的移动应用开发框架,专为HTML5设计,能够让开发者轻松创建跨平台的应用程序,支持包括Android、iOS以及黑莓在内的多种...

    sencha touch中文翻译文档

    1. **安装与设置**:如何下载Sencha Touch库,如何在项目中引入,以及配置开发环境,包括HTML、CSS和JavaScript的基础知识。 2. **架构与模型**:解释Sencha Touch的基本架构,如MVC模式,以及如何定义和使用数据...

    Sencha Architect2.2.2入门操作图解教程

    总之,Sencha Architect 2.2.2为开发者提供了一个直观的图形化开发环境,简化了Ext JS和Sencha Touch应用的构建过程。通过学习这个图解教程,你将能够熟练掌握如何使用它来创建动态页面和其他复杂功能。配合源码学习...

    sencha touch应用程序

    Sencha Touch 是一款专为移动设备设计的前端框架,它允许开发者构建富交互式的Web应用程序,可以在各种智能手机和平板电脑上运行,无需考虑特定的设备API。标题中的“sencha touch应用程序”指的是使用Sencha Touch...

    sencha touch2 up and running

    为了使用Sencha Touch 2,开发者需要安装Sencha Touch的开发环境,这通常意味着安装Sencha Cmd,这是一个为Sencha框架提供的命令行工具。 在创建新应用的过程中,Sencha Touch 2提供了一个基础应用模板,允许开发者...

    Sencha Architect 2.2.2 入门操作图解教程.docx

    Sencha Architect 2.2.2 是一个强大的可视化应用程序构建工具,主要用于基于Sencha Touch 2构建移动应用,以及使用ExtJS 4构建桌面应用。由于这类教程稀缺,本入门操作图解教程显得尤为珍贵。以下将详细讲解教程中的...

    Sencha在Android上的应用入门

    接下来,创建一个新的Sencha Touch项目。打开终端,导航到你的工作目录,然后运行以下命令: ```bash sencha generate app AppName /path/to/your/app ``` 这将生成一个基础的Sencha Touch应用结构。然后,你需要...

    Sencha Tuoch

    ### Sencha Touch快速入门知识点详解 #### 一、Sencha Touch概述 Sencha Touch是一个用于构建高性能、跨平台移动Web应用程序的JavaScript框架。它利用HTML5、CSS3和JavaScript技术,使得开发者能够创建出外观与...

    Extjs 5 学习笔记

    SenchaCmd 是一个跨平台的命令行工具,它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到最终部署,SenchaCmd 提供了一系列自动化工具和服务。 #### 二、初遇 ...

    uniGUI开发人员手册.pdf

    - 如果计划使用 Sencha Touch 扩展 uniGUI 的功能,则需要单独安装 Sencha Touch。 - **运行演示**: - 安装完成后,可以从 IDE 中直接运行 uniGUI 示例应用程序,以便快速了解其基本功能。 #### 技术概述 - **...

    PhoneGAP采用移动Javascript+html5框架开发移动程序入门源码

    总的来说,这个“PhoneGAP采用移动Javascript+html5框架开发移动程序入门源码”是一个很好的学习资源,涵盖了PhoneGap开发的基础知识,包括框架原理、Sencha Touch的使用、HTML5技术的实际应用,以及JavaScript编程...

    extjs 6 gettng started

    而 Sencha Touch 则是开发 Web 和混合型移动应用最受欢迎的框架之一。 #### 二、ExtJS 6 的关键概念 - **组件化**:ExtJS 6 强调组件化设计,使得开发者能够构建复杂且可重用的 UI 组件。 - **MVC 架构**:采用...

Global site tag (gtag.js) - Google Analytics