我正在努力提高我的代码质量，所以目前我为每个U.I复制了很大一部分代码。我有这个观点，但这会造成很多代码的重复，并且无法实现
这是当前的代码：
<ui:define name="title">Project Marking - Section A</ui:define>
<ui:define name="content">
<h:form>
<ui:fragment > <!-- rendered="{request.isUserInRole('ADMIN')}"> IMPLEMENT ONCE WE HAVE A LOG ON SYSTEM-->
<p:growl id="growl" />
<p:progressBar widgetVar="pbAjax" ajax="true" value="7" labelTemplate="{value}%" styleClass="animated"/>
<h4>Project marking page one</h4>
<p>
Projet Title :
</p>
<p>
<h4>Summary of what is required for this section</h4>
</p>
<p>
<!-- re word below -->
Statement of project's context, aims and objectives Statement of project's context, aims and objectives:
To what extent are the problem topic and investigation well framed in the report?
How challenging is the problem demonstrated to be?
</p>
<p>
Weight of the mark : 2
</p>
<p>
<p>
Please select the mark range below, this will then reveal another button allow you to more precisely assign a mark for this section as well a text input box where you can add some comments (Max of 250 characters)
</p>
<br></br>
<!-- <p:outputLabel value="#{bundle.labelMarkRange}" for="radioButtons" />-->
<p:panelGrid columns="4" style="width:100%"> <!--style="width:1100px"-->
<f:facet name="header">
Marking Table
</f:facet>
<p:column>
<br></br>
<p:selectOneRadio id="radioButtons" value="#{formBean.number}" layout="grid" columns="1" required = "True"
requiredMessage="#{bundle.messageSelectMarkRange}" >
<f:selectItem itemLabel="0 - 19" itemValue="1" />
<f:selectItem itemLabel="20 - 39" itemValue="2" />
<f:selectItem itemLabel="40 - 49 " itemValue="4" />
<f:selectItem itemLabel="50 - 59" itemValue="5" />
<f:selectItem itemLabel="60 - 69" itemValue="6" />
<f:selectItem itemLabel="70 - 79" itemValue="7" />
<f:selectItem itemLabel="80 - 100" itemValue="8" />
<p:ajax process="@this" update="mySpinnerPanel comments" />
</p:selectOneRadio>
</p:column>
<p:column>
<p>
<p:button id="help0-19" icon="ui-icon-help">
</p:button>
<p:tooltip for="help0-19" value="No statement or very generalised with vague aims or objectives"
showEffect="clip" hideEffect="explode" />
</p>
<p>
<p:button id="help20-39" icon="ui-icon-help">
</p:button>
<p:tooltip for="help20-39" value="No statement or very generalised with vague aims or objectives"
showEffect="clip" hideEffect="explode" />
</p>
<p>
<p:button id="help40-49" icon="ui-icon-help">
</p:button>
<p:tooltip for="help40-49" value="Problem topic and aims and objectives apparent Shows limited understanding and analysis"
showEffect="clip" hideEffect="explode" />
</p>
<p>
<p:button id="help50-59" icon="ui-icon-help">
</p:button>
<p:tooltip for="help50-59" value="Problem topic and aims and objectives well presented, showing understanding and analysis. Key aspects of the context are covered"
showEffect="clip" hideEffect="explode" />
</p>
<p>
<p:button id="help60-69" icon="ui-icon-help">
</p:button>
<p:tooltip for="help60-69" value="Problem topic and aims and objectives well framed and viewed in wider context"
showEffect="clip" hideEffect="explode" />
</p>
<p>
<p:button id="help70-79" icon="ui-icon-help">
</p:button>
<p:tooltip for="help70-79" value="Problem is clearly shown to be challenging or shows originality and confidence in criticising assumptions"
showEffect="clip" hideEffect="explode" />
</p>
<p>
<p:button id="help80-100" icon="ui-icon-help">
</p:button>
<p:tooltip for="help80-100" value="Analysis of problem adds new insights"
showEffect="clip" hideEffect="explode" />
</p>
</p:column>
<p:column>
<p:outputPanel id = "mySpinnerPanel" layout ="pageDirection">
<!-- look into validation for this to prevent any unwanted values, better than the min max etc -->
<p:spinner id="ajaxspinner80-100" value="#{markingBean.markToCreate.markSectionTwo}"
stepFactor="1" min="80" max="100" disabled="#{formBean.number != 8}">
<p:ajax update="ajaxspinnervalue" process="@this" />
</p:spinner>
</p:outputPanel>
</p:column>
<p:outputPanel id ="comments">
<p:inputTextarea rows="6" cols="33" counter="counter" maxlength="250"
counterTemplate="Characters remaining : {0} "
autoResize="true"
disabled="#{formBean.number le 1 and formBean.number ge 9}"
/> <!-- rendered here checks the value from formBean is between 1 and 8 -->
<br></br>
<h:outputText id="counter" />
</p:outputPanel>
<f:facet name="footer">
Total mark for this section is:
<h:outputText id="ajaxspinnervalue" value="#{markingBean.markToCreate.markSectionTwo}"
/>
</f:facet>
</p:panelGrid>
</p>
<!-- testing to make sure the correct value is passed -->
<p>
<p:commandButton value="#{bundle.buttonNextSection}" icon ="ui-icon-disk" update="displayMark :growl" oncomplete="PF('dlg').show()" />
</p>
<p:dialog header="Confirm Mark" widgetVar="dlg" showEffect="fold" hideEffect="fold">
<h:panelGrid id="displayMark" columns="2" cellpadding="5">
<h:outputText value="Mark to be submitted: " />
<h:outputText value="#{markingBean.markToCreate.markSectionTwo}" />
<h:outputText value="For student number : " />
<p:commandButton action="#{markingBean.createMarking}" value="#{bundle.buttonSave}" update=":growl" icon="ui-icon-disk"/>
<!-- <p:button outcome="/lecturer/marking/marking-section-two" value="#{bundle.buttonNextSection}" icon ="ui-icon-arrowthick-1-e" />
-->
</h:panelGrid>
</p:dialog>
</ui:fragment>
</h:form>
<h:form>
<p>
<p:commandButton value="Home" icon ="ui-icon-home" update="navHomeConfirm :growl" oncomplete="PF('homenav').show()" />
</p>
<!--
<h:outputText value="Options: " />
<p:selectOneRadio id="options" value="#{formBean.number}">
<f:selectItem itemLabel="Option 1" itemValue="1" />
<f:selectItem itemLabel="Option 2" itemValue="2" />
<f:selectItem itemLabel="Option 3" itemValue="3" />
</p:selectOneRadio>
-->
<!-- testing of the radio buttons
<p>
<p:commandButton id="submitButton" value="Submit" update="display"/>
<h:panelGrid columns="2" id="display">
<h:outputText value="Value1:" />
<h:outputText id="value1" value="{formBean.number}" />
</h:panelGrid>
</p> -->
<!-- testing of if the mark is right -->
<p:dialog header="Confirm Navigation" widgetVar="homenav" showEffect="fold" hideEffect="fold">
<h:panelGrid id="navHomeConfirm" columns="2" cellpadding="5">
<!-- <h:outputText value="Confirm navigation to home" /> -->
<p:button outcome="/index" value="#{bundle.home}" icon="ui-icon-home"/>
<p:commandButton value ="#{bundle.cancel} " oncomplete="homenav.hide();" />
<!-- <p:button outcome="/lecturer/marking/marking-section-two" value="#{bundle.buttonNextSection}" icon ="ui-icon-arrowthick-1-e" />
-->
</h:panelGrid>
</p:dialog>
</h:form>
</ui:define>
现在我只是将其复制并粘贴到我需要它的每个视图中，只需更改可变的名称，这看起来真的像是太多重复，是否有一个库或标签或某些东西可以帮助我使用此代码以上但只更改每个页面的变量值？
还必须包含的一项功能是能够在每个页面上提交值而不仅仅是在最后
谢谢你们