RenJuan/TASKPM
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ItEr07S07ArquitecturaClientesItEr06S03: Visual support for task completion

Browse source 
* Modified task component to include a completion resizable box
   * Linked /planner/main.zul from web.xml configuration file
   * Bugfix involving dependences overlapping box related with upper tasks
   * Linked resources.zul page from layout menu.
This commit is contained in:
Lorenzo Tilve 2009-05-05 14:32:05 +02:00 • committed by Javier Moran Rua
parent d7881d6cd7
commit eae256a297
9 changed files with 123 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
navalplanner-gantt-zk/src/main/java/org/zkoss/ganttz/ListDetails.java
View file

@ -56,7 +56,7 @@ public class ListDetails extends HtmlMacroComponent {
taskDetail.afterCompose();
Task task = new Task();
getPlanner().addTask(task);
task.setColor("yellow");
task.setColor("#007bbe");
task.setId(newId);
}

1
navalplanner-gantt-zk/src/main/resources/web/ganttz/task.dsp
View file

@ -7,5 +7,6 @@
<div id="row${self.uuid}" class="row" z.valor="boxid="${self.uuid}">
<div id="${self.uuid}" z.type="ganttz.task.Task" idTask="${self.id}" z.autoz="true"${self.outerAttrs}">
<span id="${self.uuid}!real">${self.taskName}</span>
<div id="completion${self.uuid}" class="completion"></div>
</div>
</div>

6
navalplanner-gantt-zk/src/main/resources/web/js/ganttz/dependency.js
View file

@ -17,6 +17,12 @@ zkDependency.draw = function(dependency) {
this.origin(dependency).offsetWidth - zkTask.CORNER_WIDTH);
orig[1] = orig[1] + zkTask.HEIGHT;
dest[1] = dest[1] + zkTask.HALF_HEIGHT;
if ( ( orig[1] > dest[1] ) ) {
orig[1] = orig[1] - zkTask.HEIGHT;
}
zkPlanner.drawArrow(dependency, orig, dest);
}

136
navalplanner-gantt-zk/src/main/resources/web/js/ganttz/task.js
View file

@ -42,8 +42,39 @@ zkTask.init = function(cmp) {
handles : [ 'r' ],
proxy : true
});
// Configure the task element to be resizable
cmp2 = document.getElementById('completion'+cmp.id);
var resize2 = new YAHOO.util.Resize(cmp2, {
handles : [ 'r' ],
proxy : true,
maxWidth: cmp.clientWidth - 2
});
resize2.on('resize', function(ev) {
zkau.send( {
uuid : cmp2.id,
cmd : "updateProgress",
data : [ cmp2.style.width ],
});
}, zkTask, true);
resize.on('resize', function(ev) {
cmp2 = document.getElementById('completion'+cmp.id);
resize2 = new YAHOO.util.Resize(cmp2, {
handles : [ 'r' ],
proxy : true,
maxWidth: cmp.clientWidth - 2
});
if ( (cmp.clientWidth) < (cmp2.clientWidth) ) {
cmp2.style.width = cmp.clientWidth - 2 + 'px';
}
zkau.send( {
uuid : cmp.id,
cmd : "updateSize",
@ -52,6 +83,7 @@ zkTask.init = function(cmp) {
}, zkTask, true);
// Listen to mousemove events
YAHOO.util.Event.on(document.body, 'mousemove', function(e) {
var arrPos = YAHOO.util.Event.getXY(e);
@ -67,12 +99,12 @@ zkTask.setAttr = function(cmp, nm, val) {
switch (nm) {
case "style.top":
case "style.width":
case "style.left": {
zkau.setAttr(cmp, nm, val);
return true;
}
case "style.top":
case "style.width":
case "style.left": {
zkau.setAttr(cmp, nm, val);
return true;
}
}
};
@ -103,9 +135,9 @@ zkTask.createArrow = function(cmp) {
function updateArrow() {
var origin = zkPlanner.findPos(cmp);
origin[0] = origin[0]
+ Math.max(0, cmpNode.offsetWidth - zkTask.CORNER_WIDTH);
+ Math.max(0, cmpNode.offsetWidth - zkTask.CORNER_WIDTH);
origin[1] = origin[1] - listtasksNode.offsetTop
+ listdependenciesNode.offsetTop + zkTask.HEIGHT;
+ listdependenciesNode.offsetTop + zkTask.HEIGHT;
var destination = zkPlanner.findPosForMouseCoordinates(xMouse, yMouse);
zkPlanner.drawArrow(arrow, origin, destination);
}
@ -128,9 +160,9 @@ zkTask.createArrow = function(cmp) {
}
parentNode.removeChild(arrow);
YAHOO.util.Event.removeListener(document.body, 'click',
mouseClickListener);
mouseClickListener);
YAHOO.util.Event.removeListener(document.body, 'mousemove',
mousemoveListener);
mousemoveListener);
};
YAHOO.util.Event.on(document.body, 'mousemove', mousemoveListener);
YAHOO.util.Event.on(document.body, 'click', mouseClickListener);
@ -142,11 +174,11 @@ zkTask.isOverTask = function(cmp, arrow) {
var ganttPanelNode = document.getElementById("ganttpanel");
arrayTasks = zkTask.getElementsByAttribute(listtasksNode, "div", "z.type",
"ganttz.task.Task");
"ganttz.task.Task");
/* Cursor relative positions to #listtasks (439,160) and ganttPanel scroll */
var xpos = zkTask.xMouse - listtasksNode.offsetLeft
+ ganttPanelNode.scrollLeft;
+ ganttPanelNode.scrollLeft;
var ypos = zkTask.yMouse - listtasksNode.offsetTop;
/*
* This way of getting cursor coordinates, is unable to calculate scrollbar
@ -158,14 +190,14 @@ zkTask.isOverTask = function(cmp, arrow) {
var task = arrayTasks[i];
YAHOO.log(" zkTask.xMouse (" + zkTask.xMouse + "," + zkTask.yMouse
+ ") " + "task.pos (" + xpos + "," + ypos + ") "
+ "task.offsetLeft (" + task.offsetLeft + "," + task.offsetTop
+ ") " + "task.idTask-" + task.toString());
+ ") " + "task.pos (" + xpos + "," + ypos + ") "
+ "task.offsetLeft (" + task.offsetLeft + "," + task.offsetTop
+ ") " + "task.idTask-" + task.toString());
if (((xpos) > (task.offsetLeft))
&& ((xpos) < (task.offsetLeft + task.offsetWidth))
&& (ypos > (task.offsetTop))
&& (ypos < (task.offsetTop + task.offsetHeight))) {
&& ((xpos) < (task.offsetLeft + task.offsetWidth))
&& (ypos > (task.offsetTop))
&& (ypos < (task.offsetTop + task.offsetHeight))) {
return task;
}
}
@ -173,24 +205,24 @@ zkTask.isOverTask = function(cmp, arrow) {
};
zkTask.getElementsByAttribute = function(oElm, strTagName, strAttributeName,
strAttributeValue) {
strAttributeValue) {
var arrElements = (strTagName == "*" && oElm.all) ? oElm.all : oElm
.getElementsByTagName(strTagName);
.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
var oAttributeValue = (typeof strAttributeValue != "undefined") ? new RegExp(
"(^|\\s)" + strAttributeValue + "(\\s|$)")
: null;
"(^|\\s)" + strAttributeValue + "(\\s|$)")
: null;
var oCurrent;
var oAttribute;
for ( var i = 0; i < arrElements.length; i++) {
oCurrent = arrElements[i];
oAttribute = oCurrent.getAttribute
&& oCurrent.getAttribute(strAttributeName);
&& oCurrent.getAttribute(strAttributeName);
if (typeof oAttribute == "string" && oAttribute.length > 0) {
if (typeof strAttributeValue == "undefined"
|| (oAttributeValue && oAttributeValue.test(oAttribute))) {
|| (oAttributeValue && oAttributeValue.test(oAttribute))) {
arrReturnElements.push(oCurrent);
}
}
@ -209,42 +241,42 @@ YAHOO.extend(YAHOO.example.DDRegion, YAHOO.util.DD, {
cont : null,
init : function() {
//Call the parent's init method
YAHOO.example.DDRegion.superclass.init.apply(this, arguments);
this.initConstraints();
myEvent.on(window, 'resize', function() {
YAHOO.example.DDRegion.superclass.init.apply(this, arguments);
this.initConstraints();
}, this, true);
},
initConstraints : function() {
//Get the top, right, bottom and left positions
var region = myDom.getRegion(this.cont);
myEvent.on(window, 'resize', function() {
this.initConstraints();
}, this, true);
},
initConstraints : function() {
// Get the element we are working on
var el = this.getEl();
//Get the top, right, bottom and left positions
var region = myDom.getRegion(this.cont);
// Get the xy position of it
var xy = myDom.getXY(el);
// Get the element we are working on
var el = this.getEl();
// Get the width and height
var width = parseInt(myDom.getStyle(el, 'width'), 10);
var height = parseInt(myDom.getStyle(el, 'height'), 10);
// Get the xy position of it
var xy = myDom.getXY(el);
// Set left to x minus left
var left = xy[0] - region.left;
// Get the width and height
var width = parseInt(myDom.getStyle(el, 'width'), 10);
var height = parseInt(myDom.getStyle(el, 'height'), 10);
// Set right to right minus x minus width
var right = region.right - xy[0] - width;
// Set left to x minus left
var left = xy[0] - region.left;
// Set top to y minus top
var top = xy[1] - region.top;
// Set right to right minus x minus width
var right = region.right - xy[0] - width;
// Set bottom to bottom minus y minus height
var bottom = region.bottom - xy[1] - height;
// Set top to y minus top
var top = xy[1] - region.top;
// Set the constraints based on the above calculations
this.setXConstraint(left, right);
this.setYConstraint(top, bottom);
}
// Set bottom to bottom minus y minus height
var bottom = region.bottom - xy[1] - height;
// Set the constraints based on the above calculations
this.setXConstraint(left, right);
this.setYConstraint(top, bottom);
}
});

2
navalplanner-webapp/src/main/webapp/WEB-INF/web.xml
View file

@ -85,7 +85,7 @@
<welcome-file-list>
<welcome-file>myhello.zul</welcome-file>
<welcome-file>/planner/main.zul</welcome-file>
</welcome-file-list>
</web-app>

4
navalplanner-webapp/src/main/webapp/common/layout/template.zul
View file

@ -24,7 +24,7 @@
<menu label="${c:l('mainmenu.resources')}">
<menupopup>
<menuitem label="${c:l('mainmenu.add_resources')}"
onClick="alert(self.label)" />
href='/common/resources.zul' />
<menuitem label="${c:l('mainmenu.manage_resources')}"
onClick="alert(self.label)" />
<menuitem label="${c:l('mainmenu.check_plannification')}"
@ -52,7 +52,7 @@
<menu label="${c:l('mainmenu.about')}">
<menupopup>
<menuitem label="${c:l('mainmenu.aclunaga')}"
onClick="alert(self.label)" />
href='/common/aclunaga.zul' />
</menupopup>
</menu>
</menupopup>

59
navalplanner-webapp/src/main/webapp/myhello.zul
View file

@ -1,59 +0,0 @@
<?init class="org.zk.myhello.pages.MyHelloPageListener"?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<?link rel="stylesheet" type="text/css" href="/planner/css/productionmanagement.css"?>
<?page id="myhello"?>
<?init class="org.zkoss.zk.ui.util.Composition" arg0="/common/layout/template.zul"?>
<zk>
<planner self="@{define(content)}">
<div id="idContextMenuTaskAssigment" use="org.zk.myhello.pages.MyHelloPageListener">
</div>
<listdetails>
</listdetails>
<ganttpanel>
<timetracker detailLevel="${idContextMenuTaskAssigment.currentDetailLevel}" />
<tasklist id="taskList">
<task id="task1" color="blue"/>
<task id="task2" color="red"/>
<task id="task3" color="yellow"/>
<task id="task4" color="green"/>
<!--task id="task5" color="orange"/>
<task id="task6" color="white"/-->
</tasklist>
<window border="normal" width="300px" apply="${taskList.modalFormComposer}">
<grid>
<rows>
<row>${c:l('task.name')} <textbox id="name"/></row>
<row>${c:l('task.start')} <datebox id="startDateBox" compact="true"/>
</row>
<row>
${c:l('task.end')} <datebox id="endDateBox" compact="true" />
</row>
<row>
${c:l('task.notes')} <textbox id="notes" />
</row>
</rows>
</grid>
<button id="ok" label=" ${c:l('task.ok')}" />
</window>
<dependencylist>
<dependency idTaskOrig="task1" idTaskEnd="task2"/>
<dependency idTaskOrig="task2" idTaskEnd="task3"/>
<dependency idTaskOrig="task1" idTaskEnd="task4"/>
</dependencylist>
</ganttpanel>
</planner>
</zk>

26
navalplanner-webapp/src/main/webapp/planner/css/productionmanagement.css
View file

@ -115,7 +115,7 @@ Height: is recalculated on number of tasks */
/*
.extra_padding {
padding: 6px;
padding: 6px;
} */
.logo {
@ -136,4 +136,26 @@ Height: is recalculated on number of tasks */
height:90px;
}
table {margin:0px; padding:0px; border:0px;}
table {
margin:0px;
padding:0px;
border:0px;
}
.completion {
display: none;
width: 80%;
top: -16px;
margin-top:0px;
height: 20px;
background-color: #FFCC99;
z-index:5;
border:0px;
}
.row span {
position:relative;
z-index:5;
color:#BBBBBB;
white-space:nowrap;
}

8
navalplanner-webapp/src/main/webapp/planner/main.zul
View file

@ -14,13 +14,13 @@
<ganttpanel>
<timetracker detailLevel="${idContextMenuTaskAssigment.currentDetailLevel}" />
<tasklist id="taskList">
<task id="task1" color="blue"/>
<task id="task1" color="#007bbe"/>
<task id="task2" color="red"/>
<task id="task2" color="#007bbe"/>
<task id="task3" color="yellow"/>
<task id="task3" color="#007bbe"/>
<task id="task4" color="green"/>
<task id="task4" color="#007bbe"/>
<!--task id="task5" color="orange"/>