会员登录/控制面版您的位置: 首页 >> 网页制作 >> Flash >> 特别应用 >> 使用 Flash Remoting in Flash Forms 制作 Live Search

使用 Flash Remoting in Flash Forms 制作 Live Search

阅览次数:
文章来源: CFDP
原文作者: Charles
整理日期: 2005-12-30
发表评论

字体大小:
小
中
大

即时搜索效果察看
Live Search 的程式分成两部份，它的组成大约是一点点 Javascript，加上适量的 CFML，以及很多的 ActionScript...。在程式码之前有一段小小的 DHTML，用来显示叫出 pop-up window 的 link，如下：

<html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"></head><body>
<script language="javascript1.2">
NewPopUpWindowAtCenter = function(aa,bb,ww,hh){
  var tmp_top = ( window.screen.height - hh ) / 2;
  tmp_top = tmp_top * 2 / 3;
  var tmp_left = ( window.screen.width - ww ) / 2;
  window.open(aa,bb,’height=’+hh+’,left=’+tmp_left+’,location=no,menubar=no,resizable=no,scrollbars=no,status=no,toolbar=no,top=’+tmp_top+’,width=’+ww);
}
</script>
<a href="javascript:;NewPopUpWindowAtCenter(’http://www.j2eemx.com/cfdp_cfms/livesearch.cfm’,’livesearch’,530,530);">开启搜寻</a>
</body></html>

第一部份 livesearch.cfm 是重头戏，即内含 Flash Remoting 功能的 Flash Form。其语法虽然源自 AS Fusion，但我已将不必要的部份尽量精简，以将流程单纯化，并减少一些程式码：

<cfform action="" name="myForm_01"
  width="500" height="500" timeout="0"
  format="flash" onload="formOnLoad();">
<cfformitem type="script">
  function formOnLoad(){
   myForm_01.myGlobalObjects = {};
   setUpRemoting();
   setStyles();
  }
  function setUpRemoting(){
   var myConnection:mx.remoting.Connection = mx.remoting.NetServices.createGatewayConnection("http://www.j2eemx.com/flashservices/gateway/");
   var myService:mx.remoting.NetServiceProxy;
   var myResponseHandler:Object = {};
   var myDataGrid_01:mx.controls.DataGrid = myDataGrid_01;
   myResponseHandler.onResult = function( results: Object ):Void {
    mx.managers.CursorManager.removeBusyCursor();
    myDataGrid_01.dataProvider = results;
    myDataGrid_01.selectedIndex = undefined;
   }
   myResponseHandler.onStatus = function( stat: Object ):Void {
    mx.managers.CursorManager.removeBusyCursor();
    alert("Error: " + stat.description);
   }
   myForm_01.myGlobalObjects.myCFC = myConnection.getService("cfcs.livesearch", myResponseHandler);
  }
  function submitSearch(){
   mx.managers.CursorManager.setBusyCursor();
   var tmp = myKeyword_01.text;
   myForm_01.myGlobalObjects.myCFC.search_title(tmp);
  }
  function goArticle(){
   var myDataGrid_01:mx.controls.DataGrid = myDataGrid_01;
   var tmp_url = myDataGrid_01.selectedItem.atc_uid;
   tmp_url = "http://j2eemx.com/cfdp_cfms/article.cfm?atc=" + tmp_url;
   tmp_url = tmp_url + "&mode=1";
   getURL("javascript:;window.opener.location.href=’"+tmp_url+"’;window.close();");
  }
  function setStyles(){
   _global.styles.ComboBox.setStyle("color", 0x00253D);
   _global.styles.Label.setStyle("color", 0x222222);
   _global.styles.CheckBox.setStyle("color", 0x00253D);
   _global.styles.RadioButton.setStyle("color", 0x00253D);
   _global.styles.Form.setStyle("color", 0x222222);
   _global.styles.Form.setStyle("fontSize", 13);
   _global.styles.Button.setStyle("color", 0x222222);
   _global.styles.Button.setStyle("borderThickness", 1);
   _global.styles.Panel.setStyle("backgroundColor", 0xE5F0F9);
   _global.styles.Panel.setStyle("color", 0xffffff);
   _global.styles.Panel.setStyle("headerColors", [0x277DC6,0x50ABF7]);
  }
</cfformitem>
<cfformgroup type="panel" label="CFDP LiveSearch - 即时搜寻器">
  <cfformgroup type="hbox">
   <cfformgroup type="vbox">
    <cfinput type="text" name="myKeyword_01" label="关键字(标题及内文)：" onChange="submitSearch();">
   </cfformgroup>
   <cfformgroup type="vbox">
    <cfinput type="button" name="myButton_01" onClick="submitSearch();" value="搜寻">
   </cfformgroup>
  </cfformgroup>
  <cfgrid name="myDataGrid_01" height="324" onchange="goArticle();">
   <cfgridcolumn display="yes" name="atc_datetime" header="日期" width="70">
   <cfgridcolumn display="yes" name="atc_title" header="标题">
  </cfgrid>
  <cfformitem type="html">
   <font size="11">
    Created by Charles ( 窦永平 )<br />
    CFDP Director of Architecture, Taiwan MMUG ColdFusion Evangelists.<br />
    Certified Advanced ColdFusion Developer / Macromedia Certified Instructor.<br />
    查尔斯的笔记本, http://www.aeu-studio.com/Charles/<br />
   </font>
  </cfformitem>
</cfformgroup>
</cfform>

第二部份 livesearch.cfc 则是提供前面的 Flash Remoting 在 Server 端的资料库查询功能，其中我有去 include Application.cfm，这是爲了通用的变数设定，并不重要。我们的资料库也是以 Application Scope 来做快取，所以查询用的是 Query of Queries，在记忆体足够，且资料量小的情况下，这应该可以产生不错的效能。程式码如下：

<cfcomponent>
<cfinclude template="../Application.cfm">
<cffunction access="remote" name="search_title" returntype="any" output="false">
  <cfargument name="myKeyword" required="no" type="any">
  <cfset tmp_keyword = ucase(Arguments.myKeyword)>
  <cfquery dbtype="query" name="q1" maxrows="15">
   select atc_uid,atc_datetime,atc_title
   from CFDP_Content_Query,CFDP_Article_Query
   where CFDP_Content_Query.ct_ca_uid = CFDP_Article_Query.atc_uid
    and (
       UPPER(atc_title) like ’%#tmp_keyword#%’
      or UPPER(atc_content_1) like ’%#tmp_keyword#%’
     )
   order by atc_datetime desc
  </cfquery>
  <cfreturn q1>
</cffunction>
</cfcomponent>

如果您尝试修改以上的程式码来实作，请记得注意路径方面的问题，我是原始码一封不动地贴上来的，或许在您的环境中，路径与这里不太相同喔!
当然，这段程式码还是有待改进，譬如当使用者连续不断地修改关键字，这个程式就会一直佔用频宽与系统资源。我想这可以在 ActionScript 中用 interval 的方式解决，也应该不会增加太多的程式码。

上一篇:深入理解sizeof
下一篇:Photoshop调色，制作阿宝色彩的练习

相关文章

热点文章

使用 Flash Remoting in Flash Forms 制作 Live Search