Show:
                            var PropertyBuilderSettings;
                            
                            /**
                             * A base class for `A.PropertyBuilderSettings`.
                             *
                             * @class A.PropertyBuilderSettings
                             * @constructor
                             */
                            var PropertyBuilderSettings = function() {},
                                CSS_PROPERTY_BUILDER_TABS = A.getClassName('property', 'builder', 'tabs'),
                                CSS_PROPERTY_BUILDER_TOOLBAR_CONTAINER = A.getClassName('property', 'builder', 'toolbar', 'container'),
                                CSS_TABBABLE = A.getClassName('tabbable'),
                                CSS_TABBABLE_CONTENT = A.getClassName('tabbable', 'content'),
                                CSS_TABLE_STRIPED = A.getClassName('table', 'striped');
                            
                            /**
                             * Static property used to define the default attribute
                             * configuration for the `A.PropertyBuilderSettings`.
                             *
                             * @property ATTRS
                             * @type Object
                             * @static
                             */
                            PropertyBuilderSettings.ATTRS = {
                                /**
                                 * Stores an instance of `A.PropertyList`.
                                 *
                                 * @attribute propertyList
                                 * @default null
                                 * @type Object
                                 */
                                propertyList: {
                                    setter: '_setPropertyList',
                                    validator: A.Lang.isObject,
                                    value: null
                                },
                            
                                /**
                                 * Stores an instance of `A.TabView`.
                                 *
                                 * @attribute tabView
                                 * @default null
                                 * @type Object
                                 * @writeOnce
                                 */
                                tabView: {
                                    setter: '_setTabView',
                                    validator: A.Lang.isObject,
                                    value: null,
                                    writeOnce: true
                                },
                            
                                /**
                                 * Stores an instance of `A.Toolbar`.
                                 *
                                 * @attribute toolbar
                                 * @default null
                                 * @type Object
                                 */
                                toolbar: {
                                    setter: '_setToolbar',
                                    validator: A.Lang.isObject,
                                    value: null
                                },
                            
                                /**
                                 * Host node for toolbar created using the `TOOLBAR_CONTAINER_TEMPLATE`
                                 * template.
                                 *
                                 * @attribute toolbarContainer
                                 */
                                toolbarContainer: {
                                    valueFn: function() {
                                        return A.Node.create(this.TOOLBAR_CONTAINER_TEMPLATE);
                                    }
                                }
                            };
                            
                            /**
                             * Object hash, defining how attribute values have to be parsed from markup.
                             *
                             * @property HTML_PARSER
                             * @type Object
                             * @extends A.PropertyBuilder.HTML_PARSER
                             * @static
                             */
                            PropertyBuilderSettings.HTML_PARSER = {
                                toolbarContainer: '.' + CSS_PROPERTY_BUILDER_TOOLBAR_CONTAINER
                            };
                            
                            A.mix(PropertyBuilderSettings.prototype, {
                                TOOLBAR_CONTAINER_TEMPLATE: '<div class="' + CSS_PROPERTY_BUILDER_TOOLBAR_CONTAINER + '"></div>',
                            
                                propertyList: null,
                            
                                settingsNode: null,
                            
                                tabView: null,
                            
                                toolbar: null,
                            
                                initializer: function() {
                                    this.publish({
                                        cancel: {
                                            defaultFn: this._defCancelFn
                                        }
                                    });
                            
                                    this.on('render', function() {
                                        this._renderTabs();
                                    });
                                },
                            
                                /**
                                 * Fires after one or more attributes on the model are changed.
                                 *
                                 * @method _afterModelChange
                                 * @param event
                                 * @protected
                                 */
                                _afterModelChange: function() {
                                    var instance = this;
                            
                                    instance._handleSaveEvent();
                                },
                            
                                /**
                                 * Fires after `tabView` selection change.
                                 *
                                 * @method _afterSelectionChange
                                 * @param event
                                 * @protected
                                 */
                                _afterSelectionChange: function(event) {
                                    var instance = this,
                                        tabview = event.newVal,
                                        tabNode;
                            
                                    if (tabview) {
                                        tabNode = tabview.get('panelNode');
                            
                                        if (instance.get('rendered') && (tabNode === instance.settingsNode)) {
                                            instance._renderSettings();
                                        }
                                    }
                                },
                            
                                /**
                                 * Selects the `tabView` child at index zero.
                                 *
                                 * @method _defCancelFn
                                 * @param event
                                 * @protected
                                 */
                                _defCancelFn: function() {
                                    var instance = this;
                            
                                    instance.tabView.selectChild(0);
                                },
                            
                                /**
                                 * Fires a cancel event.
                                 *
                                 * @method _handleCancelEvent
                                 * @protected
                                 */
                                _handleCancelEvent: function() {
                                    var instance = this;
                            
                                    instance.fire('cancel');
                                },
                            
                                /**
                                 * Fires a save event.
                                 *
                                 * @method _handleSaveEvent
                                 * @protected
                                 */
                                _handleSaveEvent: function() {
                                    var instance = this;
                            
                                    instance.fire('save');
                                },
                            
                                /**
                                 * Creates an instance of `A.PropertyList` in `propertyList` attribute
                                 * and renders it.
                                 *
                                 * @method _renderPropertyList
                                 * @protected
                                 */
                                _renderPropertyList: function() {
                                    var instance = this;
                            
                                    if (!instance.propertyList) {
                                        var propertyList = instance.propertyList = new A.PropertyList(instance.get('propertyList'));
                            
                                        propertyList.render(instance.settingsNode);
                            
                                        propertyList.get('boundingBox').unselectable().addClass(CSS_TABLE_STRIPED);
                                    }
                                },
                            
                                /**
                                 * Calls the `_renderPropertyList` and `_renderToolbar` functions.
                                 *
                                 * @method _renderSettings
                                 * @protected
                                 */
                                _renderSettings: function() {
                                    var instance = this;
                            
                                    instance._renderPropertyList();
                            
                                    instance._renderToolbar();
                                },
                            
                                /**
                                 * Creates an instance of `A.TabView` in `tabView` attribute.
                                 *
                                 * @method _renderTabs
                                 * @protected
                                 */
                                _renderTabs: function() {
                                    var instance = this;
                            
                                    if (!instance.tabView) {
                                        var tabView = new A.TabView(instance.get('tabView'));
                            
                                        instance.tabView = tabView;
                                        instance.fieldsNode = tabView.item(0).get('panelNode');
                                        instance.settingsNode = tabView.item(1).get('panelNode');
                                    }
                                },
                            
                                /**
                                 * Creates an instance of `A.Toolbar` in `toolbar` attribute and renders
                                 * it.
                                 *
                                 * @method _renderToolbar
                                 * @protected
                                 */
                                _renderToolbar: function() {
                                    var instance = this;
                            
                                    if (!instance.toolbar) {
                                        instance.toolbar = new A.Toolbar(
                                            instance.get('toolbar')
                                        ).render(instance.settingsNode);
                                    }
                                },
                            
                                /**
                                 * Sets the `propertyList` attribute.
                                 *
                                 * @method _setPropertyList
                                 * @param val
                                 * @protected
                                 */
                                _setPropertyList: function(val) {
                                    var instance = this;
                            
                                    return A.merge({
                                            bubbleTargets: instance,
                                            scroll: {
                                                height: 400,
                                                width: 'auto'
                                            },
                                            width: '99%'
                                        },
                                        val
                                    );
                                },
                            
                                /**
                                 * Sets the `tabView` attribute.
                                 *
                                 * @method _setTabView
                                 * @param val
                                 * @protected
                                 */
                                _setTabView: function(val) {
                                    var instance = this,
                                        boundingBox = instance.get('boundingBox'),
                                        tabViewContentNode = boundingBox.one('.' + CSS_TABBABLE_CONTENT),
                                        defaultValue;
                            
                                    defaultValue = {
                                        after: {
                                            selectionChange: A.bind(instance._afterSelectionChange, instance)
                                        },
                                        boundingBox: boundingBox.one('.' + CSS_TABBABLE),
                                        bubbleTargets: instance,
                                        cssClass: CSS_PROPERTY_BUILDER_TABS,
                                        render: instance.get('contentBox'),
                                        srcNode: tabViewContentNode
                                    };
                            
                                    if (!tabViewContentNode) {
                                        var strings = instance.getStrings();
                            
                                        defaultValue.children = [
                                            {
                                                label: strings.addNode
                                            },
                                            {
                                                label: strings.settings,
                                                disabled: true
                                            }
                                        ];
                                    }
                            
                                    return A.merge(defaultValue, val);
                                },
                            
                                /**
                                 * Sets the `toolbar` attribute.
                                 *
                                 * @method _setToolbar
                                 * @param val
                                 * @protected
                                 */
                                _setToolbar: function(val) {
                                    var instance = this;
                                    var strings = instance.getStrings();
                            
                                    return A.merge({
                                            bubbleTargets: instance,
                                            children: [
                                                {
                                                    on: {
                                                        click: A.bind(instance._handleCancelEvent, instance)
                                                    },
                                                    label: strings.close
                                                }
                                            ]
                                        },
                                        val
                                    );
                                }
                            });
                            
                            A.PropertyBuilderSettings = PropertyBuilderSettings;