Posts Tagged ‘flex’

Mixing generated with mxml code

The problem this example tries to solve is the following: you have a Container component (Accordion, TabNavigator, etc.) and you wish it’s content to be generated dynamically but inside this generated content to use some content which is defined in the mxml, inside the Container. For those with Tapestry experience this behaviour is similar to the @RenderBody component.

<my:CustomWrapper ...>
    <mx:VBox> ... </mx:VBox>
</my:CustomWrapper>

This is very similar to a Container definition but the VBox will not end as a child of CustomWrapper but further down in the hierarchy.

Actually the main trick is to rewrite the DefaultProperty to something else than: childDescriptors since the childDescriptors property is used to create the children of the component (look inside Container.as if curious).

Your component will look similar to:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Metadata>
 [DefaultProperty("children")]
 </mx:Metadata>
 <mx:Script>
 <![CDATA[

 private var _children:VBox;

 public function set children( value:* ):void{
 _children = value as VBox;
 invalidateProperties();
 }

 public function get defaultSearch():VBox{
 return _children;
 }

 override protected function createChildren():void {
 super.createChildren();
 //add the _children somewhere else in the hierarchy
 }

 ]]>
 </mx:Script>
 <mx:HBox>
... other components here,
 </mx:HBox>
</mx:VBox>

Some other interesting links on this subject:

asdoc pain

Running asdoc should have been a breeze. Just create an ant task which calls the asdoc executable with the given parameters and voila! Well, it was not.

<target name="compile">
<exec executable="${asdoc}" failonerror="true">
<arg line="-doc-sources ${src.dir}"/>
<arg line="-window-title "My Application""/>
<arg line="-output ${asdoc.output}"/>
</exec>
</target>
 (more...)

Flex applications size optimization

After quite some time of development we realised that our application flex has grown quite large, both in functionality and size. I should have chosed to develop it in GWT since I think we could not have done even 30% of the functionality and it would have been simpler :). Joke aside the size of all the modules has grown over 50M. These are some steps I have found in order to reduce the size. Note that I am using ant files to compile everything so adapt this to your method. (more…)

Radio button renderer in a datagrid

Using a radio button as a data grid cell renderer is an example of a more complex usage of data grid cell renderers. This is one way to achive this in a not very complicated way:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Script>
 <![CDATA[
 public var dp:XML = <users>
 <user>
 <name>one</name>
 <main>true</main>
 </user>
 <user>
 <name>two</name>
 <main>false</main>
 </user>
 <user>
 <name>tre</name>
 <main>false</main>
 </user>
 </users>;
 ]]>
 </mx:Script>
 <mx:VBox>
 <mx:DataGrid dataProvider="{dp.user}" width="400">
 <mx:columns>
 <mx:DataGridColumn headerText="Name" dataField="name"/>
 <mx:DataGridColumn headerText="Main">
 <mx:itemRenderer>
 <mx:Component>
 <mx:HBox horizontalAlign="center">
 <mx:Script>
 <![CDATA[
 private function changeMain(event:Event):void{
 if(data.main == 'true'){
 //nothing
 data.main = 'true';
 }else{
 for each(var u:XML in (data as XML).parent().user){
 u.main = 'false';
 }
 data.main = 'true';
 }
 }
 ]]>
 </mx:Script>
 <mx:RadioButton click="changeMain(event)"  selected="{(data.main == 'true')}"/>
 </mx:HBox>
 </mx:Component>
 </mx:itemRenderer>
 </mx:DataGridColumn>
 <mx:DataGridColumn headerText="Main value" dataField="main"/>
 </mx:columns>
 </mx:DataGrid>
 </mx:VBox>
</mx:Application>

And the example in action:

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Fixing dateChooser position and size

As described here, the dateChooser positioning algorithm does not account for the overall size of the window and this results in some clipping of the dateChooser window for the DateField. Take a look at frameworks/projects/framework/src/mx/controls/DateField.as displayDropdown function. I’m trying here to provide a partial fix. The ideea:

  • trap the open event and reposition/resize the dateChooser. This can be done just by adding an event listener to the DropdownEven.OPEN event.
  • to avoid problems if the dropdown appears on top of the dropdown button I had to move the code inside a derived class to access the textInput object. Still no access to ComboBase.as’s
mx_internal var downArrowButton:Button

(more…)

A few notes on flex objects

For a java developer starting to work with flex seems quite easy. However since most people will never read the hole manuals, probably also because of this easiness I’ve decided to write some things about flex objects which are not immediately obvious from a java developer point of view. (more…)

Propagating model changes to a DataGrid

Flex offers a nice way to represent data in a model and configure this model as a data source for a DataGrid or other visual components (ComboBox, AdvancedDataGrid, etc.). This allows for a quick start but sometimes deadends when a change to the model is not propagated to the view. I am trying here to explain a few aspects related to this. (more…)

Blogosfera v2.0

Alternate content

Get Adobe Flash player

De ce?

Am facut prima versiune a hartii incercand sa arat interactiuniile din blogosfera romaneasca in contextul roblogfest. In contextul dat se puteau vedea linkurile dintre un numar de aproximativ 500 de bloguri.
De atunci am primit mult feedback legat de harta si pe baza lui am filtrat urmatoarea lista de functionalitati ce ar fi interesant de adaugat:

  • un numar mult mai mare de bloguri
  • posibilitatea de a extrage alte informatii
  • posibilitatea de deschide efectiv site-ul intr-o alta fereastra

Asa ca asa a aparut v2.0.

Metoda

Pentru versiunea 2.0 am colectat un numar de aproximativ 10000 de site-uri bloguri folosind atat linkurile directe de la un blog la altul cat si zelist. Problema imediata care a aparut a fost sa filtrez cat mai mult dintre ele pentru a simplifica treaba pe care viewer trebuia sa o faca.

  • existenta unui feed a fost primul criteriu. Toate site-urile au fost parsate si informatia “link alternate” a fost cautata in header. Cele care nu contineau informatia au fost eliminate.
  • vitalitatea site-ului a fost urmatorul criteriu. Toate feed-urile au fost parsate si cele pentru care ultimul post era prea vechi (mai mult de 60 zile) au fost marcate ca inactive.
  • statisticile de activitate ale blogosferei au fost cumva una din informatiile conexe obtinute aratand perioadele de timp in care activitatea de update a site-urilor este maxima
  • astfel am obtinut 5159 site-uri active dintr-un total de 9915 site-uri pentru care am generat o lista cu toate celelate site-uri din lista catre care exista un link
  • pentru datele obtinute am creat un viewer folosind aceiasi tehnogie (flex) ca la www.orgasm-culinar.ro
  • mi-am dat seama destul de curand ca unele dintre site-uri au un numar foarte mare de linkuri to/from asa ca pentru fiecare site am creat o lista cu toate linkurile pe care le-am sortat dupa importanta pe care am definit-o ca numarul de linkuri catre un anume blog. Astfel pentru a simplifica vizualizarea legaturile mai putin importante le-am grupat in noduri de tip “nume blog altii (1)” si asa mai departe. Am marcat aceste noduri cu o culoare mai stearsa.

Ce-i nevoie

  • e nevoie de adobe flash ultima versiune
  • trebuie sa astepti un pic pana se incarca toate datele

Licenta

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Romania License.

Working with namespaces

First when you start working with XML in flex you are completely wondered about how easy the xpath like syntax is used. However some botlenecks might occur. One of them is using namespaces. Consider the following example:

<?xml version="1.0" encoding="UTF-8"?><report version="3.2.15" xmlns="http://www.len.ro/report">    <item name="user">len</item></report>

First approach is to do something like:

var myXML:XML = XML(event.result);trace("XML: " + myXML.item.@name);

you will see nothing and start wondering what you are doing wrong. Some time later you realize it’s namespace related and you try (according to flex doc) to do this:

var myXML:XML = XML(event.result);var ns:Namespace = myXML.namespace();default xml namespace = ns;trace("XML: " + myXML.item.@name);

you will get an ugly error similar to:

verify com.mccsoft.diapason.report::report/_report_HTTPService1_i()                        stack:                        scope: [global Object$ flash.events::EventDispatcher$ flash.display::DisplayObject$ flash.display::InteractiveObject$ flash.display::DisplayObjectContainer$ flash.display::Sprite$ mx.core::FlexSprite$ mx.core::UIComponent$ mx.core::Container$ mx.core::LayoutContainer$ mx.modules::Module$ com.mccsoft.flex.extras::DiapasonModule$ com.mccsoft.diapason.report::report$]                          locals: com.mccsoft.diapason.report::report *   0:debugfile "/phantom/mcc/diapason/client/flex/src;com/mccsoft/diapason/report;report.mxml"                        stack:                        scope: [global Object$ flash.events::EventDispatcher$ flash.display::DisplayObject$ flash.display::InteractiveObject$ flash.display::DisplayObjectContainer$ flash.display::Sprite$ mx.core::FlexSprite$ mx.core::UIComponent$ mx.core::Container$ mx.core::LayoutContainer$ mx.modules::Module$ com.mccsoft.flex.extras::DiapasonModule$ com.mccsoft.diapason.report::report$]                          locals: com.mccsoft.diapason.report::report *   3:debugline 7                        stack:                        scope: [global Object$ flash.events::EventDispatcher$ flash.display::DisplayObject$ flash.display::InteractiveObject$ flash.display::DisplayObjectContainer$ flash.display::Sprite$ mx.core::FlexSprite$ mx.core::UIComponent$ mx.core::Container$ mx.core::LayoutContainer$ mx.modules::Module$ com.mccsoft.flex.extras::DiapasonModule$ com.mccsoft.diapason.report::report$]                          locals: com.mccsoft.diapason.report::report *   5:getlocal0                        stack: com.mccsoft.diapason.report::report                        scope: [global Object$ flash.events::EventDispatcher$ flash.display::DisplayObject$ flash.display::InteractiveObject$ flash.display::DisplayObjectContainer$ flash.display::Sprite$ mx.core::FlexSprite$ mx.core::UIComponent$ mx.core::Container$ mx.core::LayoutContainer$ mx.modules::Module$ com.mccsoft.flex.extras::DiapasonModule$ com.mccsoft.diapason.report::report$]                          locals: com.mccsoft.diapason.report::report *   6:pushscope                        stack:                        scope: [global Object$ flash.events::EventDispatcher$ flash.display::DisplayObject$ flash.display::InteractiveObject$ flash.display::DisplayObjectContainer$ flash.display::Sprite$ mx.core::FlexSprite$ mx.core::UIComponent$ mx.core::Container$ mx.core::LayoutContainer$ mx.modules::Module$ com.mccsoft.flex.extras::DiapasonModule$ com.mccsoft.diapason.report::report$] com.mccsoft.diapason.report::report                          locals: com.mccsoft.diapason.report::report *   7:getlocal3VerifyError: Error #1025: An invalid register 3 was accessed.

after some more digging you realize you need to do something like that to get it working:

Choice 1:

var myNS:Namespace = new Namespace("http://www.len.ro/report");

public function onXMLReport(event:ResultEvent){var myXML:XML = XML(event.result);default xml namespace = myNS;trace("XML: " + myXML.item.@name);}

or

Choice 2:

public function onXMLReport(event:ResultEvent){var myXML:XML = XML(event.result);var myNS = myXML.namespace();trace("XML: " + myXML.myNS::item.@name);}

Locale files

When using flex and java in parallel the localization mechanism might be clear. One aspect which is not clear is the encoding of the properties files:

  • Flex locale files encoding: UTF-8
  • Java locale files encoding: ISO-8859-1

Convertor script:

..$ cat fixUTF.sh #!/bin/bash

TMP=iconv.tmp

if [ "!$2" == "!rev" ]; then	iconv -t ISO_8859-1 -f UTF-8 -o $TMP $1else	iconv -f ISO_8859-1 -t UTF-8 -o $TMP $1fimv $TMP $1
Related Posts with Thumbnails