---

1. To make a FlexFM application, first be sure that you have FlexFM installed in Flex Builder. If you haven’t already, please review our previous tutorial “Install FlexFM.” When you have FlexFM installed, you are ready to begin.

---

2. In the Flex Development Perspective, right-click in the Navigator pane, and choose New->Flex Project.

---

3. By default, Flex Builder will suggest Basic (e.g. XML or web service from PHP/JSP/ASP.NET). This is what you want, so click Next.

---

4. You can name your project whatever you like. We chose FMServer_Sample to match the name of the FileMaker sample file.

---

5. Since your new project will be using the FlexFM class, you need to tell it where to look for that resource. You have already installed FlexFM in your Workspace; so on the build paths screen, you can simply switch to the Library Path tab, and click Add Project…

---

6. If this is your first time using Flex Builder, FlexFM will be your only choice in Library Projects. Select FlexFM and click OK. Then click Finish.

---

7. If you ever want to add other libraries to your Project, or if you already have a Project you want to add FlexFM to, you can access the Library Path settings by right-clicking your Project in Navigator and choosing Properties. Tip: If you are having trouble getting applications with proper class syntax to compile and run, it’s a good idea to check the Library paths.

---

8. So now you have defined your new Project in the Workspace, and it knows about FlexFM. When you clicked Finish, Flex Builder compiled all the basic resource files into directories in your Project, and created a default main MXML application file for you. This is where you will start programming your FlexFM application.

---

9. Before we start with code, a little background. Flex is a tag-based markup language, in the same way that HTML is, but Flex has an entirely different, more powerful, and completely extensible syntax.

You will notice that the default starter file Flex Builder created for you isn’t blank. It starts out with an XML declaration and a root node. The root node has an XML namespace attribute and a layout attribute. Valid Flex MXML will always be “valid and well formed” XML.

We have broken the sample Flex application into five steps, each of which builds on the previous step and can be compiled and run on its own. These five steps are provided as linked text files at the beginning of each step. Within each step, we explain the code assembly in sub-steps.

---

FlexFMServer_Sample_step01

As in HTML and XML tags, any whitespace beyond the first whitespace character is ignored. For the sake of clarity in the example code, we have moved each attribute onto its own line. The code editor in FlexBuilder will always assume the same level of indent as the previous line, thus making it easy to keep things orderly.

Add a reference to the FlexFM class.

Change the layout from absolute to horizontal (to visually center application).

Add a function to be triggered by the creationComplete event.

Create a simple in-line script defining the doFind() function. Notice how the in-line script is escaped inside an XML CDATA section. This allows MXML applications to be valid and well formed XML, while still containing literal ActionScript 3 code.

Add an instance of FMServer.

Add an instance of FMRequest (which points to the FMServer instance).

Add a Panel object to put interface objects on.

Add a TextInput object to hold query strings.

The application is now complete enough to run without errors, although it isn’t very useful yet. Click the Bug icon in the Flex Builder toolbar to compile and run the application in the debugger.

Next we’ll add a DataGrid object to display the query results in.

---

FlexFMServer_Sample_step02

Create a basic data grid with 4 columns, assigning headerText attributes with the text as you want them to display on screen and the dataField attributes with the literal field names as returned in the fmresultset.xml grammar.

Customize the display properties of the Status and Qty columns.

Give the DataGrid an id.

Customize the display properties of the DataGrid.

Define the DataGrid as not enabled during the findRequest.running event.

Assign findRequest.lastResult.records as the dataProvider for the DataGrid.

With Step 2 complete, the application is now at a point where it can run without errors again. Click the Bug icon in the Flex Builder toolbar to compile and run the application in the debugger. Now the default -findall query defined in the first step shows four columns from FMServer_Sample database.

Next we’ll add the ability to modify the default query string and execute any valid query string from the UI, returning the results to the DataGrid.

---

FlexFMServer_Sample_step03

Define the “queryField” TextInput object as not enabled during the findRequest.running event and to trigger the doFind() function on enter event.

With Step 3 complete, click the Bug icon in the Flex Builder toolbar to compile and run the application in the debugger. The default -findall query defined in the first step shows four columns from FMServer_Sample database as expected, but now you can change the query string to any valid string and execute the new query by hitting enter on your keyboard. For example, change -findall to -findany and press enter.

Next we’ll add a UI button to trigger the doFind() function, and we’ll add some dynamic text to display lastResult properties from the findRequest.

---

FlexFMServer_Sample_step04

Add a button to trigger the doFind() function.

Add Label objects to display findRequest.lastResult properties dynamically.

With Step 4 complete, click the Bug icon in the Flex Builder toolbar to compile and run the application in the debugger. The default -findall query defined in the first step shows four columns from FMServer_Sample database as expected, and you can still change the query string to any valid string and execute the new query by hitting enter on your keyboard. Now in addition, you can execute the new query by clicking the Repost button, and you will get some feedback about how many records were returned.

Last we’ll add functions to trap server errors and report them back in a useful form.

---

FlexFMServer_Sample_step05

Add a Text object with id attribute status at the bottom of the main Panel object to display FileMaker Server error feedback.

Create a setStatus() function. Note the inclusion of the trace function. This prints theStatus argument to the debug Console in Flex Builder and then sets the Text object status with theStatus.

Create an onFMResult() function. This is seemingly the most complicated part of the FMServer_Sample application, but if you take a moment to understand it, you will see it is not all that complicated; onFMResult() expects an Object argument, which is what FMRequest returns. The first line extracts the integer error property from the FMRequest result object. Depending on the value of the errorCode, the function executes our setStatus() function, defined in the previous sub-step. Finally, we’ll add triggers for our new functions.

Add a line to the doFind() function which initially triggers setStatus().

Add a line to the findRequest object which triggers onFMResult() and updates status.text with whatever result FileMaker Server returns.

With Step 5 complete, click the Bug icon in the Flex Builder toolbar to compile and run the application in the debugger. The application runs as expected, but now it shows the query status dynamically at the bottom.

If you modify the query so that it is still valid, but returns zero results, the status text will confirm that.

If you modify the query to something invalid (for example, search on a field name that does not exist), the result message defaults to show the numeric error code. As mentioned in the “Access FileMaker Data” lesson, all of the FileMaker Pro error codes are listed in the documentation that ships with the product and is also available online. You should, of course, try to predict all the errors your program may generate and handle them gracefully, rather than simply reporting the error code to the screen.

---

10. Now that you’ve completed this rudimentary application, you might consider saving it as a basic query string tester for your development work with FlexFM. Obviously, in almost any conceivable FlexFM application besides this one, it would be pointless to expose the literal query string.

In the following lesson, we’ll install a project that contains nine simple demo applications. While still rudimentary, the demo applications are more realistic in terms of how they derive the query string.

---

Next: More Examples