How to create a widget designer with multiple tabs
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
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
www.sitefinity.com/.../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.
@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
FWIW: If you inherit from ContentViewDesignerBase then it loads a stylesheet with all of the standard tabbed designer styles.