如何从Flex UI转换为Apache Roayle

时间:2019-05-27 14:24:17

标签: flex apache-royale

我具有Main.MXML文件,在该文件下有另一个视图ReportTab.mxml(画布是此页面的根标记)在此页面中我还有另一个页面RaviReport.mxml(画布是此页面的根标记)提交它们后,我有了formItem,我需要使用RemoteObject标记从Backed获取数据,并且必须在DATAGRID中呈现数据。加载Main.mxml文件时,我可以成功编译,但是在控制台中出现错误。 EventDispatcher.js:74未捕获的TypeError:indicatorClass不是构造函数     在mx.containers.FormItem.mx_containers_FormItem_displayIndi​​cator(FormItem.js:718)     在mx.containers.FormItem.updateDisplayList(FormItem.js:397)     在mx.containers.FormItem.updateFormItemDisplayList(FormItem.js:409)     在mx.containers.FormItem.FormItemLayout.updateDisplayList(FormItem.js:1101)     在mx.containers.FormItem.FormItemLayout.mx.containers.beads.BoxLayout.layout(BoxLayout.js:115)     在mx.containers.FormItem.FormItemLayout.org.apache.royale.core.LayoutBase.performLayout(LayoutBase.js:247)     在mx.containers.FormItem.FormItemLayout.org.apache.royale.core.LayoutBase.handleLayoutNeeded(LayoutBase.js:152)     在mx.containers.FormItem.goog.events.EventTarget.fireListeners(eventtarget.js:284)     在Function.goog.events.EventTarget.dispatchEventInternal_(eventtarget.js:381)     在mx.containers.FormItem.goog.events.EventTarget.dispatchEvent(eventtarget.js:196

我尝试删除FormItem,并且刚刚在RaviReport.mxml中添加了,但是我的画布隐藏了label元素。请建议我如何使用Royale中的navigationBar或ViewSTACK集成视图。

Main.MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:view="com.sp.cpem.view.*" backgroundColor="#FFFFFF" verticalGap="0" horizontalGap="0" paddingTop="0" paddingLeft="2" paddingRight="2" paddingBottom="2" pageTitle="EXAMPLE">

    <mx:Script>
        <![CDATA[

    ]]>

    </mx:Script>


        <mx:ViewStack id="myViewStack" borderStyle="none" width="100%" height="100%">           

            <view:ReportTAB id ="repo" label="REPORTING" />

        </mx:ViewStack>        
</mx:Application>


**ReportTAB.MXML:**

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:view="com.sp.cpem.view.reports.*" width="100%" height="100%">
        <mx:TabNavigator width="100%" height="100%">

            <view:RaviReport id = "raviReport" label="Ravi Report"/>
        </mx:TabNavigator>
</mx:Canvas>   



**RaviReport.MXML:**


<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:view="com.sp.cpem.view.*" width="100%" height="100%" creationComplete="loadPage();">
    <mx:RemoteObject id="pageService" destination="pageService" result="handlePageResult(event)"  fault="handleFault(event)" showBusyCursor="true" />
    <mx:RemoteObject id="loaderService" destination="reportService" result="handleLoadResult(event)"  fault="handleFault(event)" showBusyCursor="true" />   

    <mx:Script>
        <![CDATA[
            import com.sp.cpem.vo.StarsStdValues;
        import mx.managers.CursorManager;
        import com.as3xls.xls.Sheet;
        import com.as3xls.xls.ExcelFile;
        import mx.rpc.events.ResultEvent;                                         
        import mx.rpc.events.FaultEvent;
        import mx.collections.ArrayCollection;    
        import flash.net.FileReference;
        import mx.controls.Alert;

        private var pageArray:ArrayCollection = new ArrayCollection();
        private var fileReference:FileReference;
        private var sheet:Sheet;

        [Bindable]
        private var reportDG:ArrayCollection = new ArrayCollection();
        [Bindable]
        private var assetDP:ArrayCollection = new ArrayCollection();
        [Bindable]
        private var locationDP:ArrayCollection = new ArrayCollection();
        [Bindable]
        private var fields:Array = new Array();  
        [Bindable]                               
        public var abcpRecords:int = 0;

        public var d:Date = null;

        import flash.external.*;

        private function exportToExcel():void{
            if(fromDate.selectedDate == null || toDate.selectedDate == null || asset.selectedItem == null || location.selectedItem == null )
                    Alert.show("Please input '*' required fields.","Information", Alert.OK, null, null, null, Alert.OK);                
            else{
                var s:String;
                var locStr:String;
                d = DateField.stringToDate(toDate.text, toDate.formatString);               
                d.hours = 23;
                d.minutes = 59;
                d.seconds = 59;
                d.milliseconds = 999;
                locStr='';
                //var myArray:Array = new Array(10);                
                var myArray:Array = location.selectedItems;             
                var obj:StarsStdValues;
                for (var i:uint; i < myArray.length; i++) {
                    obj = myArray[i];                   
                    if(i==0)
                        locStr = obj.value;
                    else
                        locStr = locStr+","+obj.value;
                }                           
                if (ExternalInterface.available) {
                    var formatter : DateFormatter;
                    formatter = new DateFormatter();
                    formatter.formatString = "DD.MMMM.YYYY KK:NN:SS A";
                    var jsFunction:String = "toABCPExcel";                      
                    s = ExternalInterface.call(jsFunction,formatter.format(fromDate.selectedDate),formatter.format(d),locStr);
                } else {
                    s = "JS not available";
                }
            }
        }

        /* We are using JSP to create report not FLEX due to 255 char limit issue
        private function exportToExcel1():void
        {   
            sheet = new Sheet();
            var dataProviderCollection:ArrayCollection = dataGrid.dataProvider as ArrayCollection;
            var rowCount:int =  dataProviderCollection.length;
            var columns:Array = dataGrid.columns;
            var colCount:int =columns.length; 
            sheet.resize(rowCount+4,colCount);
            var i:int = 0;  
            for each (var field:DataGridColumn in columns){
                fields.push(field.dataField.toString());                
                sheet.setCell(0,i,field.headerText.toString());  
                i++;  
            }

            for(var r:int=0;r<rowCount;r++)
            {
                var record:Object = dataProviderCollection.getItemAt(r);
                /*insert record starting from row no 2 else 
                    headers will be overwritten* /
                insertRecordInSheet(r+1,sheet,record);
            }
            var xls:ExcelFile = new ExcelFile();
            xls.sheets.addItem(sheet);

            var bytes:ByteArray = xls.saveToByteArray();
            var fr:FileReference = new FileReference();      
            fr.save(bytes,"LOCExposureReport.xls");            

        }
        private function insertRecordInSheet(row:int,sheet:Sheet, record:Object):void
        {                   
            var i:int = 0;  
            for each(var field:String in fields){  
                if(record[field] == null){
                    //Do nothing if its null        
                }else{                              
                    sheet.setCell(row,i,record[field].toString());                    
               } 
               i++;
            }
            //Alert.show(record["comments"].toString(),"Information", Alert.OK, null, null, null, Alert.OK);            
        }*/

            public function loadPage():void {               
                pageService.getDP("ABCPReport");        
            }
            private function handlePageResult(ev:ResultEvent):void {
                 pageArray = ev.result as ArrayCollection;               
                 assetDP =pageArray[0] as ArrayCollection;
                 locationDP =pageArray[1] as ArrayCollection;
                 asset.selectedIndex = 0;
                 location.selectedIndex = 0;

            }

                public function getReport():void {
                //Alert.show(toDate.value.toString(),"Information", Alert.OK, null, null, null, Alert.OK);
                d = DateField.stringToDate(toDate.text, toDate.formatString);               
                d.hours = 23;
                d.minutes = 59;
                d.seconds = 59;
                d.milliseconds = 999;
                //toDate.selectedDate = d;              
                //toDate.selectedDate = DateField.dateToString(d, toDate.formatString);             

                if(fromDate.selectedDate == null || toDate.selectedDate == null || asset.selectedItem == null || location.selectedItem == null )
                    Alert.show("Please input '*' required fields.","Information", Alert.OK, null, null, null, Alert.OK);                
                else                            
                    loaderService.getReport(asset.selectedItems,fromDate.selectedDate,d,location.selectedItems); //toDate.selectedDate                  
            }

            private function handleLoadResult(ev:ResultEvent):void {
                 reportDG = ev.result as ArrayCollection;
                 abcpRecords = reportDG.length;
                 this.label = "ABCP Exposure Report (" +abcpRecords +")";    
            }

            private function handleFault(ev:FaultEvent):void {                
                Alert.show("Error: " + ev.fault.faultCode + " - " + ev.fault.faultDetail + " - " + ev.fault.faultString,"Information", Alert.OK, null, null, null, Alert.OK);   
            }   

            private function dateFunc( item:Object, column:DataGridColumn):String
            {
                return formatDate.format(item[column.dataField]);
            }

            //NUMERIC SORTING obj1[fieldName] sortCompareFunction="sortNumeric" 
            private function sortMaturityDate(obj1:Object, obj2:Object):int {
                var value1:Date = (obj1.strmaturityDate =='' || obj1.strmaturityDate == null) ? null : new Date(obj1.strmaturityDate);
                var value2:Date = (obj2.strmaturityDate == '' || obj2.strmaturityDate == null) ? null : new Date(obj2.strmaturityDate);
                if (value1 < value2) {
                    return -1;
                } else if (value1 > value2) {
                    return 1;
                } else {
                    return 0;
                }
            }
        ]]> 

    </mx:Script>
    <mx:DateFormatter id="formatDate" formatString ="D-MMM-YYYY"/>  
    <mx:VDividedBox width="100%" height="100%">
            <mx:HBox height="15%" width="100%">
                <mx:FormItem label="Location:" required="true">
                    <mx:List id="location" dataProvider="{locationDP}" labelField="value" allowMultipleSelection="true" rowCount="4"/>              
                </mx:FormItem>
                <mx:FormItem label="Asset Type:" required="true">
                    <mx:List id="asset" dataProvider="{assetDP}" labelField="value" allowMultipleSelection="true" rowCount="4"/>                    
                </mx:FormItem>

                <mx:FormItem label="From Date:" required="true">
                    <mx:DateField id="fromDate" yearNavigationEnabled="true"/>       
                </mx:FormItem>
                <mx:FormItem label="To Date:" required="true">      
                    <mx:DateField id="toDate" yearNavigationEnabled="true"/>         
                </mx:FormItem>
                <mx:Button label="Submit" click="getReport()" toolTip="Exposure Report." />
                <mx:Button label="Save To Excel" click="exportToExcel();"/>                                 
        </mx:HBox>
        <mx:VBox height="85%" width="100%">     
            <mx:DataGrid id="dataGrid" height="100%" width="100%" dataProvider="{reportDG}" horizontalScrollPolicy="on">               
                <mx:columns>
                    <mx:DataGridColumn dataField="alertId" headerText="Alert ID" showDataTips="true" dataTipField="alertId"/>


                </mx:columns>
            </mx:DataGrid>
        </mx:VBox>
    </mx:VDividedBox>
</mx:Canvas>

错误 EventDispatcher.js:74未捕获的TypeError:indicatorClass不是构造函数     在mx.containers.FormItem.mx_containers_FormItem_displayIndi​​cator(FormItem.js:718)     在mx.containers.FormItem.updateDisplayList(FormItem.js:397)     在mx.containers.FormItem.updateFormItemDisplayList(FormItem.js:409)     在mx.containers.FormItem.FormItemLayout.updateDisplayList(FormItem.js:1101)     在mx.containers.FormItem.FormItemLayout.mx.containers.beads.BoxLayout.layout(BoxLayout.js:115)     在mx.containers.FormItem.FormItemLayout.org.apache.royale.core.LayoutBase.performLayout(LayoutBase.js:247)     在mx.containers.FormItem.FormItemLayout.org.apache.royale.core.LayoutBase.handleLayoutNeeded(LayoutBase.js:152)     在mx.containers.FormItem.goog.events.EventTarget.fireListeners(eventtarget.js:284)     在Function.goog.events.EventTarget.dispatchEventInternal_(eventtarget.js:381)     在mx.containers.FormItem.goog.events.EventTarget.dispatchEvent(eventtarget.js:196

1 个答案:

答案 0 :(得分:0)

如果从一个简单的工作文件开始并向其中添加内容,我的建议。

在Royale中,没有像Flex(MX / Spark)中那样只有一个UI集。您可以选择基本,珠宝,仿真(MX / Spark),MDL。因此,第一件事是:您要选择哪种UI集?考虑到仿真(MX / Spark)仍在进行中,无法完全正常工作。也许Jewel或Basic会更容易实现,但是您需要使UI代码适应此新标签和API。

例如,在Jewel中,您可以检查Tour de Jewelsource code以查看其操作方式

HTH