Quicksand Package

The Morfik Quicksand package contains a single widget (Quicksand) that provides a nice visual display of database items that can be sorted and filtered using attractive visual effects. Visually based upon the Quicksand javascript implementation that is available here, the Morfik package does not rely on external javascript files.


A quick walkthrough

To use the Morfik Quicksand package simply add the package to the project by utilizing the “Used Packages” command on the project ribbon (see Figure 1 Used Packages Command), or simply drag the package file onto the application main client area. Once added [a single widget] will appear on the home ribbon when the form designer is active (see Figure 2 Widgets List). These widgets can be placed on application forms and provide immediate functionality with minimal coding.

Figure 1: Used Packages Command

Figure 2: Widgets List

Using the Quicksand Widget

After dropping a Quicksand widget on a form, the widget will appear similar to Figure 3 The Quicksand Widget. One of the properties that must be set for the widget is the DataSource property, which can be any of the standard Morfik data sources. Note that the widget has its own data source that is independent of the form’s data source. The Height Adjust property can be set to Auto, False or Dynamic to control how the widget resizes itself when items are hidden or added, with Dynamic offering the smoothest transition. The Animation Type property can be set to any of its predefined options and controls the transition effect used when items are moved.

Looking again at Figure 3, the area outlined in yellow is a container of type mfk_QuickSandItem and is the area where any standard controls should be added to the widget. The yellow outlined box will be repeated for each item selected from the associated data source with the number repeated vertically set by the widget’s Column Count property. The mfk_QuickSandItem’s border can be hidden by setting the Border Style property to None.

Figure 3: The Quicksand Widget

When a control such as an Image or TextLabel is added to the container, the DataField property can manually be entered but, since the data source is not tied to the form, cannot be selected from a drop down list.

Widget Events

There are three events defined for the Quicksand widget: On Start Move, On End Move and On Item Click. The two On Move events are a great place to display and hide a wait symbol while the moves are being made if it will take a while to complete.

The On Item Click event occurs when the mouse is clicked within a mfk_QuickSandItem container. Included in the event parameters is an input parameter Data of type TArray, which contains a list of name-value pairs in the form ‘data-fieldname=fieldvalue’ which must be typecast to a string. For example: ShowMessage(String(Data[0])) might display data-firstname=Paul. Below is a more complete sample of code:

FX Code

Procedure Form1.mfk_Quicksand1ItemClick(Event: TDOMEvent; Data: TArray);
    I : Integer;
    Str : String;
    Str := '';
    For I := 0 to Data.Length -1 Do
        Str := Str + String(Data[i]) + #10 + #13;

FX Code

Function GetRowsNumber : Integer;

returns the number of rows currently displayed in the Quicksand widget.

FX Code

Procedure UpdateItems(SortFunction : TArraySortFunc; FilterFunction : TFilterFunction);

allows you to use your own sort and filter functions to update the widget display.

FX Code

Procedure SortItems(aField : String; fASC : Boolean);

will sort the display on the field named in aField, either in Ascending (fASC=True) or Descending (fASC=False) order.

FX Code

Procedure FilterItems(aField : String; aValue : MetaType; aFilterType : TFilterType; aClear : boolean = False);

will filter all the items (if aClear=True) or current displayed items (if aClear=False) in the widget based upon a the value (aValue) of a field name (aField) according to the Filter Type (aFilterType). The filter type can be one of the following: ftEqual, ftNotEqual, ftGreater, ftLess, ftGreaterEqual, ftLessEqual, ftContains, ftStartsFrom. Note that aValue must be appropriate for the type of data field named in aField. For example, mfk_Quicksand1.FilterItems("size", 100, ftLess) will only display items with a size less than 100.

FX Code

Procedure FilterItems;

clears all filters.

FX Code

Function ContentHeight : Integer;

returns the current height of the widget.

See Also

Back to top