9 Replies Latest reply on Nov 10, 2009 7:41 AM by TomDelorenzi

    Quick way to do this?

    TomDelorenzi

      <s:BitmapImage source="{hostComponent.icon}"/>

      I get a warning because it wants to bind to pickup changes. Thats fine. One way around it is to put a function call in there that returns that value but is there a nicer way to just inline it as read only/take this exact value or something?

        • 1. Re: Quick way to do this?
          TomDelorenzi Level 1

          Also, is there a way to use paths with percent widths and heights? I want to make a notched fill, so a rectangle where on the right side it indents concave.

          So it would look like this where 0 means 0%


          <s:Path data="h 100 l 80 50 l 100 100 h 0 v 0 z>
                  <s:fill>
                      <s:SolidColor color="0xAAAAFF" alpha="0.5"/>
                  </s:fill>
          </s:Path>

          So that is a horizontal line from start(which would be 0% to 100%, then down left to 80%,50% then down right to 100%,100%, then over left to 0% and then back up to 0%

          If not I guess the best way would be to make it a fixed size and then use scaling on it as the skin's host component's size changes?

          • 2. Re: Quick way to do this?
            mewk Level 3

            To address your second question, please check out the following links:

            With all the fuss, I just tried a very simple test and it seems there is no real difficulty in making mxml/fxg paths dynamic and bindable. Here is some code for you to try:

             

            -------------------- main.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/halo"
                     xmlns:comp="components.*">
            
              <s:VGroup x="100" y="100">
                <comp:MySkinCont id="myBox" width="400" height="300" myPoint="40" myStart="0"/>
                <s:HGroup height="30" width="200">
                  <s:Label text="change line segement: " />
                  <s:NumericStepper value="@{myBox.myPoint}" minimum="0" maximum="100" stepSize="5" />
                </s:HGroup>
                <s:HGroup height="30" width="200">
                  <s:Label text="change starting point: " />
                  <s:NumericStepper value="@{myBox.myStart}" minimum="0" maximum="100" stepSize="5" />
                </s:HGroup>
              </s:VGroup>
            
            </s:Application>
            

            ---------------------- components.MySkinCont.mxml ---------------------------------------

            <?xml version="1.0" encoding="utf-8"?>
            <s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                        xmlns:s="library://ns.adobe.com/flex/spark" 
                        xmlns:mx="library://ns.adobe.com/flex/halo" 
                        width="400" height="300"
                        skinClass="skins.SkinnableContainerSkin">
              
              <fx:Script>
                <![CDATA[
                  [Bindable] public var myPoint:int;
                  [Bindable] public var myStart:int;
                ]]>
              </fx:Script>
              
            </s:SkinnableContainer>
            

            ---------------------------- skins.SkinnableContainerSkin.mxml ------------------------------

            <?xml version="1.0" encoding="utf-8"?>
            
            <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                alpha.disabled="0.5">
            
                <fx:Metadata>
                <![CDATA[ 
                  [HostComponent("components.MySkinCont")]
                ]]>
                </fx:Metadata> 
                
                <s:states>
                    <s:State name="normal" />
                    <s:State name="disabled" />
                </s:states>
                
              <s:Rect width="100%" height="100%">
                <s:stroke>
                  <s:SolidColorStroke color="black" />
                </s:stroke>
              </s:Rect>
                <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0" />
              
              <s:Path data="M {hostComponent.myStart} {hostComponent.myStart} 
                  h 100 l 80 50 l {hostComponent.myPoint} {hostComponent.myPoint} 
                  h 0 v 0 z">
                <s:fill>
                  <s:SolidColor color="0xAAAAFF" alpha="0.8"/>
                </s:fill>
              </s:Path>
            
            </s:Skin>
            

             

            And to address your first question -- you can either make the hostComponent property bindable or like you said set the property some time during the components RT initialization process. I don't know of any quick shortcuts, but really it's not that much code. If BitmapImage contained some event, like creationComplete or initialize, then I suppose you could have handled this in one line.

             

            Well, this is all I know. Good luck,

             

            - e

            • 3. Re: Quick way to do this?
              mewk Level 3

              oh, and make sure you use the latest nightly SDKs, or else the bindings won't register.

               

              - e

              • 4. Re: Quick way to do this?
                TomDelorenzi Level 1

                Thanks for the informed post. This should be exactly what I need. Very apreciated.

                • 5. Re: Quick way to do this?
                  TomDelorenzi Level 1

                  I am seeing some odd behaviour in this release. For example Panel changed its title skin part to titleDisplay. Thats fine but the error it gave when I didn't have mine named right(was using the old skin part name) was just a null pointer with nothing of mine in the stack trace. Further this is an optional skin part so having it wrong shouldn't be a problem right? After fixing that I am still getting null pointers so I think there may be others. It took quite a while to track down this first one. Any idea on this?

                  • 6. Re: Quick way to do this?
                    TomDelorenzi Level 1

                    Another odd thing I just noticed is that I have a skin that has an icon and a text label. In the beta 2 sdk it shows fine but in the new sdk it doesnt show the icon, only the text.

                     

                    They are created like this:

                    <s:Group id="group" mouseOver="{currentState='hover'}" mouseOut="{currentState='normal'}">
                            <s:layout>
                                <s:HorizontalLayout verticalAlign="middle" paddingBottom="3" paddingLeft="3" paddingRight="3" paddingTop="3"/>
                            </s:layout>
                            <s:Group id="labelIcon">
                                <s:BitmapImage source="{hostComponent.icon}"/>
                            </s:Group>
                            <s:Label id="labelText" text="{hostComponent.text}"/>
                        </s:Group>

                    • 7. Re: Quick way to do this?
                      Shongrunden Adobe Employee

                      s:BitmapImage was recently changed to only accept embedded images.  If you are using builds post 4.0.0.11376 then this might be why your image isn't showing up.

                       

                      (checkin notes here: http://forums.adobe.com/message/2361852)

                       

                      If you can't embed the image then you'll probably want to use mx:Image instead of s:BitmapImage.

                      • 8. Re: Quick way to do this?
                        Flex harUI Adobe Employee

                        Unfortunately, that may be the price you have to pay for working with beta software.  We aren't going to defend code against bad inputs and when we make changes between builds, stuff like this can happen.

                         

                        If you post the full stacktrace, we can often take a quick look and help you track down the problem.

                         

                        Alex Harui

                        Flex SDK Developer

                        Adobe Systems Inc.

                        Blog: http://blogs.adobe.com/aharui

                        • 9. Re: Quick way to do this?
                          TomDelorenzi Level 1

                          That was it. Thanks a lot! I have to say that I have worked on a lot of platforms that are "newer" like eclipse plugin development, java back when, c# when it first came out. iPhone development. Some were better then others as far as support but you guys are doing an amazing support job. By far the best I have encountered.