Where I’m coming from

Isn’t it interesting how some people get totally caught up in specific technologies and then spend the rest of their lives (or at least a few good years) developing in nothing else than that specific set of “programming languages + IDE + APIs + server architecture + delivery platform”?

If you’ve been around the block a couple of times, and if you’ve been developing software and web applications for some time, you probably know of some people like that. Not that there is anything wrong with that, of course, but it is interesting how scary (or exciting) the world looks outside of that comfort zone.

Not that I consider myself a pigeon-holed designer & developer, but I started working with Flex Builder 2 this summer, and I must admit that it was a little scary at first. New concepts (for me), new programming syntax . . . but an awesomely exciting end result. Well, if you’re here because you want to figure out how to make Flex Builder 2 work with Classic ASP 3.0, then I don’t have to tell you anymore about the cool-ness factor of Flex applications.

Let’s get on with the show

For the purpose of this very basic and very simple example, you need to have Flex Builder installed on your computer. You should be at least somewhat familiar with programming concepts and with XML.

And, of course, you will have access to a web server running IIS and a database (SQL Server, for example) to which you can already connect using ASP and ADODB. So, it’s almost a given that you need to be able to write SQL queries.

1. Set up a Flex project. This step is fairly rudimentary and has been covered in detail elsewhere, so I won’t repeat how to set up a Flex project. (Check the Flex Help if you really don’t have a clue.)

2. For extra points, use something other than the default location, and create a new directory on your web server. Call it what you want, but the shorter the name the easier to type in the URL later.

3. When you’re in a front of the Source view of your MXML file, enter the following:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns=”*”
layout=”absolute” creationComplete=”userRequest.send()”>

<mx:HTTPService
id=”userRequest”
url=”http://www.myurl.com/flex/request.asp”
useProxy=”false”
method=”POST”>
<mx:request xmlns=”">
<username>{username.text}
</username></mx:request>
</mx:HTTPService>

<mx:Form x=”22″ y=”10″ width=”493″>
<mx:HBox><mx:Label text=”Username”/><mx:TextInput id=”username”/></mx:HBox>
<mx:Button label=”Submit” click=”userRequest.send()”/>
</mx:Form>

<mx:DataGrid id=”dgUserRequest” x=”22″ y=”140″
dataProvider=”{userRequest.lastResult.users.user}”
width=”493″ height=”125″>
<mx:columns>
<mx:DataGridColumn headerText=”User ID” dataField=”userid”/>
<mx:DataGridColumn headerText=”User Name” dataField=”username”/>
<mx:DataGridColumn headerText=”E-Mail” dataField=”emailaddress”/>
</mx:columns>
</mx:DataGrid>

<mx:TextInput x=”355″ y=”273″ id=”selectedemailaddress”
text=”{dgUserRequest.selectedItem.emailaddress}”/>

</mx:Application>
(Feel free to copy and paste all of this from here into your Source view.)

4. Modify the following: “http://www.myurl.com/flex/request.asp”

Obviously, you want to point to your URL (whether that’s on a live server or on your development box) and to the corresponding directory which contains the ASP file that will provide the bulk of the information to you.

At this point, you have the basic Flex application ready. However, don’t try to run it yet, since we haven’t prepared the ASP file yet.

5. Create an ASP file and place it in the directory that you specified in step 4:

<%@ LANGUAGE=”VBSCRIPT” %>
<%
REM Prevent page caching
Response.Buffer = True
Response.ExpiresAbsolute = Now() - 1
Response.Expires = 0
Response.CacheControl = “no-cache”
Set Conn = Server.CreateObject(”ADODB.Connection”)
Conn.ConnectionTimeout = 15
Conn.CommandTimeout = 30
Conn_Catalog = “MyDatabase”
Conn_UserID = “web_user”
Conn_Password = “whatever1t15″
Conn_DataSource = “555.55.555.55″

conn.Open “Provider=sqloledb; Data Source=” & Conn_DataSource & “; Initial Catalog=” & Conn_Catalog & “; User Id=” & Conn_UserID & “; Password=” & Conn_Password

If Request.Form(”username”) <> “” Then
dim accessSql
accessSql = “SELECT TOP 55 UserID, UserName, Email FROM Users WITH (NOLOCK) WHERE (Email IS NOT NULL) AND (Email <> ”) AND (Email LIKE ‘%.com’) AND Username LIKE ‘%” & Request.Form(”username”) & “%’ ORDER BY UserID”
Set Comm = Server.CreateObject(”ADODB.Command”)
Comm.ActiveConnection = Conn
Comm.CommandTimeout = 600
Comm.CommandText = accessSql
Comm.CommandType = 1
Set accessSqlRS = Comm.Execute

dim mxmlStr, mxmLoop
mxmlStr = “”

‘PUT THE QUERY RESULTS INTO AN ARRAY
If Not accessSqlRS.EOF AND NOT accessSqlRS.BOF Then
accessSqlArray = accessSqlRS.GetRows()
accessSqlRS.Close
End If

‘LOOP THROUGH THE ARRAY AND FORM THE XML STRING
If IsArray(accessSqlArray) Then
mxmlStr = “<users>”

For mxmLoop = 0 to UBound(accessSqlArray, 2)
mxmlStr = mxmlStr & “<user><userid>” & accessSqlArray(0,mxmLoop) & “</userid><username>” & accessSqlArray(1,mxmLoop) & “</username><emailaddress>” & accessSqlArray(2,mxmLoop) & “</emailaddress></user>” & vbcrlf
Next

mxmlStr = mxmlStr & “</users>”
End If

If delUserSql <> “” Then
delUserSql = NULL
End If

If IsArray(accessSqlArray) Then
Erase accessSqlArray
Set accessSqlArray = Nothing
End If

‘POST THE XML STRING
Response.Write(mxmlStr)
End If

%>
(Feel free to copy and paste all of this from here into your ASP page.)

6. You need to modify the database connection string and the SQL query. Obviously, my example database and its tables might not work for you. Feel free to adjust your query so that it points to the correct database (by SQL Server IP and database name) and to the correct fields in teh correct table.

After you have built the Flex project, you can try and run it. If you already have all of your Flex files on the web server,and if the file reference from Flex to the ASP page is in place, everything should work.

Ideally, you place all the required files on your web server and access the Flex app by entering its URL (probably pointing to the bin directory).

What does it do?

If everything works, the Flex app won’t do anything at first. That’s how it’s supposed to work. In my case (using my database), I enter user name or the first few letters of a user name into the text input field, click Submit and then retrieve a number of user records that fulfill the LIKE requirement.

With the grid control filled in, I can now click on any record row and display the e-mail address in a separate input field underneath.

Not bad for a basic proof-of-concept, eh? (And if you have something much, much cooler than this, using either ASP or SQL Server, please let me know about it.)

Possible Errors

If you get any weird errors, try to Google them, but the most common issues are:

a) Some kind of #1096 error in the Flex app. This has to do with read-only attributes on some of the files in your Flex project directory. The easiest work-around is to disable the History option for the HTML wrapper (Properties -> Flex Compiler).

b) No data, nothing happens when you click the button or some weird-looking error box when the Flex app is done loading. This is the result of referencing the ASP file incorrectly. As far as I can tell, you need an absolute URL for the mx:HTTPService to work. And you might want to double-check and make sure that the location to which you are pointing actually contains the ASP file.

Next Steps

As mentioned throughout this brief and very simple tutorial, all of this is very rudimentary indeed. But you’ve got to start somewhere, right?

If you’re looking for an enterprise-strength solution, you should probably write a web service (using ASP.NET and C#, for example) and include some security measures to protect your data.

In this example, it is presumed that you handle user authentication before the Flex app gets accessed. If you’re dealing with sensitive data, make sure you do not allow unauthorized access to the ASP file that gets accessed by the Flex app. (In no way will I be held responsible for any deployed or publicly accessible solution that has been built as a result of this proof-of-concept tutorial and through which sensitive or otherwise protected data have been compromised.)

Call for Examples

As you probably know by now, the web is full of Flex Builder examples written for ColdFusion, PHP and Java developers. As a matter of fact, the basis for this tutorial was a PHP tutorial from Adobe Labs. However, there are astonishingly few (if any) hints as to how to use Flex Builder with Classic ASP 3.0.

There has been quite a bit of talk about a Flex solution for ASP.NET, but that doesn’t always fit the need. So, I would hope that this proof-of-concept tutorial helps someone else out there accomplish great and wonderful things.

On the other hand, if you have any “Flex with ASP” examples or functional code snippets, please let me know. I’d love to learn from you.

PS: I apologize for the “funky formatting” of the code snippets in this post. The basic WordPress account doesn’t give you much wiggle room in terms of CSS formatting. Feel free to take out extra spaces and extraneous line breaks to format the code to your liking.