Question

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

html5smartfile，html5smartimage - ＆gt;花岗岩/ UI /组件/基础/形式/文件上传 https://docs.adobe.com/docs/en/aem/6-0/develop/the-basics/touch-ui-concepts.html

有没有办法在TouchUI上禁用文件上传功能？我在想Adobe正在鼓励用户使用TouchUI的dropTarget功能而不是对话框中的选项卡。但是，我们希望确保体验一致，并且我们希望在对话框中使用选项卡。

思想？

Answer 1

您只需在对话框

中if字段的定义中添加

lower = 0
upper = 0
nums = 0

for c in password:
    if c.islower():
        lower += 1
    elif c.isupper():
        upper += 1
    elif c.isdigit():
        nums += 1

即可

Answer 2

删除uploadUrl="${suffix.path}"会禁用对话框中的上传按钮

Answer 3

这就是我关闭Image组件中的allowUpload并更新对话框以显示从资产侧边栏拖动项目时显示的Drop Area的方法。

因此，在TouchUI对话框中，您需要创建新的图像组件。

创建图像组件

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

创建节点图像jcr：primaryType cq：Component

给它属性

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

sling：resourceSuperType现在将继承 wcm / foundation / components / image

的所有属性，功能和对话框

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

在新图像节点下创建节点cq：dialog 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一样，我们只需要覆盖我们需要的部分。

创建一个结构，以便我们可以覆盖文件节点的某些属性（/ content / items / image / items / column / items）

在cq：对话框下创建一个新的节点内容jcr：primaryType NT：非结构化
- 在内容下创建新节点项jcr：primaryType NT：非结构化
  - 在项目下创建图像jcr：primaryType NT：非结构化
    - 在图片下创建项目jcr：primaryType NT：非结构化
      - 在项目下创建列jcr：primaryType NT：非结构化
        
        在列创建项目jcr：primaryType下 NT：非结构化

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

在文件节点下创建一个新属性 已停用布尔值 true

这会禁用上传按钮，作者可以从侧边栏拖放项目，但我希望通过使可以放下目标的区域可见，让我的UI更直观一些。

在CRXDE Lite中导航到

/库/花岗岩/ UI /组件/基础/形式/文件上传

复制fileupload文件夹

导航回图像组件并粘贴该项目。

在CRXDE中打开fileupload.jsp

在fieldAttrs.addClass（“coral-Form-field”）右下方的第240行; 添加此

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

这样做会自动将“is-active”css类添加到文件上传的放置目标输入中。这反过来会显示从资产查询器中拖动图像时看到的目标。

然后在buttonAttrs.addClass下的第253行（“coral-FileUpload-trigger coral-Button”）; 添加此

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

这将隐藏已禁用的“上传图像”按钮，因此不会混淆按钮被禁用的原因。

现在我们必须更新您的对话框以使用我们的新表单进行文件上载。

导航到您的文件节点

/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"

现在，您可以将图像组件放在页面上，然后查看新对话框。

TouchUI图片禁用上传对话框

3 个答案: