Hi All,

Well I'm futzing with adobe flex and it's REALLY HARD TO LEARN!!!! I'm using Flex Builder Pro 3 WITHOUT IB's Enable to see what I can do and I can't do much cuz it's REALLY HARD TO LEARN!!!! The syntax is intense!!!! But anyway, the point eventually is to have an HTML file with some Flex in it and update stuff OR have a Flex app that calls Webfocus to get data and update Flex components.

Sooooooooo................. Here's my newbie question. With an existing DataGrid on the Flex form, I want to get a couple of dates, press a button, have a fex run in the background and update the DataGrid with the XML results. Easy right? Well - let's forget about getting dates via a DateField component for now. I can fire off the fex but cannot get the DataGrid to display my updated results. I can get the DataGrid to load a pre-existing XML file's contents upon startup but that's it. Can anyone offer some direction here?

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
	<mx:XML id="tempXML" source="http://webfocus.scherer.com/approot/flexajax/ddsfxml.xml?" />

	<mx:Script>
	    < ![CDATA[
	        import mx.rpc.events.ResultEvent;
		    import mx.rpc.events.FaultEvent;
    		import mx.controls.Alert;
    		
	    	[Bindable]
			    private var xmldata:XML;
			
			private function send_data():void {
				httpXmlDataService.send();
			}
			private function faultHandler(event:FaultEvent):void{
		         mx.controls.Alert.show(event.fault.message,"Error in getting result");
		    }
		   	private function resultHandler(event:ResultEvent):void{
		   		xmldata=event.result as XML;
		   	}        
		]]>
	</mx:Script>
	<mx:HTTPService id="httpXmlDataService" 
		url="http://webfocus.scherer.com/ibi_apps/WFServlet?IBIF_ex=flexajax/creatxml02"	
		resultFormat="e4x"
        result="resultHandler(event)"
        fault="faultHandler(event)"
	/>
	<mx:Panel x="25" y="19" width="753" height="546" layout="absolute">
		<mx:DataGrid x="10" y="87" dataProvider="{tempXML.ddsrec}" height="360">
			<mx:columns>
				<mx:DataGridColumn headerText="Order" dataField="order"/>
		    	<mx:DataGridColumn headerText="Request Date" dataField="dtrequest"/>
			</mx:columns>
		</mx:DataGrid>
		<mx:VBox x="545" y="87" height="360" width="151">
    		<mx:Button label="Get Data" click="send_data[)"/>
    		<mx:DateField id="dts" text="Start Date:"/>
    		<mx:DateField id="dte" text="End Date:"/>
    	</mx:VBox>
	</mx:Panel>
</mx:Application>

ALSO: How can I embed a date in the fex url for HTTPService? It doesn't like the ampersands I usually use in AJAX calls from Javascript.

Any help would be greatly appreciated. I don't know where else to go for Webfocus/Flex help. Thanks,

Norb

This message has been edited. Last edited by: Kerry,

quote:

ALSO: How can I embed a date in the fex url for HTTPService? It doesn't like the ampersands I usually use in AJAX calls from Javascript.

Norb, Try using & a m p ; in place of straight ampersands. You may also have to escape the ampersands in the fex to look like this: &|amp;

Hope this helps,
- ABT

P.S. Sorry for all the edits, but the forums software interprets the code literally. take the spaces out of the string above.

Hi ABT,


I had tried that previousy. Using the

 "& a m p ;" 

didn't work. Tried it with the pipe character too. Webfocus no likey that kind of URL.

Thanks,

Norb

OK, here are some of the things that I found while fiddling with flex.

I also found it difficult to use the HTTP service, I ended up using the URLRequest.

I also ended up not using . I used Actionscript, and created the object when needed.

e.g.

WFrequest = new URLRequest({WF Url});
WFloader = new URLLoader();
WFparms = new URLVariables() ;
WFparms.IBIAPP_app = "{app path}";
WFparms.IBIC_server = "{WF server if required}";
WFparms.IBIF_ex = "{Fex}";
WFparms.Random = new Date().toUTCString();
WFrequest.data = WFparms;
WFloader.addEventListener(Event.COMPLETE, resultHandler);
WFloader.load(WFrequest);

resultHandler is the function that is called when the results are received.

Second, WF XML is just HTML wrapped in an XML wrapper. You will get TABLE, TR and TD tags. Flex will expect the tags order and dtrequest.

You have two choices:

1: Process result into XML that flex likes when the result is received.
2: Get WF to format an XML document that Flex likes.

Waz...

Prod:	WebFOCUS 7.6.10/8.1.04	Upgrade:	WebFOCUS 8.2.07	OS:	Linux	Outputs:	HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

I use HTTP Services all the time. Here is a simple example, calls the WebFOCUS program carinst in the ibisamp folder. One of Many benefits with WebFOCUS Flex Enable, is that it parses the results and provides you with an ArrayCollection that can be easily used as a dataProvider.

var myHTTPService = new HTTPService();
    myHTTPService.url = "/ibi_apps/WFServlet";

var parms:Object = new Object();
    parms.IBIF_ex = "carinst";
    parms.IBIAPP_app = "ibisamp";
    parms.COUNTRY = "ENGLAND";
    parms.RANDOM = Math.random();

myHTTPService.request = parms;
myHTTPService.method = "POST";
myHTTPService.resultFormat = "e4x";
myHTTPService.addEventListener(ResultEvent.RESULT, resultService);
myHTTPService.addEventListener(FaultEvent.FAULT, faultService);
myHTTPService.send();

Hope this helps.

Thank you gentlemen for the code snippets but it's just not coming together for me. Any chance that either of you could provide a complete mini application that loads a datadrid dynamically?

Waz - I am generating my own simple XML file that can be read properly. But I'm trying to press a button, run the fex, load the new XML into a datagrid. Seems pretty simple and straight forward but it ain't happening.... :-)

Thanks,

Norb

Is there a reason why you're NOT using the FlexEnable or you just haven't got to that part yet?

Stingray's snippet should work. But like Waz says, it returns a table - then you have to make that into something that flex can use.

However, going one step further into FlexEnable (they hide some of the difficult magic from you) It's really straightforward using a simple URL call. Here's an MXML snippet:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
	xmlns:ibi="http://www.informationbuilders.com" >
	<mx:Script>
		<![CDATA[
		import mx.core.IUIComponent;

		// Public Variables
		public var fex:String="http://servername/ibi_apps/WFServlet?IBIF_ex=carxml&IBIAPP_temp=BASEAPP";

//	Get data for policy
		public function getFex():String {
			var fex0:String = fex;
			return fex0;
		}
		]]>
	</mx:Script>	
	
	<ibi:ibiCanvas x="0" y="0" width="1086" height="780" id="ibicanvas">
		<ibi:ibiDataGrid id="mainGrid" seturl="{getFex()}" ibiAddRandom="true" y="82" width="1038" x="24"/>
	</ibi:ibiCanvas>
</mx:Application>

All it requires is a procedure (carxml) in baseapp that contains ON TABLE PCHOLD FORMAT XML at the end.

The magic is in the seturl property on the ibiDataGrid.

Hi Darin,

I am not using Flex Enable cuz we don't own it yet and I'm not sure that we will at the current cost. Sooooo......... I'm trying to make this work outside of Enable.

And it looks like IB has done a nice little encapsulation of the Flex mess but I'd like to pull this off without Enable if possible. I'm getting there:

  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<mx:XML id="tempXML" source="http://webfocus.scherer.com/approot/flexajax/ddsfxml.xml?" />
	<mx:XMLListCollection id="ddsXMLList" source="{tempXML.ddsrec}" />
	
	 <mx:DataGrid x="10" y="87" dataProvider="{ddsXMLList}" height="360">
		<mx:columns>
			<mx:DataGridColumn headerText="Order" dataField="order"/>
   			<mx:DataGridColumn headerText="Invoice" dataField="invoice"/>
 			<mx:DataGridColumn headerText="Job Code" dataField="jobcode"/>
		    <mx:DataGridColumn headerText="Status" dataField="status"/>
		    <mx:DataGridColumn headerText="Request Date" dataField="dtrequest"/>
		</mx:columns>
	</mx:DataGrid>
</mx:Application>

The code above reads an XML file that I created using WebFocus and populates a data grid but I can't figure out how to pass the parameters in the fex URL or how to refresh the grid. That is, click a button which runs the fe with new parameters and loads the XML data.

:-(

I'm thinking that I'm over my head in this Flex stuff without the Enable piece.

Bummer.

What does the

http://webfocus.scherer.com/approot/flexajax/ddsfxml.xml?

xml file look like. is it the standard WebFOCUS XML, that is produced by an

ON TABLE PCHOLD FORMAT XML

?

Hi TexasStringray,

It's not standard WebFocus XML. I wrote it custom to make it simpler. It looks like this:

  
<?xml version="1.0" encoding="iso-8859-1" ?> 
<ddsorders>
<ddsrec>
  <order>60892533</order> 
  <invoice>40815278</invoice> 
  <jobcode>SOUSJH33</jobcode> 
  <status>DELIVERED</status> 
  <dtrequest>01/12</dtrequest> 
</ddsrec>
<ddsrec>
  <order>60898153</order> 
  <invoice>40810570</invoice> 
  <jobcode>FULDJG39</jobcode> 
  <status>DELIVERED</status> 
  <dtrequest>01/12</dtrequest> 
</ddsrec>
<ddsrec>
  <order>60901590</order> 
  <invoice>40815321</invoice> 
  <jobcode>PRCSJ510</jobcode> 
  <status>DELIVERED</status> 
  <dtrequest>01/13</dtrequest> 
</ddsrec>
<ddsrec>
  <order>60905660</order> 
  <invoice>40815323</invoice> 
  <jobcode>ROOSJC04</jobcode> 
  <status>DELIVERED</status> 
  <dtrequest>01/13</dtrequest> 
</ddsrec>
<ddsrec>
  <order>60906904</order> 
  <invoice>40815506</invoice> 
  <jobcode>MJCEJ301</jobcode> 
  <status>DELIVERED</status> 
  <dtrequest>01/13</dtrequest> 
</ddsrec>
</ddsorders>

When you call your WebFOCUS procedure it must also return the exact format of a XML document.

I've been saving it to disk and then loading it. I'll try just doing the standard Webfocus hold/save for the XML and see what happens.

There does seem to be far too many parameters/properties/methods within the Flex language for me to get my hands around it but we'll see.

Using Javascript/HTML/CSS/Ajax has been simpler and given me real nice results but I'm trying to make the output much Flexier in appearance.

Thanks,

Norb

After going through a big development project recently, it has been really nice to have the additional WF pieces available. But I also gained a better understanding of Flex without the WF pieces and realized that much of the additional functionality could be accomplished without FlexEnable.

That being said, you DO NOT gain any additional power / flexibility / speed / (put your common IBI response to the question here) by having it on a big server as opposed to a small server. The enablement of features is at the development tool level. So the pricing of the product is a little "out there."

However, I have loved working with FlexEnable and I'm glad we were able to swing the purchase. Many of the struggles that Norm has experienced I did not have to worry about, and the support from IBI has been excellent, although the documention is extremely sparse. Next version coming soon!!

Hi Darin,

We may get the product but it would nice if IB would provide a trial that you see the value of their offerings.

I've put about 7 days straight into this and find the code and web examples are too abstract to make the connections needed for Webfocus. I'm about ready to throw in the towel. I'm also looking at just using a javascript framework that has a ton of plug-ins like JQuery or something like that.

Norb

OK, I've quickly modified a test Flex app that tests connectivity, to create a sample call to WF and populate a datagrid.

This is the Fex that is called

FILEDEF DDSFXML2 DISK {app}/ddsfxml2.xml
-RUN

SET HTMLFORMTYPE = XML
-HTMLFORM DDSFXML2

This is the content of the file ddsfxml2.xml

<?xml version="1.0" encoding="iso-8859-1" ?> 
<ddsorders>
<ddsrec>
  <order>1</order> 
  <invoice>40815278</invoice> 
  <jobcode>SOUSJH33</jobcode> 
  <status>DELIVERED</status> 
  <dtrequest>01/12</dtrequest> 
</ddsrec>
<ddsrec>
  <order>2</order> 
  <invoice>40810570</invoice> 
  <jobcode>FULDJG39</jobcode> 
  <status>DELIVERED</status> 
  <dtrequest>01/12</dtrequest> 
</ddsrec>
<ddsrec>
  <order>3</order> 
  <invoice>40815321</invoice> 
  <jobcode>PRCSJ510</jobcode> 
  <status>DELIVERED</status> 
  <dtrequest>01/13</dtrequest> 
</ddsrec>
<ddsrec>
  <order>4</order> 
  <invoice>40815323</invoice> 
  <jobcode>ROOSJC04</jobcode> 
  <status>DELIVERED</status> 
  <dtrequest>01/13</dtrequest> 
</ddsrec>
<ddsrec>
  <order>5</order> 
  <invoice>40815506</invoice> 
  <jobcode>MJCEJ301</jobcode> 
  <status>DELIVERED</status> 
  <dtrequest>01/13</dtrequest> 
</ddsrec>
<ddsrec>
  <order>6</order> 
  <invoice>40815506</invoice> 
  <jobcode>MJCEJ301</jobcode> 
  <status>DELIVERED</status> 
  <dtrequest>01/13</dtrequest> 
</ddsrec>
</ddsorders>

And this is the flex app.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	 backgroundColor="white" creationComplete="init()">

    <mx:Script>
        <![CDATA[
        	import mx.collections.XMLListCollection;
            import mx.collections.ArrayCollection;
			import mx.controls.Alert;

            [Bindable]
            private var VARIABLES_URL:String = "params.txt";

            [Bindable]
            private var ddsXMLList:XMLListCollection;

            [Bindable]
            private var arrColl:ArrayCollection;

            [Bindable]
            private var paramColl:ArrayCollection;

            private var urlReq:URLRequest;
            private var urlLdr:URLLoader;
           	private	var urlvar:URLVariables;

            private function init():void {
            	ddsXMLList = new XMLListCollection(tempXML.ddsrec);
//				Alert.show(ddsXMLList.toXMLString()) ;
            }

            private function call():void {
                /* Initialize the two ArrayCollections objects with empty arrays. */
                arrColl = new ArrayCollection();
                paramColl = new ArrayCollection();

                /* Initialize the URLRequest object with the URL to the file of name/value pairs. */
//                urlReq = new URLRequest(VARIABLES_URL);

				urlReq = new URLRequest("http://webfocus.scherer.com/ibi_apps/WFServlet");
				urlLdr = new URLLoader();
				urlvar = new URLVariables() ;
				urlvar.IBIAPP_app = "{app path}";
				urlvar.IBIC_server = "{if needed}";
				urlvar.IBIF_ex = "DDSFXML2";
				urlvar.Random = new Date().toUTCString();
				urlReq.data = urlvar;
                

                /* Initialize the URLLoader object, assign the various event listeners, and load the specified URLRequest object. */
                urlLdr = new URLLoader();
                urlLdr.addEventListener(Event.COMPLETE, doEvent);
                urlLdr.addEventListener(Event.OPEN, doEvent);
                urlLdr.addEventListener(HTTPStatusEvent.HTTP_STATUS, doEvent);
//                urlLdr.addEventListener(HTTPStatusEvent.HTTP_RESPONSE_STATUS, doEvent);
                urlLdr.addEventListener(IOErrorEvent.IO_ERROR, doEvent);
                urlLdr.addEventListener(ProgressEvent.PROGRESS, doEvent);
                urlLdr.addEventListener(SecurityErrorEvent.SECURITY_ERROR, doEvent);
                urlLdr.load(urlReq);
            }

            private function doEvent(evt:Event):void {
                arrColl.addItem({type:evt.type, idx:arrColl.length+1, eventString:evt.toString()});

                switch (evt.type) {
                    case Event.COMPLETE:
                        /* If the load was successful, create a URLVariables object from the URLLoader.data property and populate the paramColl ArrayCollection object. */
                        var ldr:URLLoader = evt.currentTarget as URLLoader;
                        var vars:URLVariables = new URLVariables(ldr.data);
                        var key:String;
                        var WFxml:XML;

                        for (key in vars) {
                            paramColl.addItem({key:key, value:vars[key]});
                        }

                        params.visible = true;

  						WFxml = XML(evt.target.data);

//						Alert.show(WFxml.toString()) ;
           				ddsXMLList = new XMLListCollection(WFxml.ddsrec);
           				
                        break;
                }
            }
        ]]>
    </mx:Script>
	<mx:XML id="tempXML" source="http://webfocus.scherer.com/approot/flexajax/ddsfxml.xml" />
	<mx:DataGrid x="10" y="87" dataProvider="{ddsXMLList}" height="360">
		<mx:columns>
			<mx:DataGridColumn headerText="Order" dataField="order"/>
   			<mx:DataGridColumn headerText="Invoice" dataField="invoice"/>
 			<mx:DataGridColumn headerText="Job Code" dataField="jobcode"/>
		    <mx:DataGridColumn headerText="Status" dataField="status"/>
		    <mx:DataGridColumn headerText="Request Date" dataField="dtrequest"/>
		</mx:columns>
	</mx:DataGrid>
	<mx:Button id="btnCall" label="Call WF" width="100" click="call()"/>
	<mx:HBox verticalAlign="center">
	    <mx:VBox left="50" top="50">
    	    <mx:Label text="Events:" />
        	<mx:DataGrid id="events" dataProvider="{arrColl}" rowCount="5">
            	<mx:columns>
                	<mx:DataGridColumn dataField="idx" headerText="#" width="20" />
            	    <mx:DataGridColumn dataField="type" headerText="Type" showDataTips="true"
            	    	               dataTipField="eventString" />
        	    </mx:columns>
    	    </mx:DataGrid>
	    </mx:VBox>

	    <mx:VBox>
    	    <mx:Label text="Parameters:" />
        	<mx:DataGrid id="params" dataProvider="{paramColl}" rowCount="5" visible="false">
            	<mx:columns>
                	<mx:DataGridColumn dataField="key" headerText="Key" />
            	    <mx:DataGridColumn dataField="value" headerText="Value" />
        	    </mx:columns>
    	    </mx:DataGrid>
	    </mx:VBox>
	</mx:HBox>
</mx:Application>

I think that I've changed any unique stuff for my environment.

Let me know how it goes.

Hi Waz,

Wow!!! That is some serious code there. Thanks for posting such a complete example and with my data too!

There is stuff in there that I never would have figured out for a long time. I compiled the code and it does load the grid with my data. Woo Hoo!!! It does throw an Actionscript error but it appears in the little extra stuff you add related to the events/parameter lists. (Error #2101: The String passed to URLVariables.decode() must be a URL-encoded query string containing name/value pairs.) No biggie to me as you certainly illustrated the process with your code in the "call" function and the datagrid.

I did come up with an alternative method to call the fex with user-input dates and populate the grid but yours is cleaner, I think. Please see below:

  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="onCreationComplete()" borderStyle="solid" borderThickness="2" borderColor="#090F13">
	
	<mx:Script>
	    
		<![CDATA[
   			import mx.controls.Alert;
   			import mx.rpc.http.HTTPService;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.events.FaultEvent;
   	       
   	        
   	        private function refreshGrid():void {
   	        	getGridData();
   	        }
   	        
   	        private function formatDate(dt:Date):String {
   	        	var d:Number = dt.date;
   	        	var m:Number = dt.month + 1;
   	        	var stDay:String = String(d);
   	        	var stMon:String = String(m);
   	        	   	        	
   	        	if (d < 10) { stDay = '0' + stDay };			
   	        	if (m < 10) { stMon = '0' + stMon };
   	        	
   	        	return ( String(dt.fullYear) + stMon + stDay );
   	        }
   	        
   			private function getGridData():void {	
   				var rand:Number = Math.random();
   				var ds:Date = dts.selectedDate;
   				var de:Date = dte.selectedDate;
   				var stDts:String = formatDate(ds);
   				var stDte:String = formatDate(de);
    		    var http1:HTTPService = new HTTPService();	
    			http1.url = "http://webfocus.scherer.com/ibi_apps/WFServlet?IBIF_ex=flexajax/creatxml02" +
    				"&DTS=" + stDts + "&DTE=" + stDte + "&RAND=" + String(rand);
    			http1.resultFormat = "text";
    			http1.send();
    			http1.addEventListener(ResultEvent.RESULT, defaultResultHandler);
    			http1.addEventListener(FaultEvent.FAULT, defaultFaultHandler);
    		}	
			
			private function defaultResultHandler(event:ResultEvent): void {
       			onCreationComplete();
			}
			private function defaultFaultHandler(event:FaultEvent): void {
       			Alert.show(event.fault.faultString, "HTTP1 Error");
   			}
   
			private function onCreationComplete():void {	
    			var http:HTTPService = new HTTPService();
    			http.url = "http://webfocus.scherer.com/approot/flexajax/ddsfxml.xml?" + String(Math.random());
    			http.resultFormat = "e4x";
    			http.addEventListener(ResultEvent.RESULT, 
        			function(event:ResultEvent):void {
            			ddsorders.dataProvider = event.result.ddsrec;
    				});
    			http:addEventListener(FaultEvent.FAULT,
    				function(event:FaultEvent):void {
            			Alert.show("Http Fault - Can't load data:");
    				});	
    			http.send();						
			}	
		]]>
	</mx:Script>

	 <mx:DataGrid id="ddsorders" x="10" y="87" height="360"
	 	variableRowHeight="true">
		<mx:columns>
			<mx:DataGridColumn headerText="Order" dataField="order"/>
   			<mx:DataGridColumn headerText="Invoice" dataField="invoice"/>
 			<mx:DataGridColumn headerText="Job Code" dataField="jobcode"/>
		    <mx:DataGridColumn headerText="Status" dataField="status" width="120"/>
		    <mx:DataGridColumn headerText="Request Date" dataField="dtrequest"/>
		    <mx:DataGridColumn headerText="DDS Id" dataField="id" visible="false"/>
		</mx:columns>
	</mx:DataGrid>
	
	<mx:Button label="Get Data" click="refreshGrid()"/>
	
	<mx:DateField x="126" y="0" id="dts"/>
	<mx:DateField x="242" y="0" id="dte"/>
</mx:Application>

If you have time to briefly review the code I inserted I would appreciate your comments about why my solution sucks compared to yours.

Thanks so much. This was really helpful. Although I gotta say that Flex overall is kicking my arse. I wanna put all the cool things that I have been doing with WebFocus and Javascript into Flex but I'm thinking there are just too many moving parts for me to deal with. I'm wondering out loud how much Enable will really help out?

Thanks again,

Norb

This message has been edited. Last edited by: Norb Eckert,

I think the issue here is that you are setting the data provider in the result event.

My suggestion is to set the data provider to a bindable private var, then set the reult to that var.