26 Replies Latest reply on Mar 1, 2011 10:26 AM by chriswillis100

    Custom Colorpicker

    chriswillis100 Level 1

      Hey guys,

       

      I'm quite new to flex and i'm using an SDK that provents me from using the mx:colorpicker function

       

      What is the best way to go about making a simple one?

       

      Basically what i need it to do is look and act like a normal colorpicker (press the colorpicker button and the pallet slides out), but i only need 12 boxes for the colors (about 35x35)

       

      Can someone explain the simplest way of doing this

       

      Thanks

      Chris

        • 1. Re: Custom Colorpicker
          miguel8312 Level 3

          simplest way is to use the 3.5 sdk. why not do that... is there a reason your app must be on 4,0? you can also just import the mx: namespace into your app and then it should be available to you.

          Miguel

           

          Message was edited by: miguel8312

          • 2. Re: Custom Colorpicker
            chriswillis100 Level 1

            Because i'm using a Mobile Project, so i need to use flex hero because 3.5 doesn't support mobile projects

            • 3. Re: Custom Colorpicker
              miguel8312 Level 3

              I just did this using sdk 4 and it worked like a charm...

               

               

              <?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="955" minHeight="600">
              <fx:Declarations>
                <!-- Place non-visual elements (e.g., services, value objects) here -->
              </fx:Declarations>


              <mx:ColorPicker>
               
              </mx:ColorPicker>
              </s:Application>

              • 4. Re: Custom Colorpicker
                chriswillis100 Level 1

                I think you're misunderstanding me,

                 

                I'm using an SDK that wont allow me to use flex 3.5 in a mobile application

                 

                Here's the error message

                 

                 

                The prefix "mx" for element "mx:ColorPicker" is not bound

                • 5. Re: Custom Colorpicker
                  robglobal

                  You're missing the namespace that defines what "mx" means:

                   

                  xmlns:mx="library://ns.adobe.com/flex/mx"

                   

                  in your top MXML node

                  • 6. Re: Custom Colorpicker
                    chriswillis100 Level 1

                    Sorry yeah i did forget that

                     

                    This is the error message:

                     

                     

                    Could not resolve <mx:ColorPicker> to a component implementation.

                    • 7. Re: Custom Colorpicker
                      Flex harUI Adobe Employee

                      Mobile projects probably don't include the mx.swc in them.  The old MX

                      components don't have a good UI for mobile and will add weight to the app.

                       

                      If you only have 12 colors, put them in a List or TileList and use a state

                      and transition to slide them out or in based on a ToggleButton.

                      • 8. Re: Custom Colorpicker
                        chriswillis100 Level 1

                        Ok, so i guess i'll use buttons as the color blocks

                         

                        But i need to call the color of the button and i can't do that

                        • 9. Re: Custom Colorpicker
                          Flex harUI Adobe Employee

                          One option would be to use a List with a renderer that just colors its

                          background based on the data property, not a button.  Then the selectedIndex

                          would map to the color

                           

                          You could also custom skin a buttonbar and get the same effect.

                          • 10. Re: Custom Colorpicker
                            chriswillis100 Level 1

                            But with a list i could only have 1 block of colour per row right?

                             

                            Or i could only select one row even if it did have lots of color blocks

                            • 11. Re: Custom Colorpicker
                              Flex harUI Adobe Employee

                              A TileList could have multiple renderers per row

                              • 12. Re: Custom Colorpicker
                                chriswillis100 Level 1

                                How do you create the empty rows and coloums in the list and how to you relate to them in the item renderer?

                                • 13. Re: Custom Colorpicker
                                  chriswillis100 Level 1

                                  I pretty much need this spelled out to me, because i've been trying for two days to sort this and i've got nowhere

                                   

                                  Thanks

                                  Chris

                                  • 14. Re: Custom Colorpicker
                                    Flex harUI Adobe Employee

                                    Draw a picture of what you want it to look like.

                                    • 15. Re: Custom Colorpicker
                                      chriswillis100 Level 1

                                      colorpicker.png

                                      Thats what i'd like it to be like

                                      If you could write a list of things to do that would be much appeciated

                                       

                                      Thanks

                                      Chris

                                      • 16. Re: Custom Colorpicker
                                        Flex harUI Adobe Employee

                                        I started with the Spark ColorPicker example on my blog.

                                         

                                        In ColorPickerListSkin.as, I:

                                        1) ripped out the Hgroup containing the Preview and TextInput, and all code

                                        that related to it

                                        2) changed from FocusGroup to s:Group

                                        3) modified the sizes of the swatchPanel Rect and DataGroup

                                        4) modified the size of the swatch

                                         

                                         

                                        In SparkColorPicker.as, I replaced the WebSafePalette with a custom

                                        ArrayList with the desired colors.

                                        • 17. Re: Custom Colorpicker
                                          chriswillis100 Level 1

                                          private var colorlist:ArrayList

                                              private var colors:Array = new Array(0x000000, 0xCD0000, 0x00CD00)

                                           

                                              public function SparkColorPicker()

                                              {

                                                  super();

                                                  colorlist = new ArrayList(colors)

                                           

                                                  labelFunction = blank;

                                                  labelToItemFunction = colorFunction;

                                                  openOnInput = false;

                                                  addEventListener(Event.CHANGE, colorChangeHandler);

                                              }

                                           

                                           

                                          I made the WebSafePallet into an array list like this, however i just get a big black box when i open the colorpicker, i can change the size of it by changing the swatch panel size but i cant get the 3 indivual swatchs to show up that i put in the array

                                          • 18. Re: Custom Colorpicker
                                            chriswillis100 Level 1

                                            any ideas?

                                            • 19. Re: Custom Colorpicker
                                              Flex harUI Adobe Employee

                                              That looked ok.  Here's the popupanchor as I have it.

                                               

                                                  <s:PopUpAnchor id="popUp"  displayPopUp.normal="false"

                                              displayPopUp.open="true" includeIn="open"

                                                      left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"

                                                      popUpPosition="below" popUpWidthMatchesAnchorWidth="false">

                                                       

                                                      <!---

                                                            This includes borders, background colors, scrollers, and

                                              filters.

                                                            @copy

                                              spark.components.supportClasses.DropDownListBase#dropDown

                                                      -->

                                                      <s:Group id="dropDown" >

                                                       

                                                          <!--- @private -->

                                                          <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20"

                                              alpha="0.45" distance="7"

                                                               angle="90" color="#000000" left="0" top="0" right="0"

                                              bottom="0"/>

                                                       

                                                          <!--- @private -->

                                                          <s:Rect id="border" left="0" right="0" top="0" bottom="0">

                                                              <s:stroke>

                                                                  <!--- border stroke @private -->

                                                                  <s:SolidColorStroke id="borderStroke" weight="1"/>

                                                              </s:stroke>

                                                          </s:Rect>

                                                           

                                                          <!-- fill -->

                                                          <!--- Defines the appearance of drop-down list's background

                                              fill. -->

                                                          <s:Rect id="background" left="1" right="1" top="1" bottom="1" >

                                                              <s:fill>

                                                              <!---

                                                                  The color of the drop down's background fill.

                                                                  The default color is 0xFFFFFF.

                                                              -->

                                                                  <s:SolidColor id="bgFill" color="0xFFFFFF" />

                                                              </s:fill>

                                                          </s:Rect>

                                                          <s:VGroup id="swatchpanel" left="0" top="0" right="0" bottom="0"

                                              >

                                                              <s:Group>

                                                                  <s:Rect left="0" top="0" right="0" bottom="0" width="90"

                                              height="120" >

                                                                      <s:fill>

                                                                          <s:SolidColor color="0x0" />

                                                                      </s:fill>

                                                                  </s:Rect>

                                                                  <s:DataGroup id="dataGroup" left="0" top="0" right="0"

                                              bottom="0" width="90" height="120" >

                                                                      <s:layout>

                                                                          <s:TileLayout verticalGap="0" horizontalGap="0"

                                              requestedColumnCount="3" requestedRowCount="4"/>

                                                                      </s:layout>

                                                                      <s:itemRenderer>

                                                                          <fx:Component>

                                                                              <s:ItemRenderer>

                                                                                  <s:states>

                                                                                      <s:State name="normal" />

                                                                                      <s:State name="hovered" />

                                                                                      <s:State name="selected" />

                                                                                  </s:states>

                                                                                  <s:Rect id="swatch" width="30"

                                              height="30">

                                                                                      <s:fill>

                                                                                          <s:SolidColor color="" />

                                                                                      </s:fill>

                                                                                      <s:stroke>

                                                                                          <s:SolidColorStroke

                                              color="0xFFFF00" alpha.hovered="1" alpha="0" />

                                                                                      </s:stroke>

                                                                                  </s:Rect>

                                                                              </s:ItemRenderer>

                                                                          </fx:Component>

                                                                      </s:itemRenderer>

                                                                  </s:DataGroup>

                                                              </s:Group>

                                                          </s:VGroup>

                                                      </s:Group>

                                                  </s:PopUpAnchor

                                              • 20. Re: Custom Colorpicker
                                                chriswillis100 Level 1

                                                Just copied your code in and got this:

                                                 

                                                 

                                                Initializer for 'color': cannot parse value of type uint from text ' '

                                                 

                                                 

                                                It's to do with this part of the code:

                                                 

                                                 

                                                <s:fill>

                                                <s:SolidColor color=" " />

                                                </s:fill>

                                                 

                                                 

                                                 

                                                • 21. Re: Custom Colorpicker
                                                  Flex harUI Adobe Employee

                                                  The forum software often eats code.

                                                   

                                                  It should be a binding to data.  Quote, open curly, data, close curly, end

                                                  quote

                                                  • 22. Re: Custom Colorpicker
                                                    chriswillis100 Level 1

                                                    Ok, got rid of the error but i still have just a black dropdownbox when i expand it

                                                    • 23. Re: Custom Colorpicker
                                                      Flex harUI Adobe Employee

                                                      Let's see if the forum will let me attach my code:

                                                      • 24. Re: Custom Colorpicker
                                                        chriswillis100 Level 1

                                                        Check your pm Flex harUI

                                                        • 25. Re: Custom Colorpicker
                                                          Flex harUI Adobe Employee

                                                          Try attaching this way.

                                                          • 26. Re: Custom Colorpicker
                                                            chriswillis100 Level 1

                                                            You're a genius!

                                                             

                                                            It's all fixed now

                                                             

                                                            Thank you so much for persisting with me

                                                             

                                                            Chris