仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 582|回复: 8
打印 上一主题 下一主题

[学习教程] ASP网页编程之AJAX和Web开辟新手艺:Dynamic Faces

[复制链接]
再现理想 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 22:19:46 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
ASP是依赖组件的,能访问数据库的组件好多就有好多种,再有就是你微软的工具可是什么都要收钱的啊!ajax|web  ProjectDynamicFaces是数个扩大JavaServerFaces手艺的的项目之一。ProjectDynamicFaces是一个立异型的项目,供应了向基于JavaServerFaces手艺的使用软件增加Ajax功效的办法。它使我们可以让使用软件已在利用的任何JavaServerFaces组件撑持Ajax功效。我们无需对组件举行修正就可以够使它们撑持Ajax,我们也无需对使用软件举行任何修正就能够使它具有Ajax的魔力。

  要使使用软件具有Ajax魔力,我们必需起首断定使用中但愿Ajax功效更新的网页部分。象基于JavaServerFaces手艺的开辟职员懂得的那样,JavaServerFaces网页是由组件树暗示的。使用DynamicFaces,我们可以断定组件树中的哪一个组件会受害于异步更新。就象利用Ajax更新代表网页的HTMLDOM树的一部分那样,我们利用DynamicFaces更新代表JavaServerFaces网页的组件树的一部分。因而,DynamicFaces机制关于Ajax和JavaServerFaces开辟职员而言是熟习的。

  更主要的是,DynamicFaces利用JavaServerFaces组件形式,使我们可以以一种更无效的体例使用Ajax功效。因为组件形式的合作特征,一些网页组件上的JavaScript事务可以触发该网页上任何数目的别的组件的异步更新。DynamicFaces使得这些异步更新只是向服务器发送的一次Ajax哀求的了局,而不是招致每次异步更新的Ajax哀求的了局。

  DynamicFaces还使用JavaServerFaces组件形式无效地办理客户机端和服务器真个形态。当DynamicFaces更新客户机端上的组件形态时,它更新的只是已改动的组件而不是全部树的形态。最好的一点是DynamicFaces在背景完成一切这些操纵,并且是以一种与JavaServerFaces手艺的性命周期完整分歧的体例完成的。

  除简化向使用软件增加Ajax功效外,DynamicFaces还向我们供应了增加Ajax功效的办法的天真性。这篇文章将会商使用DynamicFaces使使用软件更具交互性和活气的三种办法:

  ・使用DynamicFaces供应的定制ajaxZone标签断定组件树中必要被Ajax化的部分。

  ・使用DynamicFaces供应的JavaScript库向单个组件增加Ajax功效。

  ・在一个网页中增加撑持Ajax的组件,比方jMakiwidget。

  在进修这些手艺前,我们先来看看使用软件怎样才干利用DynamicFaces手艺。

  开辟使用DynamicFaces的使用软件

  经由过程向一个尺度的JavaServerFaces1.2完成中增加Ajax功效,DynamicFaces使用了JavaServerFaces手艺的运转工夫库的可扩大性。DynamicFaces的中心是定制的Lifecycle和ViewRoot完成。这二个完成是JavaServerFaces手艺供应的尺度Lifecycle和ViewRoot完成的扩大,一个尺度的Lifecycle工具代表JavaServerFaces性命周期的一个实例,一个尺度的ViewRoot工具代表一个组件树的根。团结利用定制Lifecycle工具和定制ViewRoot工具,使JavaServerFaces性命周期可以处置Ajax事件,在无需对全部网页更新的情形下从头显现组件树的一部分。这些定制完成从命于不撑持Ajax哀求的尺度完成。

  为了使JavaServerFaces手艺运转工夫库晓得定制Lifecycle工具的存在,我们必需在设置形貌器中使用一个初始化参数向FacesServlet实例呈报该工具。

<servlet>
<servlet-name>FacesServlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<init-param>
<param-name>javax.faces.LIFECYCLE_ID</param-name>
<param-value>com.sun.faces.lifecycle.PARTIAL</param-name>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
  别的,我们还必需将DynamicFaces依附的JavaArchive(JAR)文件增加到使用软件的webarchive(WAR)文件的lib目次中。由于DynamicFaces是基于JavaPlatformEnterpriseEdition5(JavaEE5)的,我们所必要的几近一切依附干系都已存在。最初一个依附是ShaleRemoting,DynamicFaces使用它从Java类路径中加载JavaScript文件和别的资本。ShaleRemoting依附于commons-logging,因而我们必需向使用软件供应commons-logging。

  最初,我们必需在利用它的每一个网页中申明该DynamicFaces标签库。关于切合尺度的非XML语法的JavaServerPages(JSP)网页而言,这类申明以下所示:

<%@taglibprefix="jsfExt"uri="http://java.sun.com/jsf/extensions/dynafaces"%>
  关于切合XML语法的JavaServerPages(JSP)网页而言,这类申明以下所示:

<jsp:rootxmlns:jsp="http://java.sun.com/JSP/Page"version="1.2"
xmlns:jsfExt="http://java.sun.com/jsf/extensions/dynafaces"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
  假如利用Facelets而非JSP,语法与JSPXML的语法十分类似,以下所示:

<htmlxmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:jsfExt="http://java.sun.com/jsf/extensions/dynafaces"
xmlns:f="http://java.sun.com/jsf/core">
  好了。我们能够入手下手使用DynamicFaces向使用软件中增加Ajax功效了。

  作为一种手动设置使用软件的替换性计划,我们可使用DynamicFaces下载包,个中包含面向JSP和Facelets的空缺使用软件。假如利用现成的空缺使用软件,一切的设置事情已事后完成,我们就能够入手下手编写网页了。
<P>  使用ajaxZone标签更新部分网页

  断定网页上哪些组件将撑持Ajax的一种体例是用DynamicFaces供应的ajaxZone定制标签封装它们。当如许做时,我们就告知DynamicFaces只异步更新利用ajaxZone标签断定的组件树部分。

  比方,假定我们有一个带有一系列按钮的网页,客户在网上购置汽车时,能够用这些按钮选择尺度或奢华装修。当客户点击一个按钮时,一系列别的组件的值会产生变更,而不会形成全部网页被更新。当客户改动一个组件的值时,汽车的代价也会改动,但不会形成全部网页的更新。

  显现的是cardemo使用软件中网页的一个屏幕快照,它使客户可以选择汽车的设置情形。



:选择汽车的设置


  显现了二个由ajaxZone标签分别的地区。当客户点击地区2中的一个按钮时,该地区中组件的值会产生变更。当客户改动地区2中的一个组件的值时,地区1中YourPrice输入组件的值也会随之变更。

  要完成如许的功效,我们必要将一切组件封装在ajaxZone标签中,以下所示:

<jsfExt:ajaxZoneid="zone1">
<h:panelGridcolumns="2">
<h:outputTextstyleClass="subtitle"
value="#{bundle.basePriceLabel}"/>
<h:outputText
binding="#{carstore.currentModel.components.basePrice}"/>
<h:outputTextstyleClass="subtitle"
value="#{bundle.yourPriceLabel}"/>
<h:outputTextvalue="#{carstore.currentModel.currentPrice}"/>
</h:panelGrid>
</jsfExt:ajaxZone>
<jsfExt:ajaxZoneid="zone2"
action="#{carstore.currentModel.updatePricing}">
<h:commandButtonid="Standard"value="#{bundle.Standard}"
styleClass="#{carstore.customizers.Standard.buttonStyle}"
actionListener="#{carstore.choosePackage}"/>
<h:commandButtonid="Deluxe"value="#{bundle.Deluxe}"
styleClass="#{carstore.customizers.Deluxe.buttonStyle}"
actionListener="#{carstore.choosePackage}"/>
<h:outputTextvalue="#{bundle.Engine}"
styleClass="optionLabel"/>
<h:selectOneMenustyleClass="optionValue"
binding="#{carstore.currentModel.components.engine}"/>
<h:outputTextvalue="#{bundle.Speakers}"
styleClass="optionLabel"/>
<h:selectOneRadiostyleClass="optionValue"
binding="#{carstore.currentModel.components.speaker}"/>
</jsfExt:ajaxZone>
  后面的代码中包括名字分离为zone1和zone2的二个域。象代码显现的那样,zone1中只要一个输入组件,因而它不会发生任何Ajax哀求;Zone2域中包括有输出和输入组件。当客户点击2个按钮中的1个,大概选择菜单或单选按钮列表中的一个选项时,zone2中的组件会启动一个Ajax哀求。这一哀求将引发办法表达式#{carstore.currentModel.updatePricing}中界说的操纵被挪用。

  当利用域时,每一个Ajax事件将使得网页中的一切域被更新。后面例子的效果是,当用户选择zone2中的任何输出组件时,Ajax功效会主动地更新zone1中的汽车代价数据。

  值得指出的是,我们无需编写一行JavaScript代码就可以够完成这一例子,我们也无需任何定制组件。这一使用软件利用了我们熟知的一般而复杂的JavaServerFaces组件,但它们已可以撑持Ajax功效了。

  ajaxZone标签向网页创作者供应了一种利用DynamicFaces的复杂、熟习、直不雅的体例。在最复杂的例子中,ajaxZone标签可以向网页创作者供应所必要的功效。ajaxZone标签撑持很多使我们可以进一步定制其操纵的别的属性,ajaxZone文档中包括有其属性的完全清单。

  上面的部分将会商利用DynamicFaces的另外一种办法,它使我们可以细粒度地把持网页中组件的Ajax化。
<P>  利用DynamicFacesfireAjaxTransaction办法

  为了对与Ajax相干的义务举行细粒度的把持,我们可使用DynamicFaces供应的内置JavaScript库。经由过程利用现有组件标签中符合的DynaFaces.fireAjaxTransactionJavaScript函数,我们能够对网页中组件异步更新体例有更细粒度的组件级把持。

  比方,假定我们但愿网页中的一些组件对一品种型的JavaScript事务━━比方onclick作出呼应,并但愿该网页中的别的组件对别的范例的JavaScript事务作出呼应。又假定我们但愿天生一个Ajax哀求的每一个组件可以引发组件树的分歧部分被异步更新。为了完成这些义务,我们必要利用fireAjaxTransaction函数。

  为了利用fireAjaxTransaction函数,必要完成上面的筹办事情:

  ・在一个组件标签中增加一个JavaScript事务属性,比方onclick。

  ・将该属性的值设置成DynaFaces.fireAjaxTransaction函数。

  ・向该函数传送一系列参数。

  上面的代码是一个复杂的HelloWorld例子中一个网页的一部分,用户能够输出他或她的名字,点击一个按钮,使用程序会用一条包括用户名字的问候语呼应用户的输出。

...
<f:view>
...
<h:formid="form"prependId="false">
...
<h:graphicImagevalue="wave.med.gif"/>
<p>
Hello,mynameisDuke.Whatisyourname?
<p>
<h:inputTextid="input"value="#{testBean.name}"/>
<h:commandButtonid="button"
actionListener="#{testBean.changeText}"

value="click"/>
<p>
<h:outputTextid="text"value="#{testBean.text}"/>
</h:form>
...
</f:view>
  在下面的例子中,inputText标签代表一个输出域。当用户在该输出域中输出内容,并点击commandButton标签暗示的按钮,就会呈现上面的情形:

  1、DynaFaces.fireAjaxTransaction函数实行,使得DynamicFaces向服务器发送一个Ajax哀求。

  2、服务器前往一个DynamicFacesJavaScript库处置的出格XML呼应。

  3、符合的库函数用新的值更新HTMLDOM树。

  为了告知fireAjaxTransaction函数怎样天生Ajax哀求,我们向它传输一系列参数。在下面的例子中,我们向fireAjaxTransaction函数传送了2个参数。上面是挪用fireAjaxTransaction函数的代码:


  This参数指的是代表触发该事务的按钮的标签,别的参数由唆使DynamicFaces怎样处置该哀求的选项构成。在这个例子中,选项是execute和render。

  Execute和render选项指的是JavaServerFaces性命周期的部分,如所示:



:DynamicFaces怎样使用execute和render选项分别JavaServerFaces手艺的性命周期


  Execute是在postback时代实行的性命周期部分。它包括有处置形式工具的数据转换、考证、更新阶段;Render依据对网页的哀求显现该网页。

  在对fireAjaxTransaction函数的挪用中利用的execute选项列出了在JavaServerFaces性命周期的execute部分时代必需处置的组件的ID,HelloWorld例子中的这行代码以下所示。

execute:input,button

  承受用户名的input组件必需实行性命周期的execute部分,由于它的数据必需被保留到形式工具中。Button组件也应该实行性命周期的execute部分,由于InvokeApplication阶段是性命周期execute片段的一部分。

  当性命周期的render片段显现一个利用DynamicFaces的网页时,作为一次Ajax哀求的了局,它只显现该网页上被选定的组件。我们利用render选项显现要从头显现的组件的ID,HelloWorld例子中的render选项以下所示:

render:input,text

  在这一例子中,作为Ajax哀求的了局,性命周期的render片段会从头显现网页上的input和text组件。当用户点击该按钮时,代表input组件的输出字段和代表text组件的输入文本会被再次显现。输出字段会被从头显现,扫除在点击该按钮前用户输出的值。输入文本会被从头显现,显现包括在点击该按钮前用户在输出域中输出的值的信息。该网页上的别的组件无需被从头显现。

  除execute和render选项外,我们还可使用别的选项,进一步定制DynamicFaces处置事务的体例。必要记着的是,利用fireAjaxTransaction函数使我们可以对网页中的哪些组件会得益于Ajax有更多的把持。现实上,fireAjaxTransaction函数让我们可以可以使网页中的任何组件撑持Ajax,而无需编写JavaScript或任何别的代码。
<P>  团结利用DynamicFaces和jMaki

  至此,我们已进修了怎样利用DynamicFaces从头显现撑持Ajax的JavaServerFaces组件。可是,怎样增加已经在基于JavaServerFaces的使用软件中看到的撑持Ajax的widget呢?

  我们能够使用ProjectjMaki将喜好的widget封装在JavaServerFaces组件中。如许,我们既可以享用到JavaServerFaces组件形式的优点,也可以取得利用被封装为JavaServerFaces组件的widget的天真性。同时,我们不必编写为现有组件完成Ajax功效的JavaScript代码,和为widget创立JavaServerFaces组件所请求的Java平台代码。

  怎样团结利用jMaki和DynamicFaces呢?关于网页创作者而言,这十分复杂,就是将与jMakiwidget相干的标签拖到网页中。
为了团结利用jMakiwidget和DynamicFaces,widget开辟职员必要对jMakiwidget的组件文件作一些小小的修正。这些修正使jMakiwidget可以充实使用JavaServerFaces手艺供应的组件形态办理体系,准确地转换DynamicFaces请求的header。修正的细节超越了三篇文章的会商局限,读者能够参阅相干材料。

  DynamicFaces开辟团队已完成了转换3个与DynamicFaces.团结利用的jMakiwidget所必要的事情。被转换的jMakiwidget是script.aculo.usin-placeeditorwidget、Dojofisheyewidget、Dojoinline-editorwidget。

  除转换fisheyewidget,开辟团队还修正了jMakiAPI,使widget可以触发一个JavaServerFaces代价修正事务,以下图所示:

<a:ajaxname="dojo.fisheye"
value="#{fishEyeBean.selectedIndex}"
valueChangeListener="#{fishEyeBean.valueChanged}"
args="{items:[
{iconSrc:images/150x126_jalopy.jpg,caption:Jalopy,index:0},
{iconSrc:images/150x126_luxury.jpg,caption:Luxury,index:1},
{iconSrc:images/150x126_roadster.jpg,caption:Roadster,index:2},
{iconSrc:images/150x126_suv.jpg,caption:SUV,index:3}
]}"
/>
  DynamicFaces和jMaki开辟团队正在抓紧事情,确保一切的jMakiwidgets撑持DynamicFaces。

  如今,让我们来站在网页创作者的角度来会商这一成绩。要想弄分明怎样团结利用jMakiscript.aculo.usin-placeeditorwidget和DynamicFaces,我们在一个JavaServerFaces数据表组件中包括该widget,使我们可以编纂该表中一个单位的值。

  在JSP网页中,我们必需申明请求的标签库,和DynamicFaces和jMaki标签,以下所示:

<%@taglibprefix="f"
uri="http://java.sun.com/jsf/core"%>
<%@taglibprefix="h"
uri="http://java.sun.com/jsf/html"%>
<%@taglibprefix="jsfExt"
uri="http://java.sun.com/jsf/extensions/dynafaces"%>
<%@taglibprefix="a"
uri="http://java.sun.com/jmaki-jsf"%>
  上面的代码增加的是<jsfExt:scripts/>标签:

<f:view>

<html>
<head>
<title>TablewithjMaki</title>
<jsfExt:scripts/>
</head>
<body>
  这一标签显现DynamicFaces所请求的JavaScript文件的<script>元素。

  最初,经由过程包括一个指定被封装为jMakiwidget的in-placeeditor的jMakiajax标签,我们就将该widget增加到了网页上。

<h:form>

<h:dataTable
...
rows="10"binding="#{ResultSetBean.data}"
value="#{ResultSetBean.list}"
var="customer">
<h:column>
<f:facetname="header">
<h:outputTextvalue="AccountId"/>
</f:facet>
<h:outputTextid="accountId"
value="#{customer.accountId}"/>
</h:column>

<h:column>
<f:facetname="header">
<h:outputTextvalue="CustomerName"/>
</f:facet>
<a:ajaxname="scriptaculous.inplace"
value="#{customer.name}"/>
</h:column>
</h:dataTable>
...

</h:form>
</body>
</html>
</f:view>
  显现的是上述网页:



:用户修正一个单位的值之前


  显现的是当用户点击CustomerName列中一个单位的链接时的情形:



:用户点击CustomerName列中一个链接后的情形


  必要注重的是,当用户点击CustomerName列中的一个元素时,客户名字元素会被一个输出组件、一个"OK"按钮、一个"Cancel"链接所代替,利用户可以编纂以后的客户名字。假如用户点击"Cancel"而不是"OK",该单位就会被从头显现为本来的值;假如用户输出一个值,并点击"OK"按钮,新的值就会被使用Ajax手艺发送到服务器,使该形式更新为新的值。然后,被编纂的单位就会被从头显现。显现的是是单位被修正后的网页:



:在用户向服务器提交新的值后,网页从头显现为新的值


  结论

  ProjectDynamicFaces向我们供应了一种向基于JavaServerFaces的使用软件中增加Ajax功效的天真、无效的体例,而无需保持JavaServerFaces组件形式的任何上风。在内置的JavaScript库、Ajax完成、DynamicFaces供应的组件交互形式的匡助下,我们会发明使用DynamicFaces增加Ajax功效更简单了。基于JavaServerFaces的使用软件可以得益于jMakiwidget供应的更多的天真性。使用cdonts,可以发送、查看邮件,实现webmail的功能。结合wsh,可以实现对nt主机的管理,如nt用户管理、iis虚拟主机设置、exchange邮箱设置等等,就像管理本地机一样方便。
分手快乐 该用户已被删除
沙发
发表于 2015-1-19 08:45:59 | 只看该作者
封装性使得代码逻辑清晰,易于管理,并且应用到ASP.Net上就可以使业务逻辑和Html页面分离,这样无论页面原型如何改变,业务逻辑代码都不必做任何改动;继承性和多态性使得代码的可重用性大大提高。
小魔女 该用户已被删除
板凳
发表于 2015-1-28 05:52:37 | 只看该作者
先学习用frontpage熟悉html编辑然后学习asp和vbscript建议买书进行系统学习
山那边是海 该用户已被删除
地板
发表于 2015-2-5 18:10:36 | 只看该作者
接下来就不能纸上谈兵了,最好的方法其实是实践。实践,只能算是让你掌握语言特性用的。而提倡做实际的Project也不是太好,因为你还没有熟练的能力去综合各种技术,这样只能使你自己越来越迷糊。
深爱那片海 该用户已被删除
5#
发表于 2015-2-13 05:30:43 | 只看该作者
以HTML语言整合(HTML负责界面上,ASP则负责功能上)形成一个B/S(浏览器/服务器)模式的网页程序。
爱飞 该用户已被删除
6#
发表于 2015-3-3 15:42:44 | 只看该作者
最近在学asp,不要问我为什么不直接学.net,因为公司网站是asp做的所以有这个需要,卖了本书asp入门到精通,对里面的六大内置对象老是记不住,还有很多属性和方法看的头晕。
admin 该用户已被删除
7#
发表于 2015-3-11 12:08:04 | 只看该作者
ASP主要是用好六个对象,其实最主要的是用好其中两个:response和request,就可以随心所欲地控制网页变换和响应用户动作了。
因胸联盟 该用户已被删除
8#
发表于 2015-3-18 16:08:47 | 只看该作者
下面简单介绍一下我学习ASP的方法,希望对想学习ASP的朋友有所帮助...
活着的死人 该用户已被删除
9#
发表于 2015-3-26 12:32:37 | 只看该作者
你可以通过继承已有的对象最大限度保护你以前的投资。并且C#和C++、Java一样提供了完善的调试/纠错体系。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-24 00:21

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表