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

Forums / General Discussions / How to create a widget designer with multiple tabs

How to create a widget designer with multiple tabs

4 posts, 0 answered
  1. Tys
    Tys avatar
    21 posts
    Registered:
    21 Jul 2011
    17 Oct 2012
    Link to this post
    Hi there,
    Is there anyone who has a best practice to create a Sitefinity widget designer with multiple tabs?
    We want to create a widget designer that looks just like the native Sitefinity designers. (Like you see in the attached image).
    I can see that these are build with a RadTabStrip control. But i'd like to know how i'd best setup that control. Maybe someone has a code example?

    Best regards, Tys
  2. MB
    MB avatar
    302 posts
    Registered:
    09 Jan 2005
    17 Oct 2012 in reply to Tys
    Link to this post
    There are lots of ways to attack this, and much depends on your specific requirements.

    The documentation recommends to implement it by inheriting from ContentViewDesignerBase and creating the 'views' (i.e. wrapped PageViews) by inheriting from ContentViewDesignerView
    http://www.sitefinity.com/documentation/documentationarticles/multi-view-control-designers

    Personally, I take a slightly different approach, because most of my custom controls require the use of multi-level tabs (I've had up to 5-levels deep) and I find the recommended approach a bit too restrictive.

    All of my custom controls inherit from a custom designer base, which inherits from the Sitefinity ControlDesignerBase. The custom designer base implements the basis of a RadTabStrip directly into a common base template, used by all my controls.

    <%@ Control Language="C#" %>
      
    <%@ Register tagprefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sff" Namespace="Telerik.Sitefinity.Web.UI.Fields" Assembly="Telerik.Sitefinity" %>
      
    <%-- ResourceLinks inserted here at Run-Time e.g. Custom StyleSheet --%>
    <sf:ResourceLinks id="resourceLinks" runat="server"></sf:ResourceLinks>
      
    <%-- MS-Ajax ScriptManagerProxy --%>
    <asp:ScriptManagerProxy id="ScriptManagerProxy1" runat="server" />
      
    <%-- Needed for some things to work --%>
    <sff:FormManager ID="formManager" runat="server" />
      
    <%-- Custom wrapper --%>
    <asp:Panel id="myDesigner" cssclass="sfContentViews my_designer" runat="server" clientidmode="Predictable">
      
        <%-- For any custom header content --%>
        <asp:PlaceHolder id="cphContent" runat="server"></asp:PlaceHolder>
      
        <%-- Main Tabstrip -- Tabs loaded at Run-Time --%>
        <telerik:RadTabStrip    runat="server" ID="RadTabStrip1"></telerik:RadTabStrip>
      
        <%-- Main MultiPage -- PageViews loaded at Run-Time --%>
        <telerik:RadMultiPage   runat="server" ID="RadMultiPage1"></telerik:RadMultiPage>
      
    </asp:Panel>


    I then load the Tabs at run-time by reading an embedded XML file, and then load the PageViews by reading in individual .ascx files. I use this opportunity to parse the PageViews and configure a heap of common ScriptDescriptors, allowing me to use a common Script for all of my controls, that does all of the heavy lifting.

    This is obviously way OTT, and probably only useful to my application, but it's just intended to demonstrate that the designer is just asp.net and you can pretty much hack it about to suit your own needs, and style it as you see fit.
  3. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    18 Oct 2012
    Link to this post
    @Tys,
      The way I do it is open an existing widget you like the style of, then use firebug (in firefox) to inspect the html.  You can then see all the classes and the markup to copy\paste into your designer to get it to look the same.  

    You can also use JustDecompile to checkout some of the designer templates in the resources.dll
  4. MB
    MB avatar
    302 posts
    Registered:
    09 Jan 2005
    18 Oct 2012 in reply to Steve
    Link to this post
    FWIW: If you inherit from ContentViewDesignerBase then it loads a stylesheet with all of the standard tabbed designer styles.
4 posts, 0 answered