2015-06-09 15 views
2

在传统的用户界面中,我们可以让用户拖动图像并将其拖放到对话框中的其中一个选项卡上。但是,根据Adobe的TouchUI文档,我们应该使用fileupload而不是html5smartimage。TouchUI图像在对话框中禁用上传

html5smartfile,html5smartimage - >花岗岩/ UI /组件/基础/表格/文件上传 https://docs.adobe.com/docs/en/aem/6-0/develop/the-basics/touch-ui-concepts.html

有没有一种方法来禁用对头锤文件上传功能?我在考虑Adobe鼓励用户使用TouchUI的dropTarget功能,而不是使用对话框中的选项卡。但是,我们希望确保体验一致,并且我们希望在对话框中使用选项卡。

想法?

回答

0

删除uploadUrl="${suffix.path}"禁用在对话框

0

上传按钮这是我如何在Image组件关掉allowUpload和更新,以显示拖放区,当您从资产栏拖动一个项目,显示了对话。

所以在TouchUI对话框中,您将需要创建新的图像组件。

创建图像组件

/apps/<your-app>/components/content 

创建节点图像JCR:primaryType CQ:组件

给它的属性

sling:resourceSuperType = wcm/foundation/components/image 
componentGroup = <your component group> 

吊索:resourceSuperType现在将继承所有属性,功能和对话框的wcm/foundation/components/image

现在我们要创建一个TouchUI cq:对话框覆盖。

在你的新形象节点创建一个节点CQ:对话框JCR:primaryType nt:unstructured

给它的属性

jcr:title="Image" 
sling:resourceType="cq/gui/components/authoring/dialog" 
helpPath="en/cq/current/wcm/default_components.html#Image" 

因为我们的组件从基础图像成分,我们也继承了继承对话框。就像5.6版本中的jsps一样,我们只需要覆盖我们需要的部分。

创建,所以我们可以覆盖该文件节点的某些属性的结构(/内容/项目/图像/项目/列/项)

  • 在CQ:对话框中创建一个新的节点内容JCR:primaryType NT:非结构化
    • 在内容创建新的节点项目JCR:primaryType NT:非结构化
      • 在项目创建图像JCR:primaryType NT:非结构化
        • 在图像创建项目JCR:primaryType NT:非结构化
          • 在项目创建列JCR:primaryType NT:非结构化
            • 在列创建项目JCR:primaryType NT :非结构化的

现在我们要禁用文件上传选项

下的文件节点创建一个新的属性 的真正

禁用布尔值禁用上传按钮,作者可以从侧边栏拖放项目,但我想要我的用户界面更直观一点,通过让他们可以放下目标的区域可见。

在CRXDE精简版浏览到

/库/花岗岩/ UI /组件/基础/表格/文件上传

复制文件上传文件夹

导航回到你的图像组件和粘贴该项目。

打开fileupload.jsp在CRXDE

在线240右侧下fieldAttrs.addClass( “珊瑚表格场”); 添加此

// show drop target when disabled 
if(cfg.get("disabled", false)){ 
    fieldAttrs.addClass("is-active"); 
} 

这将完成自动的“是活跃的” CSS类添加到该文件上传下降目标输入。这反过来会显示从资产查找工具拖动图像时看到的目标。

然后在第253行的buttonAttrs下。addClass(“coral-FileUpload-trigger coral-Button”); 添加此

// hide button when button is disabled 
if(cfg.get("disabled", false)){ 
    buttonAttrs.add("style","display:none;"); 
} 

这将隐藏残疾人上传图片按钮,所以没有混乱,为什么按钮是无效的。

现在我们必须更新您的对话框,以使用我们的新窗体fileupload。

浏览到您的文件节点

/apps/<your-app>/components/content/image/cq:dialog/content/items/image/items/column/items/file 

添加属性

sling:resourceType="/apps/<your-app>/components/content/image/form/fileupload" 

现在你可以在页面上删除您的图像组件,看看你的新对话框。

1

您只需要在对话框granite/ui/components/foundation/form/fileupload字段的定义中添加allowUpload="{Boolean}false"