- Open IIS (Internet Information services) Manager and add crossdomain.xml to the root of the website. This file is required for flash to access the webserver content.
- <?xml version="1.0" ?>
- <cross-domain-policy>
- <allow-access-from domain="*"/>
- <site-control permitted-cross-domain-policies="all"/>
- <allow-http-request-headers-from domain="*" headers="*"/>
- </cross-domain-policy>
- Create a new Flex project in Adobe Flex Builder.
- The main MXML file contains <mx:WebService> component. The layout contains <mx:ViewStack> with two <mx:VBox> containers, one with DataGrid and other with Form for new record insertion. <mx:WebService>contains reference to all its operations using <mx:Operation> tag with result event, handling the result for every operation. All these result handler events are essentially calling the webservice’s GetDataSet method to refresh the databound ArrayCollection instance. There is an “itemEditEnd” event handler for dataGrid which fires webservice’s UpdateRecord method, when user ends editing for dataGrid item. When user clicks the “Delete” button, Actionscript code behind the MXML file gets the CONTACTID from the row selected by the user and calls the webservice’s DeleteRecord method. When user wants to insert a new record, view changes the selected child to Form for new record insertion, and on user submit, webservice’s InsertRecord method is called. Part of the code is adapted from Flex Builder “Create Application from Database” designer generated code.
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
- layout="vertical" pageTitle="Flex SQL Server Application"
- creationComplete="initApp()">
- <!-- Link to external Actionscript file -->
- <mx:Script source="FlexDBAppScript.as" />
- <mx:WebService id="websvc"
- wsdl="http://localhost/WebService/Contacts.asmx?wsdl"
- showBusyCursor="true"
- fault="faultHandler(event)">
- <mx:operation name="GetDataSet"
- result="GetDataSetHandler(event)"/>
- <mx:operation name="InsertRecord"
- result="InsertRecordhandler(event)"/>
- <mx:operation name="DeleteRecord"
- result="DeleteRecordHandler(event)"/>
- <mx:operation name="UpdateRecord"
- result="UpdateRecordHandler(event)"/>
- </mx:WebService>
- <mx:ViewStack id="appView" width="100%" height="100%">
- <mx:VBox id="displayGrid">
- <mx:DataGrid id="dataGrid"
- dataProvider="{dataArray}" rowCount="10"
- editable="true" resizableColumns="true"
- itemEditEnd="ItemEditEnd(event)">
- <mx:columns>
- <mx:DataGridColumn headerText="Contact ID" dataField="CONTACTID" editable="false"/>
- <mx:DataGridColumn headerText="First Name" dataField="FIRST_NAME" />
- <mx:DataGridColumn headerText="Last Name" dataField="LAST_NAME" />
- <mx:DataGridColumn headerText="City" dataField="CITY" />
- <mx:DataGridColumn headerText="State" dataField="STATE" />
- </mx:columns>
- </mx:DataGrid>
- <mx:HBox>
- <mx:Button label="Add New" id="btnAddNew" click="GoToInsertForm()"/>
- <mx:Button label="Delete" id="btnDelete" click="DeleteItem()"/>
- </mx:HBox>
- </mx:VBox>
- <mx:VBox id="insertForm">
- <mx:Form id="ContactForm" label="Insert New Record">
- <mx:FormHeading label="Insert New Record"/>
- <mx:FormItem label="First Name:" id="First_Name_form">
- <mx:TextInput id="tInp_First_Name" text=""/>
- </mx:FormItem>
- <mx:FormItem label="Last Name:" id="Last_Name_form">
- <mx:TextInput id="tInp_Last_Name" text=""/>
- </mx:FormItem>
- <mx:FormItem label="City:" id="City_form">
- <mx:TextInput id="tInp_City" text=""/>
- </mx:FormItem>
- <mx:FormItem label="State:" id="State_form">
- <mx:TextInput id="tInp_State" text=""/>
- </mx:FormItem>
- </mx:Form>
- <mx:HBox>
- <mx:Button label="Save" id="btnSubmit" click="InsertItem()"/>
- <mx:Button label="Cancel" id="btnCancel" click="GoToDisplayGrid()"/>
- </mx:HBox>
- </mx:VBox>
- </mx:ViewStack>
- </mx:Application>
- The actionscript code for MXML file is contained in a separate .as file.
- // Actionscript file for FlexDBApp.mxml
- // Part of the code is adapted from Flex- Create Application from Database generated code.
- import mx.collections.ArrayCollection;
- import mx.controls.Alert;
- import mx.events.CloseEvent;
- import mx.events.DataGridEvent;
- import mx.rpc.AsyncToken;
- import mx.rpc.events.FaultEvent;
- import mx.rpc.events.ResultEvent;
- [Bindable]
- public var dataArray:ArrayCollection = new ArrayCollection();
- private function initApp():void
- {
- // Initialize and load the web service
- websvc.loadWSDL();
- websvc.GetDataSet();
- }
- /**
- * Result event handler for websvc GetDataSetHandler call
- */
- private function GetDataSetHandler(e:ResultEvent):void
- {
- // Populate dataArray with dataset table
- dataArray = e.result.Tables.Contacts.Rows;
- }
- /**
- * Event handler for Add New Button Click event
- */
- public function GoToInsertForm():void
- {
- // Change te view's selected child to insert form
- appView.selectedChild = insertForm;
- }
- /**
- * Event handlet for Save Button Click event
- */
- public function InsertItem():void
- {
- websvc.InsertRecord(tInp_First_Name.text, tInp_Last_Name.text, tInp_City.text, tInp_State.text);
- GoToDisplayGrid();
- }
- /**
- * Event handler for Delete Button Click event
- */
- public function GoToDisplayGrid():void
- {
- // Change te view's selected child to display Grid
- appView.selectedChild = displayGrid;
- }
- /**
- * Result event handler for websvc InsertRecordhandler call
- */
- private function InsertRecordhandler(e:ResultEvent):void
- {
- // Replopulate the dataArray after transaction
- websvc.GetDataSet();
- }
- /**
- * Event handler triggered when the user finishes editing an entry
- * triggers an "update" server command
- */
- private function ItemEditEnd(e:DataGridEvent):void
- {
- // Get row number of the edited row
- var dgRowIndex:int = e.rowIndex;
- // Get name of DataField being edited
- var dgFieldName:String = e.dataField;
- // Get Column Index being edited
- var dgColIndex:int = e.columnIndex;
- var vo:* = dataArray[dgRowIndex];
- var col:DataGridColumn = dataGrid.columns[dgColIndex];
- var newvalue:String = dataGrid.itemEditorInstance[col.editorDataField];
- vo[dgFieldName] = newvalue;
- websvc.UpdateRecord(vo.CONTACTID, vo.FIRST_NAME, vo.LAST_NAME, vo.CITY, vo.STATE);
- }
- /**
- * Result event handler for websvc UpdateRecordHandler call
- */
- private function UpdateRecordHandler(e:ResultEvent):void
- {
- // Replopulate the dataArray after transaction
- websvc.GetDataSet();
- }
- /**
- * Event handler for Delete Button Click event
- */
- public function DeleteItem():void
- {
- if (dataGrid.selectedItem)
- {
- Alert.show("Are you sure you want to delete the selected record?",
- "Confirm Delete", 3, this, DeleteClickHandler);
- }
- }
- /**
- * Event handler function for the Confirm dialog raises when the Delete Button is pressed.
- * If the pressed button was Yes, then the product is deleted.
- * @param object event
- * @return nothing
- */
- private function DeleteClickHandler(event:CloseEvent):void
- {
- var indexForDelete:int = dataGrid.selectedIndex;
- if (indexForDelete == -1)
- {
- return;
- }
- if (event.detail == Alert.YES)
- {
- var vo:* = dataArray[indexForDelete];
- websvc.DeleteRecord(vo.CONTACTID);
- }
- }
- /**
- * Result event handler for websvc DeleteRecordHandler call
- */
- private function DeleteRecordHandler(e:ResultEvent):void
- {
- // Replopulate the dataArray after transaction
- websvc.GetDataSet();
- }
- /**
- *Fault event handler for websvc WebService call
- */
- private function faultHandler(event:FaultEvent):void
- {
- Alert.show(event.fault.message, "Application Error");
- }
Thursday, October 15, 2009
Connecting Adobe Flex to SQL Server - Part 2 (Adobe Flex)
Create After creating .Net web services, they need to be integrated with Flex to show data.
Subscribe to:
Post Comments (Atom)
I am having trouble with the 1st part is it possible to upload the sorce files for the .Net app
ReplyDeletetks
email arturo_alcalde@yahoo.com
Hi, Sorry for delayed response. I am having trouble putting attachments in blogspot entries. I can try to email you the source code.
ReplyDeleteThanks,
Amrit
Excellent tutorial.. it worked fine for me.. Thanks..
ReplyDeleteOpen IIS (Internet Information services) Manager and add crossdomain.xml to the root of the website.
ReplyDeletewhat does this mean?
i havnt created a website yet..which website folder are you talking here..
in iis tree we have
"websites folder/default web site/all iis configured websites"
I am talking about website root. When you open IIS Manager, there is node called Websites and then go further down to Default Web Site. You can add this crossdomain.xml direclty to the physical directory where your websites reside, for ex C:\Inetpub\wwwroot and it will show up in the root of Default Web Site. \
ReplyDeleteHopefully this helps. Let me know if need more help on this,
Thanks
What i am getting after reading your post is that i have to paste the crossdomain.xml to the root of my webservice .SAy i created my web serice project by name test..so i have to paste this crossdomain xml in the root of test folder under the default website node in iis..right....?
ReplyDeleteReally i cant understand the comments on crossdomain.xml
ReplyDeleteplz explain
Hi Amrit,
ReplyDeleteit seems ur post is excellent,can u please mail me your source code to my mail id
suri201183@gmail.com
Thanks in advance.....
Thanks Amrit,
ReplyDeleteGreat post - saved me lots of time. The only issue I had was that in .Net 2 onwards by default the web.config file will not have the following:
And if this isnt present then you will get IOErrorEvents from the web service.
Thanks,
Andrew
The text should have been:
ReplyDelete<webServices>
<protocols>
<add name="HttpGet"/>
<add name="HttpPost"/>
</protocols>
</webServices>
Thanks for the tutorial--works great! Note that I removed the crossdomain.xml file and it still works, though I'm using localhost (I assume it won't work without that file if on different computers).
ReplyDeleteI'm now in the process of really diving into what is happening under the hood on the Flex side (since I'm new to Flex--I'm a .Net developer). Plus, I'm migrating the Flex app to my wife's netbook to ensure I can hit the web service without localhost.
If anyone is stuck just let me know and I'll offer what I've learned in getting this code to work.
Tools I used for this tutorial: SQL Server 2008 Express, SQL Server 2008 Management Studio Express, Visual Web Developer 2008 Express, IIS 5.1, and 32-bit Windows XP Pro.
Troy S.
p.s. See http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html for more info about the crossdomain.xml file.
Excellent blog i have ever seen regarding FLEX/ASP.Net/MSSQL Server combination.
ReplyDeleteIt was really worked for me without single error/problem.
Thanks a lot for the help...
I just want to add some information on crossdomain.xml file as it was little bit confusing on the blog.
ReplyDeleteWe can't add any file from IIS Manager, so please follow the steps below to add the xml file.
To add crossdomain.xml file go to inetpub->wwwroot->webservice(your web application folder)-> create crossdomain.xml file here...
Run the iisreset command to restart the IIS server...
I am writing this to clear confusions regarding crossdomain.xml. It is required for Flash/FLEX apps to access your sever applications. To make all applications accessible to FLEX (assuming that you might be developing other webservices), open the the folder where website root is pointing to and place crossdomain.xml over there. If you only want to make one webservice available to FLEX application, place it webservice folder. Again thanks everyone for appreciating this blog post on flex.
ReplyDeleteThanks,
Amrit
Is this tutorial available anywhere in vb?
ReplyDeleteHello Melissa,
ReplyDeleteI haven't got the code in vb.net. Follow the same steps (except select your coding language as vb in visual studio). Then use this website to convert the code listed in blog to vb.net.
http://www.developerfusion.com/tools/convert/csharp-to-vb/
Thanks,
Amrit
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteHi Amrit,
ReplyDeleteThanks a lot for sharing. I can do getdataset and inserRecord without any problem, but cannot get the updateRecord right becauase ran into the error "faultCode:EncodingError faultString:'Array of input arguments did not contain a required parameter at position 0' faultDetail:'null'" Any idea would be very appreciated.
Eve
This comment has been removed by the author.
DeleteYou can definately use this post as baseline for connecting SQL server to Flex. ASP.NET has changed a lot since this post blog was written in 2009. I might do a newer and updated post sometime using .NET REST services.
DeleteAlso I am not getting very good idea on the error you are getting on this.
Thanks,
Amrit
Please checkout the updated blog at http://chbsinc.blogspot.com/2013/04/connecting-client-side-scripts-to-sql.html
DeleteThanks,
Amrit
Hi Amrit, Thanks for helping us out. But could you please send the project source files on my email id at akshayingoa@gmail.com
ReplyDeleteI will be very grateful.
Akshay
Hello Akshay,
ReplyDeleteIt has been a long time since I wrote this blog post. I don't even remember if I have all the files by now. Please try to follow directions. Things should work out as directed.
Also I am planning to write another post following this which will be using latest technologies such as rest web services in .Net. If you are in urgency you can use this code otherwise the new post might be better option to use.
Thanks,
Amrit
Hello Amrit,
ReplyDeleteI was able to connect the database and the application is working fine. But, before I put it on a live server, I need to secure it using some basic authentication(username and password). I don't know how to achieve this.
Could you please put some light on this.
Thanks,
Akshay
Hello Akshay,
ReplyDeleteUse forms authentication with Membership API in IIS. Make the page hosting flash object an ASP.Net page instead of html created by flash builder. Use another login page ( asp.net page) to make user login to the site and redirect him/her to flex page. Also the pages hosting the .net web services will also reside in the same site protected by forms authentication.
Hope this helps.
Thanks,
Amrit
Please checkout the updated blog at http://chbsinc.blogspot.com/2013/04/connecting-client-side-scripts-to-sql.html
DeleteThanks,
Amrit
Hello,
ReplyDeleteVery good blog. Can you give me your position about the viability of flex technology (lot of people tell me that is a dead technology...)
My question:
I wrote an asp.net 4.0 website, with function onto webservice.asmx in order to take data form the DB without refresh (with javascript).
Can I use this very file (webservice.asmx) with this functions for my flex project?
Can you email me the code of your tutorials
Hello Raphael,
DeleteThanks for appreciation. Flex is still not a dead technology. Considering a bigger picture there are still thousands of websites running in Flash. They are not going to switch to Javascript overnight. Definately one should start looking into Javascript with HTML5 comming so strongly. Another thiing is that these are all client side coding technologies. So the same webservice can be used for Flex, or Javascript.
Anyway I am updating this blog to with newer ASP.NET technology and .NET 4.5 content. Bear with me for few days, I will post the updated the files.
Thanks,
Amrit
Please checkout the updated blog at http://chbsinc.blogspot.com/2013/04/connecting-client-side-scripts-to-sql.html
DeleteThanks,
Amrit
All around clarified! This blog gives detail clarification about .Net app. Truly accommodating one.
ReplyDeleteApp Development Company
Nice one. Thanks for sharing this useful blog post.
ReplyDeleteIf you are looking for the best Mobile App Development Company Reach out Way2Smile Solutions Best Android App Development in Chennai
This comment has been removed by the author.
ReplyDelete