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:
parent
d97b330fc2
commit
eb4eb1d1a4
|
@ -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
|
||||
;
|
||||
|
|
@ -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
|
||||
;
|
||||
|
|
@ -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,17 +162,18 @@ 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()) {
|
||||
//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);
|
||||
}
|
||||
}
|
||||
|
||||
// Color
|
||||
Object data = ((DefaultTreeNode<?>) node).getData();
|
||||
|
|
|
@ -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 = "/";
|
||||
|
||||
/**
|
||||
|
@ -174,9 +182,60 @@ public class TreeSearchPanel extends Panel implements EventListener<Event>, Tree
|
|||
|
||||
layout.appendChild(lblSearch);
|
||||
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));
|
||||
}
|
||||
}
|
||||
|
||||
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)
|
||||
|
|
Loading…
Reference in New Issue