SITEFINITY FEATHER, AN
INTRODUCTION
ABOUT ME
Venkata Koppaka
• Senior Software Engineer at Falafel Software
• Focus on WebCMS products
• I love AngularJS, and mobile development with
Xamarin
• Twitter: @vkoppaka
• Blog: http://blog.falafel.com/author/venkatakoppaka/
WHAT IS FEATHER
•
•
•
•
•
•
As Telerik Sitefinity team describes it, Feather is a Modern,
intuitive, convention based, mobile-first UI for Telerik Sitefinity™
Powered by ASP.NET MVC, AngularJS, Bootstrap, KendoUI
Not a replacement to current set of widgets and technologies
that ship with Sitefinity, but rather an extension
Open source
Currently in beta, hitting RTM release soon
Will be a separate project from core Sitefinity product but will
be officially supported for Telerik support channels
WHY FEATHER
• A little history on Sitefinity and web forms controls
• Easy to follow conventions for most of the
frontend customizations
WHY FEATHER
NO MORE WEBFORMS!
WHAT FEATHER INCLUDES
• Support for multiple frontend frameworks like Bootstrap,
SemanticUI and foundation
• Stock MVC widgets of most of the current Sitefinity controls
• All Feather widgets are mobile first, meaning they are
responsive in nature.
• AngularJS based new designer frameworks (no more
prototype pattern!)
• Majority of customizations are convention based
• Infrastructure enhancements
FEATURES
•
•
•
•
•
•
•
•
MVC Widgets in Class libraries
MVC Widget templates
Layout files
Resource Packages
Page templates based on Layout files
WidgetContent helpers
Angular designers
Support for webforms designers
BEFORE WE GO FURTHER…
• Remember Feather is still a
BETA product and should not
be used in production apps
until it hits RTM.
INSTALLING FEATHER
•
•
•
•
•
•
Nuget driven
All packages are hosted on Sitefinity’s Nuget feed
http://nuget.sitefinity.com
Add Sitefinity’s nuget feed in Visual Studio
SitefinityWebApp needs Telerik.Sitefinity.Feather package
Make sure AssemblyInfo.cs has [assembly: ControllerContainer]
Add Feather’s Service to SystemConfig.config
DEMO
RESOURCE PACKAGES
•
Resource packages are the CSS / Frontend frameworks that Feather supports.
Currently, feather supports 3
•
•
•
Bootstrap
SemanticUI
Foundation
•
You can add any other frontend framework based packages based on the Feather
Packages repository https://github.com/Sitefinity/feather-packages
•
Each package includes
•
•
•
•
•
•
CSS
JS
Layouts
Widget templates
Fonts
Images
DEMO
Hello World MVC Widget
• DEMO
Simple “Settings” View
• DEMO
Settings View priority
• DEMO
Attribute Support
• Browsable
•
[Browsable(false)]
• DisplayName
•
[DisplayName("This is a custom title")]
Advanced Designer
• DEMO
Additional Scripts in
Designer
MVC Widget Templates
• DEMO
Layout Templates
• DEMO
Page templates
• DEMO
WidgetContent Helper
<script src='@Url.WidgetContent("~/Mvc/Scripts/Angular/angular-route.js")'></script>
Passing Server Data to
Views
Carousel Widget
• DEMO
Resources
• Sitefinity Feather site - http://projectfeather.sitefinity.com/
• Sitefinity Feather Github repo –
https://github.com/Sitefinity/feather
• Sitefinity Feather Samples repo –
https://github.com/Sitefinity/feather-samples
• Sitefinity Feather Packages repo –
https://github.com/Sitefinity/feather-packages
• Sitefinity Feather Widgets repo –
https://github.com/Sitefinity/feather-widgets
• Sitefinity Feather Issues –
https://github.com/Sitefinity/feather-widgets/issues
QUESTIONS