It may have been a bit silent the last few weeks around ABMaterial, but behind the scenes I have been working nights and weekends on maybe the biggest new feature since Chipmunk was introduced: Drag & Drop!
In 3.50, it will be possible to drag ABMContainers (and hence about anything in it) from one cell to another.
Let’s watch a video demonstration first:
Pretty cool hè!
How it works in B4J:
I explain the basics here, the DragDrop demo project included in the ABMaterial 3.50 download will show all tricks shown in the demo video.
1. Page_ParseEvent() gets a little bit of extra code to sync the moves made in the browser with our server
... If SubExists(Me, eventName) Then Params.Remove("eventname") Params.Remove("eventparams") ' BEGIN NEW DRAGDROP If eventName = "page_dropped" Then page.ProcessDroppedEvent(Params) End If ' END NEW DRAGDROP Select Case Params.Size ...
2. Next we define a ‘DRAG’ group:
' name, minimum height of a cell page.DragDropCreateGroup("DRAG", 150)
3. We add cells to this ‘DRAG’ group we want to drag & drop between. The last ‘null’ parameter can be any ABMComponent you want to use a title of the cell (e.g. the COLUMN X ABMLabel in the demo).
page.DragDropAddZone("DRAG", "DRAGCELL1", page.Cell(3,1),null) page.DragDropAddZone("DRAG", "DRAGCELL2", page.Cell(3,2),null) page.DragDropAddZone("DRAG", "DRAGCELL3", page.Cell(3,3),null)
4. We add our draggable ABMContainers to the cells. Note: they MUST be added with AddArrayComponent!
Here we also enable them to be draggable with cont.EnableDragDropZone(). There is also a shortcut method to enable/disable all ‘Zones/Cells’ in a group with cont.EnableDragDropAllZonesFromGroup() in one go.
page.Cell(3,1).AddArrayComponent(CreateCard("1", True, True, True, "I may be dragged everywhere", "../images/list1.jpg"), "Cards") ... Sub CreateCard(ID As String, AllowInCell1 As Boolean, AllowInCell2 As Boolean, AllowInCell3 As Boolean, Title As String, image As String) As ABMContainer Dim cont As ABMContainer cont.Initialize(page, ID, "") cont.AddRows(1,True,"").AddCells12(1, "") cont.BuildGrid cont.IsTextSelectable = False If AllowInCell1 Then ' can be dragged to zone 1 of 'DRAG' cont.EnableDragDropZone("DRAG","DRAGCELL1",True) End If If AllowInCell2 Then ' can be dragged to zone 2 of 'DRAG' cont.EnableDragDropZone("DRAG","DRAGCELL2",True) End If If AllowInCell3 Then ' can be dragged to zone 3 of 'DRAG' cont.EnableDragDropZone("DRAG","DRAGCELL3",True) End If cont.EnableDragDropZone("DRAG","DRAGCELL4",True) ' for the sidebar Dim card As ABMCard card.InitializeAsCard(page, "card", "MY CARD", Title, ABM.CARD_SMALL, "") card.Image = image card.AddAction("Press me") ' add the card to the page cont.Cell(1,1).AddComponent(card) Return cont End Sub
5. There are three events you will receive (all on Page level):
Sub Page_DragStart(component As String, source As String) Log("Drag start: " & component) End Sub Sub Page_DragCancelled(component As String, source As String) Log("Drag cancelled: " & component) End Sub ' there are four parameters: component, source , target, before Sub Page_Dropped(Params As Map) Log("Dropped: " & Params.Get("component")) End Sub
I’m finishing up ABMaterial 3.50, ABMonitor (an upcoming article on this for B4J and B4A soon on the blog) and ABTreeTableView now and early next week I think I may be able to release it to the donators.