Show an alternate image when the original is not found

classic Classic list List threaded Threaded
9 messages Options
Reply | Threaded
Open this post in threaded view
|

Show an alternate image when the original is not found

hiedra

Hi,

When you have to put an image that may or may not exist, how do you do it so that it shows an alternative image?

 

We have not found a way to configure this exception in the jewel image control and we have solved it with an html injection directly:

 

 

                    <j:Label multiline="true" width="117" height="117" click="onChangeImage()" visible="{personalModel.avatarImageModel.fileData == null}">

                        <j:html>

                        <![CDATA[<img style="border-radius: 50%; width: 100%; height: 100%;" class="jewel image image-roundBorder-body"

                        onerror="if (this.src != 'assets/avatarD.png') this.src = 'assets/avatarD.png';" 

                        src="{personalModel.selectedItem.avatar}"/>]]>

                        </j:html>

                        

                    </j:Label>

 

But I don't like this solution very much and if there was another way to do it, I would prefer to change it.

Any comments will be welcome.

 

Thank you.

Hiedra.

Reply | Threaded
Open this post in threaded view
|

RE: Show an alternate image when the original is not found

yishayw

Looking at your solution I would create a bead for image. Something like (not tested, needs work):

package {

Class ImageAvatarBead implements IBead {

private var _avatarSrc:String;

private var _strand:IStrand;

 

public function set avatarUrl(value:String):void

{

                _avatarUrl = value;

}

 

public function set strand(value:IStrand):void

{

                _strand = value;

                (value as IRenderedObject).element.addEventListener(‘error’,  errorHandler);

}

 

private function errorHandler(event:Event):void

{

                If ((_strand as IRenderedObject).element.src != _avatarSrc)

                {

                                (_strand as IRenderedObject).element.src = _avatarSrc;

                }

}

 

}

 

If you can make this work create a pull request for Royale that would be great.

 

Thanks.

 

From: [hidden email]
Sent: Wednesday, June 17, 2020 2:24 PM
To: [hidden email]
Subject: Show an alternate image when the original is not found

 

Hi,

When you have to put an image that may or may not exist, how do you do it so that it shows an alternative image?

 

We have not found a way to configure this exception in the jewel image control and we have solved it with an html injection directly:

 

 

                    <j:Label multiline="true" width="117" height="117" click="onChangeImage()" visible="{personalModel.avatarImageModel.fileData == null}">

                        <j:html>

                        <![CDATA[<img style="border-radius: 50%; width: 100%; height: 100%;" class="jewel image image-roundBorder-body"

                        onerror="if (this.src != 'assets/avatarD.png') this.src = 'assets/avatarD.png';" 

                        src="{personalModel.selectedItem.avatar}"/>]]>

                        </j:html>

                        

                    </j:Label>

 

But I don't like this solution very much and if there was another way to do it, I would prefer to change it.

Any comments will be welcome.

 

Thank you.

Hiedra.

 

Reply | Threaded
Open this post in threaded view
|

Re: Show an alternate image when the original is not found

Carlos Rovira-2
Hi Maria Jose,
it'd be good to have such bead as Yishay comment. Please try to make it work and report. If that works add a PR
thanks!

El mié., 17 jun. 2020 a las 14:22, Yishay Weiss (<[hidden email]>) escribió:

Looking at your solution I would create a bead for image. Something like (not tested, needs work):

package {

Class ImageAvatarBead implements IBead {

private var _avatarSrc:String;

private var _strand:IStrand;

 

public function set avatarUrl(value:String):void

{

                _avatarUrl = value;

}

 

public function set strand(value:IStrand):void

{

                _strand = value;

                (value as IRenderedObject).element.addEventListener(‘error’,  errorHandler);

}

 

private function errorHandler(event:Event):void

{

                If ((_strand as IRenderedObject).element.src != _avatarSrc)

                {

                                (_strand as IRenderedObject).element.src = _avatarSrc;

                }

}

 

}

 

If you can make this work create a pull request for Royale that would be great.

 

Thanks.

 

From: [hidden email]
Sent: Wednesday, June 17, 2020 2:24 PM
To: [hidden email]
Subject: Show an alternate image when the original is not found

 

Hi,

When you have to put an image that may or may not exist, how do you do it so that it shows an alternative image?

 

We have not found a way to configure this exception in the jewel image control and we have solved it with an html injection directly:

 

 

                    <j:Label multiline="true" width="117" height="117" click="onChangeImage()" visible="{personalModel.avatarImageModel.fileData == null}">

                        <j:html>

                        <![CDATA[<img style="border-radius: 50%; width: 100%; height: 100%;" class="jewel image image-roundBorder-body"

                        onerror="if (this.src != 'assets/avatarD.png') this.src = 'assets/avatarD.png';" 

                        src="{personalModel.selectedItem.avatar}"/>]]>

                        </j:html>

                        

                    </j:Label>

 

But I don't like this solution very much and if there was another way to do it, I would prefer to change it.

Any comments will be welcome.

 

Thank you.

Hiedra.

 



--
Reply | Threaded
Open this post in threaded view
|

RE: Show an alternate image when the original is not found

hiedra

I will try and tell you. 😝

Thanks to both of you.

 

Hiedra.

 

 

De: Carlos Rovira <[hidden email]>
Enviado el: miércoles, 17 de junio de 2020 15:48
Para: [hidden email]
Asunto: Re: Show an alternate image when the original is not found

 

Hi Maria Jose,

it'd be good to have such bead as Yishay comment. Please try to make it work and report. If that works add a PR

thanks!

 

El mié., 17 jun. 2020 a las 14:22, Yishay Weiss (<[hidden email]>) escribió:

Looking at your solution I would create a bead for image. Something like (not tested, needs work):

package {

Class ImageAvatarBead implements IBead {

private var _avatarSrc:String;

private var _strand:IStrand;

 

public function set avatarUrl(value:String):void

{

                _avatarUrl = value;

}

 

public function set strand(value:IStrand):void

{

                _strand = value;

                (value as IRenderedObject).element.addEventListener(‘error’,  errorHandler);

}

 

private function errorHandler(event:Event):void

{

                If ((_strand as IRenderedObject).element.src != _avatarSrc)

                {

                                (_strand as IRenderedObject).element.src = _avatarSrc;

                }

}

 

}

 

If you can make this work create a pull request for Royale that would be great.

 

Thanks.

 

From: [hidden email]
Sent: Wednesday, June 17, 2020 2:24 PM
To: [hidden email]
Subject: Show an alternate image when the original is not found

 

Hi,

When you have to put an image that may or may not exist, how do you do it so that it shows an alternative image?

 

We have not found a way to configure this exception in the jewel image control and we have solved it with an html injection directly:

 

 

                    <j:Label multiline="true" width="117" height="117" click="onChangeImage()" visible="{personalModel.avatarImageModel.fileData == null}">

                        <j:html>

                        <![CDATA[<img style="border-radius: 50%; width: 100%; height: 100%;" class="jewel image image-roundBorder-body"

                        onerror="if (this.src != 'assets/avatarD.png') this.src = 'assets/avatarD.png';" 

                        src="{personalModel.selectedItem.avatar}"/>]]>

                        </j:html>

                        

                    </j:Label>

 

But I don't like this solution very much and if there was another way to do it, I would prefer to change it.

Any comments will be welcome.

 

Thank you.

Hiedra.

 


 

--

Carlos Rovira

 

Reply | Threaded
Open this post in threaded view
|

RE: Show an alternate image when the original is not found

yishayw

Great. If it’s simpler for you, try first to make it work in your application source, and then if you need help integrating it in the framework, you can ask for our help here.

 

From: [hidden email]
Sent: Wednesday, June 17, 2020 5:41 PM
To: [hidden email]
Subject: RE: Show an alternate image when the original is not found

 

I will try and tell you. 😝

Thanks to both of you.

 

Hiedra.

 

 

De: Carlos Rovira <[hidden email]>
Enviado el: miércoles, 17 de junio de 2020 15:48
Para: [hidden email]
Asunto: Re: Show an alternate image when the original is not found

 

Hi Maria Jose,

it'd be good to have such bead as Yishay comment. Please try to make it work and report. If that works add a PR

thanks!

 

El mié., 17 jun. 2020 a las 14:22, Yishay Weiss (<[hidden email]>) escribió:

Looking at your solution I would create a bead for image. Something like (not tested, needs work):

package {

Class ImageAvatarBead implements IBead {

private var _avatarSrc:String;

private var _strand:IStrand;

 

public function set avatarUrl(value:String):void

{

                _avatarUrl = value;

}

 

public function set strand(value:IStrand):void

{

                _strand = value;

                (value as IRenderedObject).element.addEventListener(‘error’,  errorHandler);

}

 

private function errorHandler(event:Event):void

{

                If ((_strand as IRenderedObject).element.src != _avatarSrc)

                {

                                (_strand as IRenderedObject).element.src = _avatarSrc;

                }

}

 

}

 

If you can make this work create a pull request for Royale that would be great.

 

Thanks.

 

From: [hidden email]
Sent: Wednesday, June 17, 2020 2:24 PM
To: [hidden email]
Subject: Show an alternate image when the original is not found

 

Hi,

When you have to put an image that may or may not exist, how do you do it so that it shows an alternative image?

 

We have not found a way to configure this exception in the jewel image control and we have solved it with an html injection directly:

 

 

                    <j:Label multiline="true" width="117" height="117" click="onChangeImage()" visible="{personalModel.avatarImageModel.fileData == null}">

                        <j:html>

                        <![CDATA[<img style="border-radius: 50%; width: 100%; height: 100%;" class="jewel image image-roundBorder-body"

                        onerror="if (this.src != 'assets/avatarD.png') this.src = 'assets/avatarD.png';" 

                        src="{personalModel.selectedItem.avatar}"/>]]>

                        </j:html>

                        

                    </j:Label>

 

But I don't like this solution very much and if there was another way to do it, I would prefer to change it.

Any comments will be welcome.

 

Thank you.

Hiedra.

 


 

--

 

 

Reply | Threaded
Open this post in threaded view
|

RE: Show an alternate image when the original is not found

hiedra

Hello,

I've had a bit of time and implemented "something akin to a bead" 😝. In the end I have called it AlternativeImageBead

 

As you see?

package xxx.html.beads {

 

    import org.apache.royale.core.IBead;

    import org.apache.royale.core.IStrand;

    import org.apache.royale.events.Event;

 

    COMPILE::JS {

        import org.apache.royale.core.WrappedHTMLElement;

    }

    import org.apache.royale.core.IRenderedObject;

 

    public class AlternativeImageBead implements IBead {

 

        protected var _strand:IStrand;

 

        public function AlternativeImageBead() {

        }

 

        /**

         *  @copy org.apache.royale.core.IBead#strand

         *

         *  @langversion 3.0

         *  @playerversion Flash 10.2

         *  @playerversion AIR 2.6

         *  @productversion Royale 0.9.8

         */

        public function set strand(value:IStrand):void {

            _strand = value;

            COMPILE::JS {

                (_strand as IRenderedObject).element.addEventListener('error', errorHandler);

            }

        }

 

        private var _altSrc:String;

 

        public function get altSrc():String {

            return _altSrc;

        }

 

        public function set altSrc(value:String):void {

            _altSrc = value;

 

        }

 

        COMPILE::JS

        private function errorHandler(event:Event):void {

        

            var imgEle:HTMLImageElement = hostElement as HTMLImageElement;

            if (imgEle.src != _altSrc)

            {

                imgEle.src = _altSrc;

            }

        }

        

        COMPILE::JS

        protected function get hostElement():WrappedHTMLElement

        {

            return (_strand as IRenderedObject).element;

        }

 

    }

}

 

What would you change?

 

Hiedra

 

De: Yishay Weiss <[hidden email]>
Enviado el: miércoles, 17 de junio de 2020 16:54
Para: [hidden email]
Asunto: RE: Show an alternate image when the original is not found

 

Great. If it’s simpler for you, try first to make it work in your application source, and then if you need help integrating it in the framework, you can ask for our help here.

 

From: [hidden email]
Sent: Wednesday, June 17, 2020 5:41 PM
To: [hidden email]
Subject: RE: Show an alternate image when the original is not found

 

I will try and tell you. 😝

Thanks to both of you.

 

Hiedra.

 

 

De: Carlos Rovira <[hidden email]>
Enviado el: miércoles, 17 de junio de 2020 15:48
Para: [hidden email]
Asunto: Re: Show an alternate image when the original is not found

 

Hi Maria Jose,

it'd be good to have such bead as Yishay comment. Please try to make it work and report. If that works add a PR

thanks!

 

El mié., 17 jun. 2020 a las 14:22, Yishay Weiss (<[hidden email]>) escribió:

Looking at your solution I would create a bead for image. Something like (not tested, needs work):

package {

Class ImageAvatarBead implements IBead {

private var _avatarSrc:String;

private var _strand:IStrand;

 

public function set avatarUrl(value:String):void

{

                _avatarUrl = value;

}

 

public function set strand(value:IStrand):void

{

                _strand = value;

                (value as IRenderedObject).element.addEventListener(‘error’,  errorHandler);

}

 

private function errorHandler(event:Event):void

{

                If ((_strand as IRenderedObject).element.src != _avatarSrc)

                {

                                (_strand as IRenderedObject).element.src = _avatarSrc;

                }

}

 

}

 

If you can make this work create a pull request for Royale that would be great.

 

Thanks.

 

From: [hidden email]
Sent: Wednesday, June 17, 2020 2:24 PM
To: [hidden email]
Subject: Show an alternate image when the original is not found

 

Hi,

When you have to put an image that may or may not exist, how do you do it so that it shows an alternative image?

 

We have not found a way to configure this exception in the jewel image control and we have solved it with an html injection directly:

 

 

                    <j:Label multiline="true" width="117" height="117" click="onChangeImage()" visible="{personalModel.avatarImageModel.fileData == null}">

                        <j:html>

                        <![CDATA[<img style="border-radius: 50%; width: 100%; height: 100%;" class="jewel image image-roundBorder-body"

                        onerror="if (this.src != 'assets/avatarD.png') this.src = 'assets/avatarD.png';" 

                        src="{personalModel.selectedItem.avatar}"/>]]>

                        </j:html>

                        

                    </j:Label>

 

But I don't like this solution very much and if there was another way to do it, I would prefer to change it.

Any comments will be welcome.

 

Thank you.

Hiedra.

 


 

--

 

 

Reply | Threaded
Open this post in threaded view
|

Re: Show an alternate image when the original is not found

Carlos Rovira-2
Hi Maria Jose,

Thanks for the contribution!. Some points:

1.- About the name: In Jewel the we don't suffix it with "Bead", to make names less verbose since is extendin IBead, so we know it is a bead.
Apart from that I see more descriptive "ErrorImage" or maybe it's just me? Since "AlternativeImage" seems to me a bead that could switch the current imagen with another alternative one, and not specifically one that is a replacement when we get a load error.
2.- About package. the right one for image controls is "org.apache.royale.jewel.beads.controls.image"
3.- property could be just "src", since the name of the bead class already give context.(so both the image control and the bead will have "src" property what seems to me more coherent for naming.

Apart from that, if you tried your code and worked you can submit it. As well if you want you can add a TDJ example in the image page and I can prepare an official image for jewel error image placeholder. This last one as you wish, if you don't have time, I can add it myself as I merge your PR

thanks!

Carlos


El vie., 26 jun. 2020 a las 22:05, Maria Jose Esteve (<[hidden email]>) escribió:

Hello,

I've had a bit of time and implemented "something akin to a bead" 😝. In the end I have called it AlternativeImageBead

 

As you see?

package xxx.html.beads {

 

    import org.apache.royale.core.IBead;

    import org.apache.royale.core.IStrand;

    import org.apache.royale.events.Event;

 

    COMPILE::JS {

        import org.apache.royale.core.WrappedHTMLElement;

    }

    import org.apache.royale.core.IRenderedObject;

 

    public class AlternativeImageBead implements IBead {

 

        protected var _strand:IStrand;

 

        public function AlternativeImageBead() {

        }

 

        /**

         *  @copy org.apache.royale.core.IBead#strand

         *

         *  @langversion 3.0

         *  @playerversion Flash 10.2

         *  @playerversion AIR 2.6

         *  @productversion Royale 0.9.8

         */

        public function set strand(value:IStrand):void {

            _strand = value;

            COMPILE::JS {

                (_strand as IRenderedObject).element.addEventListener('error', errorHandler);

            }

        }

 

        private var _altSrc:String;

 

        public function get altSrc():String {

            return _altSrc;

        }

 

        public function set altSrc(value:String):void {

            _altSrc = value;

 

        }

 

        COMPILE::JS

        private function errorHandler(event:Event):void {

        

            var imgEle:HTMLImageElement = hostElement as HTMLImageElement;

            if (imgEle.src != _altSrc)

            {

                imgEle.src = _altSrc;

            }

        }

        

        COMPILE::JS

        protected function get hostElement():WrappedHTMLElement

        {

            return (_strand as IRenderedObject).element;

        }

 

    }

}

 

What would you change?

 

Hiedra

 

De: Yishay Weiss <[hidden email]>
Enviado el: miércoles, 17 de junio de 2020 16:54
Para: [hidden email]
Asunto: RE: Show an alternate image when the original is not found

 

Great. If it’s simpler for you, try first to make it work in your application source, and then if you need help integrating it in the framework, you can ask for our help here.

 

From: [hidden email]
Sent: Wednesday, June 17, 2020 5:41 PM
To: [hidden email]
Subject: RE: Show an alternate image when the original is not found

 

I will try and tell you. 😝

Thanks to both of you.

 

Hiedra.

 

 

De: Carlos Rovira <[hidden email]>
Enviado el: miércoles, 17 de junio de 2020 15:48
Para: [hidden email]
Asunto: Re: Show an alternate image when the original is not found

 

Hi Maria Jose,

it'd be good to have such bead as Yishay comment. Please try to make it work and report. If that works add a PR

thanks!

 

El mié., 17 jun. 2020 a las 14:22, Yishay Weiss (<[hidden email]>) escribió:

Looking at your solution I would create a bead for image. Something like (not tested, needs work):

package {

Class ImageAvatarBead implements IBead {

private var _avatarSrc:String;

private var _strand:IStrand;

 

public function set avatarUrl(value:String):void

{

                _avatarUrl = value;

}

 

public function set strand(value:IStrand):void

{

                _strand = value;

                (value as IRenderedObject).element.addEventListener(‘error’,  errorHandler);

}

 

private function errorHandler(event:Event):void

{

                If ((_strand as IRenderedObject).element.src != _avatarSrc)

                {

                                (_strand as IRenderedObject).element.src = _avatarSrc;

                }

}

 

}

 

If you can make this work create a pull request for Royale that would be great.

 

Thanks.

 

From: [hidden email]
Sent: Wednesday, June 17, 2020 2:24 PM
To: [hidden email]
Subject: Show an alternate image when the original is not found

 

Hi,

When you have to put an image that may or may not exist, how do you do it so that it shows an alternative image?

 

We have not found a way to configure this exception in the jewel image control and we have solved it with an html injection directly:

 

 

                    <j:Label multiline="true" width="117" height="117" click="onChangeImage()" visible="{personalModel.avatarImageModel.fileData == null}">

                        <j:html>

                        <![CDATA[<img style="border-radius: 50%; width: 100%; height: 100%;" class="jewel image image-roundBorder-body"

                        onerror="if (this.src != 'assets/avatarD.png') this.src = 'assets/avatarD.png';" 

                        src="{personalModel.selectedItem.avatar}"/>]]>

                        </j:html>

                        

                    </j:Label>

 

But I don't like this solution very much and if there was another way to do it, I would prefer to change it.

Any comments will be welcome.

 

Thank you.

Hiedra.

 


 

--

 

 



--
Reply | Threaded
Open this post in threaded view
|

Re: Show an alternate image when the original is not found

Harbs
2.- About package. the right one for image controls is "org.apache.royale.jewel.beads.controls.image"

I don’t see anything specific to Jewel here, so I think this belongs in Basic.


On Jun 27, 2020, at 9:36 PM, Carlos Rovira <[hidden email]> wrote:

Hi Maria Jose,

Thanks for the contribution!. Some points:

1.- About the name: In Jewel the we don't suffix it with "Bead", to make names less verbose since is extendin IBead, so we know it is a bead.
Apart from that I see more descriptive "ErrorImage" or maybe it's just me? Since "AlternativeImage" seems to me a bead that could switch the current imagen with another alternative one, and not specifically one that is a replacement when we get a load error.
2.- About package. the right one for image controls is "org.apache.royale.jewel.beads.controls.image"
3.- property could be just "src", since the name of the bead class already give context.(so both the image control and the bead will have "src" property what seems to me more coherent for naming.

Apart from that, if you tried your code and worked you can submit it. As well if you want you can add a TDJ example in the image page and I can prepare an official image for jewel error image placeholder. This last one as you wish, if you don't have time, I can add it myself as I merge your PR

thanks!

Carlos


El vie., 26 jun. 2020 a las 22:05, Maria Jose Esteve (<[hidden email]>) escribió:

Hello,

I've had a bit of time and implemented "something akin to a bead" 😝. In the end I have called it AlternativeImageBead

 

As you see?

package xxx.html.beads {

 

    import org.apache.royale.core.IBead;

    import org.apache.royale.core.IStrand;

    import org.apache.royale.events.Event;

 

    COMPILE::JS {

        import org.apache.royale.core.WrappedHTMLElement;

    }

    import org.apache.royale.core.IRenderedObject;

 

    public class AlternativeImageBead implements IBead {

 

        protected var _strand:IStrand;

 

        public function AlternativeImageBead() {

        }

 

        /**

         *  @copy org.apache.royale.core.IBead#strand

         *

         *  @langversion 3.0

         *  @playerversion Flash 10.2

         *  @playerversion AIR 2.6

         *  @productversion Royale 0.9.8

         */

        public function set strand(value:IStrand):void {

            _strand = value;

            COMPILE::JS {

                (_strand as IRenderedObject).element.addEventListener('error', errorHandler);

            }

        }

 

        private var _altSrc:String;

 

        public function get altSrc():String {

            return _altSrc;

        }

 

        public function set altSrc(value:String):void {

            _altSrc = value;

 

        }

 

        COMPILE::JS

        private function errorHandler(event:Event):void {

        

            var imgEle:HTMLImageElement = hostElement as HTMLImageElement;

            if (imgEle.src != _altSrc)

            {

                imgEle.src = _altSrc;

            }

        }

        

        COMPILE::JS

        protected function get hostElement():WrappedHTMLElement

        {

            return (_strand as IRenderedObject).element;

        }

 

    }

}

 

What would you change?

 

Hiedra

 

De: Yishay Weiss <[hidden email]>
Enviado el: miércoles, 17 de junio de 2020 16:54
Para: [hidden email]
Asunto: RE: Show an alternate image when the original is not found

 

Great. If it’s simpler for you, try first to make it work in your application source, and then if you need help integrating it in the framework, you can ask for our help here.

 

From: [hidden email]
Sent: Wednesday, June 17, 2020 5:41 PM
To: [hidden email]
Subject: RE: Show an alternate image when the original is not found

 

I will try and tell you. 😝

Thanks to both of you.

 

Hiedra.

 

 

De: Carlos Rovira <[hidden email]>
Enviado el: miércoles, 17 de junio de 2020 15:48
Para: [hidden email]
Asunto: Re: Show an alternate image when the original is not found

 

Hi Maria Jose,

it'd be good to have such bead as Yishay comment. Please try to make it work and report. If that works add a PR

thanks!

 

El mié., 17 jun. 2020 a las 14:22, Yishay Weiss (<[hidden email]>) escribió:

Looking at your solution I would create a bead for image. Something like (not tested, needs work):

package {

Class ImageAvatarBead implements IBead {

private var _avatarSrc:String;

private var _strand:IStrand;

 

public function set avatarUrl(value:String):void

{

                _avatarUrl = value;

}

 

public function set strand(value:IStrand):void

{

                _strand = value;

                (value as IRenderedObject).element.addEventListener(‘error’,  errorHandler);

}

 

private function errorHandler(event:Event):void

{

                If ((_strand as IRenderedObject).element.src != _avatarSrc)

                {

                                (_strand as IRenderedObject).element.src = _avatarSrc;

                }

}

 

}

 

If you can make this work create a pull request for Royale that would be great.

 

Thanks.

 

From: [hidden email]
Sent: Wednesday, June 17, 2020 2:24 PM
To: [hidden email]
Subject: Show an alternate image when the original is not found

 

Hi,

When you have to put an image that may or may not exist, how do you do it so that it shows an alternative image?

 

We have not found a way to configure this exception in the jewel image control and we have solved it with an html injection directly:

 

 

                    <j:Label multiline="true" width="117" height="117" click="onChangeImage()" visible="{personalModel.avatarImageModel.fileData == null}">

                        <j:html>

                        <![CDATA[<img style="border-radius: 50%; width: 100%; height: 100%;" class="jewel image image-roundBorder-body"

                        onerror="if (this.src != 'assets/avatarD.png') this.src = 'assets/avatarD.png';" 

                        src="{personalModel.selectedItem.avatar}"/>]]>

                        </j:html>

                        

                    </j:Label>

 

But I don't like this solution very much and if there was another way to do it, I would prefer to change it.

Any comments will be welcome.

 

Thank you.

Hiedra.

 


 

--

 

 



--

Reply | Threaded
Open this post in threaded view
|

RE: Show an alternate image when the original is not found

hiedra

Thanks for answering Carlos and Harbs, to see if I have understood ...

 

1.- Rename the bead to “ErrorImage” (this name is more identifying, yes)

2.- hahaha, I don't know what package to put it in. Harbs, you mean org.apache.royale.html.beads?

3.- Change the name of the property to “src”

4.- TDJ example, yes, without problems. (I will look where to put it and I will propose something to you Carlos)

 

I wait for you to confirm the name of the package.

Thank you very much.

 

 

De: Harbs <[hidden email]>
Enviado el: sábado, 27 de junio de 2020 20:48
Para: [hidden email]
Asunto: Re: Show an alternate image when the original is not found

 

2.- About package. the right one for image controls is "org.apache.royale.jewel.beads.controls.image"

 

I don’t see anything specific to Jewel here, so I think this belongs in Basic.

 



On Jun 27, 2020, at 9:36 PM, Carlos Rovira <[hidden email]> wrote:

 

Hi Maria Jose,

 

Thanks for the contribution!. Some points:

 

1.- About the name: In Jewel the we don't suffix it with "Bead", to make names less verbose since is extendin IBead, so we know it is a bead.

Apart from that I see more descriptive "ErrorImage" or maybe it's just me? Since "AlternativeImage" seems to me a bead that could switch the current imagen with another alternative one, and not specifically one that is a replacement when we get a load error.

2.- About package. the right one for image controls is "org.apache.royale.jewel.beads.controls.image"

3.- property could be just "src", since the name of the bead class already give context.(so both the image control and the bead will have "src" property what seems to me more coherent for naming.

 

Apart from that, if you tried your code and worked you can submit it. As well if you want you can add a TDJ example in the image page and I can prepare an official image for jewel error image placeholder. This last one as you wish, if you don't have time, I can add it myself as I merge your PR

 

thanks!

 

Carlos

 

 

El vie., 26 jun. 2020 a las 22:05, Maria Jose Esteve (<[hidden email]>) escribió:

Hello,

I've had a bit of time and implemented "something akin to a bead" 😝. In the end I have called it AlternativeImageBead

 

As you see?

package xxx.html.beads {

 

    import org.apache.royale.core.IBead;

    import org.apache.royale.core.IStrand;

    import org.apache.royale.events.Event;

 

    COMPILE::JS {

        import org.apache.royale.core.WrappedHTMLElement;

    }

    import org.apache.royale.core.IRenderedObject;

 

    public class AlternativeImageBead implements IBead {

 

        protected var _strand:IStrand;

 

        public function AlternativeImageBead() {

        }

 

        /**

         *  @copy org.apache.royale.core.IBead#strand

         *

         *  @langversion 3.0

         *  @playerversion Flash 10.2

         *  @playerversion AIR 2.6

         *  @productversion Royale 0.9.8

         */

        public function set strand(value:IStrand):void {

            _strand = value;

            COMPILE::JS {

                (_strand as IRenderedObject).element.addEventListener('error', errorHandler);

            }

        }

 

        private var _altSrc:String;

 

        public function get altSrc():String {

            return _altSrc;

        }

 

        public function set altSrc(value:String):void {

            _altSrc = value;

 

        }

 

        COMPILE::JS

        private function errorHandler(event:Event):void {

        

            var imgEle:HTMLImageElement = hostElement as HTMLImageElement;

            if (imgEle.src != _altSrc)

            {

                imgEle.src = _altSrc;

            }

        }

        

        COMPILE::JS

        protected function get hostElement():WrappedHTMLElement

        {

            return (_strand as IRenderedObject).element;

        }

 

    }

}

 

What would you change?

 

Hiedra

 

De: Yishay Weiss <[hidden email]>
Enviado el: miércoles, 17 de junio de 2020 16:54
Para: [hidden email]
Asunto: RE: Show an alternate image when the original is not found

 

Great. If it’s simpler for you, try first to make it work in your application source, and then if you need help integrating it in the framework, you can ask for our help here.

 

From: [hidden email]
Sent: Wednesday, June 17, 2020 5:41 PM
To: [hidden email]
Subject: RE: Show an alternate image when the original is not found

 

I will try and tell you. 😝

Thanks to both of you.

 

Hiedra.

 

 

De: Carlos Rovira <[hidden email]>
Enviado el: miércoles, 17 de junio de 2020 15:48
Para: [hidden email]
Asunto: Re: Show an alternate image when the original is not found

 

Hi Maria Jose,

it'd be good to have such bead as Yishay comment. Please try to make it work and report. If that works add a PR

thanks!

 

El mié., 17 jun. 2020 a las 14:22, Yishay Weiss (<[hidden email]>) escribió:

Looking at your solution I would create a bead for image. Something like (not tested, needs work):

package {

Class ImageAvatarBead implements IBead {

private var _avatarSrc:String;

private var _strand:IStrand;

 

public function set avatarUrl(value:String):void

{

                _avatarUrl = value;

}

 

public function set strand(value:IStrand):void

{

                _strand = value;

                (value as IRenderedObject).element.addEventListener(‘error’,  errorHandler);

}

 

private function errorHandler(event:Event):void

{

                If ((_strand as IRenderedObject).element.src != _avatarSrc)

                {

                                (_strand as IRenderedObject).element.src = _avatarSrc;

                }

}

 

}

 

If you can make this work create a pull request for Royale that would be great.

 

Thanks.

 

From: [hidden email]
Sent: Wednesday, June 17, 2020 2:24 PM
To: [hidden email]
Subject: Show an alternate image when the original is not found

 

Hi,

When you have to put an image that may or may not exist, how do you do it so that it shows an alternative image?

 

We have not found a way to configure this exception in the jewel image control and we have solved it with an html injection directly:

 

 

                    <j:Label multiline="true" width="117" height="117" click="onChangeImage()" visible="{personalModel.avatarImageModel.fileData == null}">

                        <j:html>

                        <![CDATA[<img style="border-radius: 50%; width: 100%; height: 100%;" class="jewel image image-roundBorder-body"

                        onerror="if (this.src != 'assets/avatarD.png') this.src = 'assets/avatarD.png';" 

                        src="{personalModel.selectedItem.avatar}"/>]]>

                        </j:html>

                        

                    </j:Label>

 

But I don't like this solution very much and if there was another way to do it, I would prefer to change it.

Any comments will be welcome.

 

Thank you.

Hiedra.

 


 

--

 

 


 

--

Carlos Rovira