Hi Guys,
I've copied and created a new component based on the numeric stepper, the new component is already registered with $.widget, however, most of the features are there except the rule editor not work, and the value is not submitted when submit the form.
I've attached the source code of the new component and appreciate anyone could help give advices.
/** * range slider Widget */ (function ($) { var xfaUtil = xfalib.ut.XfaUtil.prototype; /* * Extending from the numericInput widget to prevent alphabetic characters on key press */ $.widget("xfaWidget.rangeSlider", $.xfaWidget.numericInput, { /* * Name of the widget. This is used as the css class for the wrapper div */ _widgetName : "rangeSlider", /** * Renders the jquery ui spinner and returns that as the user control * @returns {*} */ render : function () { var $userControl = $.xfaWidget.numericInput.prototype.render.apply(this, arguments); /** * If the plugin is compatible with jQuery 2.1.4 (loaded by AF Runtime) and is loaded along with * this file in the same clientlib, then $.<plugin_name> will point to the correct plugin * If the plugin is not compatible with jQuery 2.1.4 and is loaded in the <head> section along with a * different version of jQuery, then you should use window.$.<plugin_name> or if you have namespaced jQuery * use that. * * Returning the jquery element provided by the widget factory. The returned value will be available as * this.$userControl in other functions * */ return $.ui.spinner(this.options, $userControl).element; }, getOptionsMap : function () { var parentOptionsMap = $.xfaWidget.numericInput.prototype.getOptionsMap.apply(this, arguments); return $.extend({}, parentOptionsMap, { "access" : function (val) { switch (val) { case "open": this.$userControl.spinner("enable"); break; case "readOnly": this.$userControl.spinner("disable"); break; } }, "value" : function (val) { this.$userControl.spinner("value", val); }, "displayValue" : function (val) { // do nothing. We are not controlling display value in this widget } }); }, getCommitValue : function () { return this.$userControl.spinner("value"); }, /** * This function is called when the user focuses on the field. Since we do not change the value of the field * on focus and display, we keep these two functions empty */ showValue : function () { }, showDisplayValue : function () { }, /** * Returns a mapping of events that are triggered by spinner to XFA Events */ getEventMap : function () { var eventMap = $.xfaWidget.numericInput.prototype.getEventMap.apply(this, arguments); return $.extend({}, eventMap, { "spinstop" : xfaUtil.XFA_EXIT_EVENT, "change" : xfaUtil.XFA_CHANGE_EVENT, "onKeyInput.numericInput" : null }); } }); }($));
/* widget.html */ <sly data-sly-include="/libs/fd/af/components/guidesglobal.jsp"/> <sly data-sly-use.guideConstants="com.adobe.aemds.guide.utils.GuideConstants"/> <sly data-sly-use.logic="logic.js"> <div class="range-slider center-sm" data-af-widgetname="rangeSlider" data-af-widgetoptions='{"step":${logic.sliderOptions.step},"max":${logic.sliderOptions.max},"min":${logic.sliderOptions.min}}'> <input type="range" id="${logic.id}${'_widget'}" value="${logic.value}" value="${logic.defaultValue}" name="${logic.name}" min="${logic.minValue}" max="${logic.maxValue}" step="${logic.step}" store="${logic.storeCookie}" class="ui-spinner-input" autocomplete="off" role="spinbutton" tabindex="0" aria-label="Range Slider" /> <ul class="markings"> <li data-sly-repeat.item="${logic.list}" style="width:${item.width @ context='unsafe'}px;">${item.text}</li> </ul> </div> </sly>Thanks in advance.
