The very first thing to do is to set up a basic flex application - the code below represents close to the simplest one possible. This sets up an application with specified height and width and also adds the view source option to the movie, with the source file specified by "viewSourceURL" attribute. 

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

layout="absolute" width="482" height="348"

viewSourceURL="../files/JSTutorial.mxml">

</mx:Application>

 The next step in the process is to setup a simple flex interface with no functionality built in. We put a panel into our application and give it a title. Next we add the DataGrid object which we will bind our data to. In the DataGrid we add a couple columns (DataGridColumn), take notice to the dataField names as they will define the keys for our incoming data. So in this case our data coming in should have values from 3 keys: "Name", "Age" and "Sex". We also add a button, which will later be used to call a Javascript function on our page. Lastly we add a label to give us a quick status update when sending the data to Javascript. We also give each of the ui components an id so that we can refer to them later. All this code goes inside the application tags.

<mx:Panel id="pnlMain" x="10" y="10" width="462" height="328" 

layout="absolute" title="Simple Javascript Interaction">

<mx:DataGrid id="dgPeople" x="10" y="10" width="422" 

height="229">

<mx:columns>

<mx:DataGridColumn headerText="Name" dataField="Name"/>

<mx:DataGridColumn headerText="Age" dataField="Age"/>

<mx:DataGridColumn headerText="Sex" dataField="Sex"/>

</mx:columns>

</mx:DataGrid>

<mx:Button x="10" y="256" label="JavaScript Display" 

id="butJSDisplay" />

<mx:Label x="149" y="260" id="lblMessage"/>

</mx:Panel>

At this point you should be able to compile and run to see your small interface.