+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / never make widget designer working

never make widget designer working

1 posts, 0 answered
  1. John
    John avatar
    14 posts
    Registered:
    23 Aug 2012
    14 Aug 2013
    Link to this post
    My Sitefinity version is 5.1.3450. I never can make a widget designer work. I have three text properties, ImageUrl1, ImageUrl2 and NavigationUrl. The designer is created by Sitefinity thunder and it displays nothing in Chrome. It displays designer and not save input data in IE. It is working in Firefox. I have no idea what is wrong. Sitefinity has example widget designer. It is simply displays a message user inputs. I added another one exactly the same field, with different name. And then it is working like above. Nothing displays in chrome, displays in IE but not save input data. And seems working in Firefox.

    Does anyone know my issue? The code is attached!

    Views/ImageEffect/Default.cshtml

    @model SitefinityWebApp.Mvc.Models.ImageEffectModel

    <h1>
      @if (string.IsNullOrEmpty(Model.NavigationUrl))
      {
        <img src = "@Model.ImageUrl1" onmouseover="this.src='@Model.ImageUrl2'" onmouseout ="this.src='@Model.ImageUrl1'" />
      }
      else
      { 
        <a href = "@Model.NavigationUrl">
        <img src = "@Model.ImageUrl1" onmouseover="this.src='@Model.ImageUrl2'" onmouseout ="this.src='@Model.ImageUrl1'" /></a>
        }
    </h1>

    Model/ImageEffectModel.cs
    namespace SitefinityWebApp.Mvc.Models
    {
        public class ImageEffectModel
        {
            /// <summary>
            /// Gets or sets the ImageUrl1.
            /// </summary>
            public string ImageUrl1 { get; set; }
            public string ImageUrl2 { get; set; }
            public string NavigationUrl { get; set; }
        }
    }

    Controller/ImageEffectController.cs

    using System;
    using System.ComponentModel;
    using System.Linq;
    using System.Web.Mvc;
    using Telerik.Sitefinity.Mvc;
    using SitefinityWebApp.Mvc.Models;

    namespace SitefinityWebApp.Mvc.Controllers
    {
        [ControllerToolboxItem(Name = "ImageEffect", Title = "ImageEffect", SectionName = "BWBWidgets"), Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesigner(typeof(SitefinityWebApp.WidgetDesigners.ImageEffect.ImageEffectDesigner))]
        public class ImageEffectController : Controller
        {
            /// <summary>
            /// Gets or sets the ImageUrl1.
            /// </summary>
            [Category("General")]
            public string ImageUrl1 { get; set; }

            /// <summary>
            /// Gets or sets the ImageUrl2.
            /// </summary>
            [Category("General")]
            public string ImageUrl2 { get; set; }

            /// <summary>
            /// Gets or sets the NavigationUrl.
            /// </summary>
            [Category("General")]
            public string NavigationUrl { get; set; }

            /// <summary>
            /// This is the default Action.
            /// </summary>
            public ActionResult Index()
            {
                var model = new ImageEffectModel();
                if (string.IsNullOrEmpty(this.NavigationUrl))
                {
                    model.NavigationUrl = "http://www.bridgewaterbank.ca";
                }
                else
                {
                    model.NavigationUrl = this.NavigationUrl;
                }

                if (string.IsNullOrEmpty(this.ImageUrl1))
                {
                    model.ImageUrl1 = "/Img/ExecutiveProfile/ButtonDownState.jpg";
                }
                else
                {
                    model.ImageUrl1 = this.ImageUrl1;
                    model.ImageUrl1 = model.ImageUrl1.TrimEnd(new char[] { '/' }); ;
                }

                if (string.IsNullOrEmpty(this.ImageUrl2))
                {
                    model.ImageUrl2 = "/Img/ExecutiveProfile/ButtonUpState.jpg";
                }
                else
                {
                    model.ImageUrl2 = this.ImageUrl2.TrimEnd(new char[]{'/'});
                }

                return View("Default", model);
            }
        }
    }

    WidgetDesigner
    ImageEffectDesigner.ascx
    <%@ Control %>
    <%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" %>
    <%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sitefinity" Namespace="Telerik.Sitefinity.Web.UI" %>
    <%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sfFields" Namespace="Telerik.Sitefinity.Web.UI.Fields" %>

    <sitefinity:ResourceLinks ID="resourcesLinks" runat="server">
        <sitefinity:ResourceFile Name="Styles/Ajax.css" />
    </sitefinity:ResourceLinks>
    <div class="sfContentViews sfSingleContentView" style="max-height: 400px; overflow: auto; ">
      <sitefinity:FormManager ID="formManager" runat="server" />
    <ol>        
        <li class="sfFormCtrl">
        <asp:Label runat="server" AssociatedControlID="ImageUrl1" CssClass="sfTxtLbl">ImageUrl1</asp:Label>
        <asp:TextBox ID="ImageUrl1" runat="server" CssClass="sfTxt" />
        <div class="sfExample">The image url can be: /images/solicitor-site-images/mcratesside.png?Status=Temp&sfvrsn=0 or /Img/ExecutiveProfile/ButtonUpState.jpg</div>
        </li>
        
        <li class="sfFormCtrl">
        <asp:Label runat="server" AssociatedControlID="ImageUrl2" CssClass="sfTxtLbl">ImageUrl2</asp:Label>
        <asp:TextBox ID="ImageUrl2" runat="server" CssClass="sfTxt" />
        <div class="sfExample">The image url can be: /images/solicitor-site-images/mcratesside.png?Status=Temp&sfvrsn=0 or /Img/ExecutiveProfile/ButtonUpState.jpg</div>
        </li>
        
        <li class="sfFormCtrl">
        <asp:Label runat="server" AssociatedControlID="NavigationUrl" CssClass="sfTxtLbl">NavigationUrl</asp:Label>
        <asp:TextBox ID="NavigationUrl" runat="server" CssClass="sfTxt" />
        <div class="sfExample">This is Image link, can be null</div>
        </li>
        
        <sitefinity:ImageField ID="ImageSelector" runat="server" DisplayMode="Write" UploadMode="Dialog" DataFieldName="Image" />
        
    </ol>
    </div>

    ImageEffectDesigner.cs
    using System;
    using System.Linq;
    using System.Web.UI;
    using Telerik.Sitefinity.Web.UI;
    using Telerik.Sitefinity.Web.UI.ControlDesign;
    using System.Collections.Generic;
    using Telerik.Sitefinity.Web.UI.Fields;

    namespace SitefinityWebApp.WidgetDesigners.ImageEffect
    {
        /// <summary>
        /// Represents a designer for the <typeparamref name="SitefinityWebApp.Mvc.Controllers.ImageEffectController"/> widget
        /// </summary>
        public class ImageEffectDesigner : ControlDesignerBase
        {
            #region Properties
            /// <summary>
            /// Gets the layout template path
            /// </summary>
            public override string LayoutTemplatePath
            {
                get
                {
                    return ImageEffectDesigner.layoutTemplatePath;
                }
            }

            /// <summary>
            /// Gets the layout template name
            /// </summary>
            protected override string LayoutTemplateName
            {
                get
                {
                    return String.Empty;
                }
            }

            protected override HtmlTextWriterTag TagKey
            {
                get
                {
                    return HtmlTextWriterTag.Div;
                }
            }
            #endregion

            #region Control references
            /// <summary>
            /// Gets the control that is bound to the ImageUrl1 property
            /// </summary>
            protected virtual Control ImageUrl1
            {
                get
                {
                    return this.Container.GetControl<Control>("ImageUrl1", true);
                }
            }

            /// <summary>
            /// Gets the control that is bound to the ImageUrl2 property
            /// </summary>
            protected virtual Control ImageUrl2
            {
                get
                {
                    return this.Container.GetControl<Control>("ImageUrl2", true);
                }
            }

            /// <summary>
            /// Gets the control that is bound to the NavigationUrl property
            /// </summary>
            protected virtual Control NavigationUrl
            {
                get
                {
                    return this.Container.GetControl<Control>("NavigationUrl", true);
                }
            }

            protected ImageField ImageSelector
            {
                get { return Container.GetControl<ImageField>("ImageSelector", true); }
            }

            #endregion

            #region Methods
            protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container)
            {
                ImageSelector.DataFieldType = typeof(String);
                // Place your initialization logic here
            }
            #endregion

            #region IScriptControl implementation
            /// <summary>
            /// Gets a collection of script descriptors that represent ECMAScript (JavaScript) client components.
            /// </summary>
            public override System.Collections.Generic.IEnumerable<System.Web.UI.ScriptDescriptor> GetScriptDescriptors()
            {
                var scriptDescriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors());
                var descriptor = (ScriptControlDescriptor)scriptDescriptors.Last();

                descriptor.AddElementProperty("imageUrl1", this.ImageUrl1.ClientID);
                descriptor.AddElementProperty("imageUrl2", this.ImageUrl2.ClientID);
                descriptor.AddElementProperty("navigationUrl", this.NavigationUrl.ClientID);
                descriptor.AddComponentProperty("ImageSelector", this.ImageSelector.ClientID);
                return scriptDescriptors;
            }

            /// <summary>
            /// Gets a collection of ScriptReference objects that define script resources that the control requires.
            /// </summary>
            public override System.Collections.Generic.IEnumerable<System.Web.UI.ScriptReference> GetScriptReferences()
            {
                var scripts = new List<ScriptReference>(base.GetScriptReferences());
                scripts.Add(new ScriptReference(ImageEffectDesigner.scriptReference));
                return scripts;
            }
            #endregion

            #region Private members & constants
            public static readonly string layoutTemplatePath = "~/WidgetDesigners/ImageEffect/ImageEffectDesigner.ascx";
            public const string scriptReference = "~/WidgetDesigners/ImageEffect/ImageEffectDesigner.js";
            #endregion
        }
    }
     
    ImageEffectDesigner.js
    Type.registerNamespace("SitefinityWebApp.WidgetDesigners.ImageEffect");

    SitefinityWebApp.WidgetDesigners.ImageEffect.ImageEffectDesigner = function (element) {
        this._imageUrl1 = null;
        this._imageUrl2 = null;
        this._navigationUrl = null;
        this._ImageSelector = null;
        this._resizeControlDesignerDelegate = null;
        SitefinityWebApp.WidgetDesigners.ImageEffect.ImageEffectDesigner.initializeBase(this, [element]);
    }

    SitefinityWebApp.WidgetDesigners.ImageEffect.ImageEffectDesigner.prototype = {
        /* --------------------------------- set up and tear down --------------------------------- */
        initialize: function () {
            /* Here you can attach to events or do other initialization */
            SitefinityWebApp.WidgetDesigners.ImageEffect.ImageEffectDesigner.callBaseMethod(this, 'initialize');
        },
        dispose: function () {
            /* this is the place to unbind/dispose the event handlers created in the initialize method */
            SitefinityWebApp.WidgetDesigners.ImageEffect.ImageEffectDesigner.callBaseMethod(this, 'dispose');
        },

        /* --------------------------------- public methods ---------------------------------- */

        findElement: function (id) {
            var result = jQuery(this.get_element()).find("#" + id).get(0);
            return result;
        },

        /* Called when the designer window gets opened and here is place to "bind" your designer to the control properties */
        refreshUI: function () {
            this.resizeEvents();
            var controlData = this._propertyEditor.get_control().Settings; /* JavaScript clone of your control - all the control properties will be properties of the controlData too */
            /* RefreshUI ImageUrl1 */
            //jQuery(this.get_imageUrl1()).val(controlData.ImageUrl1);
            jQuery(this.get_ImageSelector()).val(controlData.ImageUrl1);
            /* RefreshUI ImageUrl2 */
            jQuery(this.get_imageUrl2()).val(controlData.ImageUrl2);
            /* RefreshUI NavigationUrl */
            jQuery(this.get_navigationUrl()).val(controlData.NavigationUrl);
        },

        /* Called when the "Save" button is clicked. Here you can transfer the settings from the designer to the control */
        applyChanges: function () {
            var controlData = this._propertyEditor.get_control().Settings;
            controlData.ImageUrl1 = jQuery(this.get_ImageSelector()).val();
            controlData.ImageUrl2 = jQuery(this.get_imageUrl2()).val();
            controlData.NavigationUrl = jQuery(this.get_navigationUrl()).val();
        },


        /* --------------------------------- properties -------------------------------------- */

        /* ImageUrl1 properties */
        get_imageUrl1: function () { return this._imageUrl1; },
        set_imageUrl1: function (value) { this._imageUrl1 = value; },

        /* ImageUrl2 properties */
        get_imageUrl2: function () { return this._imageUrl2; },
        set_imageUrl2: function (value) { this._imageUrl2 = value; },

        /* NavigationUrl properties */
        get_navigationUrl: function () { return this._navigationUrl; },
        set_navigationUrl: function (value) { this._navigationUrl = value; },
        
        // Image Selector
        get_ImageSelector: function () {
            return this._ImageSelector;
        },
        set_ImageSelector: function (value) {
            this._ImageSelector = value;
        },
    }

    SitefinityWebApp.WidgetDesigners.ImageEffect.ImageEffectDesigner.registerClass('SitefinityWebApp.WidgetDesigners.ImageEffect.ImageEffectDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
    if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
1 posts, 0 answered