IDEMPIERE-3518 Improvement For Mobile Compatibility. Implement mobile UI alternative for moving of selected tree item (dnd not working well on mobile devices).

This commit is contained in:
Heng Sin Low 2017-10-24 07:41:45 +08:00
parent d97b330fc2
commit eb4eb1d1a4
4 changed files with 90 additions and 10 deletions

View File

@ -0,0 +1,11 @@
SET SQLBLANKLINES ON
SET DEFINE OFF
-- IDEMPIERE-3518 Improvement For Mobile Compatibility
-- Oct 24, 2017 7:34:07 AM GMT+08:00
INSERT INTO AD_Message (MsgType,MsgText,AD_Client_ID,AD_Org_ID,IsActive,Created,CreatedBy,Updated,UpdatedBy,AD_Message_ID,Value,EntityType,AD_Message_UU) VALUES ('I','Select location to move selected item to',0,0,'Y',TO_DATE('2017-10-24 07:34:06','YYYY-MM-DD HH24:MI:SS'),100,TO_DATE('2017-10-24 07:34:06','YYYY-MM-DD HH24:MI:SS'),100,200437,'MoveSelectedTreeItem','D','95d7bb4b-c7af-4b17-b274-23916870a7fa')
;
SELECT register_migration_script('201710240900_IDEMPIERE-3518.sql') FROM dual
;

View File

@ -0,0 +1,8 @@
-- IDEMPIERE-3518 Improvement For Mobile Compatibility
-- Oct 24, 2017 7:34:07 AM GMT+08:00
INSERT INTO AD_Message (MsgType,MsgText,AD_Client_ID,AD_Org_ID,IsActive,Created,CreatedBy,Updated,UpdatedBy,AD_Message_ID,Value,EntityType,AD_Message_UU) VALUES ('I','Select location to move selected item to',0,0,'Y',TO_TIMESTAMP('2017-10-24 07:34:06','YYYY-MM-DD HH24:MI:SS'),100,TO_TIMESTAMP('2017-10-24 07:34:06','YYYY-MM-DD HH24:MI:SS'),100,200437,'MoveSelectedTreeItem','D','95d7bb4b-c7af-4b17-b274-23916870a7fa')
;
SELECT register_migration_script('201710240900_IDEMPIERE-3518.sql') FROM dual
;

View File

@ -19,6 +19,7 @@ import java.util.List;
import java.util.logging.Level;
import org.adempiere.webui.ClientInfo;
import org.adempiere.webui.panel.TreeSearchPanel;
import org.compiere.model.MTree;
import org.compiere.model.MTreeNode;
import org.compiere.util.CLogger;
@ -161,16 +162,17 @@ public class SimpleTreeModel extends org.zkoss.zul.DefaultTreeModel<Object> impl
if(ti.getTreerow()==null){
tr = new Treerow();
tr.setParent(ti);
//zk's dnd doesn't work well on touch device with vertical scroll enable
//need different approach
if (!ClientInfo.isMobile()) {
if (isItemDraggable()) {
if (isItemDraggable()) {
//use different approach on mobile, dnd not working well
if (ClientInfo.isMobile()) {
tr.setAttribute(TreeSearchPanel.TREE_ROW_MOVABLE, Boolean.TRUE);
} else {
tr.setDraggable("true");
}
if (!onDropListners.isEmpty()) {
tr.setDroppable("true");
tr.addEventListener(Events.ON_DROP, this);
}
}
if (!onDropListners.isEmpty()) {
tr.setDroppable("true");
tr.addEventListener(Events.ON_DROP, this);
}
// Color

View File

@ -21,10 +21,12 @@ import java.util.List;
import java.util.Set;
import java.util.TreeMap;
import org.adempiere.webui.ClientInfo;
import org.adempiere.webui.apps.AEnv;
import org.adempiere.webui.component.AutoComplete;
import org.adempiere.webui.component.Label;
import org.adempiere.webui.component.Panel;
import org.adempiere.webui.component.ToolBarButton;
import org.adempiere.webui.theme.ThemeManager;
import org.adempiere.webui.util.DocumentSearch;
import org.adempiere.webui.util.TreeItemAction;
@ -39,6 +41,7 @@ import org.zkoss.zk.au.out.AuScript;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.IdSpace;
import org.zkoss.zk.ui.event.DropEvent;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.event.Events;
@ -51,6 +54,7 @@ import org.zkoss.zul.Hlayout;
import org.zkoss.zul.Tree;
import org.zkoss.zul.Treechildren;
import org.zkoss.zul.Treeitem;
import org.zkoss.zul.Treerow;
import org.zkoss.zul.event.TreeDataEvent;
import org.zkoss.zul.event.TreeDataListener;
import org.zkoss.zul.impl.LabelElement;
@ -64,6 +68,8 @@ import org.zkoss.zul.impl.LabelImageElement;
*/
public class TreeSearchPanel extends Panel implements EventListener<Event>, TreeDataListener, IdSpace
{
public static final String TREE_ROW_MOVABLE = "tree.row.movable";
/**
*
*/
@ -91,6 +97,8 @@ public class TreeSearchPanel extends Panel implements EventListener<Event>, Tree
private Treeitem selectedItem;
protected Hlayout layout;
private Hlayout moveItemBox;
private static final String PREFIX_DOCUMENT_SEARCH = "/";
/**
@ -173,13 +181,64 @@ public class TreeSearchPanel extends Panel implements EventListener<Event>, Tree
}
layout.appendChild(lblSearch);
layout.appendChild(cmbSearch);
layout.appendChild(cmbSearch);
//move selected treeitem for mobile, alternative to dnd
if (ClientInfo.isMobile())
{
ToolBarButton btn = new ToolBarButton();
btn.setIconSclass("z-icon-arrows-alt");
layout.appendChild(btn);
btn.addEventListener(Events.ON_CLICK, evt -> onMoveBtnClicked());
}
this.appendChild(layout);
addEventListener(ON_POST_FIRE_TREE_EVENT, this);
if (ClientInfo.isMobile()) {
tree.addEventListener(Events.ON_SELECT, evt -> onSelect(evt));
}
}
protected void addTreeItem(Treeitem treeItem)
private void onSelect(Event evt) {
if (moveItemBox != null) {
Treeitem selected = tree.getSelectedItem();
Treerow selectedRow = selected.getTreerow();
Component dragged = (Component) moveItemBox.getAttribute("draggedComponent");
DropEvent event = new DropEvent(Events.ON_DROP, selectedRow, dragged, 0, 0, 0, 0, 0);
moveItemBox.detach();
moveItemBox = null;
Events.postEvent(event);
}
}
private void onMoveBtnClicked() {
Treeitem ti = tree.getSelectedItem();
if (ti == null) return;
Treerow tr = ti.getTreerow();
if (tr == null) return;
if (tr.getAttribute(TREE_ROW_MOVABLE) == null) return;
moveItemBox = new Hlayout();
Label l = new Label(Msg.getMsg(Env.getCtx(), "MoveSelectedTreeItem"));
l.setStyle("font-weight: 600");
moveItemBox.appendChild(l);
moveItemBox.setValign("middle");
ToolBarButton btn = new ToolBarButton();
btn.setIconSclass("z-icon-remove");
moveItemBox.appendChild(btn);
moveItemBox.setAttribute("draggedComponent", tr);
btn.addEventListener(Events.ON_CLICK, e -> {
moveItemBox.detach();
moveItemBox = null;
});
this.insertBefore(moveItemBox, layout);
String script = "var w=zk.Widget.$('#" + moveItemBox.getUuid() + "'); ";
script += "var e=jq('#" + layout.getUuid() + "'); ";
script += "w.setWidth(e.css('width')); ";
script += "w.setHeight(e.css('height')); ";
Clients.response(new AuScript(script));
}
protected void addTreeItem(Treeitem treeItem)
{
StringBuilder key = new StringBuilder(getLabel(treeItem)).append(".").append(treeItem.getAttribute("menu.type"));
treeNodeItemMap.put(key.toString(), treeItem);