Re: Image jumps when trying to position it in the centre

[Justin Mclean]

Hi,

> Maybe this is the reason for the jump cause the position could not calculate
> until the image is loaded.

Yep that’s the crux of the issue. The CentreElement bead has this code called 
on layoutComplete:
host.x = (parentWidth - childWidth) / 2;
host.y = (parentHeight - childHeight) / 2; 

> Do you've already tried to replace the "CenterElement" bead by some CSS
> alignment?

Yes I also tried that. 

You can get it centred horizontally with margin auto (and a few other ways) 
easily enough but getting it to centre vertically without scaling the image is 
difficult.

This will work but IMO is not exactly ideal.

<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
               xmlns:js="library://ns.apache.org/royale/basic"
               applicationComplete="init()">

   <fx:Script><![CDATA[
       public function init():void {
           image.addEventListener("layoutNeeded", resetImage);
       }

       public function changeImage():void {
           image.src = "http://apache.org/img/flex.jpg";;
       }

       public function resetImage():void {
           holder.dispatchEvent(new Event("layoutNeeded"));
       }
       ]]></fx:Script>

    <fx:Style>
        #holder {
            position: relative;
        }
        
        #image {
            position: absolute;
            width: auto;
            height: auto;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
     </fx:Style>

   <js:valuesImpl>
       <js:SimpleCSSValuesImpl />
   </js:valuesImpl>

   <js:initialView>
       <js:View width="100%" height="100%">
           <js:beads>
               <js:VerticalLayout />
           </js:beads>
           <js:style>
               <js:SimpleCSSStyles margin="50" />
           </js:style>
           <js:Label text="Here's the ASF logo" />
           <js:Group id="holder" width="520" height="300">
               <js:style>
                   <js:SimpleCSSStyles backgroundColor="#333333" />
               </js:style>
               <js:Image id="image" src="http://apache.org/img/asf_logo.png"; />
           </js:Group>
           <js:TextButton text="Change Image" click="changeImage()" />
       </js:View>
   </js:initialView>

</js:Application>

You could I supposed encapsulate those styles into a bead but as CentreElement 
name is already taken I’m not sure what it could be named. CentreWithCSS? 
However that may be misleading as this method wont for instance work with text 
and may be other limitations I’m not aware of.

Thanks,
Justin