While developing complex Angular 2 applications, many times we encounter multiple page components, each loading its own data. Instead of blocking the entire screen with a loading message until all the data is loaded, its better to implement this behavior in the component level. This way, each component blocks itself until its own data is loaded, allowing the user to interact with other components during that time.
To achieve this behavior, I've created an attribute directive that can be attached to any component. It has 2 attributes:
- The "loading" flag that should be set to true while data is loafing and false once data is loaded. This attribute is mandatory.
- An optional loading message that replaces the default "Loading..." message.
Note: Since the "loading" directive needs to cover the entire component, its css layout is set to "absolute". That means that the DIV element the directive is attached to must have its layout set to "relative".
See the demo below. The code can be viewed on Github.
I've recently needed to create an MXML component that enables users to add MXML
content into it. The solution is simple yet powerful and provides a way to easily create
extendable MXML components.
In the example below, the component holds a ButtonBar and a ViewStack.
The ViewStack itself is a property of the component that can be added in MXML
when using the component. Each user can add as many views as he needs and
the ButtonBar displays the views.
Code can be found here.
Recently, I had to find a way to enable or disable drop down menu items according
to the current view. While searching for an elegant solution, I've stumbled across a
piece of code that changed my approach all together. It seems that you can add data
binding into the XML data itself. While Flex compiles the file, it parses the XML data and
assigns the correct data binding.
Take a look at the example below:
Code can be found here.
Recently, I had to come up with a generic component that can scroll anything within it, according
to the mouse location.
This component extends Canvas and has a "Speed" property and a "ScrollToPosition" method.
Check out the example below. Source can be downloaded here.
A few days ago, a question regarding MXML components was raised at the Flashoo forum.
The question was how can we add an MXML component defined in the project, at runtime,
by its name. The name is build dynamically as well. When I tried to do so - I found that it is a
bit more complex than it looks. The reason is that the Flex Linker and Compiler do not include
such components in the output SWF since there is no reference to them in the code.
The solution is to include a reference variable for each component, even though it is not really
used. Check out this little example. You can find the source code here.
