. WCM UI enhancements

- sizing of selected item lists
 - No modified items/no web forms messages added to sandbox views
 - Sizing of output path text boxes
 - Description textboxes in web project wizard now textareas
 - Selected Web Forms list in Create Web Project wizard now looks like lists in Create Form Wizard
 - Improved list layout in Configure Templates dialog
 - Mimetype of template shown next to name in list in Configure Templates dialog

git-svn-id: https://svn.alfresco.com/repos/alfresco-enterprise/alfresco/HEAD/root@4793 c4b6b30b-aa2e-2d43-bbcb-ca4b014f7261

config/alfresco/messages/webclient.properties

@@ -852,7 +852,6 @@ website_filename_pattern=Filename pattern
 website_filename_match=Filename pattern match
 website_workflow=Workflow
 website_workflow_info=Use the following workflow
-website_form_summary=Using workflow ''{0}'', with output path pattern ''{1}'', {2,choice,0#no rendering engines|1#one rendering engine|1<{2,number} rendering engines} selected.
 website_forms=Configure Web Forms
 form_template_details=Web Form Details
 form_template_details_desc=Edit the details of this Web Form
@@ -888,6 +887,7 @@ workflow_settings=Workflow Settings
 workflow_not_configured=Workflow not configured
 error_filename_pattern=Error with workflow filename pattern: {0}
 workflow_not_set=no workflow
+rendering_engines_selected=Templates Selected
 
 # Invite web users wizard messages
 invite_website_users=Invite Web Project Users
@@ -952,6 +952,8 @@ recent_snapshots=Recent Snapshots
 snapshot_revert=Revert
 snapshot_preview=Preview
 webapp_current=Current Webapp Folder
+sandbox_no_modified_items=No modified items
+sandbox_no_web_forms=No Web Forms available
 
 # Website actions and dialog messages
 title_import_content=Web Project Bulk Import

source/java/org/alfresco/web/bean/wcm/CreateWebsiteWizard.java

@@ -17,7 +17,6 @@
 package org.alfresco.web.bean.wcm;
 
 import java.io.Serializable;
-import java.text.MessageFormat;
 import java.util.ArrayList;
 import java.util.Collection;
 import java.util.HashMap;
@@ -67,7 +66,6 @@ public class CreateWebsiteWizard extends BaseWizardBean
    private static final String MSG_DESCRIPTION = "description";
    private static final String MSG_NAME = "name";
    private static final String MSG_USERROLES = "create_website_summary_users";
-   private static final String MSG_FORM_SUMMARY = "website_form_summary";
    private static final String MSG_NONE = "workflow_not_set";
    
    private static final String COMPONENT_FORMLIST = "form-list";
@@ -844,6 +842,11 @@ public class CreateWebsiteWizard extends BaseWizardBean
          return this.templates;
       }
       
+      public int getTemplatesSize()
+      {
+         return getTemplates() != null ? getTemplates().size() : 0;
+      }
+      
       /**
        * @param template   to add to the list of PresentationTemplate
        */
@@ -863,18 +866,6 @@ public class CreateWebsiteWizard extends BaseWizardBean
       {
          this.templates = templates;
       }
-
-      /**
-       * @return Human readable summary of the configuration for this form
-       */
-      public String getDetails()
-      {
-         String none = '<' + Application.getMessage(FacesContext.getCurrentInstance(), MSG_NONE) + '>';
-         return MessageFormat.format(Application.getMessage(FacesContext.getCurrentInstance(), MSG_FORM_SUMMARY),
-               getWorkflow() != null ? this.workflow.title : none,
-               getOutputPathPattern() != null ? this.outputPathPattern : none,
-               getTemplates() != null ? this.templates.size() : 0);
-      }
    }
    
    /**

source/java/org/alfresco/web/bean/wcm/FormTemplatesDialog.java

@@ -133,7 +133,7 @@ public class FormTemplatesDialog extends BaseDialogBean
          PresentationTemplate wrapper = new PresentationTemplate(engine);
          UIListItem item = new UIListItem();
          item.setValue(wrapper);
-         item.setLabel(wrapper.getTitle());
+         item.setLabel(wrapper.getTitle() + " (" + engine.getMimetypeForRendition() + ")");
          item.setDescription(wrapper.getDescription());
          item.setImage(WebResources.IMAGE_TEMPLATE_32);
          items.add(item);

source/java/org/alfresco/web/ui/wcm/component/UIUserSandboxes.java

@@ -108,6 +108,8 @@ public class UIUserSandboxes extends SelfRenderingComponent
    private static final String MSG_ACTIONS = "actions";
    private static final String MSG_DELETED_ITEM = "avm_node_deleted";
    private static final String MSG_SELECTED = "selected";
+   private static final String MSG_NO_MODIFIED_ITEMS = "sandbox_no_modified_items";
+   private static final String MSG_NO_WEB_FORMS = "sandbox_no_web_forms";
    
    /** Content Manager role name */
    private static final String ROLE_CONTENT_MANAGER = "ContentManager";
@@ -491,25 +493,25 @@ public class UIUserSandboxes extends SelfRenderingComponent
       String stagingStore = AVMConstants.buildStagingStoreName(storeRoot);
       String stagingStorePath = AVMConstants.buildStoreWebappPath(stagingStore, getWebapp());
       
-      // info we need to calculate preview paths for assets
-      String dns = AVMConstants.lookupStoreDNS(userStore);
-      int rootPathIndex = AVMConstants.buildSandboxRootPath(userStore).length();
-      ClientConfigElement config = Application.getClientConfig(fc);
-      
-      // get the UIActions component responsible for rendering context related user actions
-      // TODO: we may need a component per user instance? (or use evaluators for roles...)
-      UIActions uiFileActions = aquireUIActions(ACTIONS_FILE, userStore);
-      UIActions uiFolderActions = aquireUIActions(ACTIONS_FOLDER, userStore);
-      UIActions uiDeletedActions = aquireUIActions(ACTIONS_DELETED, userStore);
-      
-      String id = getClientId(fc);
-      
       // use the sync service to get the list of diffs between the stores
       NameMatcher matcher = (NameMatcher)FacesContextUtils.getRequiredWebApplicationContext(fc).getBean(
             "globalPathExcluder");
       List<AVMDifference> diffs = avmSyncService.compare(-1, userStorePath, -1, stagingStorePath, matcher);
       if (diffs.size() != 0)
       {
+         // info we need to calculate preview paths for assets
+         String dns = AVMConstants.lookupStoreDNS(userStore);
+         int rootPathIndex = AVMConstants.buildSandboxRootPath(userStore).length();
+         ClientConfigElement config = Application.getClientConfig(fc);
+         
+         // get the UIActions component responsible for rendering context related user actions
+         // TODO: we may need a component per user instance? (or use evaluators for roles...)
+         UIActions uiFileActions = aquireUIActions(ACTIONS_FILE, userStore);
+         UIActions uiFolderActions = aquireUIActions(ACTIONS_FOLDER, userStore);
+         UIActions uiDeletedActions = aquireUIActions(ACTIONS_DELETED, userStore);
+         
+         String id = getClientId(fc);
+         
          // store lookup of username to list of modified nodes
          List<AVMNodeDescriptor> nodes = new ArrayList<AVMNodeDescriptor>(diffs.size());
          this.userNodes.put(username, nodes);
@@ -692,7 +694,10 @@ public class UIUserSandboxes extends SelfRenderingComponent
       }
       else
       {
-         // TODO: output "no modified files found" message
+         // output "no modified files found" message
+         out.write("<div style='padding-left:16px'><i>");
+         out.write(bundle.getString(MSG_NO_MODIFIED_ITEMS));
+         out.write("</i></div>");
       }
    }
    
@@ -718,10 +723,10 @@ public class UIUserSandboxes extends SelfRenderingComponent
       {
          this.forms = new WebProject(websiteRef).getForms();
       }
+      
+      ResourceBundle bundle = Application.getBundle(fc);
       if (this.forms.size() != 0)
       {
-         ResourceBundle bundle = Application.getBundle(fc);
-         
          // output the table of available forms
          // TODO: apply tag style - removed hardcoded
          out.write("<table class='modifiedItemsList' cellspacing='2' cellpadding='1' border='0' width='100%'>");
@@ -773,6 +778,13 @@ public class UIUserSandboxes extends SelfRenderingComponent
          
          out.write("</table>");
       }
+      else
+      {
+         // output "no web forms" message
+         out.write("<div style='padding-left:16px'><i>");
+         out.write(bundle.getString(MSG_NO_WEB_FORMS));
+         out.write("</i></div>");
+      }
    }
    
    /**

source/web/jsp/wcm/create-form-wizard/configure-rendering-engines.jsp

@@ -216,7 +216,7 @@
       <h:column id="data-table-column-5">
         <a:actionLink id="remove-select-rendering-engine-action-link"
 		      actionListener="#{WizardManager.bean.removeSelectedRenderingEngineTemplate}" 
-	              image="/images/icons/delete.gif" value="#{msg.remove}" showLink="false" style="padding-left:6px" />
+	              image="/images/icons/delete.gif" value="#{msg.remove}" showLink="false" style="padding:4px" />
       </h:column>
     </h:dataTable>
     

source/web/jsp/wcm/create-website-wizard/details.jsp

@@ -94,7 +94,7 @@
       </td>
       <td width="85%">
          </f:verbatim>
-         <h:inputText id="name" value="#{WizardManager.bean.name}" size="35" maxlength="1024"
+         <h:inputText id="name" value="#{WizardManager.bean.name}" size="45" maxlength="1024"
                       onkeyup="javascript:checkButtonState();" />
          <f:verbatim>
       </td>
@@ -112,7 +112,7 @@
       </td>
       <td width="85%">
          </f:verbatim>
-         <h:inputText id="dnsname" value="#{WizardManager.bean.dnsName}" size="35" maxlength="64"
+         <h:inputText id="dnsname" value="#{WizardManager.bean.dnsName}" size="45" maxlength="64"
                onkeyup="javascript:checkButtonState();" disabled="#{WizardManager.bean.editMode}" />
          <f:verbatim>
       </td>
@@ -126,7 +126,7 @@
       </td>
       <td width="85%">
          </f:verbatim>
-         <h:inputText id="webapp" value="#{WizardManager.bean.webapp}" size="35" maxlength="256" disabled="true" />
+         <h:inputText id="webapp" value="#{WizardManager.bean.webapp}" size="45" maxlength="256" disabled="true" />
          <f:verbatim>
       </td>
    </tr>
@@ -139,20 +139,20 @@
       </td>
       <td>
          </f:verbatim>
-         <h:inputText id="title" value="#{WizardManager.bean.title}" size="35" maxlength="1024" />
+         <h:inputText id="title" value="#{WizardManager.bean.title}" size="45" maxlength="1024" />
          <f:verbatim>
       </td>
    </tr>
    <tr>
       <td></td>
-      <td>
+      <td valign="top">
          </f:verbatim>
          <h:outputText value="#{msg.description}:"/>
          <f:verbatim>
       </td>
       <td>
          </f:verbatim>
-         <h:inputText id="description" value="#{WizardManager.bean.description}" size="35" maxlength="1024" />
+         <h:inputTextarea id="description" value="#{WizardManager.bean.description}" rows="3" cols="42" />
          <f:verbatim>
       </td>
    </tr>

source/web/jsp/wcm/create-website-wizard/form-details.jsp

@@ -74,20 +74,20 @@
             </td>
             <td>
                </f:verbatim>
-               <h:inputText id="title" value="#{DialogManager.bean.title}" size="35" maxlength="1024" onkeyup="javascript:checkButtonState();" />
+               <h:inputText id="title" value="#{DialogManager.bean.title}" size="45" maxlength="1024" onkeyup="javascript:checkButtonState();" />
                <f:verbatim>
             </td>
          </tr>
          <tr>
             <td></td>
-            <td>
+            <td valign="top">
                </f:verbatim>
                <h:outputText value="#{msg.description}:"/>
                <f:verbatim>
             </td>
             <td>
                </f:verbatim>
-               <h:inputText id="description" value="#{DialogManager.bean.description}" size="35" maxlength="1024" />
+               <h:inputTextarea id="description" value="#{DialogManager.bean.description}" rows="3" cols="42" />
                <f:verbatim>
             </td>
          </tr>

source/web/jsp/wcm/create-website-wizard/form-templates.jsp

@@ -36,15 +36,20 @@
    <h:outputText styleClass="mainSubText" value="#{msg.website_selected_templates}:" />
    
    <h:panelGroup rendered="#{DialogManager.bean.templatesDataModel.rowCount != 0}">
-      <h:panelGrid columns="2" cellspacing="2">
+      <h:panelGrid columns="2" cellspacing="2" width="100%">
          <h:dataTable value="#{DialogManager.bean.templatesDataModel}" var="row" 
                       rowClasses="selectedItemsRow,selectedItemsRowAlt"
                       styleClass="selectedItems" headerClass="selectedItemsHeader"
-                      cellspacing="0" cellpadding="4">
+                      cellspacing="0" cellpadding="4" width="100%">
             <h:column>
                <f:facet name="header">
                   <h:outputText value="#{msg.name}" />
                </f:facet>
+               <f:verbatim>
+                  <img style="float:left" src="<%=request.getContextPath()%>/images/icons/template_large.gif" />
+               </f:verbatim>
+            </h:column>
+            <h:column>
                <h:outputText value="#{row.title}" />
             </h:column>
             <h:column>
@@ -55,7 +60,7 @@
             </h:column>
             <h:column>
                <a:actionLink actionListener="#{DialogManager.bean.removeTemplate}" image="/images/icons/delete.gif"
-                             value="#{msg.remove}" showLink="false" style="padding-left:6px" />
+                             value="#{msg.remove}" showLink="false" style="padding:4px" />
             </h:column>
          </h:dataTable>
          <h:graphicImage value="/images/icons/Help_icon.gif" style="vertical-align:-20%;padding-left:8px;cursor:help" onclick="javascript:toggleOutputPathPatternHelp()" />
@@ -66,7 +71,8 @@
    </h:panelGroup>
    
    <a:panel id="no-items" rendered="#{DialogManager.bean.templatesDataModel.rowCount == 0}">
-      <h:panelGrid columns="1" cellpadding="2" styleClass="selectedItems" rowClasses="selectedItemsHeader,selectedItemsRow">
+      <h:panelGrid width="100%" columns="1" cellpadding="2"
+            styleClass="selectedItems" rowClasses="selectedItemsHeader,selectedItemsRow">
          <h:outputText id="no-items-name" value="#{msg.name}" />
          <h:outputText styleClass="selectedItemsRow" id="no-items-msg" value="#{msg.no_selected_items}" />
       </h:panelGrid>

source/web/jsp/wcm/create-website-wizard/form-workflow.jsp

@@ -35,6 +35,6 @@
    
    <h:panelGrid columns="2" cellpadding="2" cellspacing="2" style="margin-left:16px">
       <h:outputText value="&nbsp;#{msg.website_filename_match}" escape="false" />
-      <h:inputText value="#{DialogManager.bean.filenamePattern}" />
+      <h:inputText value="#{DialogManager.bean.filenamePattern}" size="70" />
    </h:panelGrid>
 </h:panelGroup>

source/web/jsp/wcm/create-website-wizard/forms.jsp

@@ -37,49 +37,66 @@
    
    <%-- Selected Form table, with configuration buttons and info text --%>
    <f:verbatim><div style='padding:4px'></div></f:verbatim>
-   <h:outputText styleClass="mainSubText" value="#{msg.website_selected_forms}:" />
    <h:dataTable value="#{WizardManager.bean.formsDataModel}" var="row" 
                 rowClasses="selectedItemsRow,selectedItemsRowAlt"
                 styleClass="selectedItems" headerClass="selectedItemsHeader"
-                cellspacing="0" cellpadding="4" 
+                cellspacing="0" cellpadding="4" width="100%"
                 rendered="#{WizardManager.bean.formsDataModel.rowCount != 0}">
       <h:column>
          <f:facet name="header">
-            <h:outputText value="#{msg.name}" />
+            <h:outputText value="#{msg.website_selected_forms}" />
          </f:facet>
-         <h:outputText value="#{row.title}" />
+         <f:verbatim>
-         <h:graphicImage url="/images/icons/warning.gif" style="padding:2px" width="16" height="16"
+            <img style="float:left" src="<%=request.getContextPath()%>/images/icons/webform_large.gif" />
-               rendered="#{row.workflow != null && row.workflow.params == null}" title="#{msg.workflow_not_configured}" />
+         </f:verbatim>
-      </h:column>
+         <h:panelGrid columns="2" cellspacing="1">
-      <h:column>
+            <h:outputText value="#{msg.name}: " />
-         <f:facet name="header">
+            <h:outputText value="#{row.title}" />
-            <h:outputText value="#{msg.details}" />
+            
-         </f:facet>
+            <h:outputText value="#{msg.description}: " />
-         <h:outputText value="#{row.details}" />
+            <h:outputText style="font-style:italic" rendered="#{empty row.description}" value="#{msg.description_not_set}" />
+            <h:outputText rendered="#{!empty row.description}" value="#{row.description}" />
+            
+            <h:outputText value="#{msg.workflow}: " />
+            <h:outputText rendered="#{row.workflow != null}" value="#{row.workflow.title}" />
+            <h:panelGroup rendered="#{row.workflow == null}">
+               <h:outputText value="#{msg.workflow_not_set}" />
+               <h:graphicImage url="/images/icons/warning.gif" style="padding:2px" width="16" height="16"
+                  rendered="#{row.workflow != null && row.workflow.params == null}" title="#{msg.workflow_not_configured}" />
+            </h:panelGroup>
+            
+            <h:outputText value="#{msg.output_path_pattern}: " />
+            <h:outputText value="#{row.outputPathPattern}" />
+            
+            <h:outputText value="#{msg.rendering_engines_selected}: " />
+            <h:outputText rendered="#{row.templates == null}" value="0" />
+            <h:outputText rendered="#{row.templates != null}" value="#{row.templatesSize}" />
+         </h:panelGrid>
       </h:column>
       <h:column>
          <f:facet name="header">
             <h:outputText value="#{msg.actions}" />
          </f:facet>
-         <h:panelGroup rendered="#{WizardManager.bean.editMode == false}">
+         <h:panelGrid columns="1" cellspacing="2" rendered="#{WizardManager.bean.editMode == false}">
-            <h:commandButton id="cmd1-1" value="#{msg.form_template_details}" style="margin:2px" styleClass="dialogControls" action="dialog:formTemplateDetails" actionListener="#{WizardManager.bean.setupFormAction}" />
+            <h:commandButton id="cmd1-1" value="#{msg.form_template_details}" styleClass="dialogControls" action="dialog:formTemplateDetails" actionListener="#{WizardManager.bean.setupFormAction}" />
-            <h:commandButton id="cmd1-2" value="#{msg.form_template_conf_workflow}" style="margin:2px" styleClass="dialogControls" action="dialog:formTemplateWorkflow" actionListener="#{WizardManager.bean.setupFormAction}" disabled="#{row.workflow == null}" />
+            <h:commandButton id="cmd1-2" value="#{msg.form_template_conf_workflow}" styleClass="dialogControls" action="dialog:formTemplateWorkflow" actionListener="#{WizardManager.bean.setupFormAction}" disabled="#{row.workflow == null}" />
-            <h:commandButton id="cmd1-3" value="#{msg.form_template_select_templates}" style="margin:2px" styleClass="dialogControls" action="dialog:formTemplateTemplates" actionListener="#{WizardManager.bean.setupFormAction}" />
+            <h:commandButton id="cmd1-3" value="#{msg.form_template_select_templates}" styleClass="dialogControls" action="dialog:formTemplateTemplates" actionListener="#{WizardManager.bean.setupFormAction}" />
-         </h:panelGroup>
+         </h:panelGrid>
-         <h:panelGroup rendered="#{WizardManager.bean.editMode == true}">
+         <h:panelGrid columns="1" cellspacing="2" rendered="#{WizardManager.bean.editMode == true}">
-            <h:commandButton id="cmd2-1" value="#{msg.form_template_details}" style="margin:2px" styleClass="dialogControls" action="dialog:editFormTemplateDetails" actionListener="#{WizardManager.bean.setupFormAction}" />
+            <h:commandButton id="cmd2-1" value="#{msg.form_template_details}" styleClass="dialogControls" action="dialog:editFormTemplateDetails" actionListener="#{WizardManager.bean.setupFormAction}" />
-            <h:commandButton id="cmd2-2" value="#{msg.form_template_conf_workflow}" style="margin:2px" styleClass="dialogControls" action="dialog:editFormTemplateWorkflow" actionListener="#{WizardManager.bean.setupFormAction}" disabled="#{row.workflow == null}" />
+            <h:commandButton id="cmd2-2" value="#{msg.form_template_conf_workflow}" styleClass="dialogControls" action="dialog:editFormTemplateWorkflow" actionListener="#{WizardManager.bean.setupFormAction}" disabled="#{row.workflow == null}" />
-            <h:commandButton id="cmd2-3" value="#{msg.form_template_select_templates}" style="margin:2px" styleClass="dialogControls" action="dialog:editFormTemplateTemplates" actionListener="#{WizardManager.bean.setupFormAction}" />
+            <h:commandButton id="cmd2-3" value="#{msg.form_template_select_templates}" styleClass="dialogControls" action="dialog:editFormTemplateTemplates" actionListener="#{WizardManager.bean.setupFormAction}" />
-         </h:panelGroup>
+         </h:panelGrid>
       </h:column>
       <h:column>
          <a:actionLink actionListener="#{WizardManager.bean.removeForm}" image="/images/icons/delete.gif"
-                       value="#{msg.remove}" showLink="false" style="padding-left:6px" />
+                       value="#{msg.remove}" showLink="false" style="padding:4px" />
       </h:column>
    </h:dataTable>
    
    <a:panel id="no-items" rendered="#{WizardManager.bean.formsDataModel.rowCount == 0}">
-      <h:panelGrid columns="1" cellpadding="2" styleClass="selectedItems" rowClasses="selectedItemsHeader,selectedItemsRow">
+      <h:panelGrid width="100%" columns="1" cellpadding="2"
+            styleClass="selectedItems" rowClasses="selectedItemsHeader,selectedItemsRow">
          <h:outputText id="no-items-name" value="#{msg.name}" />
          <h:outputText styleClass="selectedItemsRow" id="no-items-msg" value="#{msg.no_selected_items}" />
       </h:panelGrid>

source/web/jsp/wcm/create-website-wizard/invite.jsp

@@ -48,7 +48,7 @@ License.
          </h:column>
          <h:column>
             <a:actionLink actionListener="#{InviteWebsiteUsersWizard.removeSelection}" image="/images/icons/delete.gif"
-                          value="#{msg.remove}" showLink="false" style="padding-left:6px" />
+                          value="#{msg.remove}" showLink="false" style="padding:4px" />
          </h:column>
       </h:dataTable>
       

source/web/jsp/wcm/create-website-wizard/settings.jsp

@@ -40,7 +40,7 @@
    <h:dataTable value="#{WizardManager.bean.workflowsDataModel}" var="row" 
                 rowClasses="selectedItemsRow,selectedItemsRowAlt"
                 styleClass="selectedItems" headerClass="selectedItemsHeader"
-                cellspacing="0" cellpadding="4" 
+                cellspacing="0" cellpadding="4" width="100%"
                 rendered="#{WizardManager.bean.workflowsDataModel.rowCount != 0}">
       <h:column>
          <f:facet name="header">
@@ -61,12 +61,13 @@
       </h:column>
       <h:column>
          <a:actionLink actionListener="#{WizardManager.bean.removeWorkflow}" image="/images/icons/delete.gif"
-                       value="#{msg.remove}" showLink="false" style="padding-left:6px" />
+                       value="#{msg.remove}" showLink="false" style="padding:4px" />
       </h:column>
    </h:dataTable>
    
    <a:panel id="no-items" rendered="#{WizardManager.bean.workflowsDataModel.rowCount == 0}">
-      <h:panelGrid columns="1" cellpadding="2" styleClass="selectedItems" rowClasses="selectedItemsHeader,selectedItemsRow">
+      <h:panelGrid columns="1" cellpadding="2" width="100%"
+            styleClass="selectedItems" rowClasses="selectedItemsHeader,selectedItemsRow">
          <h:outputText id="no-items-name" value="#{msg.name}" />
          <h:outputText styleClass="selectedItemsRow" id="no-items-msg" value="#{msg.no_selected_items}" />
       </h:panelGrid>