I have been hanging out in the chatroom of the Dev Chat app that Mike Chambers and Greg Burch built for Central. It's nice in there. The topics of discussion range from Central to Flash to Flashcom to, um, much more personal stuff. A lot of the regulars in there are well-known in the Flash community, such as Phillip Kerman, Eric Dolecki, and Peter Hall, and there are others who aren't as well-known but probably will be someday. There are usually between 10 and 30 users online, so there is always a murmur going on in there but it doesn't get overwhelming. You should stop by sometime, especially if you are interested in learning about Central. Some of the chatters are developing Central apps as we speak!

What's most interesting about the Central Dev Chat is the live webcam contingent. Several users broadcast live streams while they chat. I have seen office walls, couches, computer screens and little dragons. I have also seen Sean Voisen wear his wrestling mask, Peter Hall pick his nose and Mike Chambers show off his Xbox. It's been very entertaining, to say the least.

 posted by Vera Fleischer (10/11/2003 07:13:48 AM);

After my last post, Tim alerted me to the fact that the columns didn't sort in my DataGrid example. He wasn't lying. Clicking on the column labels didn't do anything.

The DataGrid seems to have trouble sorting data that has been delivered through DataBinding. But! For my particular example, there are two workarounds that enable you to display the web service results in the DataGrid and still sort the results.

The first workaround involves the DataSet component and was graciously passed on to me by Peter Elst. If you first bind the results from the WebServiceConnector to a DataSet and then bind the DataSet to the DataGrid, the sorting capabilities are retained. You will need one instance each of the WebServiceConnector, the DataSet and the DataGrid. Then set up the following DataBinding chain:

WebServiceConnector.results -> DataSet.dataProvider -> DataGrid.dataProvider

Before, all we were doing was:

WebServiceConnector.results -> DataGrid.dataProvider

The second workaround does the DataBinding via ActionScript, i.e. it doesn't use the Component Inspector's binding tab. All you need on the stage are a DataGrid component named my_dg and a WebServiceConnector named my_wsc. (This is assuming that the WebServiceConnector is set up with a method call to the getBlogsOnTap() method of the Fullasagoog web service. See last post for details.) Do not add any bindings or behaviors. Create an actions layer and add the following:


// on result, populate DataGrid with results
resultHandler = function (e) {
   my_dg.dataProvider = e.target.results;
}

// add event listener for the "result" event
my_wsc.addEventListener("result", resultHandler);

// trigger the web service call; my earlier
// example used a behavior to do this
my_wsc.trigger();


Believe it or not, but that's it. It will give you the same result as my earlier DataGrid example, but this time the sorting will work!

 posted by Vera Fleischer (10/7/2003 06:32:31 PM);

Peter Elst recently put together a little example that uses the Fullasagoog web service. I tried to recreate this example myself. It was not as easy as I expected and I ended up asking Peter for help. Since I'm probably not the only person who doesn't intuitively know how to combine a web service with DataBinding in Flash, here are some instructions.

For this example, the easiest way to access all the information sent back from the Fullasagoog web service is to use a Datagrid component. The Fullasagoog web service returns an array of objects, each having four properties: blogdesc, blogid, blogname, and urlwebsite. Since the Datagrid component has a dataProvider property, we can map the array of objects returned by the web service to it via DataBinding. This will create one column for each of the four object properties in the Datagrid and populate them with the values for each blog. Here is an example of what that looks like:

To recreate this example, follow these steps:

1. Go to Window > Development Panels > Web Services.

2. In the Web Services Panel, click on the globe to define a new web service.

3. Click on the plus.

4. Enter the WSDL for the Fullasagoog web service: http://www.fullasagoog.com/packages/googservice.cfc?wsdl. The WSDL can be found on the Fullasagoog web service page.

5. Click OK. The Web Services Panel should now have an entry called "googServiceService." If you expand it, you will see the available web service method calls, getBlend() and getBlogsOnTap(). We will be using getBlogsOnTap(), which returns an array of all the blogs that are aggregated by Fullasagoog.

6. Right-click (Ctrl-click on Mac) on the getBlogsOnTap() method and select Add Method Call. This will add a WebServiceConnector component to the stage with the WSDLURL parameter already set to the Fullasagoog WSDL and the operation parameter set to getBlogsOnTap. If we had added the WebServiceConnector to the stage manually, we would have had to set these parameters manually as well.

7. Give the WebServiceConnector an instance name of "fullasagoog_wsc."

8. Drag a Datagrid component to the stage and give it an instance name of "fullasagoog_dg."

9. Now we're going to bind some data. With the Datagrid selected, open the Component Inspector and go to the Bindings tab.

10. Click on the plus.

11. Select dataProvider : Array and click OK.

12. Back in the Component Inspector, select the bound to name/value pair and click on the hour glass.

13. Like I mentioned earlier, we are going to bind the Datagrid's dataProvider to the array of objects returned by the web service call: Select the WebServiceConnector icon under Component Path and then select results: Array under Schema location.

14. Click OK. The binding is done!

15. The last thing we need to do is invoke the method call. The easiest way to do this is via a behavior. With the Datagrid selected, open the Behaviors Panel.

16. Click on the plus.

17. Go to Data > Trigger Data Source.

18. For the Data Source Component, select the WebServiceConnector instance.

19. Click OK.

20. In the Behaviors Panel, click on the Event drop-down menu and change the event to "load."

You're done! On load of the Datagrid, the WebServiceConnector will connect to the Fullasagoog web service. Since the Datagrid is bound to the results of the web service call, it will be populated with the results. Test movie and see for yourself. The Datagrid has four columns - blogdesc, blogid, blogname, urlwebsite - which collectively display information about the blogs on tap at fullasagoog. We did all of this without manually writing any code.

This one I was able to figure out by myself. Now we are going to try a slightly more complicated type of DataBinding a la Peter Elst's example. But instead of just displaying information about each blog, we are also going to add a Go To Web Page behavior which links to the URL of the selected blog. Below is what that will look like.

To recreate this example, start a new .fla and follow these steps:

1. The Fullasagoog web service should already be set up in the Web Services Panel from the first example. If not, follow steps 1 through 5 from above.

2. Right-click (Ctrl-click on Mac) on the getBlogsOnTap() method and select Add Method Call.

3. Give the WebServiceConnector an instance name of "fullasagoog_wsc."

4. Drag a ComboBox, TextArea and Button components (one each) to the stage and place them in that order from top to bottom.

5. Name the instances "url_cb," "blog_ta" and "url_btn."

6. Now we are going to bind some data again. Here comes the tricky part. This time, we want to pick and choose between available properties instead of displaying everything at once like we did with the DataGrid. More specifically, we want to populate the ComboBox with the list of URL's available on Fullasagoog. This means that we need to somehow bind the urlwebsite property of each blog to the label property of the ComboBox. With the ComboBox selected, go to the Bindings tab of the Components Inspector.

7. Click the plus.

8. Select dataProvider : Array and click OK.

9. Back in the Component Inspector, select the bound to name/value pair and click on the hour glass.

10. Like before, select the WebServiceConnector icon under Component Path and then select results: Array under Schema location and click OK.

11. Here comes what's new: In the Component Inspector, set the formatter field to Rearrange Fields.

12. Select the formatter options name/value pair and click on the hour glass.

13. In the Fields Definitions field, enter label=urlwebsite. This will bind the ComboBox label to the urlwebsite property for each object in the array. Don't close the dialog yet.

14. But urlwebsite is not the only data we need from Fullasagoog. When a blog is selected from the ComboBox, we would like to display some information in the TextArea in the following format, just like in the example .swf above:
[blogname] - [blogdesc]

We will store this in the data property of the ComboBox until we need it, i.e. until a blog is selected from the ComboBox. The name of the formatter is Rearrange Fields because we are taking fields from the results and rearranging them in a new string with the desired format:

data='<blogname> - <blogdesc>'

Add this to the Fields Definitions field in the Rearrange Fields dialog, separating the label and data assignments with a semicolon. The final string in the Fields Definitions field should be:

label=urlwebsite;data='<blogname> - <blogdesc>'

15. Click OK.

16. We need to add a Trigger Data Source behavior to the ComboBox to populate it with the URL's on load. With the ComboBox selected, open the Behaviors Panel.

17. Click on the plus.

18. Go to Data > Trigger Data Source.

19. For the Data Source Component, select the WebServiceConnector instance.

20. Click OK. In the Behaviors Panel change the event to "load."

21. When a blog URL is selected from the ComboBox, we want the value of the ComboBox's data property to be displayed in the TextArea. This means that we need to add another binding. With the ComboBox selected, go to the Bindings tab in the Component Inspector.

22. Click on the plus.

23. Select selectedItem : Object.

24. Since we need to bind to the data property of selectedItem and not selectedItem itself, we need to use a path expression. Check the checkbox next to Use Path Expression and enter "data" in the field.

25. Click OK.

26. Back in the Component Inspector, select the bound to name/value pair and click on the hour glass.

27. Select the TextArea icon under Component Path and then select text : String under Schema location.

28. Click OK. You can test movie to see the TextArea component populated whenever a blog is selected from the ComboBox. We have basically recreated Peter Elst's example now with a slight variation of how the blog parameters are used and displayed. But let's add a button that will take you directly to the URL of the selected blog.

29. With the button selected, go to the Behaviors Panel.

30. Click on the plus.

31. Go to Web > Go to Web Page.

32. In the URL field, enter _parent.url_cb.selectedItem.label because the label property of the ComboBox holds the URL for each blog. Set Open in to "_blank".

33. Leave the event as is (click) and Click OK.

34. We are going to cheat Flash into thinking that the Go to Web Page behavior can take a dynamic URL. As far as I know, the URL needs to be hard-coded, which is why quotes are automatically put around it. But the URL we just entered is dynamic, so we need to remove the quotes from the code. This is the only time in this entire project where we actually deal with any code. With the Button component selected, open the Actions Panel. Delete the quotes that are around _parent.url_cb.selectedItem.label.

35. That's it! Test movie.

Sorry about the long list of numbered baby steps. I think it really becomes evident here that I'm a QA.

For more information about the world of DataBinding, I recommend Peter Hall's DataBinding tutorial on UltraShock.

 posted by Vera Fleischer (10/5/2003 10:42:35 AM);