QGrid: when images matter
QGrid is a unique 4D plug-in that enriches your image databases with a powerful, customizable picture grid. This form of presentation, backed by QGrid's versatility, freedom in selecting data sources, and drag & drop, is central to intuitive and attractive image databases.
Click on the image above for more screenshots and use the arrows to navigate.
How QGrid works
The grid area is filled with cells, each containing a picture and a textual caption. Cells flow to fill the grid area, and automatically reflow when the area is resized. A cell may contain two objects: a picture and a caption, whose position and size can be controlled precisely by pixel coordinates. Caption text can be formatted by font, size, face, justification and color. Any 4D picture can be used as a background for all cells; the picture and caption objects will be shown on top of this background.
Data sources
Anything that results to picture or text can be used as data source. The picture and caption sources are described by means of 4D expressions (methods or simple single-line expressions), that return data of the appropriate type. Expressions make the job simple without giving up on power or versatility.
Cell appearance
Besides the standard cell and caption styling that has been there since years, QGrid 1.7 adds several new ways to affect the looks of the grid: fixed number of cells per row (use it for horizontal of vertical picture strips), cell spacing (defined separately for horizontal and vertical spacing) and rounded corners (use this to even make circular cells).
Variable-width cells
Variable-width cells are now possible through the exploitation of SVG, a vector format that is well-supported by 4D, and can lead to interesting applications in QGrid. Because SVG is a picture that can be manipulated as text (using 4D's XML DOM commands), it can be used to construct variable-width QGrid cells, whose width changes when the form is resized.
When the number of cells per row is set to 1, a grid with variable cell width can be programmed to look like a 4D listbox, while the user can be allowed to increase the cells per row to better exploit the available width. Take a look at the relevant example of the demo database that comes with QGrid's distribution package.
Selecting cells
End-users are provided with handy ways for selecting cells. QGrid allows single or multiple selection, supports keyboard modifiers, and returns the user selection in a 4D array for the developer's action.
Drag & drop
Starting with v1.7, QGrid supports 4D's mechanism for drag& drop. The plug-in area can be designated as draggable and/or droppable in the form editor, and the drag & drop operation can be handled programmatically in the standard 4D way.
One or many selected cells can be dragged and dropped at another location of the same or another QGrid area, in the same or another 4D process. The visual feedback is customizable by the developer. The drag and drop operation is obviously not limited to QGrid areas, but it can occur between QGrid and any suitable kind of 4D object.
While still supported, QGrid's old (proprietary) mechanism should be considered deprecated and will be removed in a future iteration. Developers are advised to rewrite the drag and drop parts of their QGrid applications rather sooner than later!