5 Replies Latest reply on Jun 2, 2009 1:34 PM by deepa subramaniam (adobe)

    Issues with Skins (all the documentation / syntax changes) and complaint.

    flairjax Level 1

      First lets get to the issue.  I am trying to duplicate Ely's customized skinned LIST component (http://tv.adobe.com/#vi+f1472v1501).  I am trying to piece this together since the video doesn't offer up the source anywhere and since the Gumbo syntax has changed so much.  When I try my code I get [Object object] in each line of the list.

       

      It appears in the video that he has the Skin and the ItemRenderer combined into the same file.

       

      HERE IS MY ListSkin.mxml file: ------------------------

       

      <?xml version="1.0" encoding="utf-8"?>
      <Skin xmlns="http://ns.adobe.com/mxml/2009">
          <Rect left="0" top="0" right="0" bottom="0" radiusX="24" radiusY="24" >
              <stroke>
                  <Stroke color="#CCCCAA" weight="2" />
              </stroke>
          </Rect>
          <Group left="8" top="8" bottom="8" right="8" fontSize="24" layout="layout.VerticalLayout">
                  {data.items}
          </Group>
         
          <Library>
              <Definition name="itemRenderer">
                  <Skin xmlns="http://ns.adobe.com/mxml/2009">
                      <states>
                          <State name="over" />
                          <State name="selected" />
                      </states>
                      <Rect width="100%" radiusX="5" radiusY="5">
                          <stroke>
                              <Stroke color="#1A2953" weight="2" scaleMode="none" />
                          </stroke>
                      </Rect>
                      <Label text="{data.label}" fontWeight="bold" textAlign="left" color="#000000"
                               verticalCenter="0" left="10" right="0" />
                     
                      <Group left="0" top="32" bottom="0" right="0">
                          <Rect horizontalCenter="0" top="0" bottom="0" width="50" radiusX="4" alpha="1">
                              <stroke>
                                  <Stroke color="#CCCCAA" weight="2" />
                              </stroke>
                              <fill>
                                  <SolidColor id="gfill" color="#FFAAAA" alpha="0" alpha.over=".5" alpha.selected="1" />
                              </fill>
                          </Rect>
                          <Image source="{data.icon}" horizontalCenter="0" verticalCenter="0" width="40%"  />
                      </Group>
                     
                      <Group left="58" top="32" bottom="0" right="8" >
                          <Rect left="0" top="0" bottom="0" right="0" alpha=".6" radiusX="4" radiusY="4" >
                              <stroke>
                                  <Stroke color="#CCCCAA" weight="2" />
                              </stroke>
                              <fill>
                                  <SolidColor id="gfill2" color="#FFAAAA" alpha="0" alpha.over=".5" alpha.selected="1" />
                              </fill>
                          </Rect>
                          <Label text="name" id="nameLabel" fontWeight.selected="bold" fontFamily="Arial" />
                          <Label text="phone" id="phoneLabel" fontWeight.selected="bold" fontFamily="Arial" />
                          <Label text="{data.first} {data.last}" fontWeight="normal" fontFamily="Arial" fontStyle="italic" />
                          <Label text="{data.phone}" fontWeight="normal" fontFamily="Arial" fontStyle="italic" />
                          <Rect top="8" bottom="8" left="120" right="2" width="2" height="2" >
                              <fill>
                                  <SolidColor color="#AAAAAA" />
                              </fill>
                          </Rect>
                      </Group>
                     
                  </Skin>
                 
              </Definition>
          </Library>
      </Skin>

      END-------------------------------

       

      Here is how I define my list component:

       

      <List bottom="20" top="10" left="10" right="20">
              {customers}
          </List>

       

       

      Here is my style:

       

      <Style>

              List { skinZZ: ClassReference("assets.style.skins.ListSkin3"); }
      </Style>

       

      Honestly, with all the syntax changes and examples floating around its difficult to understand what namespaces we should be using.


      I really wished Adobe would make one giant announcement with what namespaces we should be using and tell everyone to remove, delete, or fix any tutorials or examples. Its frustrating to find an example three different ways, none of which work.

       

      If anyone can lend a hand it would be appreciated.   I have tried (http://blog.smartlogicsolutions.com/2008/08/23/recreating-ely%E2%80%99s-flex-4-list-compon ent-series-part-3-adding-transitions/comment-page-1/#comment-2733) but this is an example that doesn't work since the namespaces have changed.  I have boiled this guys example down to <content> in the skin file as the issue as I am getting (Could not resolve <content> to a component implementation.  I guess you used to have to tell Flex where the content is your skin?