首先要配置开发环境。
这个很简单,只要到官方网站下载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 是一款专为移动设备设计的前端框架,它提供了丰富的组件和API,使得开发者可以轻松构建跨平台的触控应用,适用于手机和平板。本文将深入探讨Sencha Touch的相关知识点,包括其核心特性、组件、开发流程...
7. **入门指南**: `getting-started.html` 文件提供了一个初学者的指南,指导用户如何开始使用Sencha Touch 2.1.0 GPL创建第一个移动应用,包括设置环境、创建基本布局、添加控件等步骤。 8. **主入口文件**: `...
3. **快速入门指南**:针对初学者的教程,引导他们快速上手Sencha Touch的开发环境和基本操作。 4. **用户手册**:全面介绍Sencha Touch的架构、工作原理以及最佳实践。 将这个文档部署到Tomcat的webAPP目录下,...
#### 一、Sencha Touch 2.0 快速入门 **1.1 什么是Sencha Touch?** Sencha Touch是一款强大的移动应用开发框架,专为HTML5设计,能够让开发者轻松创建跨平台的应用程序,支持包括Android、iOS以及黑莓在内的多种...
1. **安装与设置**:如何下载Sencha Touch库,如何在项目中引入,以及配置开发环境,包括HTML、CSS和JavaScript的基础知识。 2. **架构与模型**:解释Sencha Touch的基本架构,如MVC模式,以及如何定义和使用数据...
总之,Sencha Architect 2.2.2为开发者提供了一个直观的图形化开发环境,简化了Ext JS和Sencha Touch应用的构建过程。通过学习这个图解教程,你将能够熟练掌握如何使用它来创建动态页面和其他复杂功能。配合源码学习...
Sencha Touch 是一款专为移动设备设计的前端框架,它允许开发者构建富交互式的Web应用程序,可以在各种智能手机和平板电脑上运行,无需考虑特定的设备API。标题中的“sencha touch应用程序”指的是使用Sencha Touch...
为了使用Sencha Touch 2,开发者需要安装Sencha Touch的开发环境,这通常意味着安装Sencha Cmd,这是一个为Sencha框架提供的命令行工具。 在创建新应用的过程中,Sencha Touch 2提供了一个基础应用模板,允许开发者...
Sencha Architect 2.2.2 是一个强大的可视化应用程序构建工具,主要用于基于Sencha Touch 2构建移动应用,以及使用ExtJS 4构建桌面应用。由于这类教程稀缺,本入门操作图解教程显得尤为珍贵。以下将详细讲解教程中的...
接下来,创建一个新的Sencha Touch项目。打开终端,导航到你的工作目录,然后运行以下命令: ```bash sencha generate app AppName /path/to/your/app ``` 这将生成一个基础的Sencha Touch应用结构。然后,你需要...
### Sencha Touch快速入门知识点详解 #### 一、Sencha Touch概述 Sencha Touch是一个用于构建高性能、跨平台移动Web应用程序的JavaScript框架。它利用HTML5、CSS3和JavaScript技术,使得开发者能够创建出外观与...
SenchaCmd 是一个跨平台的命令行工具,它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到最终部署,SenchaCmd 提供了一系列自动化工具和服务。 #### 二、初遇 ...
- 如果计划使用 Sencha Touch 扩展 uniGUI 的功能,则需要单独安装 Sencha Touch。 - **运行演示**: - 安装完成后,可以从 IDE 中直接运行 uniGUI 示例应用程序,以便快速了解其基本功能。 #### 技术概述 - **...
总的来说,这个“PhoneGAP采用移动Javascript+html5框架开发移动程序入门源码”是一个很好的学习资源,涵盖了PhoneGap开发的基础知识,包括框架原理、Sencha Touch的使用、HTML5技术的实际应用,以及JavaScript编程...
而 Sencha Touch 则是开发 Web 和混合型移动应用最受欢迎的框架之一。 #### 二、ExtJS 6 的关键概念 - **组件化**:ExtJS 6 强调组件化设计,使得开发者能够构建复杂且可重用的 UI 组件。 - **MVC 架构**:采用...