代码之家 › 专栏 › 技术社区 › Fseee

从动态httpservice异步获取数据以填充高级数据网格flex

httpservice rpc air asynchronous flex

0

Fseee · 技术社区 · 15 年前

我必须填充具有以下字段的高级数据网格: 大陆-州-社会-实际值-估计值我想模拟一个金融市场,所以我必须通过来自httpservice的异步请求更改一些值;您有什么想法这样做吗? 谢谢您。如有必要,我将发布.as文件,但它是由flex builder自动生成的。

以下是客户端flex/air应用程序的代码:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"     
pageTitle="prova" 
  creationComplete="initApp()" backgroundGradientColors="[#ffffff, #ffffff]">

<mx:ViewStack id="applicationScreens" width="100%" height="100%">
    <mx:Canvas id="view" width="100%" height="100%">

    <mx:AdvancedDataGrid id="dataGrid" initialize="gc.refresh();"
        borderColor="#000000"
        selectionMode="singleRow"
        rowCount="8"
        editable="false"
        lockedColumnCount="1"
        right="10" left="10" top="10" bottom="71" itemClick="adg_itemClick(event);">
        <mx:dataProvider>
     <mx:GroupingCollection id="gc" source="{dataArr}">
         <mx:grouping>
             <mx:Grouping>
                 <mx:GroupingField name="continenteCol">
            <mx:summaries>     
          <mx:SummaryRow summaryPlacement="group">  

            <mx:fields>
              <mx:SummaryField dataField="actualCol" 
                 operation="SUM"/>
              <mx:SummaryField dataField="estimateCol" 
                 operation="SUM"/>

            </mx:fields>
          </mx:SummaryRow>
              </mx:summaries> 
                </mx:GroupingField>           
                 <mx:GroupingField name="statoCol">

          <mx:SummaryRow summaryPlacement="group">
            <mx:fields>
              <mx:SummaryField dataField="actualCol" 
                operation="SUM" />
              <mx:SummaryField dataField="estimateCol" 
                 operation="SUM"/>

            </mx:fields>
          </mx:SummaryRow>
        </mx:GroupingField>
             </mx:Grouping>
         </mx:grouping>
     </mx:GroupingCollection>
 </mx:dataProvider>
            <mx:columns>
                <mx:AdvancedDataGridColumn  resizable="false" headerText="continente" dataField="continenteCol" />
                <mx:AdvancedDataGridColumn headerText="stato" dataField="statoCol" />
                <mx:AdvancedDataGridColumn headerText="societa" dataField="societaCol" />
                <mx:AdvancedDataGridColumn headerText="actual" dataField="actualCol" />
                <mx:AdvancedDataGridColumn headerText="estimate" dataField="estimateCol" />
            </mx:columns>
    </mx:AdvancedDataGrid>


    <mx:Button id="btnAddNew" click="goToUpdate()" icon="@Embed('icons/AddRecord.png')" toolTip="Add Record" x="10" bottom="10"/>
    <mx:Button id="btnDelete" click="deleteItem()" icon="@Embed('icons/DeleteRecord.png')" toolTip="Delete Record" x="58" bottom="10"/>
    <mx:Label text="Search by continente" right="300" bottom="11"/>
    <mx:TextInput id="filterTxt" width="238" toolTip="Search by continente" enter="filterResults()" right="58" bottom="11"/>
    <mx:Button click="filterResults()" id="filterButton" icon="@Embed('icons/SearchRecord.png')" toolTip="Search by continente" right="10" bottom="10"/>

</mx:Canvas>

<mx:Canvas id="update" width="100%" height="100%">
    <mx:Form width="100%" height="80%" id="provaForm">
                <mx:FormItem label="Continente:" id="continente_form">
                    <mx:TextInput id="continenteCol" text=""/>
                </mx:FormItem>
                <mx:FormItem label="Stato:" id="stato_form">
                    <mx:TextInput id="statoCol" text=""/>
                </mx:FormItem>
                <mx:FormItem label="Societa:" id="societa_form">
                    <mx:TextInput id="societaCol" text=""/>
                </mx:FormItem>
                <mx:FormItem label="Actual:" id="actual_form">
                    <mx:TextInput id="actualCol" text=""/>
                </mx:FormItem>
                <mx:FormItem label="Estimate:" id="estimate_form">
                    <mx:TextInput id="estimateCol" text=""/>
                </mx:FormItem>
    </mx:Form>

    <mx:Button label="Save" id="btnSubmit" click="insertItem()" right="81" bottom="10"/>
    <mx:Button label="Cancel" id="btnCancel" click="goToView()" right="10" bottom="10"/>
</mx:Canvas>

</mx:ViewStack>

这是.as文件..

/** *ActionScript源文件,用于定义UI逻辑和一些数据访问代码。 *此文件使用mx:script标记链接到主应用程序mxml文件。 *此文件中的大多数函数由中定义的事件处理程序调用。 * MXML。 / 导入flash.events。 ;

导入mx.collections.arraycollection; 导入mx.controls.advancedDataGrid; 导入mx.controls.alert; 导入mx.controls.advancedDataGridClasses.advancedDataGridColumn; 导入mx.events.*; 导入mx.managers.cursormanager; 导入mx.rpc.asyncToken; 导入mx.rpc.events.faultevent; 导入mx.rpc.events.resulteevent; 导入mx.rpc.http.httpservice;

//包含服务器终结点URL的常量定义包括“provaconfig.as”;

/** *网关:这是与服务器端PHP代码的通信层 */ 私有var网关:httpService=new httpService();

/** *数组集合包含我们在网格中使用的行 */ [可绑定] public var dataarr:arraycollection=new arraycollection();

/** *我们订购的列。每次用户单击 *网格列标题。 *请参见 *MXML文件 */ private var ordercolumn:数字;

/** *数据库表中的字段列表 *需要将响应解析为哈希 */ private var字段:object='continente':string,'stato':string,'societa':string,'actual':number,'estimate':number

/** *在MXML加载完成时执行。初始化REST网关。 */ private函数initapp():void {

/**
 * initialize the gateway
 * - this will take care off server communication and simple xml protocol.
 */
gateway.url = ENDPOINT_URL;
gateway.method = "POST";
gateway.useProxy = false;
gateway.resultFormat = "e4x";

/**
 * set the event handler which prevents editing of the primary key
 */
dataGrid.addEventListener(AdvancedDataGridEvent.ITEM_EDIT_BEGINNING, editCellHandler);

/**
 * set the event handler which triggers the update actions - everytime an 
 * edit operation is finished
 */

dataGrid.addEventListener(AdvancedDataGridEvent.ITEM_EDIT_END, editCellEnd);

gateway.addEventListener(ResultEvent.RESULT, resultHandler);
gateway.addEventListener(FaultEvent.FAULT, faultHandler);

fill();

}

/** *不允许编辑主键列。 *@param e dataGridEvent包含有关网格的行和列的详细信息 *用户单击的位置 */ 私有函数EditCellHandler(E:AdvancedDataGridEvent):void { /** *如果用户单击了主键列,则停止编辑 */ if(e.datafield==“可控技术醇”) { e.preventDefault(); 返回; } }

/** *单击“过滤器”按钮的处理程序。 *设置另一个筛选器时,刷新集合并加载新数据 */ private函数filterresults():void { 填充(); }

/** *当用户完成编辑条目时触发的事件处理程序 *触发“更新”服务器命令 */ 私有函数EditCellEnd(E:AdvancedDataGridEvent):void { var dsrowindex:int=e.rowindex; var dsfieldname:string=e.datafield; var dscolumnindex:number=e.columnindex;

var vo:* = dataArr[dsRowIndex];

var col:AdvancedDataGridColumn = dataGrid.columns[dsColumnIndex];
var newvalue:String = dataGrid.itemEditorInstance[col.editorDataField];

trace("a:" + dsRowIndex + ", " + dsFieldName + ", " + dsColumnIndex);

var parameters:* =
{
    "continente": vo.continenteCol,        "stato": vo.statoCol,        "societa": vo.societaCol,        "actual": vo.actualCol,        "estimate": vo.estimateCol    }

parameters[dsFieldName.substr(0,dsFieldName.length-3)] = newvalue;

/**
 * execute the server "update" command
 */
doRequest("Update", parameters, saveItemHandler);

}

/** *“update”服务器命令的结果处理程序。 *只需提醒错误,或者在正常情况下不执行任何操作-数据已经 *已在网格中更新 */ 私有函数saveitemhandler(e:object):void { 如果(E错误) { alert.show(“错误:”+e.data.error); } 其他的 { }
}

/** *数据报的DragHeader处理程序。当用户 *单击数据报中的标题列 *更新全局ordercolumn变量,刷新tablecollection *@关于列的参数事件DataGridEvent详细信息 */ private函数setorder(event:advancedDataGridEvent):void { orderColumn=event.columnIndex; var col:advancedDataGridColumn=datagrid.columns[orderColumn]; col.sortscending=!列排序降序;

event.preventDefault();
fill();

}

/** *单击“添加”状态下的“保存”按钮的处理程序 *收集表单中的信息并向集合中添加新对象 / private函数insertitem():void{ 变量参数: = { “method”:“insert”,“continente”:continentecol.text,“stato”:statocol.text,“societa”:societacol.text,“actual”:actuallcol.text,“estimate”:estimatecol.text;

/**
 * execute the server "insert" command
 */
doRequest("Insert", parameters, insertItemHandler);

}

/** *insert调用的结果处理程序。 *如果错误存在,则发出警报 *如果调用通过OK,则返回列表并刷新数据 */ 私有函数insertitemhandler(e:object):void { 如果(E错误) { alert.show(“错误:”+e.data.error); } 其他的 { GotoVIEW(); 填充(); }
}

/** *用于刷新数据的通用功能 *获取筛选和排序,然后发送新的服务器调用 * */ 私有函数fill():void { /** *查找订单参数 */ var desc:boolean=false; var orderfield:string='';

if(!isNaN(orderColumn))
{
    var col:AdvancedDataGridColumn = dataGrid.columns[orderColumn];
    desc = col.sortDescending;
    //remove the 'Col' particle
    orderField = col.dataField.substr(0,col.dataField.length-3);
}

dataGrid.enabled = false;
CursorManager.setBusyCursor();

var parameters:* =
{
    "orderField": orderField,
    "orderDirection": (desc) ? "DESC" : "ASC", 
    "filter": filterTxt.text
}
/**
 * execute the server "select" command
 */
doRequest("FindAll", parameters, fillHandler);

}

/** *填充调用的结果处理程序。 *如果是一个错误,请向用户显示它,否则请用新数据重新填充arraycollection。 * / 私有函数FillHandler(e:Object):void { 如果(E错误) { alert.show(“错误:”+e.data.error); } 其他的 { dataarr.removeall(); 对于每个(var行:e.data.row中的xml) { 变量: = {}; for(var键:字段中的字符串) { temp[key+'col']=行[key]; }

        dataArr.addItem(temp);
    }

    CursorManager.removeBusyCursor();
    dataGrid.enabled = true;
}

}

/** *单击列表中“删除”按钮的处理程序 *确认操作并启动DeleteClickHandler函数 */ 私有函数deleteItem():void{

if (dataGrid.selectedItem)
{
    Alert.show("Are you sure you want to delete the selected record?",
    "Confirm Delete", 3, this, deleteClickHandler);
}

}

/** *确认对话框的事件处理程序函数在 *按下删除按钮。 *如果按下的按钮是“是”,则产品将被删除。 *@参数对象事件 *@什么也不返回 / 私有函数DeleteClickHandler(事件:CloseEvent):void { 如果(event.detail==alert.yes) { VaVO: =datagrid.selecteditem;

    var parameters:* =
    {
        "continente": vo.continenteCol
    }

    /**
     * execute the server "delete" command
     */
    doRequest("Delete", parameters, deleteHandler);

    setTimeout( function():void
    {
        dataGrid.destroyItemEditor();
    },
    1);
}

}

公共函数DeleteHandler(e:*):void { 如果(E错误) { alert.show(“错误:”+e.data.error); } 其他的 { var continente:number=parseInt(e.data.toString(),10); for(var index:number=0;index<dataarr.length;index++) { if(dataarr[index].continentecol==continente) { dataarr.removeitemat(索引); 断裂; } } }
}

/** *反序列化XML响应 *处理错误案例 * *@param e resultEvent服务器响应和有关连接的详细信息 / 公共函数反序列化(obj: ,E: ): { var toret:对象=;

toret.originalEvent = e;

if (obj.data.elements("error").length() > 0)
{
    toret.isError = true;
    toret.data = obj.data;
}
else
{
    toret.isError = false;
    toret.metadata = obj.metadata;
    toret.data = obj.data;
}

return toret;

}

/** *网关的结果处理程序 *反序列化结果,然后调用实际事件处理程序 *(在Dorequest函数中发出请求时设置) * *@param e resultEvent服务器响应和有关连接的详细信息 / 公共函数resultHandler(e:resultEvent):void { TopAS: =反序列化(e.result,e); e.token.handler.call(空,topass); }

/** *此连接的故障处理程序 * *@param e faultevent错误对象 */ 公共函数faultHandler(e:faultevent):void { var errormessage:string=“连接错误:”+e.fault.fault string; 如果(例如故障详细信息) { errormessage+=“\n\n其他详细信息:”+e.fault.fault detail; } alert.show(错误消息); }

/** *使用网关实例向服务器发出请求 * *@param method_name string服务器Dispathcer中使用的方法名 *@参数对象名-值对用于在Post中发送 *@调用完成时要调用的参数回调函数 */ 公共函数DoRequest(方法名称:字符串,参数:对象,回调:函数):void { //将方法添加到参数列表中参数['method']=方法名称;

gateway.request = parameters;

var call:AsyncToken = gateway.send();
call.request_params = gateway.request;

call.handler = callback;

}

/** *当用户单击“创建”按钮时单击处理程序 *加载“更新”画布。 */ 公共函数goToupDate():void { applicationscreens.selectedchild=更新; }

/** *加载“视图”画布。 */ 公共函数gotoview():void { applicationscreens.selectedchild=查看; }

私有函数adg_itemclick(e:listeevent):void { var item:object=advancedDataGrid(e.currentTarget).selectedItem; e.target.expanditem(item,!e.target.isitemopen(item),真的;

}

2 回复 | 直到 15 年前

1

0

Robert Neville 15 年前

如果我能看到整个应用程序可能更容易回答,但如果我理解你的问题,这里有一个切入点……我不清楚异步的重点……在某种程度上,HTTP是异步的。但是,如果您的目标是从应用服务器/数据库推送数据,那么答案是不同的,涉及使用BlazeDS/LCD或这些技术的OSS克隆之一,在这些情况下,您无论如何都不会使用mx:httpservice。这就是你的意思吗?

如果没有,那么显然,您需要在MXML中定义一个httpService,并且您希望将它的结果事件绑定到一个actionscript函数,该函数更改您的dataarr(array,arraycollection??)每当服务返回时。如果您需要它来“轮询”您的服务以进行更改,我想您可以使用一个计时器对象或其他东西来完成这项工作,但是如果这是必需的,我会考虑使用LCD。

2

0

glensbo 15 年前

我尝试使用与flex 3相同的内置代码。我对直接在创建的列表中更改数据(更改数据库表的内容)的方式非常着迷。现在我尝试为一些字段合并富文本编辑器。

我正在尝试使用一个被调用的行(selecteditem),现在我可以获取数据了,但是我面临着无法编辑字段中文本的问题(错误1009)(某些内容未实例化),现在我将尝试执行另一个步骤-某种类型的编辑-但它不是异步的。

另一个机会是使用CreationComplete将所选行的数据获取到表单中,然后使用与列表使用的功能相同的功能,即直接更新数据库。

我的应用程序正在本地主机上运行,部署到托管服务器可能会造成一些沙盒问题?然后就没有办法只能使用AMFPHP或Zendamf-Blazeds了

我解决问题后再回复

当做