7 Replies Latest reply on Dec 9, 2009 2:11 PM by cyber0897

    spark list remove border

    cyber0897 Level 1

      hi, im wondering if there is a way to remove the border after every item from the spark list??

       

      ive tried doing borderAlpha="0" and borderVisible="false" but it is still there....

       

      oh and also... if there is a way i can replace that border with an image instead??

        • 1. Re: spark list remove border
          David_F57 Level 5

          Hi,

           

          When you say the 'border' from every item in the list, what do you mean exactly, are you using a component such as a label in the list ?

           

          Normally the list has a border but generally if you have an item such as a string in the list there is no border.

           

          David.

          1 person found this helpful
          • 2. Re: spark list remove border
            David_F57 Level 5

            Hi,

             

            I had 10 minutes to kill, so is this the sort of effect you are trying to achieve ?

             

            http://ezflex.net/simplelist/

             

             

            David.

            1 person found this helpful
            • 3. Re: spark list remove border
              cyber0897 Level 1

              yes!! thats it... except when i do the borderVisible="false" it dosen't work... lol i have no idea why...

               

              the code i have is,

               

              <mx:TabNavigator id="tabNav" width="275" tabStyleName="tabStyle" fontWeight="bold" height="400" paddingTop="0" tabWidth="137.5" creationPolicy="all" borderVisible="false">
                          <mx:VBox label="USER OPTIONS" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
                              <s:List id="userOptions" width="100%" height="100%" itemRenderer="modules.apx32.myComponents.listRenderer"
                                      borderVisible="false" contentBackgroundColor="#e9e9e9"
                                      change="userOptionsChange(event)">
                                  <s:dataProvider>
                                      <s:XMLListCollection id="userOptionProvider" />
                                  </s:dataProvider>
                              </s:List>
                          </mx:VBox>
                          <mx:VBox label="TROUBLESHOOTING">
                              <s:List id="trouble" width="100%" height="100%" itemRenderer="modules.apx32.myComponents.listRenderer"
                                      borderAlpha="0" borderVisible="false" contentBackgroundColor="#e9e9e9">
                                  <s:dataProvider>
                                      <s:XMLListCollection id="troubleShootProvider" />
                                  </s:dataProvider>
                              </s:List>
                          </mx:VBox>
                      </mx:TabNavigator>

               

               

              and the result is the image i attached to this post... i dont know where the grey lines are showin up from... lol

              • 4. Re: spark list remove border
                Shongrunden Adobe Employee

                The grey color you are seeing is BABABA.  You might try searching your application for any references to that color.  Maybe you are setting something in your renderer or a background on the application?

                • 5. Re: spark list remove border
                  cyber0897 Level 1

                  hey shongrunden thanks for the reply! i searched through my application but did not find any reference to that color...

                  i've included the code for both itemrenderer and the main respectively below...

                   

                  <?xml version="1.0" encoding="utf-8"?>

                  <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                  xmlns:s="library://ns.adobe.com/flex/spark"
                                  xmlns:mx="library://ns.adobe.com/flex/halo" height="40">

                      <s:states>
                          <s:State name="normal" />
                          <s:State name="hovered" stateGroups="[hoveredStates]" />
                          <s:State name="selected" stateGroups="[selectedStates]" />
                          <s:State name="normalAndShowsCaret" />
                          <s:State name="hoveredAndShowsCaret" stateGroups="[hoveredStates]" />
                          <s:State name="selectedAndShowsCaret" stateGroups="[selectedStates]" />
                      </s:states>
                     
                      <s:Rect left="0" bottom="1" right="1" height="2">
                          <s:fill>
                              <s:SolidColor color="0x000000" alpha=".2"/>
                          </s:fill>
                      </s:Rect>

                      <s:Rect width="100%" height="100%">
                          <s:fill>
                              <s:SolidColor color="0x6699cc" alpha="0" alpha.hoveredStates="#2c9fe1" alpha.selectedStates="#2c9fe1" />
                          </s:fill>
                      </s:Rect>
                          <mx:Label text="{data.@label}" textAlign="center" x="75" verticalCenter=".5"
                                    color.normal="#204da2" color.hovered="#ffffff"/>
                          <!--mx:Image source="@Embed(source='../images/dottedDivider.gif')"  x="0" y="38"/-->
                     
                  </s:ItemRenderer>

                   

                   

                  <?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/halo" width="975" height="400"
                           creationComplete="app_creationComplete(event)">
                      <fx:Declarations>
                          <!-- Place non-visual elements (e.g., services, value objects) here -->
                          <!--s:HTTPService id="myXml" url="apx32TroubleshootingXml.xml" resultFormat="e4x"
                                          result="myXml_resultHandeler(event)" fault="myXml_faultHandler(event)" /-->
                      </fx:Declarations>
                      <fx:Script source="apx32Action.as" />
                      <fx:Style>
                          @namespace s "library://ns.adobe.com/flex/spark";
                          @namespace mx "library://ns.adobe.com/flex/halo";
                          .nextButton{
                              fontSize:12;
                              textRollOverColor:#333333;
                              fontFamily:dinb;
                              fontLookup: embeddedCFF;
                          }
                          .tabStyle{
                              fontSize:10;
                          }

                      </fx:Style>
                      <mx:HBox>
                          <mx:TabNavigator id="tabNav" width="275" tabStyleName="tabStyle" fontWeight="bold" height="400" paddingTop="0" tabWidth="137.5" creationPolicy="all" borderVisible="false">
                              <mx:VBox label="USER OPTIONS" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
                                  <s:List id="userOptions" width="100%" height="100%" itemRenderer="modules.apx32.myComponents.listRenderer"
                                          borderVisible="false" contentBackgroundColor="#e9e9e9"
                                          change="userOptionsChange(event)">
                                      <s:dataProvider>
                                          <s:XMLListCollection id="userOptionProvider" />
                                      </s:dataProvider>
                                  </s:List>
                              </mx:VBox>
                              <mx:VBox label="TROUBLESHOOTING">
                                  <s:List id="trouble" width="100%" height="100%" itemRenderer="modules.apx32.myComponents.listRenderer"
                                          borderAlpha="0" borderVisible="false" contentBackgroundColor="#e9e9e9">
                                      <s:dataProvider>
                                          <s:XMLListCollection id="troubleShootProvider" />
                                      </s:dataProvider>
                                  </s:List>
                              </mx:VBox>
                          </mx:TabNavigator>
                          <!--mx:ViewStack>
                              <mx:Canvas>
                                  <mx:Image source="@Embed(source='images/APX32-adjustingVolume_01.png')" />
                              </mx:Canvas>
                          </mx:ViewStack-->
                      </mx:HBox>
                      <mx:Image id="definition" width="700" height="375" x="275" y="24" />
                      <mx:HBox x="685" y="371">
                          <mx:LinkButton label="WATCH VIDEO" id="watchVideo" skin="{null}" visible="true" paddingRight="20"  />
                          <mx:LinkButton label="Back" id="back" skin="{null}" visible="false" click="backClickHandler(event)" />
                          <mx:LinkButton label="More Options" id="next" skin="{null}" visible="false" click="nextClickHandler(event)" />
                      </mx:HBox>
                      <!--mx:LinkButton label="WATCH VIDEO" id="watchVideo" skin="{null}" y="371" paddingRight="20" paddingLeft="800" />
                      <mx:LinkButton label="More Options" id="next" skin="{null}" x="830" y="371" visible="false" click="nextClickHandler(event)" /-->
                     
                  </s:Group>
                  • 6. Re: spark list remove border
                    Shongrunden Adobe Employee

                    I haven't tried it, but have a feeling its this rect:

                     

                        <s:Rect left="0" bottom="1" right="1" height="2">
                            <s:fill>
                                <s:SolidColor color="0x000000" alpha=".2"/>
                            </s:fill>
                        </s:Rect>

                     

                     

                    If you comment that out does it go away?

                    • 7. Re: spark list remove border
                      cyber0897 Level 1

                      you are the man!!! haha i commented out that <solidColor.... /> line and that didnt work, but the whole rect deleted and it works like a champ!!!

                       

                      thank you