如何在grante UI中创建向导并在AEM中使用珊瑚UI html进行设计(How to create wizards in grante UI and design it in coral UI

如何在grante UI中创建向导并在AEM中使用珊瑚UI html进行设计(How to create wizards in grante UI and design it in coral UI html in AEM)

由于我是AEM开发的新手，我想知道如何在AEM中创建向导以及如何使用珊瑚UI设计这些向导。正如我创建了向导，它包含两个步骤视图：

source ---> select

我设计了这个两步向导，我必须在每一步显示不同的项目。这个步骤只是我的createfragment页面下的节点。

1） 来源：我有两个单选按钮让我们假设选择性别像男性和女性。我为源和源项创建了节点，创建了两个单选按钮。

功能：通过选中的单选按钮，我必须打开下一个容器，其中包含名称，地址等其他项目。我的向导下有不同的项目用于男性和女性选项，因此根据男性或女性的性别选择向用户显示特定值的容器。在源用户需要仅选择1个单选按钮并且根据所选值，用户将显示来自诸如maleform和femaleform的选择节点项目中的项目。

2） 选择：此节点应包含项目下的两个子节点，并且此表单根据用户选择具有不同的功能。我想在项目（maleform）上显示第一个节点，另一方面选择男性单选按钮显示（femaleform）女性选择的第二个节点项目。

我的节点结构如下：

+ wizard - sling:resourceType = "granite/ui/components/coral/foundation/wizard" - items + source - sling:resourceType = "granite/ui/components/foundation/container" - items + male - sling:resourceType ="granite/ui/components/foundation/form/radio" - name:gender - value:male + female - sling:resourceType ="granite/ui/components/foundation/form/radio" - name:gender - value:female + select - sling:resourceType = "granite/ui/components/foundation/container" - items + maleform - sling:resourceType ="granite/ui/components/foundation/form/text" + femaleform - sling:resourceType ="granite/ui/components/foundation/form/text"

在用户选择的基础上，我想渲染两个不同页面上的两个单独的表单组件。

例如：如果用户选择男性单选按钮，我想显示男性形式，类似于女性形状。

请帮助我，因为我必须在AEM中使用珊瑚或花岗岩 UI渲染两个不同的页面。

As i am new to AEM development, I want to know how to create wizards in AEM and how to design those using coral UI. As i have created wizard and it contains two step view:

source ---> select

I have designed this two step wizard and i have to show different items on each step.This steps are nothing but nodes under my createfragment page.

1) Source: I am having two radio buttons lets suppose selecting gender like male and female. I have created node for source and under source items, created two radio buttons.

Functionality: Through the selected radio button i have to open next container which have further items like name, address. I have different items under my wizard for male and female options so that container for the particular value is shown to user depending upon selection of gender either male or female. With in source user needs to select only 1 radio button and depending on selected value the user will show items from select nodes items like maleform and femaleform.

2) Select: This node should contains two sub-nodes under items and this forms has different functionality as per user selection. I want to show first node from item (maleform) on selection of male radio button on the other hand show (femaleform) second node items on female selection.

My Node structure is like:

+ wizard - sling:resourceType = "granite/ui/components/coral/foundation/wizard" - items + source - sling:resourceType = "granite/ui/components/foundation/container" - items + male - sling:resourceType ="granite/ui/components/foundation/form/radio" - name:gender - value:male + female - sling:resourceType ="granite/ui/components/foundation/form/radio" - name:gender - value:female + select - sling:resourceType = "granite/ui/components/foundation/container" - items + maleform - sling:resourceType ="granite/ui/components/foundation/form/text" + femaleform - sling:resourceType ="granite/ui/components/foundation/form/text"

On the basis of user selection, I want to render two separate form components which are on two different pages.

For eg: If user selects male radio button, I want to display male form and similarly for the female one.

Please help me as I have to render two different pages using coral or granite UI in AEM.

最满意答案

如果您能够确定是否在服务器端显示面板，则可以使用granite/ui/components/foundation/renderconditions/simple小部件来检查条件。查询默认的AEM安装示例，条件在granite:rendercondition节点的expression属性中设置。此示例检查QueryString，但您可以使用表达式语言（EL）检查其他内容，例如后缀，例如： ${requestPathInfo.suffix == "/my/suffix"} 。

否则，在客户端上，您只需使用JavaScript显示和隐藏小部件即可。这两个小部件不一定需要是向导中的两个不同步骤。实际上，如果不是这样可能会更好，这样您的向导进度指示器将只显示一步，您可以在该步骤中更改显示。

CSS启动隐藏的字段：

.gender-male-fieldset, .gender-female-fieldset { display: none; }

对话框打开时运行的JavaScript，单击单选按钮时显示/隐藏字段集。这是一个简单的例子，你可以编写更多可重用的东西：

$(document).on("dialog-ready", function() { var $maleRadio = $('.gender-male-radio'), $femaleRadio = $('.gender-female-radio'), $maleFieldset = $('.gender-male-fieldset'), $femaleFieldset = $('.gender-female-fieldset'); $maleRadio.click(function(){ $maleFieldset.show(); $femaleFieldset.hide(); }) $femaleRadio.click(function(){ $maleFieldset.hide(); $femaleFieldset.show(); }) });

Touch UI对话框，带有单选按钮和男性和女性性别的字段集。每个小部件都有一个与jQuery选择器一起使用的自定义CSS类：

If you're able to determine whether to show panels or not on the server side, you can use the granite/ui/components/foundation/renderconditions/simple widget to check a condition. Query your default AEM installation for examples, the condition is set in the expression property of the granite:rendercondition node. This sample checks the QueryString, but you can check other things such as the suffix using Expression Language (EL), for example: ${requestPathInfo.suffix == "/my/suffix"}.

Otherwise, on the clientside you can simply show and hide widgets with JavaScript. The two widgets don't necessarily need to be two different steps in a wizard. In fact, it might be better if they weren't, that way your wizard progress indicator will just show one step and you can alter the display within that step.

CSS to start the fields hidden:

.gender-male-fieldset, .gender-female-fieldset { display: none; }

JavaScript that runs when the dialog opens and shows/hides fieldsets when radio buttons are clicked. This is a simple example, you can write something much more reusable:

$(document).on("dialog-ready", function() { var $maleRadio = $('.gender-male-radio'), $femaleRadio = $('.gender-female-radio'), $maleFieldset = $('.gender-male-fieldset'), $femaleFieldset = $('.gender-female-fieldset'); $maleRadio.click(function(){ $maleFieldset.show(); $femaleFieldset.hide(); }) $femaleRadio.click(function(){ $maleFieldset.hide(); $femaleFieldset.show(); }) });

The Touch UI Dialog with radio buttons and fieldsets for male and female genders. Each widget has a custom CSS class to be used with your jQuery selectors:

更多推荐