Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Flex events allow for an even better component architecture

DZone's Guide to

Flex events allow for an even better component architecture

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

When we talk about component architecture, what do we mean? In my view, we have the need to create stand-alone components which can inter-communicate with each other. This approach is also what drives the modern micro-kernel architecture in operating systems design and implementation. Modules are self-contained and they communicate through messages. The advantages of component based architecture are many: the chief amongst them is that an isolated component has no dependencies on other components. This brings a series of advantages:

  • Reusability. If one component is isolated, it can be reused
  • Speed of development. If components can be developed and tested in isolation, parallel developers can work on parallel components, thus speeding up development
  • Better API contracts. As we'll see later, components have only to know about their function, something also known as Separation of Concerns
  • Better testability. An isolated component can be better tested (e.g. tested in isolation)

Flex offers a components-based architecture which is also leveraged by an event driven model. Isolated components communicate through "Events" (just another word for "Messages"). The combined approach of component-based and event-based (i.e. message-based) architecture provides an extremely effective environment to develop isolated components.

From a practical point of view, a component in Flex has only to provide the following:

  • The declaration of all "Events" that the component itself and all its children can trigger. These are declared in the <fx:Metadata> tag of the component.
  • Event handlers for its children components (i.e. an Handler for a Button click). Each event Handler then has got two responsibilities: create the appropriate Event type and trigger it

Because of the hierarchical nature of Flex components, an event triggered by a child component can be intercepted by its parent component. If we imagine that we have got a Main application component called MainComponent and a child component called ChildComponent, events triggered by ChildComponent (and any of its children) can be captured by MainComponent which can now provide an event handler for the events triggered by ChildComponent.

The declaration of the child component events in the <fx:Metadata> allows the Flex developer to have a new attribute of type event in the child component tag and the Flash Builder environment provides the infrastructure to automatically handle such event.

 

Happy technology to everyone!

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}