3 Replies Latest reply on Dec 4, 2009 8:26 AM by Tvoliter

    How to create a gallery in Catalyst beta 2?

    Limboistik

      Hi there,

       

      I'm using the latest build of Catalyst and I'm trying to create a simple inventory data list for cars.

      Basically right now I have a simple data list like this:

      http://www.mathewchan.com/uploads/catalyst.png

      So you can see I have three buttons (asian, domestic, euro) to link to each page which shows a list of the cars from different makes

      and I basically want to be able to click each thumbnail in the list, and it'll display the rest of the pictures of the cars.

      Each car has 6 pictures from different angles, so how would I go about implementing something like this so it's easy to manage all the data if I have to change the inventory every 2 weeks or so?

       

      Thanks!

      - Matt

        • 1. Re: How to create a gallery in Catalyst beta 2?
          Tvoliter Adobe Employee

          Here is what to do:

           

          1. Create a state for each row in the list. The state will contain the detailed information from the data grid, like the extra car photos.

           

          Now create interactions on the Data List that will go to the appropriate state when the user clicks a specific row:

           

          2. select the Data List

          3. In the Interactions panel, click "Add Interaction"

          4. Change the "choose state" combobox to the state you want to go to

          5. Change the "when any item is selected" combobox to "when a specific item is selected". A number field will appear where you can type in the row number

           

          6. Repeat 2-5 for each row in the data list.

           

          I have attached an example fxp file for you to check out.

           

          Best of luck with your project!

           

          Ty

          • 2. Re: How to create a gallery in Catalyst beta 2?
            Limboistik Level 1

            Thanks for the breakdown Ty!

             

            If I want to go more advanced, say bring in a working system of streamlining the upload process, I assume I'd have to work with flash builder to achieve that right?

             

            Basically the inventory is something that needs to be updated weekly or bi-weekly, which consists of 6 pictures per car, usually each update would require me to upload 100-200 photos, then add the info/options to each car.

             

            Is there a way to work with the layout so I can pretty much drag and drop and make some minor adjustments to make it work simplier?

            I was thinking of having each picture or row in the data list be given an ID or something and it reads dynamically from a database?

            maybe like Row 1 thumbnail will be like 1.jpg and then the 5 other pics would be in sequence, or whatever, so I just need to batch edit/name the pictures according...

             

            Is such a feat possible?

            Please keep in mind I have no coding experience, but I hope I can pickup some skills along the way

             

            Help is greatly appreciated!

             

            edit: Actually I saw a tutorial online where someone made different component/packages, can I do the same and make like a functioning gallery script? So basically when they click on a row, it goes to another state which has the gallery package placed on the page and it allows the user to go forward and back between the 6 photos...

            • 3. Re: How to create a gallery in Catalyst beta 2?
              Tvoliter Adobe Employee

              The structure I recommended earlier where there is a state that contains the detail for each row in your data list works for prototyping your design, but if you intend to update it frequently you will want a slightly different design to take over to Flash Builder.

               

              Instead of having a state per row, you will likely only need two states: one for the data list (the master view), and one for the detailed view of an item. In Catalyst you can put dummy data in the data list, but there isn't a way to feed the dummy data into the detailed view state. I would design  the detailed view state by laying out where you want text, graphics, and images, then later in Flash Builder you can make the text and images dynamic so that they pull from a database.

               

              In future versions of Catalyst I would expect users to be able to design a master/detailed view all connected to dummy data, for now you will have to rely on some coding in Flash Builder to take your project past prototyping. If you create your data list in Catalyst, it isn't too hard to hook it up to real data in Flex Builder.

               

              Here some documentation on Flex dataProvideres

              http://www.adobe.com/devnet/flex/quickstart/using_data_providers/

               

               

              Ty