The Custom Pager Control

clock May 18, 2010 04:52 by author Flexicious

Question:

I have found the examples provided to be very helpful but I seem to be a little confused by the operation of CustomPagerControl.mxml.

ExtendedAdvancedDataGrid.enablePaging is the flag  to activate ExtendedAdvancedDataGrid.pagerRenderer but CustomPagercontrol.mxml contains an HBox(paging controls) that has a dependency on ExtendedAdvancedDataGrid.enablePaging.  If the renderer is not enabled (enablePaging=false), why would the HBox need to be disabled (not visible, not in the layout)?  Conversely, if the renderer is enabled, why would the HBox need to also be enabled?  And finally, how would you enable the renderer and not enable the HBox (hide the paging controls)?

===============================================================

The CustomPagerControl is something we provide, as an example of how you can completely customize the Pager Control. Back in the day when it was introduced, it used to have just the paging buttons. But most of our clients have added all sorts of functionality to it, and made it like the "toolbar" of the Flexicious Grid. Taking a cue from what our clients were doing with it, we updated the sample control to be the "toolbar" that most of our clients wanted anyway. So in essence, you could easily have a grid, with no paging enabled, but still want the pager bar (because it has all the other buttons). In order to not break any API's, we added a new property, "forcePager" which will show the pager bar regardless of the enablePaging flag.

While you are at it, do check out the "displayOrder" property - you can control in what order you want the different sections of the grid (header, footer, pager, filter) to show!


http://www.flexicious.com/resources/docs/com/flexicious/grids/ExtendedAdvancedDataGrid.html#forcePagerRow

http://www.flexicious.com/resources/docs/com/flexicious/grids/ExtendedAdvancedDataGrid.html#displayOrder

 




Converting The Flexicious Filter to SQL

clock May 18, 2010 04:48 by author Flexicious

Question:

Have you got a working example where you connect to coldfusion?

Or where we can use plain SQL?

We currently dont have any examples of RAW sql creation. But we do have examples of generation of Hibernate HQL and .NET Entity SQL. Creation of raw SQL should be very similar. Please get in touch with us and we will be able to send you samples of the Java and .NET backend!




Unable to resolve a class for RequiresLicense handler:

clock May 18, 2010 04:39 by author Flexicious

A couple of our clients/prospects have reported this error:

Error: Unable to resolve a class for RequiresLicense handler: mx.controls.advancedDataGridClasses:DMVLicenseHandler.

This usually happens when the sdk is missing the datavisualization bits. (Flexicious contains the ExtendedAdvancedDataGrid that pulls in the AdvancedDataGrid).

Up until Flex 3.5, the Flex datavisualization sdk was a seperate download (link below). It needs to be downloaded seperately and extracted on top of the default Flex sdk.

The solution is simple. Go to the following link

http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3sdk and download:
Adobe Flex 3.5 Data Visualization Components for Flex Builder

Then follow the step by step instructions here:
http://www.webappsolution.com/wordpress/2009/04/22/installing-flex-33-sdk-data-visualization-33-swc/


If you have the datavisualization bits, your build path should look like below:



New features coming!!!

clock May 15, 2010 10:10 by author Flexicious
  1. Enhancement: The Print Preview now has resizable columns
  2. Enhancement: Print now supports renderer providers for Advanced DataGrid
  3. Enhancement: The Preference Persistence mechanism will remember your last print settings, columns you choose to print, the widths you set, header/footer options etc! (Existing Clients: This will require you to get 2 updated files from the Sample project. Details on release.)
  4. Enhancement: Added the columnWidthOffset to manage cases where there is custom formatting for columns of "fitToContent"
  5. Fix: Fix for last row being cut off in print - Use rowHeight, set it to an explicit value.
  6. Enhancement: Added the runCurrentSort to advanced datagrid, so in addition to setting the sort icons, it will actually run the sort.
  7. Fix - Print for hierarchical and variable row height grids
  8. More to be added!!!

Edit 5/16
Let's add the showSpinner and hideSpinner method to the list.. .(Call this method and we show a spinning circle while you go get the data!) See documentation for com.flexicious.controls.Spinner to use it independantly, and the new Styles on the grid to style the spinner!

 



Custom Filter Control

clock May 13, 2010 07:39 by author Flexicious

Flexicious Filtering UI is completely customizable through the use of filterRenderer property and the the IFilterControl (and its descendant) interfaces. In fact, our sample code contains the SalaryRangeSlider component, which demonstrates how to create a custom filter control that can be embedded within the filter row.

 

So got an interesting question today. One of our customers, has implemented a custom Filter, and was unable to trigger the fiter mechanism inspite of following the expected steps, i.e.

1) Implementing one of the IFilterControl interfaces (in this case ITextFilterControl)

2) Triggering the Change Event (Or any event that the column is configured to listen to via filterTriggerEvent)

3) Including the given FilterInclude.as from the sample.

When we looked through their code, we quickly identified the cause of the issue: The filterControl that they were using was wrapped in a Flexicious HBox, not the MX Hbox. The issue is this: The Flexicious Container controls, VBox,HBox,Panel,Form, etc are designed to be containers from a filter/databinding perspective. Motivation behind this was loose coupling between the filtering logic and the datagrid logic, so that we are able to use the Filtering/Databinding mechanism of Flexicous outside the datagrid. (See example 5, FlexiciousUI on our demo page). Flexicious controls (TextInput, Datefield, MultiSelectComboBox etc) register themselves with the first Flexicious container they encounter in their hierarchy.  So, this particular control was registering with the Flexicoius HBox instead of the DataGridFilterRow, which is also a Flexicious container. As soon as we switched it to not be a Flexicious HBox, voila, everything works like a charm!

One of the things we pride ourselves on is being quick in responding to our customer requests. Our team works  in two different time zones, and in most cases we are able to respond to issues within a matter of hours. This customer included a reproducible Flex project, and this helps tremendouly in providing a solution expediously.

BTW: This particular customer has excellent graphics. Love to see people do amazing things with Flexicious!

 



The PDFEcho and MyPreviewRenderer

clock May 12, 2010 06:29 by author Flexicious

This is another question that gets asked a lot - How is the PDF being generated. One thing to clarify : Flexicious does not generate any PDF's, nor does it have any intrinsic dependency on AlivePDF. Here is where the PDF functionality originated: When we did the Print Functionality, in addition to the grizzly task of actually printing the grid data, we also wanted to give the users a pretty preview of what is about to be printed. So we desinged the preview screen. One of our clients suggested the need to export the preview as a pdf. And thats where Flexicious met AlivePDF. So in the client section of our sample project, we included AlivePDF, to demonstrate, how instead of sending the print to the printer, you send it to alive pdf, get the pdf generated, and then send it to the server to simply buffer it back. (See the post in regards to Export EchoUrl for an explanation of this).There is nothing stopping you from experimenting with purePDF or any other pdf library, or simply sending the raw data to the server to make a pdf on the server. We just found AlivePDF to be pretty robust and very easy to use.

Now back to buffering the pdf : what if you want to implement your own pdf buffering (to avoid a trip across the internet to our servers)? Simple, - 4-5 lines of code in your server, a slight modification (Line 111 on MyPreviewRenderer.mxml), and voila. The server code for this is below (This is .NET, Java/PHP/Anything else would be similar):

            string method = Request.QueryString["method"];
            string name = Request.QueryString["name"];

            byte[] data = Request.BinaryRead(Request.TotalBytes);

            Response.ContentType = "application/pdf";
            Response.AddHeader("Content-Length", data.Length.ToString());
            Response.AddHeader("Content-disposition", method + "; filename=" + name);
            Response.BinaryWrite(data);
            Response.End();


There is a nice link that explains how to do this in php:
http://blog.unthinkmedia.com/2008/09/05/exporting-pdfs-in-flex-using-alivepdf/

If you are using Flash Player 10 or Flex 4, you can use the code below for local file persistence and avoid this altogether:

(This code is included in MyPreviewRenderer.mxml, line 111. You simply have to uncomment it, include the appropriate imports, and comment out the current line that says remote file persistence.)

var fileReference:FileReference = new FileReference();
var bytes:ByteArray = pdf.save(Method.LOCAL);
fileReference.save(bytes, "file.pdf");

MyPreviewRenderer.mxml (9.62 kb)

MyPreviewRenderer.mxml (9.62 kb)

 

================================================================

Update - For Ultimate, this process is a lot simpler, where you simply have to modify the built in AlivePDFGenerator to enable server/client generation/buffering.



Excel, Word and Html Export and the Echo URL

clock May 11, 2010 03:31 by author Flexicious

This is another topic that we get some questions from our customers about:

Flexicious, out of the box, offers you the ability to Export the datagrid data to Word, Excel, Html, Text. We also provide a plugin based mechanism, where in you can add your own exporters. The example includes a class, MyDocExporter, which is basically a custom Export plugin. Check it out to see how easy it is.

The question that we get most times however, is when our customers notice the request being sent to http://www.flexicious.com/Home/Echo.

So let us explain whats going on:

When you do a export (or pdf - more on that later), we basically build a string on the client Flex application. Since Flash player (Up until v10) could not write to your hard drive (except shared objects), we need to go through the traditional http File Buffering process. So what we do is this : We build the excel/word/html string, and send it to the server, which simply writes it back, in addition to setting the content type. Now, we advise that you implement your own url to buffer this string back, but do provide our own url - the one mentioned above to perform the buffering. The server side code for this is very simple:

//This is C# code, you could just as easily do the same thing in Java or PHP or whatever it is that sits on your server.

            var extension = Request["extension"];
            var contentType = Request["contentType"];
            var body= Request["body"];
            Response.ClearContent();
            Response.AddHeader("content-disposition", string.Format("attachment; filename=Download.{0}",extension));
            Response.ContentType = contentType;
            Response.Write(body);
            Response.End();

And then the final part, of letting the DataGrid know that you have your own server url. To do this, when you call ExportController.export, just pass in MyExportOptions and in the create method, set the echoUrl of the ExportOptions object to your server url.

 

Please note, if you are using Flex 4/Flash Player 10, in MYExportOptions.as, create method, if you set options.enableLocalFilePersistence=true, none of this will be needed, since we will be persisting the file locally without a server round trip.

 

As always, do not hesitate to reach out if you have any questions info at flexicious dot com

=====================================================================

 

Edit:

One of our customers reported a peculiar problem with their implementation of the Echo - it always worked the second time. Below is what they noticed:

·         Problem only occurs in IE (I’m currently using V8) – In Firefox it always works
·         Key Point: Changing your code, CsvExporter.contentType from “application/vnd.ms-excel” to “text/csv” makes it work.
·         It always works using your implementation of Echo on the flexious site.

The issue stumped us as well as them, and they were kind enough to send us the resolution once they found it:
In the handler the following line needs to be added after ClearContent():
context.Response.ClearHeaders();

=====================================================================

Additional information When filterPageSortMode=server:
When filterPageSortMode=server, print/export works a little differently when you select “all pages” or “selected pages”. In this case, you need to wire up the PrintExportDataRequest event

            //This event is only fired when the user requests to print data that is currently
            //not loaded in the grid. It is only applicable when filterPageSortMode is set to
            //'server', because in this mode, the grid only requests the current page of data
            //from the server.
            //For example, if the user asks to print pages 1-4 of a 10
            //page grid, and we're currently on page #4, on the client, we only have the records
            //from page #4. So we have to get the records from pages 1-4 from the server.
            //when this data comes back, we just set the grids.printExportData property, and the
            //print/export mechanism continues as usual.


Review the code here:
http://www.flexicious.com/resources/Flex/srcview/source/com/sample/examples/ServerGridDotNet.mxml.html

This code demonstrates how to handle the printExportDataRequest event, and is heavily commented to explain what is going on.

=====================================================================

 

Changes since 2.0:

Since FP 10 is now more and more common, the default export setting is to use local file persistence. This will cause the grid to issue a call to FileReference.save(). This only exists on FP 10+. For most of our customers, this has been ok, but for some others, who require compatibility for FP 9 this will cause an RTE (ReferenceError: Error #1069: Property save not found on flash.net.FileReference and there is no default value.). To resolve this, either upgrade to FP10, or  set options.enableLocalFilePersistence=false, and either provide your own echo URL as specified above, or you can use our echo.

Also - Since FP 10.1, security was introduced that caused the file download box to break, since it was not instantiated by immediate user action. To this effect, a new property, useSaveFileMessage was introduced in 2.2 to enable the user to click on a button to trigger the download box.

 



Column Width Mode

clock May 10, 2010 08:32 by author Flexicious

One of the first entries we would like to make is in regards to a recently added, but pretty useful property: the columnWidthMode. This property is available on the ExtendedDataGridColumn and ExtendedAdvancedDataGridColumn. The idea is this: Let's say you have a DataGrid, with a few columns that always need to be a certain fixed width (for example a checkbox column, or a column that contains an image, or static text). You set the columnWidthMode of this column to "fixed" (default) and then use the "width" property to specify explicitly what the width is supposed to be. Then there are a few columns that contain dynamic text, and you wish the width of the column to match the longest string in the column. You can set the columnWidthMode to "fitToContent" to acheive this. Once the "fixed" and "fitToContent" columns are given their requested widths, rest of the columns get the REMAINING space. You can control this on basis of percentages. You set the columnWidthMode of these columns to "percent", and allocate a "percentWidth" property to each. The caveat is, all columns that have the columnWidthMode property set to "percent", the "percentWidth" needs to add up to a 100.  

Consider a 5 Column Flex Grid:

Column 1: columnWidthMode=fixed, width=20
Column 2: columnWidthMode=fitToContent
Column 3,4,5: columnWidthMode=percent, percentWidth=33.33 each

This should produce a grid that has the first column fixed at 20px, second column dynamic based on what is being displayed, and the last three columns at equal width (1/3rd) of the remaining width on the grid each).



First Blog Post

clock May 10, 2010 02:37 by author Flexicious

Hi and welcome to the Flexicious Team Blog. Here, we will post updates about the product, new features, questions that our customers are asking, and other Flexicious related stuff!