We have had a few requests to elaborate the process that someone completely new to Flex would follow to get started with Flexicious. (There have been customers who have wanted to switch to Flex, just because the functionality Flexicious offers!)

So first things first – Flexcious is an extension to the base Adobe Flex DataGrid and AdvancedDataGrid components. The corresponding class names are ExtendedDataGrid and ExtendedAdvancedDataGrid. For someone who is completely new to Flex, the first step would be to get familiar with the Adobe DataGrid. Tons of resources on the web can get you started with this. Our favourites are (In no particular order):

http://blog.flexexamples.com/
http://www.adobe.com/devnet/flex/
http://www.adobe.com/devnet/flex/learn/learningpath.html#type=role&role=programmer


Now, usually the starting point for you to use Flexicious is that you have a running project, and are faimilar with the <mx:DataGrid> and <mx:AdvancedDataGrid> syntax. May be your project has a few screens and some of them display data using the Adobe Grids. You want to replace the Adobe Grids with the Flexicious Extensions. Please note, since we are extensions to the Adobe grid, all of the base functionality that these controls offer will continue to work as is.

When you get the trial sample or purchase Flexicious, you get a zip file of the sample project. You can import this project, and run it, and see all of the Flexicious functionality in action. (In Flex 4, if you get an error saying unable to generate html wrapper, just right click and click on it it and click recreate html templates) This project contains sample MXML and Action Script files, and most importantly, the Flexicious swc file. There should be 2 swc files in samples/libs folder. One of them is the AlivePDF swc, and the other one is the Flexicious swc file. You can look around the files in the sample project, and get familiar with the functionality in it.


Now when you are ready to integrate Flexicious into your project, the first thing you want to do is to pick up the Flexicious swc file (from our sample project), and drop it into the libs folder of your Flex project. Next step is to start working with the individual screens where you want to change the Adobe Grids to the Flexicious extensions. Let’s assume you have a grid with the following markup:

<mx:DataGrid … >
<mx:columns>
<mx:DataGridColumn …/>
<mx:DataGridColumn …/>
</ mx:columns>
</mx:DataGrid >

All you need to do, is to replace <mx:DataGrid> with <grids:ExtendedDataGrid> and <mx:DataGridColumn> with <columns:ExtendedDataGridColumn>. Please note, as you start typing the words ExtendedDataGrid, hit control-space and the “grids” name space will be automatically imported for you. Once you have done this, compile the app, and you will have your first Flexicious enabled Grid. Now, the next step is to enable the Flexicious functionality. You may follow these steps one by one depending on which functionality you need.

   1. Filters: If you need filters, right after the <grids:ExtendedDataGrid, type in enableFilters=”true”. This creates the Filter row on top of the grid. You can then control individual filter attributes, by specifying them on each of the <columns:ExtendedDataGridColumn>. Review the list of available filter attributes and their documentation here:
    http://www.flexicious.com/resources/docs/com/flexicious/grids/columns/ExtendedDataGridColumn.html

   2. Footers: Exactly like the above, enableFooter on the grid, and footer specific attributes on the columns:
   http://www.flexicious.com/resources/docs/com/flexicious/grids/columns/ExtendedDataGridColumn.html

   3. Paging: To enable paging, you need to first set enablePaging=true. By default, you will get a simple pager bar. Our demo actually demonstrates the ability to plug-in your own pager, for which you can use pagerRenderer=”the fully qualified name of the pager”. Please see our sample code for details.
  
   4. Print: First set enablePrint=true. Second, simply drop a button on the canvas, and in the click handler of the button, call PrintController.instance().print(your_grid_id). Example:
              PrintController.instance().print(this.grid)

   5. Export: First set enableExport=true. Second, simply drop a button on the canvas, and in the click handler of the button, call ExportController.instance().export(your_grid_id). Example:
              ExportController.instance().export(this.grid)

   6. PDF Export: To enable PDF export, you will need to follow the following steps:
         1. Ensure the AlivePDF.swc exists in your libs folder
         2. Copy all the files in the com/sample/examples/support/print folder in the sample download into your project. Based on the folder in which you copy these in, you will have to change the namespaces in these files.
         3. Now, drop a button on the control where you want the pdf to launch from. In the click event handler for this button, call the PrintController, and pass in MyPrintOptions: PrintController.instance().print(this.grid,MyPrintOptions.create())
         4. Please note, what you are doing here is customizing the built in functionality of the PRINT to instead of printing to the printer, print to an in-memory pdf that AlivePDF helps you generate. So, you could use this exact same mechanism to customize your print appearance, by modifying the My*.mxml files in this folder.

   7.  Preference Persistence:
         1. Ensure the enablePreferencePersistence flag is set to true on the grid.
         2. Copy the following files from the com\sample\examples\support\gridSettings in the sample download to your project. Since these are just two mxml files, there is no need to change any namespaces.
         3. Now, drop two buttons on the canvas, one for Changing the preferences, and another for Saving them.
         4. In the button for Changing preferences, add code to open up the settings popup as shown below:
              <mx:Button label=”Preferences” click="var popup:SettingsPopup=new SettingsPopup();UIUtils.addPopUp(popup, your_grid_id as DisplayObject);popup.grid=your_grid_id;"/>
         5. In the button for Saving Preferences, add code to open up the save popup as shown below:
              <mx:Button label=”Save Preferences” click="var popup:SaveSettingsPopup=new SaveSettingsPopup();UIUtils.addPopUp(popup,_grid as DisplayObject);popup.grid=_grid;"/>
         6. If you receive compile errors indicating any of the above classes are missing place your cursor next to the name of the class and hit ctrl-space. This will automatically include the import statement required for the class.

 

Finally, there are a couple more blog posts, that are a must read:

http://blog.flexicious.com/post/Excel-Word-and-Html-Export-and-the-Echo-URL.aspx
http://blog.flexicious.com/post/Handy-Flexicious-methods.aspx

 

Please note, these are the steps you would follow to get started with the basics of Flexicious. As you start working with the API, there are lots of advanced scenarios that Flexicious is capable of handling, but they require a little additional configuration. We have a tremendous amount of material available that can help, please reach out to us!