Monday, January 5, 2009 From the Edge: Using Drag and Drop Feature in Forms Section: Form Controls Chapter: Running R:BASE Your Way! Supported Versions: R:BASE 7.6 and Turbo V-8 for Windows
Drag and Drop feature of R:BASE form controls lets you move data from one place in a form to another. This feature is especially useful in a visual application where you can drag data between two lists, drag controls in a container to reposition them, or drag components between containers. Before you can begin dragging, you must have something to drag -- that is, a drag source. Here's a comprehensive list of R:BASE form controls which can be enabled for Drag and Drop. -- Standard Controls . Static Text -- Database Controls . DB Label . DB Grid . DB Edit . DB Memo . DB E-Mail Label . DB CheckBox . DB Radio Button . DB RadioGroup . DB Lookup ComboBox . DB Lookup ListBox . DB Spin Edit . DB User Defined ComboBox . DB User Defined ListBox . DB Lookup ListView -- Variable Controls . Variable Label . Variable Edit . Variable Memo . Variable E-Mail Label . Variable CheckBox . Variable Radio Button . Variable Radio Group . Variable Lookup ComboBox . Variable Lookup ListBox . Variable Spin Edit . Variable User Defined ComboBox . Variable User Defined ListBox . Variable Lookup ListView -- Additional Controls . ListView Before I dive into the code, take a moment to download the sample application that accompanies this article and give it a quick run-through (Figure 1). -- Sample Applications: http://www.razzak.com/sampleapplications Application: Using Drag and Drop Feature in R:BASE Forms Supported Versions: R:BASE 7.6 and Turbo V-8 for Windows Date Posted: January 5, 2009 Database: DragDrop Associated Forms: DragAndDropSample1, DragAndDropSample2 Command File: UsingDragAndDrop.DAT Open this application using the latest available version and updates of R:BASE 7.6 or Turbo V-8 for Windows, then view both DragAndDropSample1 and DragAndDropSample2 forms in form designer. To run this sample application, simply RUN UsingDragAndDrop.DAT file. (Figure 1) http://www.razzak.com/sampleapplications/UsingDragAndDrop_01.png Accessing Drag and Drop Properties: While in form designer, after placing the appropriate control on the form, you can access the Drag and Drop properties from the list of speed menu by using the right-click of your mouse (Figure 2). (Figure 2) http://www.razzak.com/sampleapplications/UsingDragAndDrop_02.png -- Drag and Drop (Sample 1): In the first example (using Drag and Drop Sample 1), you'll see five color swatches on the left representing the actual values of CustID, Company, CustAddress, CustCity, CustState and an empty Variable Memo box labeled "Drop It Here" on the right (Figure 3). The color swatches with values are drag sources, and the empty box is the drop target. Grab one of the color swatches with your mouse and drag it down to the box. (Figure 3) http://www.razzak.com/sampleapplications/UsingDragAndDrop_03.png Observe how the mouse cursor changes shape as the cursor enters it. Now drop the color swatch over the box. The box color changes color from white to match the swatch (Figure 4). (Figure 4) http://www.razzak.com/sampleapplications/UsingDragAndDrop_04.png Grab another color swatch and move it around the screen on the left. Notice that the swatch can only be dropped over the drop target, and that the cursor indicates whether a drop would be accepted if it occurred right now. -- Drag and Drop (Sample 2): In the second example (Using Drag and Drop Sample 2), you'll see a list of customers on the left with a caption Select Customer(s) to Review and an empty list view with a caption Selected Customer(s) to Review on the right (Figure 5). (Figure 5) http://www.razzak.com/sampleapplications/UsingDragAndDrop_05.png Grab one of the customers with your mouse and drag it down to the box on the right. Also notice that as you drag a customer to right, a partially transparent rendition of the customer data "drag visual" follows the cursor so you can see what you're dragging (Figure 6). (Figure 6) http://www.razzak.com/sampleapplications/UsingDragAndDrop_06.png -- The Basics: The basic sequence involved in drag-and-drop is: . Press, and hold down, the button on the mouse or other pointing device, to "grab" the object, . "Drag" the object/cursor/pointing device to the desired location, . "Drop" the object by releasing the button. Dragging requires more physical effort than moving the same pointing device without holding down any buttons. Because of this, a user cannot move as quickly and precisely while dragging. However, drag-and-drop operations have the advantage of thoughtfully chunking together two operands (the object to drag, and the drop location) into a single action. -- Enable Drag and Drop: This option specifies the "Drag and Drop" feature of the control. -- On Start Drag ... This event is fired whenever an item first dragged. Its is mainly used to initialize any variables that are needed for the drag operation as demonstrated in Drag and Drop Sample 1. -- On Drag Drop ... This event is fired whenever an item is dropped on a control. The majority of the code needed for implementing drag and drop is entered here. Take a look at the code implemented as "On Drag Drop" for Variable Memo (vColValue) in DragAndDropSample1 and both Variable Lookup ListViews in DragAndDropSample2. -- Note: . Sample application includes databases for both 7.6 and Turbo V-8 users. . Take your time and review the entire sample code embedded as "On Start Drag" and "On Drag Drop" for both DragAndDropSample1 and DragAndDropSample2 forms. . More Drag and Drop applications are included with 2009 Super Advanced Training Application (SAT 2009). PDF document of this article is also available at: From The Edge: http://www.razzak.com/fte/ Have fun implementing Drag and Drop feature in forms! Very Best R:egards, Razzak.
