IThere are few things that people like to do more than give their opinion about a subject of interest to them – especially on the Web. This can be very useful for engaging your site’s visitors, measuring their interest in a topic, or just allowing them to express themselves. Web 2.0, and the advent of Rich Internet Applications (RIAs), allow for the installation of polling widgets on your web site, making it easier than ever to take the pulse of your community.
There are several different technologies you could use to build an interactive voting widget, but the end user needs to be considered carefully. For instance, you could use Ajax – but this approach can introduce issues with client-side compatibility. You could use Applets, but that’s not a popular choice at the moment – too many web surfers disable the Java VM in their browsers.
A very good option, on the other hand, is Flash. Practically everyone has it installed – who hasn’t come across a link to YouTube at some point and wanted to watch a video?
But what if you’re not across Flash? And isn’t Flash really an animator’s tool anyway? Well, as we’ll see, it’s easy for developers to build Flash applications using the Flex framework – freely available as open source from Adobe. In this article, the first of two on this complex subject, we’ll walk through the process of building a Flash widget for voting using the Flex framework.
Flex Basics
Before we go any further, we’ll pause for a minute to talk about the Flex and Flash applications and where they fit into the client landscape. Take a look at the following graphic.
This diagram demonstrates how a Web 2.0 web page interacts with a PHP web server. The web page uses one of several tools to communicate with the web server. It can use Javascript and Ajax to make a request of the server, then update the page with the new data. Or it can use a Flash application to provide functionality to the user. This Flash application can either take up the entire page, or it may be contained to a widget that takes up just a portion of it. Flex has been used very successfully in both scenarios.
Flex applications are made of roughly three parts: the MXML that defines the interface, the ActionScript code that contains the application logic, and resources such as images and audio. To draw an analogy with web technologies, the MXML and ActionScript would be HTML and JavaScript respectively.
Now you could download the SDK and program your application using a simple text editor, but there’s a better option – a really good IDE called Flex Builder 3, available free from Adobe as a 30-day trial.
The following diagram shows Flex Builder 3 and how its function fits into the life cycle of generating a Flash application SWF.
Flex Builder manages the MXML, ActionScript, and resources as a project. It uses the Flex SDK compiler to continuously compile the project as you make changes. That temporary output SWF file is then launched in your default browser to do the testing.
Hopefully this provides some context for getting started with Flex. If you’d like a more detailed walk-through of this subject, I recommend you try this excellent tutorial on Flex for beginners.
Once you have Flex Builder 3 installed on your machine, launch it and you should see something like this.
This is the empty Flex IDE. The next step is to create our first Flex project. Select Flex Project from the New menu and you should see this window.
You can name your project whatever you like. I chose
After you hit Finish to build the project, you should see the result pictured below.
Flex Builder 3 automatically creates an MXML application with the same name as the project. In this case, the “voteview” project has one source file,
At this point, you’re probably thinking, “I thought we were doing Flex, so what’s this MXML?” MXML is one of the two major technologies in a Flex application; it’s a tag-based language used to build user interfaces. The other is ActionScript 3, which is the programming language that we use to add interactivity to the interface.
To make sure that everything’s working okay, we’ll add just a single tag to the MXML file, as shown here:
The
If that works, you know that everything is installed correctly and you’re all set to start developing in Flex.
The next step is to put an XML file on a web server that will contain the current vote totals. This is the data that the Flex application will fetch and display.
You can format your XML any way you choose, but something along these lines is simple enough:
This XML defines that there is one question with three options, where each option has a name and a count of votes.
Once this XML file is up on your server somewhere (in my case, the localhost Apache server on my Mac), we can add some more tags to the MXML and get this party started!
Here’s a simple Flex application that reads the data from the XML file and then displays the question in a
There are two key elements involved in the code above. The first is the
The data display is handled automatically by Flex through the magic of the Flex event model. When the
Here’s the result of launching this in Flex Builder.
Well, it works okay, but it’s not very sexy in appearance, is it? I’m all about the sexy look, so I’m going to use Flex’s built-in charting service to display the votes in a pie chart instead of a
This updated code is shown below:
The only change here is that we replaced the
Now, that’s certainly better. A picture is worth a thousand words, as they say. But could it be even cooler? As it turns out, it can; the Elixir data visualization components available from ILOG offers a set of amazing charting controls that you can use on a trial basis.
Once we’ve installed the ILOG Elixir controls on the machine, we can link them into the project by referencing the Elixir libraries. From there, we add a reference to the Elixir PieChart3D instead of to the original
This updated code is shown below:
And when brought up in Flex Builder 3, it looks like this figure.
Now we’re really cooking with gas! With Elixir we can change the rotation of the chart, the colors, the viewing angle, the lighting, and more. We can even do all that on the fly by responding to mouseclick events and changing the parameters on the chart using ActionScript. This functionality allows the voter to spin the chart around and view it from different angles.
This is about as far as I’m going to go with the interface in this article series. To finish up, I’ll demonstrate how to use a different data transport technology, AMF, instead of XML. AMF is easier to use, particularly when you’re both reading and writing data – more on this in the next instalment!
NOTE:
AMF and XML aren’t the only ways that Flex can access data. Your applications can read JSON, text, AMF, or go direct to binary data through sockets. In other words, wherever your data is and whatever the format, Flex applications can get to it.
Here’s the PHP code for
For this example, we’re just going to return the same data as we’d have gained from the XML file on the server. That way, if the results look the same we know everything’s in order.
To test the service, navigate to the
Next, click on the
We can see that the data is returned correctly as an
From here, we can change the
Yes, that’s a lot more code than the
There are few things that people like to do more than give their opinion about a subject of interest to them – especially on the Web. This can be very useful for engaging your site’s visitors, measuring their interest in a topic, or just allowing them to express themselves. Web 2.0, and the advent of Rich Internet Applications (RIAs), allow for the installation of polling widgets on your web site, making it easier than ever to take the pulse of your community.
There are several different technologies you could use to build an interactive voting widget, but the end user needs to be considered carefully. For instance, you could use Ajax – but this approach can introduce issues with client-side compatibility. You could use Applets, but that’s not a popular choice at the moment – too many web surfers disable the Java VM in their browsers.
A very good option, on the other hand, is Flash. Practically everyone has it installed – who hasn’t come across a link to YouTube at some point and wanted to watch a video?
But what if you’re not across Flash? And isn’t Flash really an animator’s tool anyway? Well, as we’ll see, it’s easy for developers to build Flash applications using the Flex framework – freely available as open source from Adobe. In this article, the first of two on this complex subject, we’ll walk through the process of building a Flash widget for voting using the Flex framework.
This diagram demonstrates how a Web 2.0 web page interacts with a PHP web server. The web page uses one of several tools to communicate with the web server. It can use Javascript and Ajax to make a request of the server, then update the page with the new data. Or it can use a Flash application to provide functionality to the user. This Flash application can either take up the entire page, or it may be contained to a widget that takes up just a portion of it. Flex has been used very successfully in both scenarios.
Flex applications are made of roughly three parts: the MXML that defines the interface, the ActionScript code that contains the application logic, and resources such as images and audio. To draw an analogy with web technologies, the MXML and ActionScript would be HTML and JavaScript respectively.
Now you could download the SDK and program your application using a simple text editor, but there’s a better option – a really good IDE called Flex Builder 3, available free from Adobe as a 30-day trial.
The following diagram shows Flex Builder 3 and how its function fits into the life cycle of generating a Flash application SWF.
Flex Builder manages the MXML, ActionScript, and resources as a project. It uses the Flex SDK compiler to continuously compile the project as you make changes. That temporary output SWF file is then launched in your default browser to do the testing.
Hopefully this provides some context for getting started with Flex. If you’d like a more detailed walk-through of this subject, I recommend you try this excellent tutorial on Flex for beginners.
Once you have Flex Builder 3 installed on your machine, launch it and you should see something like this.
This is the empty Flex IDE. The next step is to create our first Flex project. Select Flex Project from the New menu and you should see this window.
You can name your project whatever you like. I chose
After you hit Finish to build the project, you should see the result pictured below.
Flex Builder 3 automatically creates an MXML application with the same name as the project. In this case, the “voteview” project has one source file,
At this point, you’re probably thinking, “I thought we were doing Flex, so what’s this MXML?” MXML is one of the two major technologies in a Flex application; it’s a tag-based language used to build user interfaces. The other is ActionScript 3, which is the programming language that we use to add interactivity to the interface.
To make sure that everything’s working okay, we’ll add just a single tag to the MXML file, as shown here:
The
If that works, you know that everything is installed correctly and you’re all set to start developing in Flex.
The next step is to put an XML file on a web server that will contain the current vote totals. This is the data that the Flex application will fetch and display.
You can format your XML any way you choose, but something along these lines is simple enough:
This XML defines that there is one question with three options, where each option has a name and a count of votes.
Once this XML file is up on your server somewhere (in my case, the localhost Apache server on my Mac), we can add some more tags to the MXML and get this party started!
Here’s a simple Flex application that reads the data from the XML file and then displays the question in a
There are two key elements involved in the code above. The first is the
The data display is handled automatically by Flex through the magic of the Flex event model. When the
Here’s the result of launching this in Flex Builder.
Well, it works okay, but it’s not very sexy in appearance, is it? I’m all about the sexy look, so I’m going to use Flex’s built-in charting service to display the votes in a pie chart instead of a
This updated code is shown below:
The only change here is that we replaced the
Now, that’s certainly better. A picture is worth a thousand words, as they say. But could it be even cooler? As it turns out, it can; the Elixir data visualization components available from ILOG offers a set of amazing charting controls that you can use on a trial basis.
Once we’ve installed the ILOG Elixir controls on the machine, we can link them into the project by referencing the Elixir libraries. From there, we add a reference to the Elixir PieChart3D instead of to the original
This updated code is shown below:
And when brought up in Flex Builder 3, it looks like this figure.
Now we’re really cooking with gas! With Elixir we can change the rotation of the chart, the colors, the viewing angle, the lighting, and more. We can even do all that on the fly by responding to mouseclick events and changing the parameters on the chart using ActionScript. This functionality allows the voter to spin the chart around and view it from different angles.
This is about as far as I’m going to go with the interface in this article series. To finish up, I’ll demonstrate how to use a different data transport technology, AMF, instead of XML. AMF is easier to use, particularly when you’re both reading and writing data – more on this in the next instalment!
NOTE:
AMF and XML aren’t the only ways that Flex can access data. Your applications can read JSON, text, AMF, or go direct to binary data through sockets. In other words, wherever your data is and whatever the format, Flex applications can get to it.
Here’s the PHP code for
For this example, we’re just going to return the same data as we’d have gained from the XML file on the server. That way, if the results look the same we know everything’s in order.
To test the service, navigate to the
Next, click on the
We can see that the data is returned correctly as an
From here, we can change the
A very good option, on the other hand, is Flash. Practically everyone has it installed – who hasn’t come across a link to YouTube at some point and wanted to watch a video?
But what if you’re not across Flash? And isn’t Flash really an animator’s tool anyway? Well, as we’ll see, it’s easy for developers to build Flash applications using the Flex framework – freely available as open source from Adobe. In this article, the first of two on this complex subject, we’ll walk through the process of building a Flash widget for voting using the Flex framework.
Flex Basics
Before we go any further, we’ll pause for a minute to talk about the Flex and Flash applications and where they fit into the client landscape. Take a look at the following graphic.
This diagram demonstrates how a Web 2.0 web page interacts with a PHP web server. The web page uses one of several tools to communicate with the web server. It can use Javascript and Ajax to make a request of the server, then update the page with the new data. Or it can use a Flash application to provide functionality to the user. This Flash application can either take up the entire page, or it may be contained to a widget that takes up just a portion of it. Flex has been used very successfully in both scenarios.
Flex applications are made of roughly three parts: the MXML that defines the interface, the ActionScript code that contains the application logic, and resources such as images and audio. To draw an analogy with web technologies, the MXML and ActionScript would be HTML and JavaScript respectively.
Now you could download the SDK and program your application using a simple text editor, but there’s a better option – a really good IDE called Flex Builder 3, available free from Adobe as a 30-day trial.
The following diagram shows Flex Builder 3 and how its function fits into the life cycle of generating a Flash application SWF.
Flex Builder manages the MXML, ActionScript, and resources as a project. It uses the Flex SDK compiler to continuously compile the project as you make changes. That temporary output SWF file is then launched in your default browser to do the testing.
Hopefully this provides some context for getting started with Flex. If you’d like a more detailed walk-through of this subject, I recommend you try this excellent tutorial on Flex for beginners.
Getting Flex Up and Running
The Flex Builder 3 installer comes with everything you need built in. It automatically installs the Flex SDK, as well as the Eclipse-based IDE and the AIR runtime (which is useful if you want to build a desktop application rather than a web app.Once you have Flex Builder 3 installed on your machine, launch it and you should see something like this.
This is the empty Flex IDE. The next step is to create our first Flex project. Select Flex Project from the New menu and you should see this window.
You can name your project whatever you like. I chose
Voteview
, since for the purposes of this article I’m only going to build an application that views the current vote totals. We’ll discover the interactive widget in the next article.After you hit Finish to build the project, you should see the result pictured below.
Flex Builder 3 automatically creates an MXML application with the same name as the project. In this case, the “voteview” project has one source file,
voteviewer.mxml
.At this point, you’re probably thinking, “I thought we were doing Flex, so what’s this MXML?” MXML is one of the two major technologies in a Flex application; it’s a tag-based language used to build user interfaces. The other is ActionScript 3, which is the programming language that we use to add interactivity to the interface.
To make sure that everything’s working okay, we’ll add just a single tag to the MXML file, as shown here:
tag specifies that we want a control of type Label
with the text of Hello World
where the font size is 20px. This figure shows the result of launching it in Flex Builder.If that works, you know that everything is installed correctly and you’re all set to start developing in Flex.
The next step is to put an XML file on a web server that will contain the current vote totals. This is the data that the Flex application will fetch and display.
You can format your XML any way you choose, but something along these lines is simple enough:
-
What is the best Star Wars movie?
-
-
Once this XML file is up on your server somewhere (in my case, the localhost Apache server on my Mac), we can add some more tags to the MXML and get this party started!
Here’s a simple Flex application that reads the data from the XML file and then displays the question in a
Label
control, and the current votes in a DataGrid
control:
- creationComplete="votes.send()">
-
-
-
-
-
-
-
-
mx:HTTPService
tag that defines where we will retrieve the data, and specifies an id
for the data source. This service is invoked by the code attached to the creationComplete
event on the Application
tag.The data display is handled automatically by Flex through the magic of the Flex event model. When the
HTTService
has successfully downloaded the XML, the lastResult
variable on the service notifies the Label
and the DataGrid
that it has changed. Those controls then update themselves automatically to show the new values returned by the server.Here’s the result of launching this in Flex Builder.
Well, it works okay, but it’s not very sexy in appearance, is it? I’m all about the sexy look, so I’m going to use Flex’s built-in charting service to display the votes in a pie chart instead of a
DataGrid
.This updated code is shown below:
- creationComplete="votes.send()">
-
-
-
- showAllDataTips="true"
- dataProvider="{votes.lastResult.votes.options.option}">
-
-
-
-
DataGrid
with a PieChart
control. When we run this in Flex Builder, we’ll see the window shown here.Now, that’s certainly better. A picture is worth a thousand words, as they say. But could it be even cooler? As it turns out, it can; the Elixir data visualization components available from ILOG offers a set of amazing charting controls that you can use on a trial basis.
Once we’ve installed the ILOG Elixir controls on the machine, we can link them into the project by referencing the Elixir libraries. From there, we add a reference to the Elixir PieChart3D instead of to the original
PieChart
control.This updated code is shown below:
-
- creationComplete="votes.send()" xmlns:ilog="http://www.ilog.com/2007/ilog/flex">
-
-
-
- showAllDataTips="true"
- dataProvider="{votes.lastResult.votes.options.option}" elevationAngle="30">
-
-
-
-
Now we’re really cooking with gas! With Elixir we can change the rotation of the chart, the colors, the viewing angle, the lighting, and more. We can even do all that on the fly by responding to mouseclick events and changing the parameters on the chart using ActionScript. This functionality allows the voter to spin the chart around and view it from different angles.
This is about as far as I’m going to go with the interface in this article series. To finish up, I’ll demonstrate how to use a different data transport technology, AMF, instead of XML. AMF is easier to use, particularly when you’re both reading and writing data – more on this in the next instalment!
NOTE:
AMF and XML aren’t the only ways that Flex can access data. Your applications can read JSON, text, AMF, or go direct to binary data through sockets. In other words, wherever your data is and whatever the format, Flex applications can get to it.
Going to AMF
Let’s use the free AMFPHP package to build an AMF service on the web server. AMFPHP comes with a built-in service browser, which I’ll show you in a minute, plus a directory where you put your services. In this case, we’ll add a new service to a new “votes” directory calledVoteService
.Here’s the PHP code for
VoteService
:- include_once(AMFPHP_BASE . "shared/util/MethodTable.php");
- class VoteService
- {
- function getVotes()
- {
- return array( 'topic' => 'What is the best Star Wars movie?',
- 'votes' => array(
- array( 'name' => 'Episode IV', 'count' => 150 ),
- array( 'name' => 'Episode V', 'count' => 250 ),
- array( 'name' => 'Episode III', 'count' => 50 )
- )
- );
- }
- }
To test the service, navigate to the
amfphp/browser
directory in your browser. You should see something like this.Next, click on the
votes/VoteService
and hit the Call button. This causes the AMF browser to invoke the service and display the results, as shown here.We can see that the data is returned correctly as an
ActionScript
object that’s very easy to manipulate.From here, we can change the
HTTPService
from the original PieChart
application to a RemoteObject
service. The RemoteObject
class connects to the AMF endpoint and then defines a bunch of methods. You can see this in the updated source:-
- creationComplete="voteRO.getVotes.send()">
- endpoint="http://localhost/amfphp/gateway.php"
- source="votes.VoteService" destination="votes.VoteService"
- showBusyCursor="true">
-
-
-
- showAllDataTips="true"
- dataProvider="{voteRO.getVotes.lastResult.votes}">
- ...
-
HTTPService
required to achieve the same outcome (don’t forget to download the code archive for this article). But using AMF instead of XML will make it a lot easier to perform both the vote collection and vote addition from the widget that we’ll create in the next article of this series.There are few things that people like to do more than give their opinion about a subject of interest to them – especially on the Web. This can be very useful for engaging your site’s visitors, measuring their interest in a topic, or just allowing them to express themselves. Web 2.0, and the advent of Rich Internet Applications (RIAs), allow for the installation of polling widgets on your web site, making it easier than ever to take the pulse of your community.
There are several different technologies you could use to build an interactive voting widget, but the end user needs to be considered carefully. For instance, you could use Ajax – but this approach can introduce issues with client-side compatibility. You could use Applets, but that’s not a popular choice at the moment – too many web surfers disable the Java VM in their browsers.
A very good option, on the other hand, is Flash. Practically everyone has it installed – who hasn’t come across a link to YouTube at some point and wanted to watch a video?
But what if you’re not across Flash? And isn’t Flash really an animator’s tool anyway? Well, as we’ll see, it’s easy for developers to build Flash applications using the Flex framework – freely available as open source from Adobe. In this article, the first of two on this complex subject, we’ll walk through the process of building a Flash widget for voting using the Flex framework.
Flex Basics
Before we go any further, we’ll pause for a minute to talk about the Flex and Flash applications and where they fit into the client landscape. Take a look at the following graphic.This diagram demonstrates how a Web 2.0 web page interacts with a PHP web server. The web page uses one of several tools to communicate with the web server. It can use Javascript and Ajax to make a request of the server, then update the page with the new data. Or it can use a Flash application to provide functionality to the user. This Flash application can either take up the entire page, or it may be contained to a widget that takes up just a portion of it. Flex has been used very successfully in both scenarios.
Flex applications are made of roughly three parts: the MXML that defines the interface, the ActionScript code that contains the application logic, and resources such as images and audio. To draw an analogy with web technologies, the MXML and ActionScript would be HTML and JavaScript respectively.
Now you could download the SDK and program your application using a simple text editor, but there’s a better option – a really good IDE called Flex Builder 3, available free from Adobe as a 30-day trial.
The following diagram shows Flex Builder 3 and how its function fits into the life cycle of generating a Flash application SWF.
Flex Builder manages the MXML, ActionScript, and resources as a project. It uses the Flex SDK compiler to continuously compile the project as you make changes. That temporary output SWF file is then launched in your default browser to do the testing.
Hopefully this provides some context for getting started with Flex. If you’d like a more detailed walk-through of this subject, I recommend you try this excellent tutorial on Flex for beginners.
Getting Flex Up and Running
The Flex Builder 3 installer comes with everything you need built in. It automatically installs the Flex SDK, as well as the Eclipse-based IDE and the AIR runtime (which is useful if you want to build a desktop application rather than a web app.Once you have Flex Builder 3 installed on your machine, launch it and you should see something like this.
This is the empty Flex IDE. The next step is to create our first Flex project. Select Flex Project from the New menu and you should see this window.
You can name your project whatever you like. I chose
Voteview
, since for the purposes of this article I’m only going to build an application that views the current vote totals. We’ll discover the interactive widget in the next article.After you hit Finish to build the project, you should see the result pictured below.
Flex Builder 3 automatically creates an MXML application with the same name as the project. In this case, the “voteview” project has one source file,
voteviewer.mxml
.At this point, you’re probably thinking, “I thought we were doing Flex, so what’s this MXML?” MXML is one of the two major technologies in a Flex application; it’s a tag-based language used to build user interfaces. The other is ActionScript 3, which is the programming language that we use to add interactivity to the interface.
To make sure that everything’s working okay, we’ll add just a single tag to the MXML file, as shown here:
tag specifies that we want a control of type Label
with the text of Hello World
where the font size is 20px. This figure shows the result of launching it in Flex Builder.If that works, you know that everything is installed correctly and you’re all set to start developing in Flex.
The next step is to put an XML file on a web server that will contain the current vote totals. This is the data that the Flex application will fetch and display.
You can format your XML any way you choose, but something along these lines is simple enough:
-
What is the best Star Wars movie?
-
-
Once this XML file is up on your server somewhere (in my case, the localhost Apache server on my Mac), we can add some more tags to the MXML and get this party started!
Here’s a simple Flex application that reads the data from the XML file and then displays the question in a
Label
control, and the current votes in a DataGrid
control:
- creationComplete="votes.send()">
-
-
-
-
-
-
-
-
mx:HTTPService
tag that defines where we will retrieve the data, and specifies an id
for the data source. This service is invoked by the code attached to the creationComplete
event on the Application
tag.The data display is handled automatically by Flex through the magic of the Flex event model. When the
HTTService
has successfully downloaded the XML, the lastResult
variable on the service notifies the Label
and the DataGrid
that it has changed. Those controls then update themselves automatically to show the new values returned by the server.Here’s the result of launching this in Flex Builder.
Well, it works okay, but it’s not very sexy in appearance, is it? I’m all about the sexy look, so I’m going to use Flex’s built-in charting service to display the votes in a pie chart instead of a
DataGrid
.This updated code is shown below:
- creationComplete="votes.send()">
-
-
-
- showAllDataTips="true"
- dataProvider="{votes.lastResult.votes.options.option}">
-
-
-
-
DataGrid
with a PieChart
control. When we run this in Flex Builder, we’ll see the window shown here.Now, that’s certainly better. A picture is worth a thousand words, as they say. But could it be even cooler? As it turns out, it can; the Elixir data visualization components available from ILOG offers a set of amazing charting controls that you can use on a trial basis.
Once we’ve installed the ILOG Elixir controls on the machine, we can link them into the project by referencing the Elixir libraries. From there, we add a reference to the Elixir PieChart3D instead of to the original
PieChart
control.This updated code is shown below:
-
- creationComplete="votes.send()" xmlns:ilog="http://www.ilog.com/2007/ilog/flex">
-
-
-
- showAllDataTips="true"
- dataProvider="{votes.lastResult.votes.options.option}" elevationAngle="30">
-
-
-
-
Now we’re really cooking with gas! With Elixir we can change the rotation of the chart, the colors, the viewing angle, the lighting, and more. We can even do all that on the fly by responding to mouseclick events and changing the parameters on the chart using ActionScript. This functionality allows the voter to spin the chart around and view it from different angles.
This is about as far as I’m going to go with the interface in this article series. To finish up, I’ll demonstrate how to use a different data transport technology, AMF, instead of XML. AMF is easier to use, particularly when you’re both reading and writing data – more on this in the next instalment!
NOTE:
AMF and XML aren’t the only ways that Flex can access data. Your applications can read JSON, text, AMF, or go direct to binary data through sockets. In other words, wherever your data is and whatever the format, Flex applications can get to it.
Going to AMF
Let’s use the free AMFPHP package to build an AMF service on the web server. AMFPHP comes with a built-in service browser, which I’ll show you in a minute, plus a directory where you put your services. In this case, we’ll add a new service to a new “votes” directory calledVoteService
.Here’s the PHP code for
VoteService
:- include_once(AMFPHP_BASE . "shared/util/MethodTable.php");
- class VoteService
- {
- function getVotes()
- {
- return array( 'topic' => 'What is the best Star Wars movie?',
- 'votes' => array(
- array( 'name' => 'Episode IV', 'count' => 150 ),
- array( 'name' => 'Episode V', 'count' => 250 ),
- array( 'name' => 'Episode III', 'count' => 50 )
- )
- );
- }
- }
To test the service, navigate to the
amfphp/browser
directory in your browser. You should see something like this.Next, click on the
votes/VoteService
and hit the Call button. This causes the AMF browser to invoke the service and display the results, as shown here.We can see that the data is returned correctly as an
ActionScript
object that’s very easy to manipulate.From here, we can change the
HTTPService
from the original PieChart
application to a RemoteObject
service. The RemoteObject
class connects to the AMF endpoint and then defines a bunch of methods. You can see this in the updated source:-
- creationComplete="voteRO.getVotes.send()">
- endpoint="http://localhost/amfphp/gateway.php"
- source="votes.VoteService" destination="votes.VoteService"
- showBusyCursor="true">
-
-
-
- showAllDataTips="true"
- dataProvider="{voteRO.getVotes.lastResult.votes}">
- ...
-
Written By:Jack Herrington
Jack Herrington is an engineer, author, and presenter who lives and works in the San Francisco Bay Area. He lives with his wife, daughter and two adopted dogs. When he's not writing software, books, or articles you can find him cycling, running, or in the pool training for triathlons. You can keep up with Jack's work and his writing at http://jackherrington.com.
Jack Herrington is an engineer, author, and presenter who lives and works in the San Francisco Bay Area. He lives with his wife, daughter and two adopted dogs. When he's not writing software, books, or articles you can find him cycling, running, or in the pool training for triathlons. You can keep up with Jack's work and his writing at http://jackherrington.com.
No comments:
Post a Comment