web/editDiagram.xhtml

   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">
  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"/>
  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>&nbsp;
 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>&nbsp;
 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