admin 管理员组文章数量: 1184232
2024年5月9日发(作者:php导入一次文件)
2013年第5期
福建广播电视大学学报
No.5,2013
总第101期
Journal of Fujian Radio&"IV University
General,No.101
ExtJS在网络课程模板中的应用
黄林昊
(福建广播电视大学,福建福州,350003)
摘要:本文针对现代信息教育下的全媒体网络课程建设的实际需要,利用Ex 技术构建全媒体网络课程
模板。对网络课程模板、ExtJS、Ext.NET、Sencha技术做了深度的解析,对Ext.NET在网络课程模板中的几个
典型应用进行了详细地分析与研究。同时也对全媒体网络课程模板的发展提出了实质性的见解,使其更加适
应新形势下开放大学远程教育的需要。
关键词:网络课程;ExtJS;Ext.NET;Sencha
中图分类号:(;728.8 文献标识码:A 文章编号:1008—7346{2013)05—0o87一O5
随着第三代移动通信技术与移动便携式终
互性,改善网络课程的功能局限,美化网络课程
端的飞速发展与普及,充分利用全媒体网络进 的界面,同时还能解决多平台的兼容性等问题。
行的教育教学活动已然成为目前信息教育活动
一
、
什么是ExtJS与Ext.NET
应用的主要形式和重要的发展方向。全媒体的
ExtJS是基于WEB2.0中一个成熟的AJAX
网络教育教学课程可以从时间与空间上拓宽教
开源框架库,利用ExtJS可以开发RIA富客户端
育的范围与领域,利用丰富的教育媒体资源、
的AJAX应用,这个富客户端是一个用
友好的交互手段和便携的移动设备,为学习者 JavaScript编写的用于创建友好的前端用户界面,
提供良好的基础保障。全媒体的网络教育离不 它是与后台技术无关的前端AJAX框架。因此,
开大量优秀的全媒体网络课程,但网络课程制 可以把ExtJS用在.NET、JAVA、PHP等多种语
作难度大,影响了网络课程建设的普及度。利 言的应用开发应用中。ExtJS是最开始基于YUI
用网络课程模板就能解决这个困难,同时大大
技术,由开发人员Jack Slocum开发,通过参考
提升全媒体网络课程的制作效率。网络课程模
Java Swing等机制来组织的一种可视化组件,这
板是指一整套可自动生成网络课程的系统程序, 个框架库从UI界面,到CSS样式的应用,到数
目的在于通过模板来提供给教师一个标准化的
据解析的处理上,都是一款成熟的JavaScript精
课程设计结构,这个结构包括像章节知识点的
品客户端。【2】
呈现、实践教学的设计框架;师生间的社交活
Ext.NET是一个ASP.NET(WebForm+MVC)
动以及协助网络课程开发的小工具等多种基本
的小X组件,是基于Ex 框架库开发来的,
功能。【1】在全媒体网络课程模板的设计中利用
具有很好的浏览器的兼容性。通俗点说,就是
ExtJS技术,可以有效的提升网络课程模板的交
将开源的ExtJS框架库,利用ASP.NET的自定
收稿日期:2013—08—18
作者简介:黄林昊,男,福建福州人。福建广播电视大学电子信息与计算机系讲师。
87
福建广播电视大学学报(总第101期) 2013年l0月25日
义控件技术,封装成ASP.NET的控件,简化开
发难度,提高开发效率。所有的组件是居于Ex—
t,lS框架库上封装而来的,它包含有丰富的A—
uration><configSections>,在其后添加<section
name=”extnet”type=”Ext.Net.GlobalConfig”re—
quirePermission=”flase”,>,除此以外根据不同的
WEB服务器IIS6或者IIS7增加一段不同的IIS
JAX运用,简化了终端的开发步骤。Ext.NET非
常适合做WEB应用程序的开发,它包含了类似
于输入、验证、显示等AJAx的Web组件,支
持各种页面布局框架,支持多种数据绑定与展
配置代码,具体代码可以参考下载ZIP文件包中
的Sample.Web.config代码文件的内容。嘲
(二)Ext.NET中Events事件的处理方法
现。设计开发人员可以在Visual Studio开发环
境中的可视化设计器内进行各方面的属性配置。
Ext.NET和ExtJS一样也是开源的,开发者
可以很方便地获取到它的源代码,它的授权方
式分为社区版和高级版,社区版为免费开源,
高级版为License有收费,普通情况我们采用社
区版来制作应用。开发者使用Ext.NET就是用
ExtJS和HTML作为系统前台,用ASP.NET和
C样作为系统后台来开发各种WEB应用程序。
二、Ext.NET的使用方法
(一)在Visual Studio中加载Ext.NET
1.从http://www.ext.neffdownload下载最新的
Ext.NET版本。解压缩到一个新建目录,并将以
下6个文件复制到W-EB应用项目的/bin目录下:
Ext.Net.dU Ext.Net.xml
Ext.Net.Utilities.dll Ext.Net.Utilities.xml
Newtonsoft.Json.dll Newtonsoft.Json.xml
2.添加引用Ext.Net,打开Visual Studio
2008,在“解决方案资源管理器”中添加引用,
浏览增加Ext:NET.dll,Ext.NET.Utilities.dU和
Newtonsofi.Json.dll三个DLL文件。
3.把Ext.Net添加到Visual Studio 2008的工
具箱。在工具栏上单击“添加选项卡”,此选项
卡命名为(Ext.Net),右键单击此选项卡,“选择
项目”点击“浏览”按钮下的“.NET Framework
组件”导入Ext.NET.dll。
4.配置WEB应用项目的WEB.CONFIG文
件。打开WEB.CONFIG文件在其中找 ̄lJ<config-
88
在Ext.NET的使用是采用事件驱动机制的,
实现Events事件的方式有四种Listeners,Di—
rectEvents,DirectMethods和MessageBUS。Lis—
teners就是客户端的事件处理程序:DirectEvents
是指服务器端的事件处理程序,使用AJAX的客
户端的事件;DireetMethods是使用AJAX的客户
端利用JavaScript调用服务器端的方法(如C#或
VB);MessageBus是指MessageBus允许松动耦
合组件的事件,事件可以发布或订阅互不干涉。
每个组件都有MessageBusListene1"8(客户端的处
理程序的MessageBus事件)和MessageBusDi
rectEvents(服务器端的MessageBus事件处理程
序)。[41对于Listeners和DireetEvents的使用方
法,利用一个实例来做解释。
1.Listeners
Ext.NET的Listeners通过给Ext按扭添加了
一
个客户端方法Handler,示例代码如下:
ASPX代码部分
<ext:Button ID=”Buttonl”runat=”server”
Text=”Submit”>
<Listeners>
<Click Handler=-“alert("Hello );’。,>
</Listeners>
</ext:Button>
2.DirectEvents
DirectEvents可以应用大多数的控件中,实
现异步提交,在Ext.NET.Toolkit的Button控件
中,通过该控件提供的机制就可以使用Di—
2013年第5期 黄林昊:ExtJS在网络课程模板中的应用
rectEvents方便的实现异步提交,示例代码如下:
ASPX代码部分
<Buttons>
<ext:Button runat=”server”Text=”Submit”
Login.aspx页面文件中添加ext:FormPanel控
件建立面板,通过ext:TextField作为用户名、用
户密码或验证码的输入框,同时设置AJAX属性
EmptyText、BlankText,就可以方便实现输入不
OnDirectClick=”Button!一Click”,>
</Buttons>
CS代码部分
<script runat=”server”language=”C样”>
protected void Buttonl
_
Click(object sender,
DirectEventArgs e)
I
,/点击按钮运行的C#事件处理代码
l
</script>
三、Ext.NET在网络课程模板中的几个典型
应用
网络课程模板主要包含有网站内容管理模
块(包括栏目与内容的添加、修改、删除)、学习
资源模块、精选案例模块、在线测试模块、学
习论坛模块、自测自练模块、教学视频模块、
师生互动模块、实践教学模块、形成性测试模
块等。在这些模块中应用Ext.NET实现类似ext:
TextField文本框的自动验证提示,ext:C0mboBox
下拉列表的数据绑定,ext:GridPanel表格控件显
示JSON数据与数据的自动排序与筛选,ext:
ViewPort窗口视图组件来实现多窗口等功能,可
以更好的展现课程多窗口界面,同时具有良好
的交互功能和友好的uI界面。下面介绍在网络
课程模板中的几个典型应用: ‘
(一)支持AJAX的甩户登录
登录窗口中用户通过输入用户名、密码和
验证码来登陆系统。输入信息的文本框使用Ext.
NET技术实现了用户输入信息的自己AJAx的提
示工作。例如网络课程模板中用户登录页面代
码:Login.aspx和Login.aspx.CS。
为空等客户端自动验证。<ext:TextField ID=
"TextField1“runat=”servert'FieldLabel=”用户名”
MaskRe=”a—zA—Z0—9].-EmptyText=”请输入用户
名-'AllowBlank="false"B1ankText=”用户名不能为
空!”></ext:TextField>
通过ext:Button作为提交按钮设置OnDi—
rectClick事件为CS代码的Buttonl
_
Click事件来
处理验证<ext:Button runat=Userver”Text=
”Submit”OnDirectClick=”Button1
一
Click”,>。
Login.aspx.CS代码文件中为了使用Ext.NET
需要引用Ext.NET的命名空间,利用下面的语句
加入Ext.Net的命名空间。<%@Register As—
sembly=”Ext.Net”Namespace=”Ext.Net”TagPrefix=
”ext”%>。代码中的protected void Buttonl Click
(object sender,DirectEventArgs e){..…。)其中
的Buttonl
~
Click事件就自动的获取到客户端的
按钮事件完成登录所需要的验证任务。
(二)自动绑定数据的下拉列表
在增加,修改等界面经常会用到下拉列表,
这些下拉列表在初始化的时候需要连接数据库
来实现数据绑定的效果。利用Ext.NET的ext:
ComboBox组件就可以方便的实现数据的绑定。
例如在系统中设置学生专业的页面代码:・sp—
Type.aspx和SpType.aspx.CS。
SpType.aspx的页面中增加ext:ComboBox设
置属性FieldLabel、BlankText等等,就可以在
页面中获得一个下拉列表,这时下拉列表并没
有数据,我们通过CS代码里的BindComboxSD—
Type事件来绑定数据。<ext:ComboB0x ID:
”EditComboBoxSpType”runat=”server”Editable=
”false”FieldLabel=”专业名称”BlankText="请选择
89
福建广播电视大学学报(总第101期) 2013年10月25日
专业名称-'></ext:ConaboBox>
致。
<ext:Store ID=”StoreStuList”runat=”server”
OnRefreshData=”StuList.DataRefresh”>
_
SpType.aspx.CS代码中利用一个BindCom—
boxSpType过程来实现ext:ComboBox数据的绑
定利用DAO获取到所需要的数据库字段部分放
置到一个DataTable中,利用foreach的循环把
DataTable中的每一行通过C0mb0Box.Items.Add
<Reader>
<ext:JsonReader>
<Fields>
加载进去。
private void BindComboxSpType(ComboBox
eb)
{
DataTable dt=new DAL.FdmbSetDAO 0.
GetFdmbSetlnfoByType(”SpType”).Tables[0];
foreach(DataRow r in dt.Rows)
(
cbJtemsAdd(new Ext.Net.Listhem(r[1].ToString
0, 】.ToString0));
】
l
(三)使用JSON数据的GridPanel表
在显示教学资源,用户信息等众多页面中
我们需要类似EXCEL数据表的数据展现形式,
还需要能快速的进行排序和简单的筛选,利用
Ext.NET封装的ext:GridPanel表格控件就可以
很方便友好的利用JSON来显示这些数据表信
息,(JSON:Java.Script Object Notation是一种数
据交互格 。例如在系统中的显示用户信息的
页面,UserList.aspx和UserList.aspx.CS。
UserList..aspx的页面中添加ext:Store控件用
来在客户端连接JSON数据。ext:Store控件中加
载ext:JsonReader,在JsonReader中添加代表数
据表字段的ext;RecordField,并设置它的Name、
Type。使用了JsonReader绑定的数据格式是
JSON类型的,在后台绑定的是DataSet,关键的
是RecordField中Name指定的名字,必须和你
后台要绑定的数据里字段DataSet中的名称一
90
<ext-RecordField Name=”StuID”,>
<ext:RecordField Name=”StuName”,>
</Fields>
/<ext:JsonReader>
</Reader>
/<ext:Store>
接着在页面中加入ext:GridPanel,同时设
置好各选项,如StorelD="StoreStuList”表示依赖
的数据ext:Store的名称。Tide表示标题。Au—
toExpandColumn=”StuName”表示自动适应宽度的
数据表字段。在ext:GridPanel中加入ext:Col—
umn数据列,设置数据列依赖的DataIndex=
,'StuName'-,Header表示列标题。依次添加多个
数据列。在其尾部加上ext:RowSeleetionModel
作为ext"GridPanel的选择控制部分,通过ext:
RowSelectionModel的OnEvent=-'StuListRowSe—
lect”这个事件达到读取客户端选择哪条记录的
ID号。最后加入ext:PagingToolbar用来控制数据
的分页。
<ext:GridPanel ID=”GridPanelStuList”
runat=”servert。StorelD=“StoreJxjh”Frame=”true”Ti-
tl ”学生信息”AutoExpandColumn=”SpName”>
<ColumnModel>
<Columns>
<ext:Column ColumnID=”StuID”Header=”ID”
Sortable=”true”DataIndex=”StuID”/>
<ext:ColUB1B ColumnID=”StuName”Header=
”姓名”Sortable=”true”DataIndex=”StuName”
福建广播电视大学学报(总第101期) 2013年10月25日
以上的问题只是经济配料问题的一种,现
靠性,其决策理论是建立在严格的理论基础之
在配料问题在工农业生产中时常遇到。比如在 上,运用大量的基础数据,经严密的数学运算
石油工业中需要将原油提炼成若干中间产品, 得到的,从而使企业在生产的各个环节中优化
然后将各种中间产品按一定比例混合成为航空 配置,对提高企业的效率是非常有益的。从某
油、燃料油等,以适应不同用途的需要。这些 种意义上讲,将线性规划方法应用于管理中可
比例应如何选择才能使经费最节省?又如,在 以说是科学与管理艺术的结合,在未来具有更
养殖业,在现代大型畜牧业中经常使用工业生
广阔的发展空间。
产的饲料喂养动物,这些饲料配方也属于经济
配料问题。在化工行业、食品行业、食堂营养
参考文献:
配餐方面都存在经济配料问题。
【1】胡运权.运筹学教程[M】.北京:清华大学出版社,
以上只是总结了几个线性规划在生产中的
2003.
实际问题,并建立了相应的数学模型。此外线
【2]徐玖平,胡知能.运筹学[M].北京:科学出版社,2004.
性规划还在其他方面有很多的应用,比如合理
[3】张干宗.线性规划[M】.武汉,武汉大学出版社,2004.
布局、连续投资、劳动力安排、市场营销调查,
【4]唐晓文,刘海英,文斌.线性规划[M】.北京:中央广播
医院绩效评定等方面。
电视大学出版社.2012.
【5】刘海英.用线性规划的方法制订企业生产计划叨.福
大多数线性规划问题都可以采用计算机辅
建广播电视大学学报,2012,(4).
助来求解。运用线性规划并配合计算机进行计
【责任编辑:陈晓蔚】
算简便易行,降低了企事业管理者对于数学运
算能力的要求,提高了企业决策的科学性和可
(上接第91页)绑定到各控件模板,记录到本地
标同样也是网络教育的发展途径和前进方向。
离线存储使用。这些特性使得Sencha Touch变
成全球领先的移动应用程序开发框架。同
参考文献:
鉴于ExtJS到Sencha再到移动平台的Sencha
[1]tW良亮.网络课程制作模板的设计研究[J1.现代教育
Touch基本的结构、逻辑、语法是相通的,这样
技术,2006,(6).
就能很好的实现系统的平滑过渡。在网络课程模
【2]Ext JS API Documentation【EB/OL].(2013—03—
板中应该继续稳固更新传统PC平台浏览的版
27)[2013-04-051.http://www.extjs.com/docs.
本,同时加紧开发支持各种移动平台的移动版
[3]Ext.NET Examples Explo ̄r[EB/OL].(2013-03-27)
[2013-04-05].http://examples.ext.net.
本,平滑过渡做到各种平台版本兼容。网络课
[4]Ext.NET API Documentation【[EB/OL].(2013—03—27)
程模板做到支持全媒体,支持多平台,才是一
[2013--04-05].httr,J./docs.ext.neL
个完整的全媒体网络课程模板,这样的网络课
(s]-e度百科.Sencha[EB/OL].[2O13—03—07】(2013—04一
程模板才能生成的优秀的网络课程,让学生们
os).http:/Paaike.baidu.corn/view/3775099.htm.
做到时时,处处,人人的学习效果,这样的目
【责任编辑:陈晓蔚】
96
版权声明:本文标题:王xtJS在网络课程模板中的应用_论文 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.roclinux.cn/p/1715215827a686431.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论