允许用户动态添加项的自定义xtype不能正确显示输入字段

Question

我只是想做一个自定义的xtype开发。从教程开始：Adobe CQ help: Create your first custom xtype.略微调整了一下，这样我就可以在两个字段中输入文本了。下面是我的代码：

/components/WeatherComponent02/clientlibs/CustomWidget.js

/*
 * This script is used to create a new xtype, which will be used to
 * provide the 'author' (as opposed to the end-user) the ability to
 * enter multiple links within the scope of the second weather component.
 *
 * This was taken from a online tutorial on creating a custom xtype in AEM.
 * The tutorial can be found at: https://helpx.adobe.com/
 * experience-manager/using/creating-custom-xtype.html
*/

var Ejst={};

Ejst.CustomWidget = CQ.Ext.extend(CQ.form.CompositeField, {

    /**
     * @private
     * @type CQ.Ext.form.TextField
     */
    hiddenField: null,

    /**
     * @private
     * @type CQ.Ext.form.ComboBox
     */
    allowField: null,

    /**
     * @private
     * @type CQ.Ext.form.TextField
     */
    otherField: null,

    constructor: function(config) {
        config = config || { };
        var defaults = {
            "border": false,
            "layout": "table",
            "columns":2
        };
        config = CQ.Util.applyDefaults(config, defaults);
        Ejst.CustomWidget.superclass.constructor.call(this, config);
    },

    // overriding CQ.Ext.Component#initComponent
    initComponent: function() {
        Ejst.CustomWidget.superclass.initComponent.call(this);

        this.hiddenField = new CQ.Ext.form.Hidden({
            name: this.name
        });
        this.add(this.hiddenField);

        /*
        this.allowField = new CQ.form.Selection({
            type:"select",
            cls:"ejst-customwidget-1",
            listeners: {
                selectionchanged: {
                    scope:this,
                    fn: this.updateHidden
                }
            },
            optionsProvider: this.optionsProvider
        });
        this.add(this.allowField);
        */
        this.allowField = new CQ.Ext.form.TextField({
            cls:"ejst-customwidget-1",
            listeners: {
                change: {
                    scope:this,
                    fn: this.updateHidden
                }
            }
        });
        this.add(this.allowField);


        this.otherField = new CQ.Ext.form.TextField({
            cls:"ejst-customwidget-2",
            listeners: {
                change: {
                    scope:this,
                    fn:this.updateHidden
                }
            }
        });
        this.add(this.otherField);

    },



    // overriding CQ.form.CompositeField#processPath
    processPath: function(path) {
        console.log("CustomWidget#processPath", path);
        this.allowField.processPath(path);
    },

    // overriding CQ.form.CompositeField#processRecord
    processRecord: function(record, path) {
        console.log("CustomWidget#processRecord", path, record);
        this.allowField.processRecord(record, path);
    },

    // overriding CQ.form.CompositeField#setValue
    setValue: function(value) {
        var parts = value.split("/");
        this.allowField.setValue(parts[0]);
        this.otherField.setValue(parts[1]);
        this.hiddenField.setValue(value);
    },

    // overriding CQ.form.CompositeField#getValue
    getValue: function() {
        return this.getRawValue();
    },

    // overriding CQ.form.CompositeField#getRawValue
    getRawValue: function() {
        if (!this.allowField) {
            return null;
        }
        return this.allowField.getValue() + "/" +
               this.otherField.getValue();
    },

    // private
    updateHidden: function() {
        this.hiddenField.setValue(this.getValue());
    }

});

// register xtype
CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);

下面是WeatherComponent02.jsp的内容，它应该能够提取这个特定自定义xtype中的条目，并填充视图。

/components/WeatherComponent02/WeatherComponent02.jsp

<% Node node = null;

//This app logic gets back all values the user entered into the custom xtype and
//writes out the values to the CQ web page - the number of fields is unknown since
//each custom xtype is located on a multi-field
if(resource.adaptTo(Node.class)!=null)
{

    node=resource.adaptTo(Node.class);

    PropertyIterator props=null;

    if (node.getProperties()!=null)
        props = node.getProperties();

    while (props.hasNext())
    {
        Property prop = props.nextProperty();
        String name = prop.getName();

        String value=null;
        String[] linkFields =null;

        if (prop.getDefinition().isMultiple() && (name.equalsIgnoreCase("multi")))
        {
            StringBuffer buf = new StringBuffer();

            //Get the values entered into the custom xtype values
            Value[] values = prop.getValues();
            for (int i = 0; i < values.length; i++)
            {
                buf.append(i > 0 ? "," : "");
                buf.append(values[i].getString());
            }

            value = buf.toString();
            String[] tokens = value.split(",");

            for (int i=0;i<tokens.length;i++)
            {

                linkFields = tokens[i].split("\\\\");
                for (int k=0; k<linkFields.length; k++)
                {


                    if (k==0){
                        /*
                         * format of linkFields[k]:
                         *      http://www.cnn.com/weather/Raleigh/CNN Weather
                         * where,
                         *      authored url: http://www.cnn.com/weather/Raleigh
                         *      authored display text: CNN Weather
                         *
                         * But somehow the component combines this two pieces of
                         * texts as: http://www.cnn.com/weather/Raleigh/CNN Weather
                         * Need to sort this out.
                         *
                         */

                        String[] words=linkFields[k].split("/");
                        String thisUrl="";
                        String display="";

                        /*
                         * WARNING: A hack to recreate the URL and Display Text.
                         *
                         * A serious flaw is that, the dialog box for this entries
                         * will still fail to display the url and display text
                         * originally entered by the author.
                         */

                        //form the url again
                        for(int j=0;j<words.length-1;j++){
                            thisUrl=thisUrl+words[j]+"/";
                        }

                        //get the text to be displayed
                        display=words[words.length-1];
                        %>

                        <!-- create the hyperlink with display text -->                        
                        <a href="<%= thisUrl %>" /> <%= display %> </a> <br>

                        <% continue;
                    }
                }
            }

        }
    }//end while

}//end if

%>

到目前为止，一切都很好，我在视图上得到了所需的链接。但是，当作者回头查看此组件对话框中的面板时，他/她将无法查看他/她的条目。附件是截图：

​

​

然而，最终的视图本身显示还可以！也就是说。

​

​

如果你还有什么问题，请告诉我。

Answer 1

啊哈。今天第二次回答我自己的问题..:)你浪费太多时间会得到什么？实际上，这是AEM项目需求的一部分。

解决方案: a)在setValue函数编写中

parts=value.split("|");

b)类似于getRawValue，

return ... +"/"+... ;

c)，最后，在jsp文件中，将相应的行替换为

String[] words=linkFields[k].split("\\|"), 

这样做的目的是使用"|“字符而不是"/”作为在多字段中输入的单词的分隔符。以前，因为"/“被用作来自多个字段的值的分隔符，所以我不能在文本框中重新呈现链接(例如，表单：http://www.cnn.com/weather)。现在，它们出现得很好。