Transcript Web Parts in EPiServer [email protected] Introduction • • • • • • • • Web Parts was launched with ASP.NET 2.0 in 2005. Well established standard. EPiCode.WebParts.Core was originally developed for regjeringen.no by.

Web Parts in EPiServer
[email protected]
1
Introduction
•
•
•
•
•
•
•
•
2
Web Parts was launched with ASP.NET 2.0 in 2005.
Well established standard.
EPiCode.WebParts.Core was originally developed for
regjeringen.no by Steve Celius back in 2006.
Has over the years evolved and matured into a rich supplement
for EPiServer.
Web editors applaud the flexibility it offers as is dramatically
reduce number of templates and the number of properties on
each template.
This presentation is actually based on three modules;
EPiCode.WebParts.Core, Epinova.WebParts.Providers and
Epinova.SpecializedProperties.Flexigrid althought it might have
been one big module.
Uses none of EPiServers WebPart implementation.
Together with DynamicContent the sky is the limit.
Dictionary
Web Part
Controls for creating Web sites that enable end
users(editors) to modify the content, appearance, and
behavior of Web pages directly in a browser.
Zone
Container for Web Parts.
Dynamic Web Part
A Web Part dynamically added by editor. Not to be mistaken
with EPiServers dynamic properties nor DynamicContent.
Static Web Part
A static WebPart or UserControl inside a zone. Much like a
UserControl inside a Page.
Shared Scope
The most commonly used scope in EPiServer context. Editors
edit Web Parts which are visible to all users, thus shared.
User Scope
Fully supported, but rarely used. Provides user
personalization capabilities much like igoogle and bbc.co.uk.
Web Part Provider
Data layer between Web Application and WebPart repository.
Flexigrid
Free EPiCode module allowing editors to create dynamic
Web Part Zones.
Demo – Web Part concepts
4
5
Getting started
1. Include Libraries
WebPartsCore
Epinova.WebParts.Providers
Flexigrid
2. Add language files (optional)
3. Add entry to pages section in Web.config
<add tagPrefix="epicode" tagName="ManagementConsole"
src="~/Templates/Public/WebParts/Util/ManagementConsole.ascx"/>
<add tagPrefix="epicode" namespace="EPiCode.WebParts.EPiChrome" assembly="EPiCode.WebParts.Core"/>
4. Add ManagementConsole.ascx from WebPartsCore to your project
5. Modify webPart section in Web.config
<webParts>
<personalization defaultProvider="EpinovaPageVersionedProvider">
<providers>
<clear/>
<add name="EpinovaPageVersionedProvider" type="Epinova.WebParts.Providers.PageDataPersonalizationProvider"
connectionStringName="EPiServerDB" fallbackProviderName="" />
</providers>
<authorization>
<allow verbs="enterSharedScope" roles="WebAdmins, WebEditors, Administrators" />
</authorization>
</personalization>
</webParts>
6
6. Add a ScriptManager, WebPartManager and ManagementConsole directly under
<form> in MasterPage
<form runat="server">
<asp:ScriptManager runat="server" EnablePartialRendering="true" />
<epicode:EpiWebPartManager runat="server" Personalization-Enabled="true" PersonalizationInitialScope="Shared" />
<epicode:ManagementConsole runat="server" />
7. Add Web Part Zones to aspx or ascx
<epicode:ZoneLowUiImpact runat="server" ID="MainZone" CatalogZoneId="ThemeCatalogZone" />
8. Add your Web Parts to ManagementConsole.ascx
<epicode:WebPartManagementConsole Runat="server" />
<asp:CatalogZone runat="server" ID="ThemeCatalogZone">
<ZoneTemplate>
<asp:DeclarativeCatalogPart runat="server" ID="ThemeDeclarativeCatalog">
<WebPartsTemplate>
<wp:HorizontalRulerPart runat="server" ID="HorizontalRulerPart1" />
<wp:BannerPart runat="server" ID="BannerPart1" />
</WebPartsTemplate>
</asp:DeclarativeCatalogPart>
</ZoneTemplate>
</asp:CatalogZone>
•
Inheritance from EPiCode.WebParts.TemplatePageWebPartBase is Obsolete
•
Looks complicated at first glance, but it is quite straightforward!
•
Installer package with examples available at:
https://www.coderesort.com/p/epicode/wiki/EPiWebParts
7
Demo –New ZoneLowUiImpact properties
•
•
•
ZoneHeaderTemplate and ZoneFooterTemplate defines how the header and footer
section of the ZoneLowUiImpact control is displayed. Just like HeaderTemplate and
FooterTemplate does so for Repeater control.
WebPartHeaderTemplate and WebPartFooterTemplate enables wrapping of Web Parts
similar to ItemHeaderTemplate and ItemFooterTemplate in
EPiServer.Web.WebControls.PageTree
Note the lack of WebPartItemTemplate.
<epicode:ZoneLowUiImpact runat="server" ID="RightZone" CatalogZoneId="ThemeCatalogZone"
CreateWrapperDiv="true" >
<ZoneHeaderTemplate>
<h2>Zone header</h2>
<hr />
</ZoneHeaderTemplate>
<ZoneFooterTemplate>
<i>End of Zone</i>
</ZoneFooterTemplate>
<WebPartHeaderTemplate>
<div class="box">
<div class="inner">
</WebPartHeaderTemplate>
<WebPartFooterTemplate>
</div>
</div>
<hr />
</WebPartFooterTemplate>
</epicode:ZoneLowUiImpact>
8
Demo – Think presentation out of the Zone
Web Parts appear in different zones with uneven widths and appearance
•
•
Keep your WebPart markup as simple as possible, hand over styling
to container zone.
Use <WebPartHeaderTemplate> and <WebPartFooterTemplate>
when "boxing" in web parts.
<style type="text/css">
#MainBody .webpart.horizontal { margin-left:5px; }
#MainBody .webpart.horizontal.first, #MainBody .webpart.horizontal.single { margin-left:0; }
#SecondaryBody
#SecondaryBody
#SecondaryBody
#SecondaryBody
#SecondaryBody
</style>
9
.webpart { margin-top:10px; }
.webpart.first, #SecondaryBody .webpart.single { margin-top:0; }
.webpart .box { border-top: solid 6px #ccc; border-left: solid 6px #ccc; }
.webpart .box img { width:100%; text-align:center; }
.webpart .box .inner { border-right: solid 6px #444; border-bottom: solid 6px #444; padding:3px; }
Demo -Creating a Web Part
Remeber to add your WebPart to ManagementConsole.ascx
Try to Add DynamicContent into Editor
•
•
using
using
using
using
using
System;
System.Web.UI;
System.Web.UI.WebControls.WebParts;
EPiCode.WebParts;
EPiServer.Editor;
namespace EPiServer.Templates.Public.WebParts
{
public partial class EditorPart : PropertyDataWebPartBase
{
[Personalizable, IsRequired, Searchable(true)]
public SerializablePropertyXhtmlString Editor{ get; set; }
public EditorPart()
{
Editor = new SerializablePropertyXhtmlString { EditorToolOptions = EditorToolOption.All ^ EditorToolOption.Font };
}
protected override void OnPreRender(EventArgs e)
{
var propertyControl = Editor.CreatePropertyControl();
propertyControl.PropertyData = new EPiServer.SpecializedProperties.PropertyXhtmlString(Editor.Value as string);
Controls.Add(propertyControl as Control);
}
}
}
10
Demo –Static Web Parts
•
•
•
Web Parts / UserControls that should occur on most instances of a
Page type.
Delete is disabled, but Minimize is supported.
Great for "template" functionality.
<epicode:ZoneLowUiImpact runat="server" ID="MainZone" CatalogZoneId="ThemeCatalogZone" >
<ZoneTemplate>
<public:MainBody ID="MainBody1" runat="server" />
<asp:Calendar runat="server" ID="Calendar1" />
</ZoneTemplate>
</epicode:ZoneLowUiImpact>
11
Demo -Flexigrid
•
12
http://www.screencast-o-matic.com/embed?sc=cQ6OQFfSV&w=800&np=0&v=2
How to translate Web Part Name
•
•
Translated in the following order with fallback to class name.
Never "Missing translation for…."
1. Automatic and equivalent to page types
<webparts>
<webpart name="BannerPart">
<caption>Image banner</caption>
<description>Clickable image banner</description>
</webpart>
</webparts>
2. WebPartDataLanguageAttribute
[WebPartDataLanguage("/root/mypath/title", "/root/mypath/description")]
public partial class BannerPart : UserControlWebPartBase
3. Class name
public partial class
BannerPart : UserControlWebPartBase
Translate Web Part Property Names
Translated in the following order with fallback to property name. Never "Missing translation for…."
1.
Atomatic and equivalent to page types
2.
Exsiting PageType Property translation
3.
PropertyDataLanguageAttribute
4.
Property attribute WebDisplayName
[WebDisplayName("Select Image"), WebDescription("Select image for the banner property")]
public PropertyImageUrl Image { get; set; }
5.
Property Name
<webparts>
<common>
<property name="Image">
<caption>Select Image</caption>
<help>Select an image from file archive</help>
</property>
</common>
</webparts>
<pagetypes>
<common>
<property name="Image">
<caption>Image</caption>
<help> Specify an image that will be shown on the startpage (900*341 pixels) </help>
</property>
</common>
</pagetypes>
[PropertyDataLanguageAttribute("/mypath/image/name", "/mypath/image/hoover")]
public PropertyImageUrl Image { get; set; }
public PropertyImageUrl
Image { get; set; }
Web Part and Dynamic Content comparison
•
•
•
15
Very Similar concepts.
Complimentary functionality.
WebParts with editor can contain DynamicContent
Web Parts
Dynamic Content
Exposes on EPiServer property types
X
X
Preview view
X
-
Soft links (warning on deleting referenced content)
X
Drag & drop support
X
Indexed values (searchable content)
X
Multilanguage support
X
X
Follow page on copy & paste, export & import
X
X
Editable from View mode (dope)
X
Can host corresponding Web Part / Dynamic Content
X
Support IsRequired properties
X
Resides in
WebPartZone
16
-
PropertyXhtmlString
Tips & Tricks
•
•
•
•
•
•
•
•
•
•
•
•
17
Use Web Parts to expose properties from Controls, do not implement logic or presentation.
UserControls without parameters can be used directly as web parts eg. asp:Calendar
Web Parts might appear in zones with uneven widths and appearance so;
Keep your web part markup as simple as possible, hand over styling to containing zone
Use <WebPartHeaderTemplate> and <WebPartFooterTemplate> for when "boxing in" web parts
Don’t force editors construct repeated web parts on each instance of a page type.
-Use static web parts when appropriate.
Set default values in constructor when appropriate and Translate both name and Description
Use attributes, Searchable and IsRequired (as you do with properties on page types)
Handle all Exceptions in a base class for your WebParts. A crashed web part page might be
cumbersome to repair.
Remember that minimized web parts are not visible.
Set "unique per language" as usual in admin.
Avoid redundant code. Use your existing Controls directly as WebParts or inside WebParts. Don’t
copy!
Do your stuff in PreRender as OnLoad is too early when working with Web Parts.
Crossbrowser support by using asp.net 4.0 or PreviewVersion
A look ahead
•
•
•
•
18
CMS 6 releases just around the corner.
Copy & paste support for web parts.
Support for Web Parts stored as Dynamic properties with merge
capabilities.
More sophisticated access rights
References
•
•
•
•
19
http://labs.episerver.com/en/Blogs/Stein-Viggo-Grenersen/Dates/112262/2/EPiServer-on-steroids/
https://www.coderesort.com/p/epicode/wiki/EPiWebParts
http://epinova.no/no/Blog/episerver_blog/?BlogBeginDate=2009-10-13
http://epinova.no/no/Blog/episerver_blog/?BlogBeginDate=2009-04-14