d076ae96 |
1 | <?xml version='1.0' encoding='UTF-8' ?> |
2 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
3 | <html xmlns="http://www.w3.org/1999/xhtml" |
4 | xmlns:p="http://primefaces.prime.com.tr/ui" |
5 | xmlns:h="http://java.sun.com/jsf/html" |
6 | xmlns:f="http://java.sun.com/jsf/core" |
7 | xmlns:c="http://java.sun.com/jsp/jstl/core" |
8 | xmlns:ui="http://java.sun.com/jsf/facelets"> |
9 | <f:loadBundle basename="org.ufcspa.simdecs.resources.messages" var="msg" /> |
10 | <h:head> |
11 | <title>SimDeCS</title> |
12 | <link type="text/css" rel="stylesheet" href="styles.css" /> |
13 | </h:head> |
14 | <h:body> |
15 | <h:form id="fMenu"> |
16 | <p:menubar autoSubmenuDisplay="true" style="font-size: 11px; background: #ECECEC;" > |
17 | <p:submenu label="#{msg.editDiagramMenuFile}" icon="ui-icon ui-icon-document"> |
18 | <p:menuitem value="#{msg.editDiagramMenuNew}" url="#" /> |
19 | <p:menuitem value="#{msg.editDiagramMenuOpen}" url="#" /> |
20 | <p:menuitem value="#{msg.editDiagramMenuSave}" url="#" /> |
21 | </p:submenu> |
22 | <p:submenu label="#{msg.editDiagramMenuLanguage}" icon="ui-icon ui-icon-pencil"> |
23 | <p:menuitem value="#{msg.editDiagramMenuLanguagePortugueseLabel}" actionListener="#{languageSelector.handleLanguageChange()}" ajax="false" immediate="true"> |
24 | <f:param name="language" value="#{msg.editDiagramMenuLanguagePortugueseCode}" /> |
25 | </p:menuitem> |
26 | <p:menuitem value="#{msg.editDiagramMenuLanguageEnglishLabel}" actionListener="#{languageSelector.handleLanguageChange()}" ajax="false" immediate="true"> |
27 | <f:param name="language" value="#{msg.editDiagramMenuLanguageEnglishCode}" /> |
28 | </p:menuitem> |
29 | </p:submenu> |
30 | <p:submenu label="#{msg.editDiagramMenuHelp}" icon="ui-icon ui-icon-help"> |
31 | <p:menuitem value="#{msg.editDiagramMenuAbout}" url="#" /> |
32 | </p:submenu> |
33 | </p:menubar> |
34 | </h:form> |
35 | <br /> |
36 | |
37 | <p:ajaxStatus /> |
38 | <p:growl id="messageGrow1" showDetail="true" life="3000" /> |
39 | |
40 | |
41 | <p:panel id="diagramCanvas" header="#{editDiagram.diagramManager.diagramName}" style="font-size:12px;overflow: auto; height: 500px;"> |
42 | <h:form id="fdiagram"> |
43 | <table border="0" cellspacing="0"> |
44 | |
45 | <ui:repeat id="swimLanesLoop" value="#{editDiagram.diagramManager.swimLanes}" var="swimLane"> |
46 | <tr> |
47 | <td align="left" width="150"> |
48 | <p:commandLink actionListener="#{editActor.prepareWindowEditActor}" oncomplete="dialogNewActor.show();" update="fEditActor"> |
49 | <h:graphicImage id="swimLane#{swimLane.id}" value="#{swimLane.image}" height="150" /> |
50 | <f:param name="pActorID" value="#{swimLane.id}" /> |
51 | </p:commandLink> |
52 | <!-- <p:tooltip for="swimLane#{swimLane.id}" value="#{swimLane.name}" showEffect="fade" hideEffect="fade" showEffectLength="1000" hideEffectLength="1000"/> --> |
53 | </td> |
54 | <ui:repeat value="#{swimLane.nodes}" var="node"> |
55 | <td width="150"> |
1c6214fc |
56 | <p:commandLink rendered="#{!node.isInternal()}" actionListener="#{editBeginNode.prepareWindowEditBeginNode}" oncomplete="dialogBeginNode.show();" update="fEditBeginNode"> |
57 | <h:graphicImage rendered="#{!node.isInternal()}" id="node#{node.id}" value="#{node.currentImage}" width="150"/> |
d076ae96 |
58 | <f:param name="pActorID" value="#{swimLane.id}" /> |
59 | <f:param name="pNodeID" value="#{node.id}" /> |
60 | </p:commandLink> |
61 | <!-- <p:tooltip for="node#{node.id}" value="#{node.name}" showEffect="fade" hideEffect="fade" showEffectLength="1000" hideEffectLength="1000"/> --> |
62 | </td> |
63 | </ui:repeat> |
64 | <td align="left" width="150"> |
65 | <p:commandLink id="addNodeAction#{swimLane.id}" actionListener="#{editNode.prepareActionMenu}" oncomplete="dialogAddNodeMenu.show();" update="fAddNodeMenu"> |
66 | <f:param name="pActorID" value="#{swimLane.id}" /> |
67 | <h:graphicImage id="plus#{swimLane.id}" value="img/others/plus.png" /> |
68 | </p:commandLink> |
69 | </td> |
70 | </tr> |
71 | <tr> |
72 | <td style='background-image: url("img/swimLanes/separator.png");'> |
73 | </td> |
74 | <ui:repeat value="#{swimLane.nodes}" var="node"> |
75 | <td style='background-image: url("img/swimLanes/separator.png");'> |
76 | </td> |
77 | </ui:repeat> |
78 | <td style='background-image: url("img/swimLanes/separator.png");'> |
79 | </td> |
80 | </tr> |
81 | </ui:repeat> |
82 | </table> |
83 | </h:form> |
84 | </p:panel> |
85 | |
86 | <p:dialog id="dialogAddNodeMenu" widgetVar="dialogAddNodeMenu" closable="true" draggable="true" modal="true" width="500" height="300"> |
87 | <h:form id="fAddNodeMenu"> |
88 | <p:menu id="dinamycAddNodeMenu" model="#{editNode.menuActionList}" /> |
89 | </h:form> |
90 | </p:dialog> |
91 | |
92 | <p:dialog id="dialogEditNodeMenu" header="#{msg.editPropertiesTableTitle}" widgetVar="dialogEditNodeMenu" closable="true" draggable="true" modal="true" width="600" height="450"> |
93 | <h:form id="fEditNodeMenu"> |
94 | <p:dataTable var="property" value="#{editNode.properties}"> |
95 | |
96 | <p:column headerText="#{msg.editPropertiesTableName}"> |
97 | <h:outputText value="#{property.name}"/> |
98 | </p:column> |
99 | |
100 | <p:column headerText="#{msg.editPropertiesTableValue}"> |
101 | <p:resizable /> |
102 | <p:cellEditor> |
103 | <f:facet name="output"><h:outputText value="#{property.value}"/></f:facet> |
104 | <f:facet name="input"><h:inputText value="#{property.value}" required="#{property.required}" maxlength="#{property.maxLength}" /></f:facet> |
105 | </p:cellEditor> |
106 | </p:column> |
107 | |
108 | <p:column> |
109 | <p:rowEditor /> |
110 | </p:column> |
111 | </p:dataTable> |
112 | <center> |
113 | <p:commandButton id="changePropertiesButton" value="#{msg.editPropertiesButtonOk}" actionListener="#{editNode.addNode}" update="fdiagram" oncomplete="dialogEditNodeMenu.hide();" /> |
114 | <p:commandButton id="cancelChangePropertiesButton" value="#{msg.editPropertiesButtonCancel}" type="button" onclick="dialogAddNodeMenu.hide();"/> |
115 | </center> |
116 | </h:form> |
117 | </p:dialog> |
118 | |
119 | |
120 | <p:dialog id="dialogNewActor" widgetVar="dialogNewActor" header="#{msg.editDiagramEditActor}" closable="true" draggable="true" modal="true" width="500"> |
121 | <h:form id="fEditActor"> |
122 | <p:panel id="dialogNewActorPanel"> |
123 | <h:inputHidden id="editActorID" value="#{editActor.id}" /> |
124 | <table class="formTable"> |
125 | <tr> |
126 | <th><h:outputText value="#{msg.editDiagramActorName}" /></th> |
127 | <td> |
128 | <p:inputText id="editActorName" value="#{editActor.name}" required="true" size="50" maxlength="100" /> |
129 | </td> |
130 | </tr> |
131 | <tr> |
132 | <th><h:outputText value="#{msg.editDiagramActorType}" /></th> |
133 | <td> |
134 | <h:selectOneMenu id="editActorType" value="#{editActor.type}" required="true"> |
135 | <f:selectItem itemValue="" itemLabel="#{msg.selectOneOnList}" /> |
136 | <f:selectItems value="#{editActor.actorTypes}" /> |
137 | </h:selectOneMenu> |
138 | </td> |
139 | </tr> |
140 | <tr> |
141 | <th><h:outputText value="#{msg.editDiagramActorSex}" /></th> |
142 | <td> |
143 | <h:selectOneMenu id="editActorSex" value="#{editActor.sex}" required="true"> |
144 | <f:selectItem itemValue="" itemLabel="#{msg.selectOneOnList}" /> |
145 | <f:selectItem itemValue="M" itemLabel="#{msg.editDiagramActorSexMale}" /> |
146 | <f:selectItem itemValue="F" itemLabel="#{msg.editDiagramActorSexFemale}" /> |
147 | </h:selectOneMenu> |
148 | </td> |
149 | </tr> |
150 | <tr> |
151 | <th><h:outputText value="#{msg.editDiagramActorAge}" /></th> |
152 | <td> |
153 | <p:inputText id="editActorAge" value="#{editActor.age}" required="true" size="5" maxlength="3"> |
154 | <f:convertNumber integerOnly="true" minIntegerDigits="1" maxIntegerDigits="3" /> |
155 | <f:validateLongRange minimum="0" maximum="150" /> |
156 | </p:inputText> |
157 | </td> |
158 | </tr> |
159 | <tr> |
160 | <th><h:outputText value="#{msg.editDiagramActorHeight}" /></th> |
161 | <td> |
162 | <p:inputText id="editActorHeight" value="#{editActor.height}" required="true" size="5"> |
163 | <f:convertNumber maxIntegerDigits="1" minFractionDigits="2" maxFractionDigits="2" /> |
164 | </p:inputText> |
165 | <h:outputText value="#{msg.editDiagramActorHeightMeasureUnit}" /> |
166 | </td> |
167 | </tr> |
168 | <tr> |
169 | <th><h:outputText value="#{msg.editDiagramActorWeight}" /></th> |
170 | <td> |
171 | <p:inputText id="editActorWeight" value="#{editActor.weight}" required="true" size="5" maxlength="3"> |
172 | <f:convertNumber integerOnly="true" /> |
173 | </p:inputText> |
174 | <h:outputText value="#{msg.editDiagramActorWeightMeasureUnit}" /> |
175 | </td> |
176 | </tr> |
177 | </table> |
178 | <br /> |
179 | <p:commandButton id="buttonAddActor" value="#{msg.buttonAdd}" oncomplete="handleAddActorRequest(xhr, status, args);" actionListener="#{editActor.addActor}" update="diagramCanvas,dialogNewActorPanel,messageGrow1,fdiagram" /> |
180 | <p:commandButton id="buttonEditActor" value="#{msg.buttonEdit}" oncomplete="handleAddActorRequest(xhr, status, args);" actionListener="#{editActor.editActor}" update="diagramCanvas,dialogNewActorPanel,messageGrow1,fdiagram" /> |
181 | <p:commandButton id="buttonRemoveActor" value="#{msg.buttonRemove}" style="color: red;" oncomplete="dialogNewActor.hide();" actionListener="#{editActor.removeActor}" ajax="false" update="swimLanesLoop" /> |
182 | </p:panel> |
183 | <script type="text/javascript"> |
184 | function handleAddActorRequest(xhr, status, args) { |
185 | if(args.validationFailed) { |
186 | jQuery('#dialogNewActor').parent().effect("shake", { times:3 }, 100); |
187 | } else { |
188 | dialogNewActor.hide(); |
189 | } |
190 | } |
191 | </script> |
192 | </h:form> |
193 | </p:dialog> |
194 | |
195 | <h:form id="fdock"> |
196 | <p:dock id="dock"> |
197 | <p:menuitem id="dockAddActor" value="#{msg.editDiagramAddActor}" icon="/img/dock/addActor.png" immediate="true" actionListener="#{editActor.prepareWindowAddActor}" oncomplete="dialogNewActor.show();" update="fEditActor,dialogNewActorPanel"/> |
198 | </p:dock> |
199 | </h:form> |
200 | </h:body> |
201 | </html> |
202 | |