Strange behaviour of new extension/dialog

[politi]

Hello,
I'mt developing an extension that add a new action to spaces (a customized version of the existing import dialog).
The new dialog sould be very similiar to the original one, with only a comboBox (selectOneMenu) placed AFTER the upload button.

I need something like this:

+————————————+  +————+
| 1. locate file to upload           |  |   +—-+   |
|                                    |  |   | OK |   |
|    Location: _______________       |  |   +—-+   |
|                                    |  | +——–+ |
| 2. Press Upload                    |  | | Cancel | |
|                                    |  | +——–+ |
|    +——+                        |  +————+
|    |UPLOAD|                        |
|    +——+                        |
|                                    |
| 3. Select Priority:                |
|                                    |
|    +———–+-+                 |
|    | choice 1  |v|                 |
|    +———–+-+                 |
|                                    |
+————————————+
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I copied/pasted some of the code from the import.jsp into my page to reuse some of the classes/method for uploading a file, and then added the selectMenu section, but what I obtain is a messed-up interface.

+————————————+  +————+
| 1. locate file to upload           |  |   +—-+   |
|                                    |  |   | OK |   |
| 2. Press Upload                    |  |   +—-+   |
|                                    |  | +——–+ |
| 3. Select Priority:                |  | | Cancel | |
|                                    |  | +——–+ |
|    +———–+-+                 |  +————+
|    | choice 1  |v|                 |
|    +———–+-+                 |
|                                    |
|    Location: _______________       |
|                                    |
|    +——+                        |
|    |UPLOAD|                        |
|    +——+                        |
|                                    |
+————————————+
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

It looks like if "pure HTML"  and "JSF generated HTML" are rendered in different places.

Here is some of the code I used to generate the extension.

web-client-config-custom.xml

<alfresco-config>

   <config>
      <actions>

         <action id="my_import">
            <label>My Import</label>
            <image>/images/icons/my_import.gif</image>
            <action>dialog:myImport</action>
            <action-listener>
               #{BrowseBean.setupSpaceAction}
            </action-listener>
            <params>
               <param name="id">#{actionContext.id}</param>
            </params>
         </action>

         <!– Add action to more actions menu for each space –>
         <action-group id="space_browse_menu">
            <action idref="my_import" />
         </action-group>
      </actions>

      <dialogs>
         <dialog name="myImport"
            page="/jsp/extension/my-import.jsp"
            managed-bean="MyImportBean"
            icon="/images/icons/my_import_large.gif"
            title="My Import"
            description="Custom Import" />
      </dialogs>

   </config>

</alfresco-config>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

my-import.jsp

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="/WEB-INF/alfresco.tld" prefix="a"%>
<%@ taglib uri="/WEB-INF/repo.tld" prefix="r"%>

<%@ page buffer="32kb" contentType="text/html;charset=UTF-8"%>
<%@ page isELIgnored="true"%>




<!– Upload Form –>
<r:uploadForm>
   <h:outputText value=" 1. Locate the file to upload<br><br>"
      escape="false" />

   <br>
   <br>
       File location: 
   <input style="margin-left:12px;" type="file" size="50"
      name="alfFileInput" />
   <br>
   <br>
   <h:outputText value=" 2. Click Upload<br><br>" escape="false" />
   <br>
   <br>
   <input style="margin-left:12px;" type="submit" value="Upload" />
   <br>
</r:uploadForm>
<!– END: Upload Form –>

<!– Priority –>
<h:form acceptcharset="UTF-8" id="import-priority">
   <h:outputText
      value=" 3. Choose desired priority for import operations<br>"
      escape="false" />
   <br>
   <br>
   <h:outputText value="<br>    " escape="false"/>

   <h:selectOneMenu value="#{DialogManager.bean.first}" id="Priority">
      <f:selectItem itemValue="User" itemLabel="User" id="firstUser" />
      <f:selectItem itemValue="Project" itemLabel="Project"
         id="firstProject" />
   </h:selectOneMenu>
   <br>
   <br>
</h:form>
<!– END: Priority –>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

As you see, the jsp uses both pure html tags and jsf tags, but for some reasons they cannot be rendered in the correct order. The problem is somehow related with the INPUT tags, since they are rendered "after" everything else, but I need them (as I need JSF to manage the select menu).

Any idea of what I am doing wrong?

Thank you very much.

Roberto

[ebo]

Not sure if this is what you are after but don't mix html and jsf it renders at different points and your formatting will be all out of wack.

Use the jsf panelGrid instead of <br>

<hanelGrid columns="1">

</hanelGrid>

[politi]

Thank you for the suggestion, Ebo.
The problem is that I "have" to use html and jsf together, because I have to upload a file and then, only when the upload is done, select one of the options provided with the selectOneMenu.

Here is a simpler example of the JSP

   <!– Upload Form –>
   <input style="margin-left:12px;" type="file" size="50"
      name="alfFileInput" />
   <!– END: Upload Form –>

   <!– Priority –>
   <h:selectOneMenu value="#{DialogManager.bean.first}"
      onchange="javascript:changed('First')" id="First"
      valueChangeListener="#{SemanticImportBean.firstChanged}">
      <f:selectItem itemValue="User" itemLabel="User" id="firstUser" />
      <f:selectItem itemValue="Project" itemLabel="Project"
         id="firstProject" />
   </h:selectOneMenu>
   <!– END: Priority –>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

and here is what is rendered (by the browser)

<select id="dialog:dialog-body:Priority" name="dialog:dialog-body:Priority" size="1">
   <option value="User" selected="selected">User</option>
   <option value="Project">Project</option>
</select>

   <!– Upload Form –>
   <input style="margin-left:12px;" type="file" size="50"
      name="alfFileInput" />
   <!– END: Upload Form –>


   <!– Priority –>
   
   <!– END: Priority –>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Input and Select have been inverted!!!

What is really driving me crazy is that if I try this code in a simple, standalone JSF project, it works perfectly. I only have these misterius problems within Alfresco…

[gavinc]

There are a couple of potential explanations.

The most likely one is that you are not surrounding your pure HTML tags with the JSF verbatim tag i.e.

<f:verbatim>
<input style="margin-left:12px;" type="file" size="50" 
      name="alfFileInput" />
</f:verbatim>‍‍‍‍

As 'Ebo' mentioned JSF buffers it's generated content so HTML and JSF tags can appear in a different order than you expect. Using f:verbatim around your HTML tags makes it be treated as a JSF component and therefore will get rendered at the correct time.

Another explanation is that you are trying to do this within a dialog 'snippet' page. Due to the way the dialog framework is structured you can't stop and start a JSF form in the dialog JSP (to make way for the r:uploadForm tag). You'll probably notice that most the pages that feature file uploads are 'full' JSP pages.

Hope this helps.

[politi]

The fact is that if I surround pure HTML tags with verbatim tag, the resulting "input" tag is rendered outside the form tag, and thus, the upload stop working (of course).

Anyway, I solved leaving the page in the "wrong way" and inverting the application logic to give priority to the combo boxes…

Thanks anyway to both of you for your help and your effort.

Roberto