ItEr06S03ArquitecturaClientesItEr05S03: Created layout template structure for zul pages

Planner main page modified to use /common/layouts/template.zul structure with a basic menu and footer. Static resources as CSS and images have been reorganized in common and planner module.
2009-04-30 13:42:39 +02:00 · 2009-04-30 13:42:39 +02:00 · f061d5c1d3
commit f061d5c1d3
parent f6f05acc12
15 changed files with 217 additions and 24 deletions
--- a/navalplanner-gantt-zk/src/main/java/org/zkoss/ganttz/Planner.java
+++ b/navalplanner-gantt-zk/src/main/java/org/zkoss/ganttz/Planner.java
@ -7,6 +7,7 @@ import java.util.Map;

 import org.zkoss.ganttz.util.DependencyRegistry;
 import org.zkoss.ganttz.util.TaskBean;
+import org.zkoss.zk.ui.Executions;
 import org.zkoss.zk.ui.ext.AfterCompose;
 import org.zkoss.zul.impl.XulElement;

@ -68,6 +69,10 @@ public class Planner extends XulElement implements AfterCompose {
        return result;
    }

+    public String getContextPath() {
+        return Executions.getCurrent().getContextPath();
+    }
+
    private GanttPanel getGanntPanel() {
        return findOneComponentOfType(GanttPanel.class);
    }
--- a/navalplanner-gantt-zk/src/main/resources/web/ganttz/planner.dsp
+++ b/navalplanner-gantt-zk/src/main/resources/web/ganttz/planner.dsp
@ -3,6 +3,12 @@

 <c:set var="self" value="${requestScope.arg.self}"/>

+<script type="text/javascript">
+/*<![CDATA[ */
+    webapp_context_path = '${self.contextPath}';
+/*]]> */
+</script>
+
 <div id="${self.uuid}" z.type="ganttz.planner.Planner" ${self.outerAttrs}">
    <c:forEach var="child" items="${self.children}">
        ${z:redraw(child, null)}
--- a/navalplanner-gantt-zk/src/main/resources/web/ganttz/zul/timetracker.zul
+++ b/navalplanner-gantt-zk/src/main/resources/web/ganttz/zul/timetracker.zul
@ -17,8 +17,8 @@

 <vbox>
    <hbox>
-        <button image="zkau/web/ganttz/img/zoom_in.gif" forward="onIncrease"/>
-        <button image="zkau/web/ganttz/img/zoom_out.gif" forward="onDecrease"/>
+        <button image="/zkau/web/ganttz/img/zoom_in.gif" forward="onIncrease"/>
+        <button image="/zkau/web/ganttz/img/zoom_out.gif" forward="onDecrease"/>
        <label value="Detail level:"/>
        <label id="mcdetaillevel" value="${c:l(arg.detailLevel)}"/>
    </hbox>
--- a/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/planner.js
+++ b/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/planner.js
@ -1,6 +1,10 @@
 zkPlanner = {};

-zkPlanner.init = function(planner){
+zkPlanner.getImagesDir = function() {      
+    return webapp_context_path + "/zkau/web/ganttz/img/";
+}
+
+zkPlanner.init = function(planner){   
    
 }

@ -30,15 +34,18 @@ zkPlanner.findPosForMouseCoordinates = function(x, y){
    return [x -  pos1[0], y - pos1[1]];
 }

+function getContextPath(element){
+    return element.getAttribute('contextpath');
+}

 zkPlanner.setupArrow = function(arrowDiv){
-    var base_url_images = "zkau/web/ganttz/img/";
+    
    var image_data = [ [ "start", "pixel.gif" ], [ "mid", "pixel.gif" ],
            [ "end", "pixel.gif" ], [ "arrow", "arrow.png" ] ];
    for ( var i = 0; i < image_data.length; i++) {
        var img = document.createElement('img');
        img.setAttribute("class", image_data[i][0]+" extra_padding");
-        img.src = base_url_images + image_data[i][1];
+        img.src = this.getImagesDir() + image_data[i][1];
        arrowDiv.appendChild(img);
    }
 }
@ -53,9 +60,10 @@ zkPlanner.drawArrow = function(arrow, orig, dest){
    var xmid = xorig + width;

    var depstart = this.findImageElement(arrow, 'start');
-    /*    depstart.style.top = yorig + "px";
-    depstart.style.left = xorig + "px";
-    depstart.style.width = width + "px"; */
+    /*
+     * depstart.style.top = yorig + "px"; depstart.style.left = xorig + "px";
+     * depstart.style.width = width + "px";
+     */
    depstart.style.display = "none";

    var depmid = this.findImageElement(arrow, 'mid');
@ -78,9 +86,8 @@ zkPlanner.drawArrow = function(arrow, orig, dest){
        depend.style.width = Math.abs(width) + "px";
    }
    var deparrow = this.findImageElement(arrow, 'arrow');
-    var baseURL = 'zkau/web/ganttz/img/';
    if ( width == 0 ) {
-        deparrow.src = baseURL+"arrow2.png";
+        deparrow.src = this.getImagesDir()+"arrow2.png";
        deparrow.style.top = yend - 10 + "px";
        deparrow.style.left = xend - 5 + "px";
        if ( yorig > yend ) {
@ -90,10 +97,10 @@ zkPlanner.drawArrow = function(arrow, orig, dest){
    } else {
        deparrow.style.top = yend - 5 + "px";
        deparrow.style.left = xend - 10 + "px";
-        deparrow.src = baseURL+"arrow.png";
+        deparrow.src = this.getImagesDir()+"arrow.png";

        if (width < 0) {
-            deparrow.src = baseURL+"arrow3.png";
+            deparrow.src = this.getImagesDir() + "arrow3.png";
            deparrow.style.left = xend + "px";
            deparrow.style.top = yend - 5 + "px";
        }
--- a/navalplanner-webapp/src/main/webapp/WEB-INF/i3-label.properties
+++ b/navalplanner-webapp/src/main/webapp/WEB-INF/i3-label.properties
@ -8,4 +8,22 @@ task.new_task_name=Nova Tarefa
 DETAIL_ONE=Detalle 1
 DETAIL_TWO=Detalle 2
 DETAIL_THREE=Detalle 3
-DETAIL_FOUR=Detalle 4 
+DETAIL_FOUR=Detalle 4 
+mainmenu.new=Novo
+mainmenu.open=Abrir
+mainmenu.save=Gardar
+mainmenu.project=Proxecto
+mainmenu.exit=Saír
+mainmenu.resources=Recursos
+mainmenu.add_resources=Engadir recurso
+mainmenu.manage_resources=Administrar recursos
+mainmenu.check_plannification=Revisar conflitos de planificación
+mainmenu.plannification=Planificación
+mainmenu.add_task=Engadir tarefa
+mainmenu.manage_tasks=Administrar tarefas
+mainmenu.set_complection_data=Establecer nivel de complección
+mainmenu.add_dependency=Engadir dependencia
+mainmenu.manage_dependencies=Administrar dependencias
+mainmenu.help=Axuda
+mainmenu.about=Acerca de
+mainmenu.aclunaga=Aclunaga
--- a/navalplanner-webapp/src/main/webapp/WEB-INF/i3-label_en_US.properties
+++ b/navalplanner-webapp/src/main/webapp/WEB-INF/i3-label_en_US.properties
@ -8,4 +8,22 @@ task.new_task_name=New Task
 DETAIL_ONE=Detail 1
 DETAIL_TWO=Detail 2
 DETAIL_THREE=Detail 3
-DETAIL_FOUR=Detail 4 
+DETAIL_FOUR=Detail 4 
+mainmenu.new=New
+mainmenu.open=Open
+mainmenu.save=Save
+mainmenu.project=Project
+mainmenu.exit=Exit
+mainmenu.resources=Resources
+mainmenu.add_resources=Add resource
+mainmenu.manage_resources=Manage resources
+mainmenu.check_plannification=Check for plannification conflicts
+mainmenu.plannification=Plannification
+mainmenu.add_task=Add task
+mainmenu.manage_tasks=Manage tasks
+mainmenu.set_complection_data=Set complection data
+mainmenu.add_dependency=Add dependency
+mainmenu.manage_dependencies=Manage dependences
+mainmenu.help=Help
+mainmenu.about=About
+mainmenu.aclunaga=Aclunaga
--- a/navalplanner-webapp/src/main/webapp/WEB-INF/web.xml
+++ b/navalplanner-webapp/src/main/webapp/WEB-INF/web.xml
@ -88,4 +88,4 @@
        <welcome-file>myhello.zul</welcome-file>

    </welcome-file-list>
-</web-app>
+</web-app>
--- a/navalplanner-webapp/src/main/webapp/common/layout/template.zul
+++ b/navalplanner-webapp/src/main/webapp/common/layout/template.zul
@ -0,0 +1,66 @@
+<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
+<div>
+        <div class="headings">
+            <div class="logo"></div>
+            <div class="vision"></div>
+        </div>
+    	<menubar id="menubar" width="900px" top="0px" left="320px"
+            ctrlKeys="^k#f2" onCtrlKey="doCtrlKey()" sclass="mainmenu">
+
+            <menu label="${c:l('mainmenu.project')}">
+        		<menupopup>
+            		<menuitem label="${c:l('mainmenu.new')}"
+                        onClick="alert(self.label)" />
+                    <menuitem label="${c:l('mainmenu.open')}"
+                        onClick="alert(self.label)" />
+    				<menuitem label="${c:l('mainmenu.save')}"
+                        onClick="alert(self.label)" />
+    				<menuseparator />
+    				<menuitem label="${c:l('mainmenu.exit')}"
+                        onClick="alert(self.label)" />
+    			</menupopup>
+    		</menu>
+
+            <menu label="${c:l('mainmenu.resources')}">
+                <menupopup>
+                    <menuitem label="${c:l('mainmenu.add_resources')}"
+                        onClick="alert(self.label)" />
+                    <menuitem label="${c:l('mainmenu.manage_resources')}"
+                        onClick="alert(self.label)" />
+                    <menuitem label="${c:l('mainmenu.check_plannification')}"
+                        onClick="alert(self.label)" />
+                </menupopup>
+            </menu>
+
+            <menu label="${c:l('mainmenu.plannification')}">
+    			<menupopup>
+    				<menuitem label="${c:l('mainmenu.add_task')}"
+                        onClick="alert(self.label)" />
+    				<menuitem label="${c:l('mainmenu.manage_tasks')}"
+                        onClick="alert(self.label)" />
+    				<menuitem label="${c:l('mainmenu.set_complection_data')}"
+                        onClick="alert(self.label)" />
+    				<menuitem label="${c:l('mainmenu.add_dependency')}"
+                        onClick="alert(self.label)" />
+    				<menuitem label="${c:l('mainmenu.manage_dependencies')}"
+                        onClick="alert(self.label)" />
+    			</menupopup>
+    		</menu>
+
+            <menu label="${c:l('mainmenu.help')}">
+    			<menupopup>
+    				<menu label="${c:l('mainmenu.about')}">
+    					<menupopup>
+        					<menuitem label="${c:l('mainmenu.aclunaga')}"
+                                onClick="alert(self.label)" />
+    					</menupopup>
+    				</menu>
+    			</menupopup>
+    		</menu>
+    	</menubar>
+
+    <div self="@{insert(content)}"/>
+
+      <div class="footer">© Fundación para o Fomento da Calidade Industrial e
+      Desenvolvemento Tecnolóxico de Galicia. Xunta de Galicia</div>
+ </div>
--- a/navalplanner-webapp/src/main/webapp/common/resources.zul
+++ b/navalplanner-webapp/src/main/webapp/common/resources.zul
@ -0,0 +1,17 @@
+<?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>
+
+    <grid fixedLayout="true"  self="@{define(content)}">
+	<rows>
+		<row>
+			<label value="Resouce" width="150px" />
+			<textbox value="Name" width="150px" />
+		</row>
+    </rows>
+</grid>
+
+</zk>
--- a/navalplanner-webapp/src/main/webapp/myhello.zul
+++ b/navalplanner-webapp/src/main/webapp/myhello.zul
@ -1,17 +1,13 @@
 <?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="/css/productionmanagement.css"?>
+<?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>


-    <div class="headings">
-        <div class="logo"></div>
-        <div class="vision"></div>
-    </div>
-
-
-    <planner>
+    <planner self="@{define(content)}">
        <div id="idContextMenuTaskAssigment" use="org.zk.myhello.pages.MyHelloPageListener">            
        </div>

--- a/navalplanner-webapp/src/main/webapp/planner/css/productionmanagement.css
+++ b/navalplanner-webapp/src/main/webapp/planner/css/productionmanagement.css
@ -132,5 +132,8 @@ Height: is recalculated on number of tasks */
 }

 .headings {
-    height:20px;
+    /* height:90px; */
+    height:90px;
 }
+
+table {margin:0px; padding:0px; border:0px;}
--- a/navalplanner-webapp/src/main/webapp/planner/img/v1/blue_ga.jpg
+++ b/navalplanner-webapp/src/main/webapp/planner/img/v1/blue_ga.jpg
--- a/navalplanner-webapp/src/main/webapp/planner/img/v2/blue_ga.jpg
+++ b/navalplanner-webapp/src/main/webapp/planner/img/v2/blue_ga.jpg
--- a/navalplanner-webapp/src/main/webapp/planner/img/v3/blue_ga.jpg
+++ b/navalplanner-webapp/src/main/webapp/planner/img/v3/blue_ga.jpg
--- a/navalplanner-webapp/src/main/webapp/planner/main.zul
+++ b/navalplanner-webapp/src/main/webapp/planner/main.zul
@ -0,0 +1,57 @@
+<?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>