12 Replies Latest reply on Feb 11, 2010 11:19 AM by Learningflex003

    Classified designe idea?

    Learningflex003

      Hello All,

       

      I'm not looking to create a classified application but I need to apply the classified look and feel concept to an application I'm working on. More specifically a way to list the categories and the sub categories one would find in a classified script.

       

      I was thinking about putting it into a grid like container but then I realized certain categories might have larger sub categories creating a lot of white space in the next grid box.

       

      So, im looking for some ideas, how best to do this project.

       

      Any help you can provide me would be greatly appreciated.

       

      thanks all

        • 1. Re: Classified designe idea?
          archemedia Level 4

          What do you mean by a classified application?

           

          If you want to create a kind of list or grid where each entry might have diffrent dimensions, then use an itemRenderer to render your entries and set the variableRowHeight to true. This way, all entries will have their own look and height.

           

          Dany

          • 2. Re: Classified designe idea?
            Gregory Lafrance Level 6

            I think its an app to display data as classified ads, correct?

             

            In that case I would Google for someone who has created a custom container whose elements flow kind of like columns.

            • 3. Re: Classified designe idea?
              Learningflex003 Level 1

              Hey guys,

               

              Thanks for the the answers.

               

              2Things.

              I google for example and either i didnt use the right key words or i just missed but i couldnt find anything close to what im looking for. having said that im some what new to Flex and the project is more for learning and  running into problems i cants sovle seem to help the learning curve..lol. but if you do come across a link please forward it my way.. always looking for ideas.

               

              sec.

              Dany,

              What controls or containers would you say i should be look into.. Im assuming you cant use the lay out containers to do what im looking for..

              are you refereing to a specific controls like the grid contorl?

               

              more thoughts please.

              cheers

              • 4. Re: Classified designe idea?
                Gregory Lafrance Level 6

                You didn't answer my question trying to clarify what you are trying to do. Its not clear.

                • 5. Re: Classified designe idea?
                  Learningflex003 Level 1

                  Hey Grey,

                   

                  I Googled some example concept ideas...

                  http://london.kijiji.ca/

                  http://www.getafreelancer.com/

                  http://classifieds.bmscripts.com/

                   

                  simple display of categorie and sub categories..

                   

                  so what do you think?

                   

                  r

                  • 6. Re: Classified designe idea?
                    archemedia Level 4

                    I would do it as follows:

                     

                    Make a custom component for each kind of display you want. So, for instance,

                    Schermafbeelding 2010-02-05 om 08.53.41.png

                    This could be a datagrid with 2 columns. Make sure the widths of the custom component are set to 100% so they take their parent widhts later on.

                     

                    Another example:

                    Schermafbeelding 2010-02-05 om 08.58.19.png

                    This is a simple tree control.

                     

                     

                    When you've created all the custom components create a VBox in which you add the required custom components.Give it the width you want.

                    This way you can set up a complete layouts which are dynamically built.

                     

                    Hope this helps

                     

                    Dany

                    1 person found this helpful
                    • 7. Re: Classified designe idea?
                      Learningflex003 Level 1

                      Hey Dany,

                       

                      Awesome, Thanks for the help.

                      I'm going to try your second suggestion.

                       

                      Creating new component, now im going into a area I hven't really spent too much time in.

                      Don't be surprised if I come back crying...lol

                       

                      regarding your sec. suggestion, Im assuming with the arrow pointing to the right that i can disable the option to click to move down a level.

                       

                      will see how i do this..

                       

                      Thanks again

                      Cheers

                      R

                      • 8. Re: Classified designe idea?
                        Gregory Lafrance Level 6

                        I suggest not using DataGrid or Tree, because those controls would be too heavy for what you are trying to do.

                         

                        You should be able to achieve this very easily with a simple custom control. I'll take a shot at creating one now and get bac to you soon.

                        1 person found this helpful
                        • 9. Re: Classified designe idea?
                          Learningflex003 Level 1

                          Sounds good Greg,

                           

                          Cant wait to see your idea.

                           

                          Cheers

                          • 10. Re: Classified designe idea?
                            Gregory Lafrance Level 6

                            This code should be a good start. You might be able to simplify it, and you'll of course need to find a custom container that will allow the categories to flow, but hopefully I've answered this question (and get my 10 points!!! Give Danny 5, he deserves it.).

                             

                            <?xml version="1.0" encoding="utf-8"?>
                            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"
                              creationComplete="dataService.send();" xmlns:comp="components.*">
                              <mx:Script>
                                <![CDATA[
                                  import mx.collections.XMLListCollection;
                                  import mx.rpc.events.ResultEvent;
                                  
                                  [Bindable] private var dataXLC:XMLListCollection;
                                  private function dataHandler(evt:ResultEvent):void{
                                    dataXLC = new XMLListCollection(evt.result..category as XMLList);
                                  }       
                                ]]>
                              </mx:Script>
                              <mx:HTTPService id="dataService" url="data/items.xml" resultFormat="e4x"
                                result="dataHandler(event);"/>  
                              <mx:Repeater id="rp" dataProvider="{dataXLC}">
                                <comp:CategoryView dataXML="{rp.currentItem}"/>        
                              </mx:Repeater>
                            </mx:Application>
                            

                             

                            ------------ components/CategoryView.mxml --------------------

                            <?xml version="1.0" encoding="utf-8"?>
                            <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
                              <mx:Script>
                                <![CDATA[
                                  [Bindable] private var _dataXML:XML = new XML();
                                  [Bindable] private var _category:String = "";
                                  [Bindable] private var _categoryURL:String = "";
                                  [Bindable] private var _categoryIcon:String = "";
                                  [Bindable] private var _items:XMLList = new XMLList();
                                  [Bindable] private var _length:uint;
                                  
                                  public function set dataXML(value:Object):void{
                                    _dataXML = value as XML;
                                    _category = _dataXML.@name;
                                    _categoryURL = _dataXML.@url;
                                    _categoryIcon = _dataXML.@icon;
                                    trace(_category);
                                    trace(_categoryURL);
                                    trace(_categoryIcon);
                                    _items = _dataXML..item;
                                    _length = _items.length();
                                  }
                                ]]>
                              </mx:Script>
                              <mx:HBox horizontalGap="0">
                                <mx:Image source="{_categoryIcon}"/>
                                <mx:LinkButton label="{_category}" click="navigateToURL(new URLRequest('http://www.' + _categoryURL), '_blank');"/>
                              </mx:HBox>
                              <mx:Repeater id="rp" dataProvider="{_items}">
                                <mx:HBox horizontalGap="0">
                                  <mx:Image source="{rp.currentItem.@icon}"/>
                                  <mx:LinkButton label="{rp.currentItem.@name}" click="navigateToURL(new URLRequest('http://www.' + rp.currentItem.@url), '_blank');"/>
                                </mx:HBox>
                              </mx:Repeater>
                            </mx:VBox>
                            

                             

                             

                            ---------------- data/items.xml ---------------------

                            <?xml version="1.0" encoding="utf-8"?>
                            <items>
                                <category name="buy and sell" url="google.com" icon="assets/images/29pxDot000000.png">
                                    <item name="art, collectibles" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="baby items" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="books" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="business, industrial" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="cameras, camcorders" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="cds, dvds, blu-ray" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="clothing" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="computers" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="computer accessories" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="electronics" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="furniture" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="health, special needs" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="hobbies, crafts" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="home appliances" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="home & garden" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="jewellery, watches" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="musical instruments" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="phones, PDAs, ipods" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="sports, bikes" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="tickets" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="tools, equipment" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="toys, games" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="video games, consoles" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="other" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                </category>
                                <category name="services" url="google.com" icon="assets/images/29pxDot000099.png">
                                    <item name="childcare, nanny" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="cleaners, cleaning" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="computer" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="entertainment" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="financial, legal" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="fitness, personal trainer" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="health, beauty" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="moving, storage" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="music lessons" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="painters, painting" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="photography, video" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="skilled trades" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="tutors, languages" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="wedding" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="travel, vacations" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="other" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                </category>
                                <category name="cars & vehicles" url="google.com" icon="assets/images/29pxDot009900.png">
                                    <item name="cars (under / over $5K)" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="SUVs, trucks, vans" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="classic cars" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="auto parts, tires" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="automotive services" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                </category>
                                <category name="motorcycles" url="google.com" icon="assets/images/29pxDot00FF00.png">
                                    <item name="ATVs, snowmobiles" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="boats, watercraft" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="RVs, campers, trailers" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="heavy equipment" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="other" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                </category>
                                <category name="housing" url="google.com" icon="assets/images/29pxDot33CCFF.png">
                                    <item name="apartments for rent" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="commercial" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="house rental" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="housing for sale" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="real estate services" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="room rental, roommates" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="short term rentals" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="storage, parking" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="other" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                </category>
                                <category name="vacation rentals" url="google.com" icon="assets/images/29pxDot660066.png">
                                    <item name="Canada" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="United States" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="Others" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                </category>
                                <category name="community" url="google.com" icon="assets/images/29pxDot990000.png">
                                    <item name="activity partners" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="artists, musicians" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="events" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="classes" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="garage sales" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="groups" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="leisure time" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="lost & found" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="rideshare" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="volunteers" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="other" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                </category>
                                <category name="pets" url="google.com" icon="assets/images/29pxDot999999.png">
                                    <item name="accessories" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="animal, pet services" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="birds for sale" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="cats, kittens for sale" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="dogs, puppies for sale" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="livestock for sale" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="other pets for sale" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="to give or donate" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="other" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                </category>
                                <category name="jobs" url="google.com" icon="assets/images/29pxDotCC0099.png">
                                    <item name="accounting, mgmt" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="child care" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="bar, food, hospitality" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="cleaning, housekeeper" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="construction, trades" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="customer service" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="driver, security" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="general labour" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="graphic, web design" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="hair stylist, salon" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="office mgr, receptionist" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="part time, students" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="programmers, computer" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="sales, retail sales" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="tv, media, fashion" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="other" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                </category>
                                <category name="resumes" url="google.com" icon="assets/images/29pxDotCCCC00.png">
                                    <item name="(more)" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                </category>
                                <category name="personals" url="google.com" icon="assets/images/29pxDotFF0000.png">
                                    <item name="just friends" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="relationships, dating" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="casual encounters" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="long lost relationships" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                    <item name="missed connections" url="google.com" icon="assets/images/5pxDot330099.png"/>
                                </category>
                            </items>
                            
                            

                             

                             

                             

                            • 11. Re: Classified designe idea?
                              Gregory Lafrance Level 6

                              I put the code on my web site. You can thus more easily get the code and images:

                               

                              http://www.chikaradev.com/flex/apps/ClassifiedAds/

                              • 12. Re: Classified designe idea?
                                Learningflex003 Level 1

                                Helly Gery,

                                 

                                Awesome answer.

                                Thank you for the answer. your reply helped alot. but i stll need to fine tune the script.

                                I played around with your script and its really nice.. took abit to understand the code being new to flex but my understanding is getting better.

                                 

                                couple question if you don't mine.

                                Looking at Danys post and the visual example more specifically the "websites IT & software" image.

                                 

                                1. how do i control the spacing between the listing example .net, access, active directory etc. its nice and small and with the example you provided it takes  quite a bit of space to display. is the spacing due to the button line?

                                 

                                2. is it possible to control how many categories (not the sub categories) are displayed horizontaly?

                                Looking at your example and the link you provided: http://www.chikaradev.com/flex/apps/ClassifiedAds/

                                 

                                you have: buy &sell, services, cars& vehicles, motorcycle, housing, vacation rentals, etc

                                how do i control the number of  categories to display across the screen and if it reaches say 3 cols, i like it to move to the next row or line per say.

                                I tried putting it in a grid but is started displaying scroll bars and wasnt too pleasing looking.

                                 

                                Thank you for your help