An article based on my speech at PHPConf. General overview of Flex and PHP & Flex bundles
The article will be useful to those who want to get acquainted with Flex and its integration with PHP, evaluate the pros and cons of using this solution in production. I want to note the performance of almost two years ago, but much (almost all =) is still relevant.
PHP & Flex, the “new” alternative for creating rich Internet applications
')
The main trend of the last years in the development of web applications is the increasing and better quality improvement and complexity of user interfaces. To attract users, it is necessary to make more convenient, fast and high-quality interfaces. Improved current technology, there are new. One of the brightest representatives in the RIAs building niche is the Adobe Flex product family. This material is an overview of this new technology and is intended to give a general understanding of the principles and ideas laid out in Flex and its combination with PHP. We also tried to saturate this article as much as possible with references to a more detailed description of the topics under consideration in order to facilitate further study.
What is Flex?
Adobe Flex 2 is a solution that allows you to develop RIAs based on Flash related technology. The interface description, and not only, is based on the XML - MXML dialect. Description of client logic in ActionScript3 (hereinafter AS3). As a result of the compilation, MXML is translated into normal AS code, which is passed to the mxmlc compiler to get the swf file.
Flex consists of several products:
Adobe Flex Builder - an eclipse-based IDE. Allows you to quickly develop AS3 and MXML. It has a powerful tool for visual interface design. Syntax highlighting and hints, built-in Debbuger, help and more.
Adobe Flex framework and SDK - component-based framework. Contains a huge number of extensible components, allowing to develop interfaces of any complexity. Free. Comes with Flex Builder
Adobe Flex Charting is a library that allows you to create all sorts of interactive charts and graphs. Paid
Adobe Flex Data Services is a set of server components responsible for fast and convenient data exchange between Flex and JAVA applications.
The cornerstone of all this is the set, is the Flash Player (to work with Flex applications need the 9th version). The main advantage of the player is that its work does not depend on the platform or browser! The ease of installation coupled with its amazingly small size (1.1M) contributes to its widespread distribution.
Flex application development
As mentioned above, the design of interfaces is carried out by describing them with MXML tags. For example,
MXML is also used for declarative data binding, defining event handlers, effects, communicating with remote data sources, and describing data structures.
Interface components are divided into two types:
• Controls, Navigators - interface elements. Such as Button, DataGrid, Tree, ProgressBar ...
• Containers - areas containing various controls and defining their location on the screen. Such as Hbox, Vbox, Panel, Grid ...
In fig. 1 clearly shows the structure of Flex applications:
In addition to visual components, there are other auxiliary components for building interfaces:
• Validators and Formatters - checking and formatting text. Such as RegExpvalidator, CreditCardvalidator, DateFormatter ...
• Effects - a visual or sound animation of an element that occurs over a period of time (in milliseconds). Such as all sorts of appearances, movements, rotation, magnification, sound ... The set of effects is really impressive!
• View States - interface states. Each state is characterized by a different set of components. You can switch between states, set various effects on switching.
A complete list of all interface components with examples can be found at http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html
It should be noted that the construction of interfaces is possible not only using MXML tags, it can also be described using AS code. In fact, for Flex, these are absolutely equivalent ways, it all depends on your tasks and preferences. This is explained by the fact that each MXML tag corresponds to either a class or their properties. Those. when you write:
<mx: Button label = ”Test” />
You create an instance of the Button class and initialize the label property on it.
An important feature of MXML is its extensibility. You can create your own tags (read the components) and then use them as standard ones, visually design interfaces based on them.
Example:
<andry: CustomButton label = ”Click Me” />
and
Like CSS in HTML, you can also define styles when developing Flex applications. Each visual component has its own set of style parameters, allowing you to change many aspects of its display. Styles can be changed in runtime. To define styles, Adobe has developed Flex Style Explorer , in which you can create your own styles, visually observing how each of the parameters affects the display. There is an alternative . For advanced skinning, I propose to read this article . About the division of labor between designers and programmers can be read here .
MXML has many aspects of application, some of which we briefly reviewed. However, you need to use ActionScript to describe the logic of a Flex application.
ActionScript is an object-oriented programming language based on ECMAScript Draft 4 (ECMA-262) . The main features of the language:
• Inheritance
• Interfaces
• Modularity
• Access specifiers
• Typing of variables, properties and parameters (at compile time)
• Static members
• Cast
• Reflection API
• Dynamic classes (runtime adding methods and properties)
• ECMAScript for XML (E4X). Based on ECMA-357 standard. Unlike standard XML parsing, E4X translates XML into native, language-specific data types, which makes working with XML much easier.
• DOM3 event model
And much more . Of course, the whole power of AS3 is determined by its framework, which has very rich capabilities - advanced event management, collections ... a huge number of components included an impressive hierarchy of Flex Framework classes.
You can use ActionScript in your Flex applications by adding blocks of code using the <mx: Script> tag or, including external ActionScript files. You can also import external class files or whole packages for use in an MXML application. Flex extracts ActionScript and creates a class file, which is then linked to the final SWF file. Components created in ActionScript can contain graphic elements, define their business logic, or extend existing Flex components. They can be inherited from any components available in Flex.
Other aspects of Flex application development
When deciding on the development of an application based on a particular product, we evaluate not only the capabilities of the language, we also need to assess the quantity, and most importantly the quality, of software products that contribute to the accepted software development process.
Of course, every software must be documented. The “standard” of documenting code has become JavaDoc style comments. Adobe developers did not deviate from this style and made ASDoc . Unfortunately, having forgotten to build his support into the builder.
Naturally, software needs to be tested and, preferably, not only with hands. There are three projects for testing Flex applications:
• Mercury QuickTest Professional for functional, acceptance testing.
• FlexUnit for unit testing. Unfortunately, it is still quite raw.
• Flex Stress Testing Framework for load testing.
A good style in software development is the use of design patterns. This improves the system architecture, helps other developers to quickly understand it. In the world of Flex, the Cairngorm architectural framework, which is a lightweight collection of design patterns, has gained popularity in this area. The quality and popularity of this framework led to its upcoming inclusion in the new version of the Flex Framework.
For interaction between ActionScript and JavaScript, you can use the Flex-Ajax Bridge , which allows you to work with AS from JS and back. Also, this library will be useful for a smoother transition from JS to AS.
I will briefly touch on the new Adobe product - Apollo (now AIR). Its main task is to allow web developers to create full-fledged desktop applications. According to the developers, applications can be written in Flex, HTML & JavaScript, PDF. Recently, the first alpha was released, in which functions of working with the file system are already available. Perhaps there will be support for windows API and databases. The first release is scheduled for the end of the year.
Of course, the list of useful software products is not limited to this. If you use some other products in daily development, try to find their analogues by yourself .
HTML & JavaScript vs MXML & ActionScript
Despite the categorical nature of the title of this section, the authors do not consider these approaches to the development of web applications to be mutually exclusive and even vice versa.
All the same, for starters we turn to the comparison:
Flex applications have two major drawbacks (the prevalence and size of the swf file), which make it impossible to completely replace a bunch of HTML & JavaScript. Is it necessary? I think not, and it's not just these flaws. HTML & JavaScript has long established itself as a standard for web development. A huge number of websites, software, integration has been written ... And most importantly, in this case, the ideology of the world wide web is lost - this is a set of linked pages. This is not the same as a set of applications that must have a sufficient degree of interactivity and dynamics. Where is the border, you ask. I think it's up to you.
At the moment, I think there are three areas of application for Flex applications.
• Corporate applications. Increasingly popular in the enterprise market, are gaining web interfaces with obvious advantages. Flex is perfect for this area. It allows you to quickly and easily create interactive, dynamic, beautiful web applications. And the beauty and functionality of interactive vector graphics should hit just everyone .
• Web interfaces for common user applications. Adobe is planning to release an online version of photoshop, guess what it will be. Already there is an online version of the office ... With the release of Apollo, it will become even easier to develop such applications.
• Sites, portals ... Of course, it is not always necessary to make the entire site on Flex. Think about what functionality falls under the RIA and implement it separately as a Flex application, you can always easily interact with the non-flash part.
Better to see once than hear a hundred times
The most impressive component I've seen lately is the FlexBook . The idea is that this is a regular book in front of you, which you can scroll through, with your mouse, in any order. Each page can contain any Flex components (in Figure 2, just a picture with text and background), and in the case of Apollo and HTML. This is truly a web page.
Google Finance . A good example of the use of interactive graphics in large systems.
Yahoo Maps. An excellent example of the application of Flex applications on sites with high load.
Picnik . I think, looking at this site, Adobe decided to make an online version of photoshop. Despite the fact that the system is still in beta, it has a very impressive functionality for image processing and editing.
PHP and Flex frameworks
general description
The main role of the frameworks in question is the exchange of data between the Flex application and the server part.
In fact, there are several ways to get data from PHP:
• Use frameworks that serialize data to AMF format. Component RemoteObject
• SOAP requests. WebService component
• Just use GET and POST requests. HTTPService component
• Sockets (including binary)
Various protocols are supported: RTMP / RTMPS (for multimedia transmission), HTTP, HTTPS, TCP ... And using binary sockets, you can write code that allows you to interact with various protocols.
Exchange data, you can also in different formats, the most popular are:
• AMF (Action Message Format). Binary format
• XML
• JSON
Let us dwell on the AMF format. This format is used by Flash Player for effective interaction between Flash applications and the server. In it, in a compact form, RPC (Remote Procedure Call) and data are encoded, which is much more efficient than sending XML. There are two versions of the format AMF0 and AMF3. The first is used in AS1 and AS2. Second, AS3 is supported exclusively and more efficient than AMF0.
Framework Comparison
We will consider three main frameworks - AMFPHP, WEBORB, SabreAMF (now there is ZendAMF). All of them allow you to use RPC. All frameworks are free.
It should be noted that in general, basic things are done in the same way. Highlight points that are common to all frameworks:
1. Support AMF3. The client uses the standard <mx: RemoteObject> component. Those. no matter which of the three frameworks you use on the server, in a Flex application the methods of work will be the same.
2. Mapping between Flex and PHP.
3. Supports PHP5
AMFPHP
Benefits:
1. Support for php_amf extension, which significantly increases the performance of the framework. Since the encoding of objects is implemented in C ++, which makes AMFPHP the fastest RPC framework for Flash.
2. Convenient support for different encodings
3. HTML browser for services. Allows you to test and debug server code without using Flex. Using the browser, you can get the results and speed of the methods.
4. Built-in authorization tools
5. Works under PHP4 / PHP5 and does not require any additional libraries.
6. Logging requests / responses
7. JSON support
8. XMLRPC support
9. Integrated into many frameworks (Drupal, WordPress ...)
10. Easy installation
Minuses:
1. Not enough documentation.
2. Managed by one person (Patrick Mineault).
3. Additional steps are needed for class mapping.
4. Does not support E_STRICT, it is clear why.
WEBORB
Benefits:
1. Developed by WebORB, which develops similar products for .NET, JAVA, Ruby.
2. Fully automatic class mapping
3. Built-in authorization tools
4. Logging
5. Easy installation
Minuses:
1. Very little documentation.
2. Not convenient work with codings
3. Does not support PHP4
4. No HTML browser for services
Sabreamf
Benefits:
1. Lightweight, makes only the most necessary.
Minuses
1. Virtually no documentation.
2. Supported by one person.
3. No means of authorization.
4. No HTML browser for services.
5. Does not support PHP4.
6. There is no logging.
7. To install and configure, you need to perform several opaque steps, which are described in pieces in different places.
8. Not convenient work with encodings
The choice of one of the frameworks, of course, is yours. But for me it is so obvious. AMFPHP is the most experienced fighter, and for the time being he is above all the rest. WEBORB has good potential due to its product line. Note that WEBORB is planning a paid enterprise version for PHP. The fate of SabreAMF is questionable.
Working with frameworks
Configure Flex Builder to work with frameworks.
Create a new project, for example, “dummy” in Flex Builder. In the project root, create the services-config.xml configuration file for services:
Then we show the compiler where the configuration file is. To do this, we look at the project properties dialog box and specify the –services directive in the properties of the compiler (Flex Compiler). As in Figure 6.
Fig. 6
This file works with all three frameworks.
If using WebORB, the file must be placed in the weborb / WEB-INF / Flex / services-config.xml directory.
Installing frameworks
Installing AMFPHP and WebORB is simple and straightforward. All you need is to download their distributions and unpack them on the server, for example, to the root directory. After that, you can immediately begin your work by placing your files in the services directory of the framework.
But with the installation and configuration of SabreAMF there may be problems, due to the meager documentation. You need to install the SabreAMF package using the pear installer, and then use the manual from the Adobe website to set up the SabreAMF. Download the manual .
All examples work without problems under all three frameworks, you just need to copy them there.
Encoding.
In AMFPHP work with various codings is provided. All you need to do is select a library that will transcode the messages and encodings. The encoding is set in the file gateway.php in the root of the framework. Find the line $ gateway-> setCharsetHandler ("utf8_decode", "ISO-8859-1", "ISO-8859-1"); and replace with the parameters you need. Flash works with utf-8 encoding.
In all other frameworks, such a function was not noticed, and therefore the transcoding will need to be done manually.
An example of a simple data acquisition from the database.
Flex:
dummy.mxml
PHP:
Users.php
Example of class mapping:
WebORB fully automatically performs class mapping .
Some settings are required for AMFPHP:
1. All mapped classes must contain the
$ _explicitType property , indicating the type of the object.
In our example, $ _explicitType = "dummy.vo.UserVO";
2. It is necessary to indicate where the mapped classes are located in the globals.php file in the framework root. For our example, I set $ voPath = $ servicesPath. This is necessary for correct mapping of classes transferred from a Flex application.
Flex:
Create a UserVO class and save it in the vo folder:
UserVO.as
In order for a class to be mapped to classes on a server, you must specify how it is called there by specifying metadata [RemoteClass (alias = "class")].
Now we will create a similar class on the server and save it in the vo folder:
UserVO.php
dummy.mxml
And a little bit correct Users.php.
PHP:
Users.php
To pass arguments, the server only needs to specify them in the appropriate sequence when calling the method. For example, create a new user.
Flex:
dummy.mxml
PHP:
Users.php
useful links
www.adobe.com/products/flex - the starting point itself, the official website of the manufacturer.
flex.org - a lot of materials on Flex. I highly recommend to get acquainted with the links given there, links to the blogs of developers and not only.
www.cflex.net - articles, libraries.
www.quietlyscheming.com/blog - Ely Greenfield's blog. Spread out awesome source code components.
Groups:
groups.yahoo.com/group/flexcoders
groups.yahoo.com/group/flexcomponents
groups.google.com/group/ruflex?lnk=srg&hl=en
video.onflex.org - video on Flex technologies.
PHP & Flex, the “new” alternative for creating rich Internet applications
')
The main trend of the last years in the development of web applications is the increasing and better quality improvement and complexity of user interfaces. To attract users, it is necessary to make more convenient, fast and high-quality interfaces. Improved current technology, there are new. One of the brightest representatives in the RIAs building niche is the Adobe Flex product family. This material is an overview of this new technology and is intended to give a general understanding of the principles and ideas laid out in Flex and its combination with PHP. We also tried to saturate this article as much as possible with references to a more detailed description of the topics under consideration in order to facilitate further study.
What is Flex?
Adobe Flex 2 is a solution that allows you to develop RIAs based on Flash related technology. The interface description, and not only, is based on the XML - MXML dialect. Description of client logic in ActionScript3 (hereinafter AS3). As a result of the compilation, MXML is translated into normal AS code, which is passed to the mxmlc compiler to get the swf file.
Flex consists of several products:
Adobe Flex Builder - an eclipse-based IDE. Allows you to quickly develop AS3 and MXML. It has a powerful tool for visual interface design. Syntax highlighting and hints, built-in Debbuger, help and more.
Adobe Flex framework and SDK - component-based framework. Contains a huge number of extensible components, allowing to develop interfaces of any complexity. Free. Comes with Flex Builder
Adobe Flex Charting is a library that allows you to create all sorts of interactive charts and graphs. Paid
Adobe Flex Data Services is a set of server components responsible for fast and convenient data exchange between Flex and JAVA applications.
The cornerstone of all this is the set, is the Flash Player (to work with Flex applications need the 9th version). The main advantage of the player is that its work does not depend on the platform or browser! The ease of installation coupled with its amazingly small size (1.1M) contributes to its widespread distribution.
Flex application development
As mentioned above, the design of interfaces is carried out by describing them with MXML tags. For example,
<WebService id="ws" wsdl="some.wsdl"> <Button label="Get Data" click="ws.getData()"> <DataGrid dataProvider=”{ws.getData.result}”> <LineChart dataProvider=”{ws.getData.result}”>
<WebService id="ws" wsdl="some.wsdl"> <Button label="Get Data" click="ws.getData()"> <DataGrid dataProvider=”{ws.getData.result}”> <LineChart dataProvider=”{ws.getData.result}”>
MXML is also used for declarative data binding, defining event handlers, effects, communicating with remote data sources, and describing data structures.
Interface components are divided into two types:
• Controls, Navigators - interface elements. Such as Button, DataGrid, Tree, ProgressBar ...
• Containers - areas containing various controls and defining their location on the screen. Such as Hbox, Vbox, Panel, Grid ...
In fig. 1 clearly shows the structure of Flex applications:
In addition to visual components, there are other auxiliary components for building interfaces:
• Validators and Formatters - checking and formatting text. Such as RegExpvalidator, CreditCardvalidator, DateFormatter ...
• Effects - a visual or sound animation of an element that occurs over a period of time (in milliseconds). Such as all sorts of appearances, movements, rotation, magnification, sound ... The set of effects is really impressive!
• View States - interface states. Each state is characterized by a different set of components. You can switch between states, set various effects on switching.
A complete list of all interface components with examples can be found at http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html
It should be noted that the construction of interfaces is possible not only using MXML tags, it can also be described using AS code. In fact, for Flex, these are absolutely equivalent ways, it all depends on your tasks and preferences. This is explained by the fact that each MXML tag corresponds to either a class or their properties. Those. when you write:
<mx: Button label = ”Test” />
You create an instance of the Button class and initialize the label property on it.
An important feature of MXML is its extensibility. You can create your own tags (read the components) and then use them as standard ones, visually design interfaces based on them.
Example:
<andry: CustomButton label = ”Click Me” />
and
package{
import mx.controls.Button;
public class CustomButton extends Button{
public function CustomButton(){
super();
}
}
}
Like CSS in HTML, you can also define styles when developing Flex applications. Each visual component has its own set of style parameters, allowing you to change many aspects of its display. Styles can be changed in runtime. To define styles, Adobe has developed Flex Style Explorer , in which you can create your own styles, visually observing how each of the parameters affects the display. There is an alternative . For advanced skinning, I propose to read this article . About the division of labor between designers and programmers can be read here .
MXML has many aspects of application, some of which we briefly reviewed. However, you need to use ActionScript to describe the logic of a Flex application.
ActionScript is an object-oriented programming language based on ECMAScript Draft 4 (ECMA-262) . The main features of the language:
• Inheritance
• Interfaces
• Modularity
• Access specifiers
• Typing of variables, properties and parameters (at compile time)
• Static members
• Cast
• Reflection API
• Dynamic classes (runtime adding methods and properties)
• ECMAScript for XML (E4X). Based on ECMA-357 standard. Unlike standard XML parsing, E4X translates XML into native, language-specific data types, which makes working with XML much easier.
• DOM3 event model
And much more . Of course, the whole power of AS3 is determined by its framework, which has very rich capabilities - advanced event management, collections ... a huge number of components included an impressive hierarchy of Flex Framework classes.
You can use ActionScript in your Flex applications by adding blocks of code using the <mx: Script> tag or, including external ActionScript files. You can also import external class files or whole packages for use in an MXML application. Flex extracts ActionScript and creates a class file, which is then linked to the final SWF file. Components created in ActionScript can contain graphic elements, define their business logic, or extend existing Flex components. They can be inherited from any components available in Flex.
Other aspects of Flex application development
When deciding on the development of an application based on a particular product, we evaluate not only the capabilities of the language, we also need to assess the quantity, and most importantly the quality, of software products that contribute to the accepted software development process.
Of course, every software must be documented. The “standard” of documenting code has become JavaDoc style comments. Adobe developers did not deviate from this style and made ASDoc . Unfortunately, having forgotten to build his support into the builder.
Naturally, software needs to be tested and, preferably, not only with hands. There are three projects for testing Flex applications:
• Mercury QuickTest Professional for functional, acceptance testing.
• FlexUnit for unit testing. Unfortunately, it is still quite raw.
• Flex Stress Testing Framework for load testing.
A good style in software development is the use of design patterns. This improves the system architecture, helps other developers to quickly understand it. In the world of Flex, the Cairngorm architectural framework, which is a lightweight collection of design patterns, has gained popularity in this area. The quality and popularity of this framework led to its upcoming inclusion in the new version of the Flex Framework.
For interaction between ActionScript and JavaScript, you can use the Flex-Ajax Bridge , which allows you to work with AS from JS and back. Also, this library will be useful for a smoother transition from JS to AS.
I will briefly touch on the new Adobe product - Apollo (now AIR). Its main task is to allow web developers to create full-fledged desktop applications. According to the developers, applications can be written in Flex, HTML & JavaScript, PDF. Recently, the first alpha was released, in which functions of working with the file system are already available. Perhaps there will be support for windows API and databases. The first release is scheduled for the end of the year.
Of course, the list of useful software products is not limited to this. If you use some other products in daily development, try to find their analogues by yourself .
HTML & JavaScript vs MXML & ActionScript
Despite the categorical nature of the title of this section, the authors do not consider these approaches to the development of web applications to be mutually exclusive and even vice versa.
All the same, for starters we turn to the comparison:
| HTML & JavaScript | MXML & ActionScript | |
| Cross-browser compatibility | Hateful scourge javascript! A lot of effort is required to ensure this feature. With HTML, things are also not the best way. Completely identical work in all browsers. Who develops there are standards. There are browser developers. There is a feeling that they live in different worlds. Supported and actively developed by the Adobe System. Functional language I will not be afraid of this word, at a prehistoric level. The dynamics of introducing new functionality into the language is simply terrifying. Somehow only frameworks save. As for HTML, naturally, it has a large built-in functionality. | A few orders ahead of JavaScript. By the way, Adobe and Mozilla are only planning to bring JS to the ECMAScript standard (ECMA-262), which is already implemented in AS. The power of a language is also determined by its framework, the functionality of which is ahead of any of the JS frameworks. Application size Relatively small Large enough. It is connected with the need to include framework functionality in Flex applications. And that is why Flash Player has such small sizes (1.1M). |
| Prevalence | Everywhere. A huge number of various materials, software and specialists | is gaining momentum (it should be noted, at a rapid pace). A relatively small number of specialists. |
| Indexing by search engines | In addition to specific Ajax applications. It all depends on the developer. | Only static text and links are indexed. Weak indexing is usually explained by the high level of agility of Flex applications. To improve indexing, I recommend reading this article. From a recent interview with Google, it became clear that they (most likely, together with Adobe) are planning to improve indexing in the near future. (has already!) |
| RIAs development speed | Low It is connected with the lack of a full-fledged development environment and debugging of JS applications, as well as with the complexity of the solutions themselves. | High enough. Despite the fact that the development environment is far from perfect, it still allows you to do many things simply and quickly. A visual design environment, helps to quickly create quite nice interfaces, even without the special skills of the designer and layout designer. |
Flex applications have two major drawbacks (the prevalence and size of the swf file), which make it impossible to completely replace a bunch of HTML & JavaScript. Is it necessary? I think not, and it's not just these flaws. HTML & JavaScript has long established itself as a standard for web development. A huge number of websites, software, integration has been written ... And most importantly, in this case, the ideology of the world wide web is lost - this is a set of linked pages. This is not the same as a set of applications that must have a sufficient degree of interactivity and dynamics. Where is the border, you ask. I think it's up to you.
At the moment, I think there are three areas of application for Flex applications.
• Corporate applications. Increasingly popular in the enterprise market, are gaining web interfaces with obvious advantages. Flex is perfect for this area. It allows you to quickly and easily create interactive, dynamic, beautiful web applications. And the beauty and functionality of interactive vector graphics should hit just everyone .
• Web interfaces for common user applications. Adobe is planning to release an online version of photoshop, guess what it will be. Already there is an online version of the office ... With the release of Apollo, it will become even easier to develop such applications.
• Sites, portals ... Of course, it is not always necessary to make the entire site on Flex. Think about what functionality falls under the RIA and implement it separately as a Flex application, you can always easily interact with the non-flash part.
Better to see once than hear a hundred times
The most impressive component I've seen lately is the FlexBook . The idea is that this is a regular book in front of you, which you can scroll through, with your mouse, in any order. Each page can contain any Flex components (in Figure 2, just a picture with text and background), and in the case of Apollo and HTML. This is truly a web page.
Google Finance . A good example of the use of interactive graphics in large systems.
Yahoo Maps. An excellent example of the application of Flex applications on sites with high load.
Picnik . I think, looking at this site, Adobe decided to make an online version of photoshop. Despite the fact that the system is still in beta, it has a very impressive functionality for image processing and editing.
PHP and Flex frameworks
general description
The main role of the frameworks in question is the exchange of data between the Flex application and the server part.
In fact, there are several ways to get data from PHP:
• Use frameworks that serialize data to AMF format. Component RemoteObject
• SOAP requests. WebService component
• Just use GET and POST requests. HTTPService component
• Sockets (including binary)
Various protocols are supported: RTMP / RTMPS (for multimedia transmission), HTTP, HTTPS, TCP ... And using binary sockets, you can write code that allows you to interact with various protocols.
Exchange data, you can also in different formats, the most popular are:
• AMF (Action Message Format). Binary format
• XML
• JSON
Let us dwell on the AMF format. This format is used by Flash Player for effective interaction between Flash applications and the server. In it, in a compact form, RPC (Remote Procedure Call) and data are encoded, which is much more efficient than sending XML. There are two versions of the format AMF0 and AMF3. The first is used in AS1 and AS2. Second, AS3 is supported exclusively and more efficient than AMF0.
Framework Comparison
We will consider three main frameworks - AMFPHP, WEBORB, SabreAMF (now there is ZendAMF). All of them allow you to use RPC. All frameworks are free.
It should be noted that in general, basic things are done in the same way. Highlight points that are common to all frameworks:
1. Support AMF3. The client uses the standard <mx: RemoteObject> component. Those. no matter which of the three frameworks you use on the server, in a Flex application the methods of work will be the same.
2. Mapping between Flex and PHP.
3. Supports PHP5
AMFPHP
Benefits:
1. Support for php_amf extension, which significantly increases the performance of the framework. Since the encoding of objects is implemented in C ++, which makes AMFPHP the fastest RPC framework for Flash.
2. Convenient support for different encodings
3. HTML browser for services. Allows you to test and debug server code without using Flex. Using the browser, you can get the results and speed of the methods.
4. Built-in authorization tools
5. Works under PHP4 / PHP5 and does not require any additional libraries.
6. Logging requests / responses
7. JSON support
8. XMLRPC support
9. Integrated into many frameworks (Drupal, WordPress ...)
10. Easy installation
Minuses:
1. Not enough documentation.
2. Managed by one person (Patrick Mineault).
3. Additional steps are needed for class mapping.
4. Does not support E_STRICT, it is clear why.
WEBORB
Benefits:
1. Developed by WebORB, which develops similar products for .NET, JAVA, Ruby.
2. Fully automatic class mapping
3. Built-in authorization tools
4. Logging
5. Easy installation
Minuses:
1. Very little documentation.
2. Not convenient work with codings
3. Does not support PHP4
4. No HTML browser for services
Sabreamf
Benefits:
1. Lightweight, makes only the most necessary.
Minuses
1. Virtually no documentation.
2. Supported by one person.
3. No means of authorization.
4. No HTML browser for services.
5. Does not support PHP4.
6. There is no logging.
7. To install and configure, you need to perform several opaque steps, which are described in pieces in different places.
8. Not convenient work with encodings
The choice of one of the frameworks, of course, is yours. But for me it is so obvious. AMFPHP is the most experienced fighter, and for the time being he is above all the rest. WEBORB has good potential due to its product line. Note that WEBORB is planning a paid enterprise version for PHP. The fate of SabreAMF is questionable.
Working with frameworks
Configure Flex Builder to work with frameworks.
Create a new project, for example, “dummy” in Flex Builder. In the project root, create the services-config.xml configuration file for services:
<?xml version="1.0" encoding="UTF-8"?> <services-config> <services> <service id="remoting-service" class="flex.messaging.services.RemotingService" messageTypes="flex.messaging.messages.RemotingMessage"> <default-channels> <channel ref="my-amf"/> </default-channels> <destination id="users"> <properties> <source>*</source> </properties> </destination> </service> </services> <channels> <channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel"> <endpoint uri="http://localhost/amfphp_1.9/gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/> <!---<endpoint uri="http://localhost/weborb/weborb/index.php" class="flex.messaging.endpoints.AMFEndpoint"/>--> <!---<endpoint uri="http://localhost/sabreamf/gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/>--> </channel-definition> </channels> </services-config>
<?xml version="1.0" encoding="UTF-8"?> <services-config> <services> <service id="remoting-service" class="flex.messaging.services.RemotingService" messageTypes="flex.messaging.messages.RemotingMessage"> <default-channels> <channel ref="my-amf"/> </default-channels> <destination id="users"> <properties> <source>*</source> </properties> </destination> </service> </services> <channels> <channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel"> <endpoint uri="http://localhost/amfphp_1.9/gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/> <!---<endpoint uri="http://localhost/weborb/weborb/index.php" class="flex.messaging.endpoints.AMFEndpoint"/>--> <!---<endpoint uri="http://localhost/sabreamf/gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/>--> </channel-definition> </channels> </services-config>
Then we show the compiler where the configuration file is. To do this, we look at the project properties dialog box and specify the –services directive in the properties of the compiler (Flex Compiler). As in Figure 6.
Fig. 6
This file works with all three frameworks.
If using WebORB, the file must be placed in the weborb / WEB-INF / Flex / services-config.xml directory.
Installing frameworks
Installing AMFPHP and WebORB is simple and straightforward. All you need is to download their distributions and unpack them on the server, for example, to the root directory. After that, you can immediately begin your work by placing your files in the services directory of the framework.
But with the installation and configuration of SabreAMF there may be problems, due to the meager documentation. You need to install the SabreAMF package using the pear installer, and then use the manual from the Adobe website to set up the SabreAMF. Download the manual .
All examples work without problems under all three frameworks, you just need to copy them there.
Encoding.
In AMFPHP work with various codings is provided. All you need to do is select a library that will transcode the messages and encodings. The encoding is set in the file gateway.php in the root of the framework. Find the line $ gateway-> setCharsetHandler ("utf8_decode", "ISO-8859-1", "ISO-8859-1"); and replace with the parameters you need. Flash works with utf-8 encoding.
In all other frameworks, such a function was not noticed, and therefore the transcoding will need to be done manually.
An example of a simple data acquisition from the database.
Flex:
dummy.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; // private function resultHandler(event:ResultEvent):void { dg.dataProvider = event.result; } // private function faultHandler(event:FaultEvent):void { Alert.show(event.fault.faultString,"Error"); } ]]> </mx:Script> <mx:RemoteObject id="ro" result="resultHandler(event)" fault="faultHandler(event)" showBusyCursor="true" destination="users" source="dummy.Users"/> <mx:DataGrid id="dg" x="10" y="40" width="746" height="500"> </mx:DataGrid> <mx:Button x="10" y="10" label=" " click="ro.getUsers()"/> </mx:Application>
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; // private function resultHandler(event:ResultEvent):void { dg.dataProvider = event.result; } // private function faultHandler(event:FaultEvent):void { Alert.show(event.fault.faultString,"Error"); } ]]> </mx:Script> <mx:RemoteObject id="ro" result="resultHandler(event)" fault="faultHandler(event)" showBusyCursor="true" destination="users" source="dummy.Users"/> <mx:DataGrid id="dg" x="10" y="40" width="746" height="500"> </mx:DataGrid> <mx:Button x="10" y="10" label=" " click="ro.getUsers()"/> </mx:Application>
PHP:
Users.php
<?php class Users { public function __construct() { mysql_connect(“localhost”,”root”,”password”); mysql_select_db(“db_name”); } public function getUsers() { $users = array(); $query = mysql_query("select * from users"); while ($row = mysql_fetch_object($query)) { $users[] = $row; } return $users; } } ?>
<?php class Users { public function __construct() { mysql_connect(“localhost”,”root”,”password”); mysql_select_db(“db_name”); } public function getUsers() { $users = array(); $query = mysql_query("select * from users"); while ($row = mysql_fetch_object($query)) { $users[] = $row; } return $users; } } ?>
Example of class mapping:
WebORB fully automatically performs class mapping .
Some settings are required for AMFPHP:
1. All mapped classes must contain the
$ _explicitType property , indicating the type of the object.
In our example, $ _explicitType = "dummy.vo.UserVO";
2. It is necessary to indicate where the mapped classes are located in the globals.php file in the framework root. For our example, I set $ voPath = $ servicesPath. This is necessary for correct mapping of classes transferred from a Flex application.
Flex:
Create a UserVO class and save it in the vo folder:
UserVO.as
package vo { [RemoteClass(alias="dummy.vo.UserVO")] public class UserVO { public var userId:int; public var userName:String; } }
package vo { [RemoteClass(alias="dummy.vo.UserVO")] public class UserVO { public var userId:int; public var userName:String; } }
In order for a class to be mapped to classes on a server, you must specify how it is called there by specifying metadata [RemoteClass (alias = "class")].
Now we will create a similar class on the server and save it in the vo folder:
UserVO.php
<?php class UserVO { public $_explicitType = "dummy.vo.UserVO"; public $userId; public $userName; } ?>
<?php class UserVO { public $_explicitType = "dummy.vo.UserVO"; public $userId; public $userName; } ?>
dummy.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import vo.UserVO; private var user:UserVO; // private function resultHandler(event:ResultEvent):void { // UserVO dg.dataProvider = event.result; } // private function faultHandler(event:FaultEvent):void { Alert.show(event.fault.faultString,"Error"); } ]]> </mx:Script> <mx:RemoteObject id="ro" result="resultHandler(event)" fault="faultHandler(event)" showBusyCursor="true" destination="users" source="dummy.Users"/> <mx:DataGrid id="dg" x="10" y="40" width="700" height="500"> </mx:DataGrid> <mx:Button x="10" y="10" label=" " click="ro.getUsers()"/> </mx:Application>
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import vo.UserVO; private var user:UserVO; // private function resultHandler(event:ResultEvent):void { // UserVO dg.dataProvider = event.result; } // private function faultHandler(event:FaultEvent):void { Alert.show(event.fault.faultString,"Error"); } ]]> </mx:Script> <mx:RemoteObject id="ro" result="resultHandler(event)" fault="faultHandler(event)" showBusyCursor="true" destination="users" source="dummy.Users"/> <mx:DataGrid id="dg" x="10" y="40" width="700" height="500"> </mx:DataGrid> <mx:Button x="10" y="10" label=" " click="ro.getUsers()"/> </mx:Application>
And a little bit correct Users.php.
PHP:
Users.php
<?php class Users { // UserVO require_once(“vo/UserVO.php”); public function __construct() { mysql_connect(“localhost”,”root”,”password”); mysql_select_db(“db_name”); } public function getUsers() { $users = array(); $query = mysql_query("SELECT user_id, user_name FROM users"); while ($row = mysql_fetch_object($query)) { $user = new UserVO(); $user->userId = $row->user_id; $user->userName = $row->user_name; $users[] = $user; } return $users; } } ?>
<?php class Users { // UserVO require_once(“vo/UserVO.php”); public function __construct() { mysql_connect(“localhost”,”root”,”password”); mysql_select_db(“db_name”); } public function getUsers() { $users = array(); $query = mysql_query("SELECT user_id, user_name FROM users"); while ($row = mysql_fetch_object($query)) { $user = new UserVO(); $user->userId = $row->user_id; $user->userName = $row->user_name; $users[] = $user; } return $users; } } ?>
To pass arguments, the server only needs to specify them in the appropriate sequence when calling the method. For example, create a new user.
Flex:
dummy.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import vo.UserVO; private var user:UserVO; // private function resultHandler(event:ResultEvent):void { // UserVO dg.dataProvider = event.result; } // private function faultHandler(event:FaultEvent):void { Alert.show(event.fault.faultString,"Error"); } // private function createNewUser():void { var newUser:UserVO = new UserVO(); newUser.userName = uName.text; ro.createNewUser(newUser); } ]]> </mx:Script> <mx:RemoteObject id="ro" result="resultHandler(event)" fault="faultHandler(event)" showBusyCursor="true" destination="users" source="dummy.Users"/> <mx:DataGrid id="dg" x="10" y="40" width="600" height="500"> </mx:DataGrid> <mx:Button x="10" y="10" label=" " click="ro.getUsers()"/> <mx:Panel x="618" y="40" width="279" height="155" layout="absolute" title=" "> <mx:Form x="10" y="10"> <mx:FormItem label=":" required="true"> <mx:TextInput id="uName"/> </mx:FormItem> </mx:Form> <mx:Button x="89" y="83" label="" click="createNewUser()"/> </mx:Panel> </mx:Application>
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import vo.UserVO; private var user:UserVO; // private function resultHandler(event:ResultEvent):void { // UserVO dg.dataProvider = event.result; } // private function faultHandler(event:FaultEvent):void { Alert.show(event.fault.faultString,"Error"); } // private function createNewUser():void { var newUser:UserVO = new UserVO(); newUser.userName = uName.text; ro.createNewUser(newUser); } ]]> </mx:Script> <mx:RemoteObject id="ro" result="resultHandler(event)" fault="faultHandler(event)" showBusyCursor="true" destination="users" source="dummy.Users"/> <mx:DataGrid id="dg" x="10" y="40" width="600" height="500"> </mx:DataGrid> <mx:Button x="10" y="10" label=" " click="ro.getUsers()"/> <mx:Panel x="618" y="40" width="279" height="155" layout="absolute" title=" "> <mx:Form x="10" y="10"> <mx:FormItem label=":" required="true"> <mx:TextInput id="uName"/> </mx:FormItem> </mx:Form> <mx:Button x="89" y="83" label="" click="createNewUser()"/> </mx:Panel> </mx:Application>
PHP:
Users.php
<?php class Users { // UserVO require_once(“vo/UserVO.php”); public function __construct() { mysql_connect(“localhost”,”root”,”password”); mysql_select_db(“db_name”); } public function getUsers() { $users = array(); $query = mysql_query("SELECT user_id, user_name FROM users"); while ($row = mysql_fetch_object($query)) { $user = new UserVO(); $user->userId = $row->user_id; $user->username = $row->user_name; $users[] = $user; } return $users; } public function createNewUser (UserVO $newUser) { mysql_query("INSERT INTO users SET user_name = '" . $newUser->userName . "'"); return $this->getUsers(); } ?>
<?php class Users { // UserVO require_once(“vo/UserVO.php”); public function __construct() { mysql_connect(“localhost”,”root”,”password”); mysql_select_db(“db_name”); } public function getUsers() { $users = array(); $query = mysql_query("SELECT user_id, user_name FROM users"); while ($row = mysql_fetch_object($query)) { $user = new UserVO(); $user->userId = $row->user_id; $user->username = $row->user_name; $users[] = $user; } return $users; } public function createNewUser (UserVO $newUser) { mysql_query("INSERT INTO users SET user_name = '" . $newUser->userName . "'"); return $this->getUsers(); } ?>
useful links
www.adobe.com/products/flex - the starting point itself, the official website of the manufacturer.
flex.org - a lot of materials on Flex. I highly recommend to get acquainted with the links given there, links to the blogs of developers and not only.
www.cflex.net - articles, libraries.
www.quietlyscheming.com/blog - Ely Greenfield's blog. Spread out awesome source code components.
Groups:
groups.yahoo.com/group/flexcoders
groups.yahoo.com/group/flexcomponents
groups.google.com/group/ruflex?lnk=srg&hl=en
video.onflex.org - video on Flex technologies.
Source: https://habr.com/ru/post/51072/
All Articles