You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by we...@apache.org on 2017/03/13 16:44:02 UTC

svn commit: r1786725 - in /myfaces/tobago/branches/tobago-2.0.x: tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/ tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/ tobago-example/tobago-example-demo/s...

Author: weber
Date: Mon Mar 13 16:44:02 2017
New Revision: 1786725

URL: http://svn.apache.org/viewvc?rev=1786725&view=rev
Log:
TOBAGO-1690 - Drag and Drop File Upload: implement visible types BUTTON and LINK, extent examples

Added:
    myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/
    myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/button.xhtml
    myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/dropzone.xhtml
      - copied, changed from r1786674, myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/upload.xhtml
    myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/file.xhtml
    myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/hidden.xhtml
    myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/link.xhtml
Modified:
    myfaces/tobago/branches/tobago-2.0.x/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIFileDrop.java
    myfaces/tobago/branches/tobago-2.0.x/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/FileDropTagDeclaration.java
    myfaces/tobago/branches/tobago-2.0.x/tobago-theme/tobago-theme-standard/src/main/java/org/apache/myfaces/tobago/renderkit/html/standard/standard/tag/FileDropRenderer.java

Modified: myfaces/tobago/branches/tobago-2.0.x/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIFileDrop.java
URL: http://svn.apache.org/viewvc/myfaces/tobago/branches/tobago-2.0.x/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIFileDrop.java?rev=1786725&r1=1786724&r2=1786725&view=diff
==============================================================================
--- myfaces/tobago/branches/tobago-2.0.x/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIFileDrop.java (original)
+++ myfaces/tobago/branches/tobago-2.0.x/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIFileDrop.java Mon Mar 13 16:44:02 2017
@@ -35,7 +35,7 @@ public abstract class AbstractUIFileDrop
     DROP_ZONE,
     FILE,
     BUTTON,
-    IMAGE,
+    LINK,
     NONE;
 
     public static VisibleType asEnum(String value) {
@@ -50,6 +50,8 @@ public abstract class AbstractUIFileDrop
     }
   }
 
+  enum PropertyKeys {height}
+
   public abstract String getDropZoneId();
   public abstract String getVisibleType();
 

Modified: myfaces/tobago/branches/tobago-2.0.x/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/FileDropTagDeclaration.java
URL: http://svn.apache.org/viewvc/myfaces/tobago/branches/tobago-2.0.x/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/FileDropTagDeclaration.java?rev=1786725&r1=1786724&r2=1786725&view=diff
==============================================================================
--- myfaces/tobago/branches/tobago-2.0.x/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/FileDropTagDeclaration.java (original)
+++ myfaces/tobago/branches/tobago-2.0.x/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/FileDropTagDeclaration.java Mon Mar 13 16:44:02 2017
@@ -135,7 +135,7 @@ public interface FileDropTagDeclaration
 
   /**
    * <p>
-   * Indicate visible .
+   * Indicate visible component style.
    * </p>
    * <p>
    *   Possible values:
@@ -143,10 +143,13 @@ public interface FileDropTagDeclaration
    *     <li>DROP_ZONE</li>
    *     <li>FILE</li>
    *     <li>BUTTON</li>
-   *     <li>IMAGE</li>
+   *     <li>LINK</li>
    *     <li>NONE</li>
    *   </ul>
    * </p>
+   * <p>
+   *   Default is DROP_ZONE.
+   * </p>
    *
    */
   @TagAttribute

Added: myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/button.xhtml
URL: http://svn.apache.org/viewvc/myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/button.xhtml?rev=1786725&view=auto
==============================================================================
--- myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/button.xhtml (added)
+++ myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/button.xhtml Mon Mar 13 16:44:02 2017
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+
+<ui:composition template="/WEB-INF/tags/layout/overview.xhtml"
+                xmlns:tc="http://myfaces.apache.org/tobago/component"
+                xmlns:ui="http://java.sun.com/jsf/facelets"
+                xmlns:f="http://java.sun.com/jsf/core">
+  <ui:param name="title" value="File Upload"/>
+  <tc:panel id="uploadPanel">
+    <f:facet name="layout">
+      <tc:gridLayout rows="*"/>
+    </f:facet>
+
+    <tc:panel id="fileDropArea">
+      <f:facet name="layout">
+        <tc:gridLayout rows="auto;1*"/>
+      </f:facet>
+      <tc:panel id="buttons">
+        <f:facet name="layout">
+          <tc:gridLayout columns="1*;auto;1*"/>
+        </f:facet>
+        <tc:panel/>
+        <tc:fileDrop multiple="true"
+                     value="#{upload.fileDnd}"
+                     action="#{upload.upload}"
+                     dropZoneId="#{upload.dropZoneId}"
+                     visibleType="BUTTON"/>
+        <tc:panel/>
+      </tc:panel>
+
+      <tc:sheet var="entry" value="#{upload.list}" columns="*;*;*">
+
+        <tc:column label="Name">
+          <tc:out value="#{entry.name}"/>
+        </tc:column>
+
+        <tc:column label="Type">
+          <tc:out value="#{entry.type}"/>
+        </tc:column>
+
+        <tc:column label="Size">
+          <tc:out value="#{entry.size}"/>
+        </tc:column>
+
+      </tc:sheet>
+    </tc:panel>
+  </tc:panel>
+</ui:composition>

Copied: myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/dropzone.xhtml (from r1786674, myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/upload.xhtml)
URL: http://svn.apache.org/viewvc/myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/dropzone.xhtml?p2=myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/dropzone.xhtml&p1=myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/upload.xhtml&r1=1786674&r2=1786725&rev=1786725&view=diff
==============================================================================
--- myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/upload.xhtml (original)
+++ myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/dropzone.xhtml Mon Mar 13 16:44:02 2017
@@ -19,57 +19,23 @@
 
 <ui:composition template="/WEB-INF/tags/layout/overview.xhtml"
                 xmlns:tc="http://myfaces.apache.org/tobago/component"
-                xmlns:tx="http://myfaces.apache.org/tobago/extension"
                 xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:f="http://java.sun.com/jsf/core">
   <ui:param name="title" value="File Upload"/>
   <tc:panel id="uploadPanel">
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;*"/>
+      <tc:gridLayout rows="*"/>
     </f:facet>
 
-    <tc:panel>
-      <f:facet name="layout">
-        <tc:gridLayout columns="*;auto"/>
-      </f:facet>
-
-      <tx:file label="Upload file:" value="#{upload.file1}" tip="without extra validation"/>
-      <tc:button label="Submit" defaultCommand="true" action="#{upload.upload}"/>
-
-      <tx:file label="Upload image:" value="#{upload.file2}"
-               tip="with a validator for file items - types: gif, jpg, png">
-        <tc:validateFileItem contentType="image/*"/>
-      </tx:file>
-      <tc:panel/>
-
-      <tx:file multiple="true" label="Upload multiple:" value="#{upload.fileMulti}" tip="multiple files"/>
-      <tc:panel/>
-
-      <tx:file label="Upload ajax:" multiple="true" value="#{upload.fileAjax}" tip="multiple files">
-        <f:facet name="change">
-          <tc:command action="#{upload.upload}" renderedPartially="uploadPanel"/>
-        </f:facet>
-      </tx:file>
-      <tc:panel/>
-
-    </tc:panel>
-
     <tc:panel id="fileDropArea">
       <f:facet name="layout">
-        <tc:gridLayout rows="auto;1*"/>
+        <tc:gridLayout rows="55px;1*"/>
       </f:facet>
-      <tc:panel >
-        <tc:fileDrop multiple="true"
-                     value="#{upload.fileDnd}"
-                     action="#{upload.upload}"
-                     dropZoneId="#{upload.dropZoneId}"/>
-                     <!--
-                     label="Drop file or click to browse"
-                     tip="multiple files"
-                     visibleType="BUTTON"
-                     renderedPartially="uploadPanel"
-                     -->
-      </tc:panel>
+      <tc:fileDrop multiple="true"
+                   value="#{upload.fileDnd}"
+                   action="#{upload.upload}"
+                   dropZoneId="#{upload.dropZoneId}"/>
+
       <tc:sheet var="entry" value="#{upload.list}" columns="*;*;*">
 
         <tc:column label="Name">

Added: myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/file.xhtml
URL: http://svn.apache.org/viewvc/myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/file.xhtml?rev=1786725&view=auto
==============================================================================
--- myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/file.xhtml (added)
+++ myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/file.xhtml Mon Mar 13 16:44:02 2017
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+
+<ui:composition template="/WEB-INF/tags/layout/overview.xhtml"
+                xmlns:tc="http://myfaces.apache.org/tobago/component"
+                xmlns:ui="http://java.sun.com/jsf/facelets"
+                xmlns:f="http://java.sun.com/jsf/core">
+  <ui:param name="title" value="File Upload"/>
+  <tc:panel id="uploadPanel">
+    <f:facet name="layout">
+      <tc:gridLayout rows="*"/>
+    </f:facet>
+
+    <tc:panel id="fileDropArea">
+      <f:facet name="layout">
+        <tc:gridLayout rows="auto;1*"/>
+      </f:facet>
+      <tc:fileDrop multiple="true"
+                   value="#{upload.fileDnd}"
+                   action="#{upload.upload}"
+                   dropZoneId="#{upload.dropZoneId}"
+                   visibleType="FILE"/>
+
+      <tc:sheet var="entry" value="#{upload.list}" columns="*;*;*">
+
+        <tc:column label="Name">
+          <tc:out value="#{entry.name}"/>
+        </tc:column>
+
+        <tc:column label="Type">
+          <tc:out value="#{entry.type}"/>
+        </tc:column>
+
+        <tc:column label="Size">
+          <tc:out value="#{entry.size}"/>
+        </tc:column>
+
+      </tc:sheet>
+    </tc:panel>
+  </tc:panel>
+</ui:composition>

Added: myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/hidden.xhtml
URL: http://svn.apache.org/viewvc/myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/hidden.xhtml?rev=1786725&view=auto
==============================================================================
--- myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/hidden.xhtml (added)
+++ myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/hidden.xhtml Mon Mar 13 16:44:02 2017
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+
+<ui:composition template="/WEB-INF/tags/layout/overview.xhtml"
+                xmlns:tc="http://myfaces.apache.org/tobago/component"
+                xmlns:ui="http://java.sun.com/jsf/facelets"
+                xmlns:f="http://java.sun.com/jsf/core">
+  <ui:param name="title" value="File Upload"/>
+  <tc:panel id="uploadPanel">
+    <f:facet name="layout">
+      <tc:gridLayout rows="*"/>
+    </f:facet>
+
+    <tc:panel id="fileDropArea">
+      <f:facet name="layout">
+        <tc:gridLayout rows="1px;1*" rowSpacing="0px"/>
+      </f:facet>
+      <tc:fileDrop multiple="true"
+                   value="#{upload.fileDnd}"
+                   action="#{upload.upload}"
+                   dropZoneId="#{upload.dropZoneId}"
+                   visibleType="NONE"/>
+
+      <tc:sheet var="entry" value="#{upload.list}" columns="*;*;*">
+
+        <tc:column label="Name">
+          <tc:out value="#{entry.name}"/>
+        </tc:column>
+
+        <tc:column label="Type">
+          <tc:out value="#{entry.type}"/>
+        </tc:column>
+
+        <tc:column label="Size">
+          <tc:out value="#{entry.size}"/>
+        </tc:column>
+
+      </tc:sheet>
+    </tc:panel>
+  </tc:panel>
+</ui:composition>

Added: myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/link.xhtml
URL: http://svn.apache.org/viewvc/myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/link.xhtml?rev=1786725&view=auto
==============================================================================
--- myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/link.xhtml (added)
+++ myfaces/tobago/branches/tobago-2.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/40-upload/00-dropzone/link.xhtml Mon Mar 13 16:44:02 2017
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+
+<ui:composition template="/WEB-INF/tags/layout/overview.xhtml"
+                xmlns:tc="http://myfaces.apache.org/tobago/component"
+                xmlns:ui="http://java.sun.com/jsf/facelets"
+                xmlns:f="http://java.sun.com/jsf/core">
+  <ui:param name="title" value="File Upload"/>
+  <tc:panel id="uploadPanel">
+    <f:facet name="layout">
+      <tc:gridLayout rows="*"/>
+    </f:facet>
+
+    <tc:panel id="fileDropArea">
+      <f:facet name="layout">
+        <tc:gridLayout rows="20px;1*"/>
+      </f:facet>
+      <tc:panel id="buttons">
+        <f:facet name="layout">
+          <tc:gridLayout columns="210px;20px;1*"/>
+        </f:facet>
+        <tc:out value="Click on the feather to open file dialog"/>
+        <tc:fileDrop multiple="true"
+                     value="#{upload.fileDnd}"
+                     action="#{upload.upload}"
+                     dropZoneId="#{upload.dropZoneId}"
+                     image="image/feather-leaf.png"
+                     visibleType="LINK"/>
+        <tc:out value="or drag files into the page and drop into the higlighted area"/>
+      </tc:panel>
+
+      <tc:sheet var="entry" value="#{upload.list}" columns="*;*;*">
+
+        <tc:column label="Name">
+          <tc:out value="#{entry.name}"/>
+        </tc:column>
+
+        <tc:column label="Type">
+          <tc:out value="#{entry.type}"/>
+        </tc:column>
+
+        <tc:column label="Size">
+          <tc:out value="#{entry.size}"/>
+        </tc:column>
+
+      </tc:sheet>
+    </tc:panel>
+  </tc:panel>
+</ui:composition>

Modified: myfaces/tobago/branches/tobago-2.0.x/tobago-theme/tobago-theme-standard/src/main/java/org/apache/myfaces/tobago/renderkit/html/standard/standard/tag/FileDropRenderer.java
URL: http://svn.apache.org/viewvc/myfaces/tobago/branches/tobago-2.0.x/tobago-theme/tobago-theme-standard/src/main/java/org/apache/myfaces/tobago/renderkit/html/standard/standard/tag/FileDropRenderer.java?rev=1786725&r1=1786724&r2=1786725&view=diff
==============================================================================
--- myfaces/tobago/branches/tobago-2.0.x/tobago-theme/tobago-theme-standard/src/main/java/org/apache/myfaces/tobago/renderkit/html/standard/standard/tag/FileDropRenderer.java (original)
+++ myfaces/tobago/branches/tobago-2.0.x/tobago-theme/tobago-theme-standard/src/main/java/org/apache/myfaces/tobago/renderkit/html/standard/standard/tag/FileDropRenderer.java Mon Mar 13 16:44:02 2017
@@ -25,12 +25,14 @@ import org.apache.myfaces.tobago.compone
 import org.apache.myfaces.tobago.component.UIButton;
 import org.apache.myfaces.tobago.component.UICommand;
 import org.apache.myfaces.tobago.component.UIFileDrop;
+import org.apache.myfaces.tobago.component.UILink;
 import org.apache.myfaces.tobago.component.UIOut;
 import org.apache.myfaces.tobago.config.Configurable;
 import org.apache.myfaces.tobago.context.ResourceManagerUtils;
 import org.apache.myfaces.tobago.internal.component.AbstractUIFile;
 import org.apache.myfaces.tobago.internal.component.AbstractUIFileDrop.VisibleType;
 import org.apache.myfaces.tobago.internal.component.AbstractUIPanel;
+import org.apache.myfaces.tobago.layout.LayoutBase;
 import org.apache.myfaces.tobago.layout.Measure;
 import org.apache.myfaces.tobago.renderkit.css.Classes;
 import org.apache.myfaces.tobago.renderkit.css.Style;
@@ -59,21 +61,39 @@ public class FileDropRenderer extends Fi
     VisibleType visibleType = getVisibleType(fileDrop);
     switch (visibleType) {
       case DROP_ZONE:
-        if (fileDrop.getFacet("out") == null) {
-          createOut(facesContext, fileDrop);
+        UIOut view = (UIOut) fileDrop.getFacet(visibleType.name());
+        if (view == null) {
+          view = (UIOut) createViewComponent(facesContext, fileDrop, UIOut.COMPONENT_TYPE, RendererTypes.OUT);
+          fileDrop.getFacets().put(visibleType.name(), view);
         }
+        prepareRender(facesContext, view, fileDrop);
         break;
       case BUTTON:
-        if (fileDrop.getFacet("button") == null) {
-          createButton(facesContext, fileDrop);
+        UIButton button = (UIButton) fileDrop.getFacet(visibleType.name());
+        if (button == null) {
+          button
+              = (UIButton) createViewComponent(facesContext, fileDrop, UIButton.COMPONENT_TYPE, RendererTypes.BUTTON);
+          fileDrop.getFacets().put(visibleType.name(), button);
         }
-        UIButton button = (UIButton) fileDrop.getFacet("button");
-        // TODO: prepareRender(button)
+        prepareRender(facesContext, button, fileDrop);
+        break;
+      case LINK:
+        UILink image = (UILink) fileDrop.getFacet(visibleType.name());
+        if (image == null) {
+          image = (UILink) createViewComponent(facesContext, fileDrop, UILink.COMPONENT_TYPE, RendererTypes.LINK);
+          fileDrop.getFacets().put(visibleType.name(), image);
+        }
+        prepareRender(facesContext, image, fileDrop);
         break;
       default:
     }
   }
 
+  private void prepareRender(FacesContext facesContext, UIComponent command, UIFileDrop fileDrop)
+      throws IOException {
+    super.prepareRender(facesContext, command);
+  }
+
   @Override
   protected void writeDataAttributes(FacesContext facesContext, TobagoResponseWriter writer, AbstractUIFile file)
       throws IOException {
@@ -145,71 +165,76 @@ public class FileDropRenderer extends Fi
     fileDrop.getFacets().put("change", command);
   }
 
-  private void createButton(FacesContext facesContext, UIFileDrop fileDrop) {
-    UIButton command = (UIButton) facesContext.getApplication()
-        .createComponent(facesContext, UIButton.COMPONENT_TYPE, RendererTypes.BUTTON);
-    command.setId(fileDrop.getId() + "-button-facet");
-    command.setOmit(true);
+  protected UIComponent createViewComponent(FacesContext facesContext, UIFileDrop fileDrop, String componentType,
+      String rendererType) {
+    UIComponent viewComponent = (UIComponent) facesContext.getApplication()
+        .createComponent(facesContext, componentType, rendererType);
+    viewComponent.setId(fileDrop.getId() + "-view-facet");
+
+    setOmit(viewComponent);
 
     String label = fileDrop.getLabel();
     String image = fileDrop.getImage();
 
     ValueExpression valueExpression = fileDrop.getValueExpression(Attributes.LABEL);
     if (valueExpression != null) {
-      command.setValueExpression(Attributes.LABEL, valueExpression);
+      setLabelExpression(viewComponent, valueExpression);
     } else {
       if (label != null) {
-        command.setLabel(label);
+        setLabel(viewComponent, label);
       } else if (image == null) {
-        command.setLabel(getDefaultLabel(facesContext));
+        setLabel(viewComponent, getDefaultLabel(facesContext));
       }
     }
 
     valueExpression = fileDrop.getValueExpression(Attributes.IMAGE);
     if (valueExpression != null) {
-      command.setValueExpression(Attributes.IMAGE, valueExpression);
+      viewComponent.setValueExpression(Attributes.IMAGE, valueExpression);
     } else {
-      command.setImage(image);
+      setImage(viewComponent, image);
     }
 
-
-    fileDrop.getFacets().put("button", command);
+    return viewComponent;
   }
 
-  private String getDefaultLabel(FacesContext facesContext) {
-    return ResourceManagerUtils.getPropertyNotNull(facesContext, "tobago", "tobago.fileDrop.defaultLabel");
+  private void setImage(UIComponent command, String image) {
+    if (command instanceof UIButton) {
+      ((UIButton) command).setImage(image);
+    } else if (command instanceof UILink) {
+      ((UILink) command).setImage(image);
+    }
   }
 
-  private void createOut(FacesContext facesContext, UIFileDrop fileDrop) {
-    UIOut out = (UIOut) facesContext.getApplication()
-        .createComponent(facesContext, UIOut.COMPONENT_TYPE, RendererTypes.OUT);
-    out.setId(fileDrop.getId() + "-out-facet");
-
-    String label = fileDrop.getLabel();
+  private void setOmit(UIComponent command) {
+    if (command instanceof UIButton) {
+      ((UIButton) command).setOmit(true);
+    } else if (command instanceof UILink) {
+      ((UILink) command).setOmit(true);
+    }
+  }
 
-    ValueExpression valueExpression = fileDrop.getValueExpression(Attributes.LABEL);
-    if (valueExpression != null) {
-      out.setValueExpression(Attributes.VALUE, valueExpression);
+  private void setLabelExpression(UIComponent viewComponent, ValueExpression valueExpression) {
+    if (viewComponent instanceof UIOut) {
+      viewComponent.setValueExpression(Attributes.VALUE, valueExpression);
     } else {
-      if (label != null) {
-        out.setValue(label);
-      } else {
-        out.setValue(getDefaultLabel(facesContext));
-      }
+      viewComponent.setValueExpression(Attributes.LABEL, valueExpression);
     }
-
-    fileDrop.getFacets().put("out", out);
   }
 
-  private String getExpressionString(UIFileDrop component, String name) {
-    ValueExpression expression = component.getValueExpression(name);
-    if (expression != null) {
-      return expression.getExpressionString();
-    } else {
-      return null;
+  private void setLabel(UIComponent command, String label) {
+    if (command instanceof UIButton) {
+      ((UIButton) command).setLabel(label);
+    } else if (command instanceof UILink) {
+      ((UILink) command).setLabel(label);
+    } else if (command instanceof UIOut) {
+      ((UIOut) command).setValue(label);
     }
   }
 
+  private String getDefaultLabel(FacesContext facesContext) {
+    return ResourceManagerUtils.getPropertyNotNull(facesContext, "tobago", "tobago.fileDrop.defaultLabel");
+  }
+
   @Override
   protected void writeVisibleInput(FacesContext facesContext, TobagoResponseWriter writer, AbstractUIFile file,
       String clientId, Style style) throws IOException {
@@ -225,7 +250,7 @@ public class FileDropRenderer extends Fi
       case BUTTON:
         writeButton(facesContext, writer, fileDrop);
         break;
-      case IMAGE:
+      case LINK:
         writeImage(facesContext, writer, fileDrop);
         break;
       default:
@@ -236,25 +261,51 @@ public class FileDropRenderer extends Fi
 
   private void writeDropZone(FacesContext facesContext, TobagoResponseWriter writer, UIFileDrop fileDrop)
       throws IOException {
-    writeComponent(facesContext, fileDrop.getFacet("out"));
+    writeComponent(facesContext, fileDrop.getFacet(VisibleType.DROP_ZONE.name()), fileDrop);
   }
 
   private void writeButton(FacesContext facesContext, TobagoResponseWriter writer, UIFileDrop fileDrop)
       throws IOException {
-    writeComponent(facesContext, fileDrop.getFacet("button"));
+    writeComponent(facesContext, fileDrop.getFacet(VisibleType.BUTTON.name()), fileDrop);
   }
 
-  private void writeImage(FacesContext facesContext, TobagoResponseWriter writer, UIFileDrop fileDrop) {
-    // TODO:
+  private void writeImage(FacesContext facesContext, TobagoResponseWriter writer, UIFileDrop fileDrop)
+      throws IOException {
+    writeComponent(facesContext, fileDrop.getFacet(VisibleType.LINK.name()), fileDrop);
   }
 
-  private void writeComponent(FacesContext facesContext, UIComponent component) throws IOException {
+  private void writeComponent(FacesContext facesContext, UIComponent component, UIFileDrop fileDrop)
+      throws IOException {
+    if (VisibleType.DROP_ZONE != getVisibleType(fileDrop) && component instanceof LayoutBase) {
+      ((LayoutBase) component).setCurrentWidth(fileDrop.getCurrentWidth());
+      ((LayoutBase) component).setCurrentHeight(fileDrop.getCurrentHeight());
+      ((LayoutBase) component).setLeft(Measure.valueOf(0));
+      ((LayoutBase) component).setTop(Measure.valueOf(0));
+    }
     component.encodeBegin(facesContext);
     component.encodeChildren(facesContext);
     component.encodeEnd(facesContext);
   }
 
   @Override
+  public Measure getHeight(FacesContext facesContext, Configurable component) {
+    VisibleType visibleType = getVisibleType((UIFileDrop) component);
+    switch (visibleType) {
+      case FILE:
+        return getResourceManager()
+            .getThemeMeasure(facesContext, RendererTypes.FILE, null, Attributes.MINIMUM_HEIGHT);
+      case BUTTON:
+        return getResourceManager()
+            .getThemeMeasure(facesContext, RendererTypes.BUTTON, null, Attributes.MINIMUM_HEIGHT);
+      case LINK:
+        return getResourceManager()
+            .getThemeMeasure(facesContext, RendererTypes.LINK, null, Attributes.MINIMUM_HEIGHT);
+      default:
+        return null;
+    }
+  }
+
+  @Override
   public Measure getMinimumHeight(FacesContext facesContext, Configurable component) {
     VisibleType visibleType = getVisibleType((UIFileDrop) component);
     switch (visibleType) {
@@ -266,6 +317,9 @@ public class FileDropRenderer extends Fi
       case BUTTON:
         return getResourceManager()
             .getThemeMeasure(facesContext, RendererTypes.BUTTON, null, Attributes.MINIMUM_HEIGHT);
+      case LINK:
+        return getResourceManager()
+            .getThemeMeasure(facesContext, RendererTypes.LINK, null, Attributes.MINIMUM_HEIGHT);
       default:
         return Measure.ZERO;
     }
@@ -283,6 +337,9 @@ public class FileDropRenderer extends Fi
       case BUTTON:
         return getResourceManager()
             .getThemeMeasure(facesContext, RendererTypes.BUTTON, null, Attributes.PREFERRED_HEIGHT);
+      case LINK:
+        return getResourceManager()
+            .getThemeMeasure(facesContext, RendererTypes.LINK, null, Attributes.PREFERRED_HEIGHT);
       default:
         return Measure.ZERO;
     }
@@ -292,19 +349,32 @@ public class FileDropRenderer extends Fi
   public Measure getMaximumHeight(FacesContext facesContext, Configurable component) {
     VisibleType visibleType = getVisibleType((UIFileDrop) component);
     switch (visibleType) {
-      case DROP_ZONE:
-        super.getMaximumHeight(facesContext, component);
       case FILE:
         return getResourceManager()
             .getThemeMeasure(facesContext, RendererTypes.FILE, null, Attributes.MAXIMUM_HEIGHT);
       case BUTTON:
         return getResourceManager()
             .getThemeMeasure(facesContext, RendererTypes.BUTTON, null, Attributes.MAXIMUM_HEIGHT);
+      case LINK:
+        return getResourceManager()
+            .getThemeMeasure(facesContext, RendererTypes.LINK, null, Attributes.MAXIMUM_HEIGHT);
       default:
       return null;
     }
   }
 
+  @Override
+  public Measure getPreferredWidth(FacesContext facesContext, Configurable component) {
+    VisibleType visibleType = getVisibleType((UIFileDrop) component);
+    switch (visibleType) {
+      case BUTTON:
+        UIButton button = (UIButton) ((UIComponent) component).getFacet(visibleType.name());
+        return button.getPreferredWidth();
+      default:
+        return super.getPreferredWidth(facesContext, component);
+    }
+  }
+
   @Override
   protected Measure getPrettyWidthSub(FacesContext facesContext, AbstractUIFile file) {
     return getResourceManager().getThemeMeasure(facesContext, RendererTypes.FILE, null, "prettyWidthSub");