[simdecs.git] / web / editDiagram.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <f:loadBundle basename="org.ufcspa.simdecs.resources.messages" var="msg" />
    <h:head>
        <title>SimDeCS</title>
        <link type="text/css"  rel="stylesheet" href="styles.css" />
    </h:head>    
    <h:body>  
        <h:form id="fMenu">
            <p:menubar autoSubmenuDisplay="true" style="font-size: 11px; background: #ECECEC;" >  
                <p:submenu label="#{msg.editDiagramMenuFile}" icon="ui-icon ui-icon-document">  
                    <p:menuitem value="#{msg.editDiagramMenuNew}" url="#"  />  
                    <p:menuitem value="#{msg.editDiagramMenuOpen}" url="#" />  
                    <p:menuitem value="#{msg.editDiagramMenuSave}" url="#" />  
                </p:submenu>  
                <p:submenu label="#{msg.editDiagramMenuLanguage}"  icon="ui-icon ui-icon-pencil">
                    <p:menuitem value="#{msg.editDiagramMenuLanguagePortugueseLabel}" actionListener="#{languageSelector.handleLanguageChange()}" ajax="false" immediate="true">  
                        <f:param name="language" value="#{msg.editDiagramMenuLanguagePortugueseCode}" />
                    </p:menuitem>    
                    <p:menuitem value="#{msg.editDiagramMenuLanguageEnglishLabel}" actionListener="#{languageSelector.handleLanguageChange()}" ajax="false" immediate="true">  
                        <f:param name="language" value="#{msg.editDiagramMenuLanguageEnglishCode}" />
                    </p:menuitem>
                </p:submenu>
                <p:submenu label="#{msg.editDiagramMenuHelp}"  icon="ui-icon ui-icon-help">  
                    <p:menuitem value="#{msg.editDiagramMenuAbout}" url="#" />  
                </p:submenu>  
            </p:menubar>
        </h:form>
        <br />

        <p:ajaxStatus />
        <p:growl id="messageGrow1" showDetail="true" life="3000" />
        
        
        <p:panel id="diagramCanvas" header="#{editDiagram.diagramManager.diagramName}" style="font-size:12px;overflow: auto; height: 500px;">
            <h:form id="fdiagram">
                <table border="0" cellspacing="0">
                    
                    <ui:repeat id="swimLanesLoop" value="#{editDiagram.diagramManager.swimLanes}" var="swimLane">
                        <tr>
                            <td align="left" width="150">
                                <p:commandLink actionListener="#{editActor.prepareWindowEditActor}" oncomplete="dialogNewActor.show();" update="fEditActor">
                                    <h:graphicImage id="swimLane#{swimLane.id}" value="#{swimLane.image}" height="150" />
                                    <f:param name="pActorID" value="#{swimLane.id}" />
                                </p:commandLink>
<!--                                <p:tooltip for="swimLane#{swimLane.id}" value="#{swimLane.name}" showEffect="fade" hideEffect="fade" showEffectLength="1000" hideEffectLength="1000"/> -->
                            </td>
                            <ui:repeat value="#{swimLane.nodes}" var="node">
                                <td width="150">
                                    <p:commandLink rendered="#{!node.isInternal()}" actionListener="#{editBeginNode.prepareWindowEditBeginNode}" oncomplete="dialogBeginNode.show();" update="fEditBeginNode">
                                        <h:graphicImage rendered="#{!node.isInternal()}" id="node#{node.id}" value="#{node.currentImage}" width="150"/>
                                        <f:param name="pActorID" value="#{swimLane.id}" />
                                        <f:param name="pNodeID" value="#{node.id}" />
                                    </p:commandLink>
<!--                                    <p:tooltip for="node#{node.id}" value="#{node.name}" showEffect="fade" hideEffect="fade" showEffectLength="1000" hideEffectLength="1000"/> -->
                                </td>
                            </ui:repeat>
                            <td align="left" width="150">
                                <p:commandLink id="addNodeAction#{swimLane.id}" actionListener="#{editNode.prepareActionMenu}" oncomplete="dialogAddNodeMenu.show();" update="fAddNodeMenu">
                                    <f:param name="pActorID" value="#{swimLane.id}" />
                                    <h:graphicImage id="plus#{swimLane.id}" value="img/others/plus.png" />
                                </p:commandLink>
                            </td>
                        </tr>
                        <tr>
                            <td style='background-image: url("img/swimLanes/separator.png");'>                                
                            </td>
                            <ui:repeat value="#{swimLane.nodes}" var="node">
                                <td style='background-image: url("img/swimLanes/separator.png");'>                                
                                </td>
                            </ui:repeat>
                            <td style='background-image: url("img/swimLanes/separator.png");'>                                
                            </td>
                        </tr>
                    </ui:repeat>
                </table>
            </h:form>           
        </p:panel>
        
        <p:dialog id="dialogAddNodeMenu" widgetVar="dialogAddNodeMenu" closable="true" draggable="true" modal="true" width="500" height="300">
            <h:form id="fAddNodeMenu">
                <p:menu id="dinamycAddNodeMenu" model="#{editNode.menuActionList}"  />
            </h:form>
        </p:dialog>

        <p:dialog id="dialogEditNodeMenu" header="#{msg.editPropertiesTableTitle}" widgetVar="dialogEditNodeMenu" closable="true" draggable="true" modal="true" width="600" height="450">
            <h:form id="fEditNodeMenu">
                <p:dataTable var="property" value="#{editNode.properties}">
                    
                    <p:column headerText="#{msg.editPropertiesTableName}">
                        <h:outputText value="#{property.name}"/>
                    </p:column>                    

                    <p:column headerText="#{msg.editPropertiesTableValue}">
                        <p:resizable />
                        <p:cellEditor>
                            <f:facet name="output"><h:outputText value="#{property.value}"/></f:facet>
                            <f:facet name="input"><h:inputText value="#{property.value}" required="#{property.required}" maxlength="#{property.maxLength}" /></f:facet>
                        </p:cellEditor>
                    </p:column>
                    
                    <p:column>
                        <p:rowEditor />
                    </p:column>
                </p:dataTable>
                <center>
                    <p:commandButton id="changePropertiesButton" value="#{msg.editPropertiesButtonOk}" actionListener="#{editNode.addNode}" update="fdiagram" oncomplete="dialogEditNodeMenu.hide();" />
                    <p:commandButton id="cancelChangePropertiesButton" value="#{msg.editPropertiesButtonCancel}" type="button" onclick="dialogAddNodeMenu.hide();"/>
                </center>
            </h:form>
        </p:dialog>
        
                
        <p:dialog id="dialogNewActor" widgetVar="dialogNewActor" header="#{msg.editDiagramEditActor}" closable="true" draggable="true" modal="true" width="500">
            <h:form id="fEditActor">
                <p:panel id="dialogNewActorPanel">
                    <h:inputHidden id="editActorID" value="#{editActor.id}" />
                    <table class="formTable">
                        <tr>
                            <th><h:outputText value="#{msg.editDiagramActorName}" /></th>
                            <td>
                                <p:inputText id="editActorName" value="#{editActor.name}" required="true" size="50" maxlength="100" />
                            </td>
                        </tr>
                        <tr>
                            <th><h:outputText value="#{msg.editDiagramActorType}" /></th>
                            <td>
                                <h:selectOneMenu id="editActorType" value="#{editActor.type}" required="true">
                                    <f:selectItem itemValue="" itemLabel="#{msg.selectOneOnList}" />  
                                    <f:selectItems value="#{editActor.actorTypes}" />  
                                </h:selectOneMenu>
                            </td>
                        </tr>
                        <tr>
                            <th><h:outputText value="#{msg.editDiagramActorSex}" /></th>
                            <td>
                                <h:selectOneMenu id="editActorSex" value="#{editActor.sex}" required="true">
                                    <f:selectItem itemValue="" itemLabel="#{msg.selectOneOnList}" />  
                                    <f:selectItem itemValue="M" itemLabel="#{msg.editDiagramActorSexMale}" />  
                                    <f:selectItem itemValue="F" itemLabel="#{msg.editDiagramActorSexFemale}" />  
                                </h:selectOneMenu>
                            </td>
                        </tr>
                        <tr>
                            <th><h:outputText value="#{msg.editDiagramActorAge}" /></th>
                            <td>
                                <p:inputText id="editActorAge" value="#{editActor.age}" required="true" size="5" maxlength="3">
                                    <f:convertNumber integerOnly="true" minIntegerDigits="1" maxIntegerDigits="3" />
                                    <f:validateLongRange minimum="0" maximum="150" />
                                </p:inputText>
                            </td>
                        </tr>
                        <tr>
                            <th><h:outputText value="#{msg.editDiagramActorHeight}" /></th>
                            <td>
                                <p:inputText id="editActorHeight" value="#{editActor.height}" required="true" size="5">
                                    <f:convertNumber maxIntegerDigits="1" minFractionDigits="2" maxFractionDigits="2" />
                                </p:inputText>&nbsp;
                                <h:outputText value="#{msg.editDiagramActorHeightMeasureUnit}" />
                            </td>
                        </tr>
                        <tr>
                            <th><h:outputText value="#{msg.editDiagramActorWeight}" /></th>
                            <td>
                                <p:inputText id="editActorWeight" value="#{editActor.weight}" required="true" size="5" maxlength="3">
                                    <f:convertNumber integerOnly="true" />
                                </p:inputText>&nbsp;
                                <h:outputText value="#{msg.editDiagramActorWeightMeasureUnit}" />
                            </td>
                        </tr>
                    </table>
                    <br />
                    <p:commandButton id="buttonAddActor" value="#{msg.buttonAdd}" oncomplete="handleAddActorRequest(xhr, status, args);" actionListener="#{editActor.addActor}" update="diagramCanvas,dialogNewActorPanel,messageGrow1,fdiagram" />
                    <p:commandButton id="buttonEditActor" value="#{msg.buttonEdit}" oncomplete="handleAddActorRequest(xhr, status, args);" actionListener="#{editActor.editActor}" update="diagramCanvas,dialogNewActorPanel,messageGrow1,fdiagram" />
                    <p:commandButton id="buttonRemoveActor" value="#{msg.buttonRemove}" style="color: red;" oncomplete="dialogNewActor.hide();" actionListener="#{editActor.removeActor}" ajax="false" update="swimLanesLoop" />
               </p:panel>
                <script type="text/javascript">
                        function handleAddActorRequest(xhr, status, args) {
                                if(args.validationFailed) {
                                        jQuery('#dialogNewActor').parent().effect("shake", { times:3 }, 100);
                                } else {
                                        dialogNewActor.hide();
                                }
                        }
                </script>				
            </h:form>
        </p:dialog>

        <h:form id="fdock">
            <p:dock id="dock">  
                <p:menuitem id="dockAddActor" value="#{msg.editDiagramAddActor}" icon="/img/dock/addActor.png" immediate="true" actionListener="#{editActor.prepareWindowAddActor}" oncomplete="dialogNewActor.show();" update="fEditActor,dialogNewActorPanel"/>  
            </p:dock>
        </h:form>           
    </h:body>
</html>
Commit	Line	Data
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">
1c6214fc	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