5 Replies Latest reply on Sep 13, 2008 7:19 AM by jeffcg2

    Flex Coldfusion Wizard add filters

    jeffcg2 Level 1
      I'm a looking for examples to add filtering to the datagrid created in the Master/Detail wizard. ie. Add a textinput, date fields, etc. then pass those values to the CFC.
        • 1. Re: Flex Coldfusion Wizard add filters
          EvolvedDSM Level 2
          I suppose you could SAP a CFC every time you typed a letter but that's a lot of forward-and-back to your server. I recommend using the built-in filter that Flex provides, filterFunction. I'll give you an example:

          Create a text input and add the property "change" to it. Set 'change' = a function that will call the filter, like so....
          <mx:TextInput id="textFilter" change="filterThisInput()"/>

          In your <Script> tag, declare a new String object, like so...
          private var myFilter:String = "";

          Next you'll create the function you specified in your TextInput, like so...
          private function filterThisInput():void{
          myFilter = textFilter.text;
          myAC.filterFunction = getTheFilter;
          myAC.refresh();
          }
          Note: 'myAC' is the arrayCollection that is used as a dataProvider for your dataGrid. So whatever your arrayCollection is, it needs to set the filterFunction and then refresh itself. I'm not sure if this will work for other dataProvider types like XML collections, but you could try it. I always stick to arrayCollections though.

          Next, if you noticed from above, we set our filterFunction to 'getThisFilter'. This is the function that will do our filtering. So after the filterThisInput() function, create a new function, like so...
          private function getTheFilter(obj:Object):Boolean{
          var result:Boolean=false;
          if (!obj[cbx.selectedItem.data].length || obj[cbx.selectedItem.data].toUpperCase().indexOf(myFilter.toUpperCase()) >= 0){
          result=true;
          }
          return result;
          }
          This method will filter on the fly as you type into your text input. Within the if-statement, I have cbx.selectedItem.data. 'cbx' is actually the name of a combo box I have created below my text input that allows me to choose which column of the datagrid I wish to filter. So, when I make my selection in the combobox, it will fill in the if-statement of my filterFunction so it knows which column to filter. Of course, you could simply hard code the column dataField and have it say obj[dataField] where dataField is the record column of your arrayCollection that you wish to filter. So if your datagrid has a column like this...
          <mx:DataGridColumn id="col1" dataField="firstName"/>
          then you would specify 'firstName' as your dataField in the filter, making it obj[firstName]

          And that's it. Your application should now filter on the fly as you type into your input box.

          There is a way to get multiple filters, but that's something you can research on your own after knowing what I've posted here. Google for multiple filterFunctions, and it should give you something. I have used multiple filters before just from googling (heck, I would be lost without google when it comes to Flex).

          Good Luck. Feel free to ask questions here if you can't get it to work.
          • 2. Re: Flex Coldfusion Wizard add filters
            EvolvedDSM Level 2
            I just did a quick example to show you how it works. I uploaded it to this URL:
            http://web.tusco.net/tcjfs/flex/filter/testFilter.html

            There's source code available for you to look at. It's just a simple example with a hard-coded arrayCollection. It should be enough to let you see how smooth filtering is with filterFunction.

            And if you are truly set on filtering from a CFC, I suggest using a remoteObject to the CFC that reads your query. Simply add a "WHERE x = "flex_variable" or something similar. Again, I don't think you'll get the 'on the fly' filtering like Flex provides though.
            • 3. Re: Flex Coldfusion Wizard add filters
              jeffcg2 Level 1
              Thank you,
              I'll see if I can follow.
              • 4. Flex Coldfusion Wizard add filters
                jeffcg2 Level 1
                I appreciate the sample it does help.

                Actually the Wizard in Flex Builder 3 created a remoteObject and a main.CFC, Bean.cfc, DAO.cfc and a Gateway.cfc.

                This is nice but that doesn't help with understanding what I keep thinking should be simple stuff.
                Finding all the pieces to pass from <mx:TextInput id="textFilter" change="filterThisInput()"/> to <cfargument name="#Flex Variable#" default="" required="no"> using a remoteObject.

                I'm wading thru Adobe Flex 3 Training from the Source book.
                My impression is that remoteObjects are the way to go for larger databases. But I just haven't found a detailed simple stripped down to the essentials walkthru.

                The step from an arraycollection to a remoteObject may be simple but I just haven't got the picture yet.

                I attached the cfc, <mx:RemoteObject> and the getMasterQuery function.
                • 5. Re: Flex Coldfusion Wizard add filters
                  jeffcg2 Level 1
                  Good Ole Ben Forta and Coldfuion 8 web application construction kit vol 2. I should have read his book first. But I wasn't thinking to find Flex answers there.