9 Replies Latest reply on Jun 23, 2010 4:55 AM by JaxNa

    How i can add PNG image in custom component?

    JaxNa Level 1

      Hi Guys,

       

      This is my custom Component.

      <components:EmployeeDisplay imageFile="abrilliam.png"/>


      Can you help me please how to add png format image.
      when i add png format image that time this image not displayed.
      what can i do?


      Thanks
      JaxNa

        • 1. Re: How i can add PNG image in custom component?
          AdrianWiecek

          Hi,

           

          You can embed this file using @Embed(source='image.png') or load it at run-time  and pass a reference to loaded bitmap.

          • 2. Re: How i can add PNG image in custom component?
            BhaskerChari Level 4

            Hi Jaxna,

             

            Post your code in the EmployeeDisplay component...file.

             

            Thanks,

            Bhasker Chari

            • 3. Re: How i can add PNG image in custom component?
              JaxNa Level 1

              <?xml version="1.0" encoding="utf-8"?>
              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/mx"
                  minWidth="1024" minHeight="2000"
                  xmlns:components="components.*">
                 
                   <s:BorderContainer borderColor="#0b85b7"
                                     cornerRadius="8"
                                     borderWeight="4" width="489" height="491" y="100" x="107">
                      <s:Label x="20" y="10"
                               text="Mobiles"
                               fontWeight="bold" fontSize="20"/>
                      <s:Scroller height="500" width="500">
                          <s:Group x="7" y="4" width="485" height="484" id="MobileGroup">
                              <s:layout>
                                      <s:TileLayout/>
                                  </s:layout>
                          <components:EmployeeDisplay  x="75" y="110"
                               imageFile="W580i_52x104.png"/>
                               
                      </s:Group>
                      </s:Scroller>
                      </s:BorderContainer>
              </s:Application>

               

              Thanks

              • 4. Re: How i can add PNG image in custom component?
                BhaskerChari Level 4

                Hi Jaxna,

                 

                I have asked to post your CustomComponent code:

                 

                <components:EmployeeDisplay imageFile="abrilliam.png"/>

                 

                Thanks,

                Bhasker Chari

                • 5. Re: How i can add PNG image in custom component?
                  JaxNa Level 1

                  Hi BhaskerChari,

                   

                  This is Custom Component Code..


                  <?xml version="1.0" encoding="utf-8"?>
                  <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
                      xmlns:s="library://ns.adobe.com/flex/spark"
                      xmlns:mx="library://ns.adobe.com/flex/mx">
                        
                      <mx:Image x="0" y="0"
                          source="images/{imageFile}" />
                      
                      </s:Group>

                   

                   

                  This code is in MXML

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                      xmlns:s="library://ns.adobe.com/flex/spark"
                      xmlns:mx="library://ns.adobe.com/flex/mx"
                      minWidth="1024" minHeight="2000"
                      xmlns:components="components.*">
                             
                      <!-- UI components ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                      <s:BorderContainer borderColor="#0b85b7"
                                         cornerRadius="8"
                                         borderWeight="4" width="489" height="491" y="100" x="107">
                          <s:Label x="20" y="10"
                                   text="Mobiles"
                                   fontWeight="bold" fontSize="20"/>
                          <s:Scroller height="500" width="500">
                              <s:Group x="7" y="4" width="485" height="484" id="MobileGroup">
                                  <s:layout>
                                          <s:TileLayout/>
                                      </s:layout>
                              <components:EmployeeDisplay  x="75" y="110"
                                   imageFile="W580i_52x104.png"/>
                        
                          </s:Group>
                          </s:Scroller>
                          </s:BorderContainer>
                  </s:Application>

                   

                  Thanks

                  JaxNa

                  • 6. Re: How i can add PNG image in custom component?
                    BhaskerChari Level 4

                    Hi Jaxna,

                     

                    In your custom component code below, I could see no imageFile variable declared ...

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <s:Group xmlns:fx="
                    http://ns.adobe.com/mxml/2009"
                        xmlns:s="library://ns.adobe.com/flex/spark"
                        xmlns:mx="library://ns.adobe.com/flex/mx">
                          
                        <mx:Image x="0" y="0"
                            source="images/{imageFile}" />
                        
                        </s:Group>

                     

                    Have you declared the variable imageFile in your component file above..verify it?

                     

                    If not declared then declare a variable imageFile of Sttring datatype and make it Bindable...

                     

                    [Bindable]private var imageFile:String="";

                     

                     

                    So your new component code should be:

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <s:Group xmlns:fx="
                    http://ns.adobe.com/mxml/2009"
                        xmlns:s="library://ns.adobe.com/flex/spark"
                        xmlns:mx="library://ns.adobe.com/flex/mx">
                        

                       [Bindable]private var imageFile:String="";


                        <mx:Image x="0" y="0"
                            source="images/{imageFile}" />
                        
                        </s:Group>

                     

                    Also verify the path to the image once...whether it is given correct path from the hierarchy...

                     

                    Thanks,

                    Bhasker Chari

                    • 7. Re: How i can add PNG image in custom component?
                      JaxNa Level 1

                      Hi Bhaskar Chari

                       

                      Thanks a lot Bhaskar Chari  u solved my problem....

                       

                      • 8. Re: How i can add PNG image in custom component?
                        BhaskerChari Level 4

                        Cheers

                        JaxNa...I am glad it solved your problem....

                         

                        What was the mistake you did...?? Is it the same as I explained..?

                         

                        Thanks,

                        Bhasker Chari

                        • 9. Re: How i can add PNG image in custom component?
                          JaxNa Level 1

                          Ya i did the same mistake as u explain..

                           

                          Thanks Bhaskar