![Page 1: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/1.jpg)
Modern MVC and Front-End Development with Telerik Sitefinity
Peter Marinov
![Page 2: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/2.jpg)
Session Highlights
What is Feather Why we introduced it What are its main components How can you benefit from it
![Page 3: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/3.jpg)
Sitefinity Feather
Build Modern, intuitive, convention based, mobile-first UI for Telerik Sitefinity
MVC Stock
Widgets
Front-End of Your Choice
Package Everything
Mobile First
Convention-Based FW
New Designers FW
![Page 4: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/4.jpg)
Some Useful Links
Project Feather main site:
http://projectfeather.sitefinity.com/
Feather GitHub:
https://github.com/Sitefinity/feather/wiki
UI Bootstrap:
http://angular-ui.github.io/bootstrap/
KendoUI:
http://demos.telerik.com/kendo-ui/
![Page 5: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/5.jpg)
Front-End of Your Choice
Bootstrap
Foundation
Semantic UI
Anything...
![Page 6: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/6.jpg)
Front-End of Your Choice
Toast.css - The no-nonsense CSS gridTemplate (Default.cshtml): <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href='@Url.WidgetContent("~/ResourcePackages/Toast/assets/dist/css/styles.css")' /> <link rel="stylesheet" type="text/css" href='@Url.WidgetContent("~/ResourcePackages/Toast/assets/dist/css/main.css")' /></head>
![Page 7: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/7.jpg)
Front-End of Your Choice
Toast.css - The no-nonsense CSS gridLayout Widget (grid-6+6.html):<div class="grid"> <div class="sf_colsIn grid__col grid__col--6-of-12"> </div> <div class="sf_colsIn grid__col grid__col--6-of-12"> </div></div>
![Page 8: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/8.jpg)
Frontend Packages
CSS Sass, LeSS JS Images, Icons Fonts
Layout Files (Master Templates)
Layout Templates Widget Templates Widget Designers
Templates
A Package is a complete encapsulation of the look and feel in Sitefinity. It can include everything:
![Page 9: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/9.jpg)
Frontend Packages – Layout files
Pure MVC template generation
/MVC/View/LayoutsPage template title = Layout name
~/ResourcePackages/PackageName/Mvc/Views/LayoutsPage template title = PackageName.LayoutName
![Page 10: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/10.jpg)
Frontend Packages – Resource Files
Url.WidgetContent helper<link rel="stylesheet"
href='@Url.WidgetContent("Mvc/Styles/Css/sitefinity-theme.css")'>
Loading Order• Resource Package (higher)• ~/MVC (lower)
Example:~/Mvc/Styles/Css/sitefinity-theme.css~/ResourcePackages/My Template/Mvc/Styles/Css/sitefinity-theme.css
![Page 11: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/11.jpg)
Frontend Packages – Resource Files In MVC Views
@Html.Section("main")
@Html.Script(ScriptRef.JQuery, "top")
@Html.Script(Url.WidgetContent("Mvc/Scripts/LoginStatus/login-
status.js"),"bottom")
@Html.StyleSheet(Url.WidgetContent("~/ResourcePackages/Bootstrap/
assets/dist/css/styles.min.css"), "head", false)
@Html.Script(Url.EmbeddedResource("Telerik.Sitefinity.Resources.Ref
erence", "Telerik.Sitefinity.Resources.Scripts.jquery.ui.map.js"))
![Page 12: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/12.jpg)
Frontend Packages – Grid templates
<div class="row"> <div class="sf_colsIn col-md-3 customClass"> </div> <div class="sf_colsIn col-md-6"> </div> <div class="sf_colsIn col-md-3"> </div></div>
![Page 13: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/13.jpg)
Stock widgets
Navigation Dynamic Content Content Block News Image Image gallery Video Video gallery Document link
Document list List Blogs Blog posts Login button Login form Registration Change password Account
activation Profile Users list Social Share Search Search Results
(Progress)
![Page 14: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/14.jpg)
Stock widgets - Widget templates
Located in the ‘ResourcePackages’ Dedicated folder per framework
Bootstrap Foundation SemanticUI
Edit -> Save, no build required
![Page 15: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/15.jpg)
Stock widgets - Widget templates
Loading Order Resource Package (highest) ~/MVC Design->Widget Templates Feather (lowest)
Naming conventions List.[ViewName].cshtml Detail.[ViewName].cshtml
![Page 16: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/16.jpg)
Stock Widgets – Example: Related Items for News
<div class="sfMultiRelatedItmsWrp"> <h2 class="sfrelatedItmTitle">Related news</h2> <ul class="sfrelatedList sflist"> @foreach (var relatedItem in Model.Item.Fields.RelatedNews) { <li class="sfrelatedListItem sflistitem"> @Html.ActionLink((string)relatedItem.Fields.Title,
(string)relatedItem.Fields.ItemDefaultUrl) </li> } </ul></div>
![Page 17: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/17.jpg)
Stock Widgets – Example: Search results by type
<div role="tabpanel"> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"> <a href="#all" role="tab" data-toggle="tab">All<span class="badge">@Model.Results.Data.Count</span></a> </li> <li role="presentation"> <a href="#news" role="tab" data-toggle="tab">News<span class="badge">@news.Count()</span></a>
</li> …
</ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="all"> @Html.Partial("_SearchResults", Model.Results.Data) </div> <div role="tabpanel" class="tab-pane" id="news"> @Html.Partial("_SearchResults", news) </div> … </div></div>
![Page 18: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/18.jpg)
Mobile First
![Page 19: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/19.jpg)
Mobile FirstFrontend Backend
![Page 20: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/20.jpg)
Designers Framework – Stock Widget Designers
Default (Simple.cshtml) <sf-html-field class="kendo-content-block" sf-model="properties.Content.PropertyValue"> </sf-html-field>
$scope.properties bound to controller properties Reuses sf-html-field
![Page 21: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/21.jpg)
Designers Framework – Stock Widget Designers
~/Mvc/Views/[WidgetName]/DesignerView.[ViewName].[extension]<h3>Welcome to TelerikNext</h3>
<sf-html-field class="kendo-content-block"
sf-model="properties.Content.PropertyValue"></sf-html-field>
![Page 22: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/22.jpg)
Designers Framework – Designers configuration
{ "priority": 1, "scripts": [ "Mvc/Scripts/ContentBlock/shared-content-services.js", "Mvc/Scripts/MyAdditionalScript.js" ]}
~/Mvc/Views/[WidgetName]/DesignerView.[ViewName].json
![Page 23: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/23.jpg)
Designers Framework – Custom Commands
public class ContentBlockController : Controller, IHasEditCommands....this.CommandsList.Add(new WidgetMenuItem() { Text = "Use Shared", ActionUrl = "UseShared", NeedsModal = true });
![Page 24: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/24.jpg)
Convention-Based Framework
Stock Widget templates List.[ViewName].cshtml or Detail.
[ViewName].cshtml Page templates based on layout files MVC\View\Layouts or ResourcePackages\
YourPackageName\Mvc\Views\Layouts
![Page 25: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/25.jpg)
Convention-Based Framework
Designer template name & location \Mvc\Views\[WidgetName]\DesignerView.
[ViewName].[extension] Needed scripts and modules Mvc\[WidgetName]\DesignerView.[ViewName].json Designer module Mvc\Scripts\[WidgetName]\designerview-
[viewname].js
![Page 26: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/26.jpg)
Framework goodness
Native support for DI (Ninject)public IssueController(IIssueModel issuesModel){ this.model = issuesModel;}
Support for class libraries (full encapsulation)
![Page 27: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/27.jpg)
Framework goodness
Support for Locations Servicepublic class NewsController : Controller, IContentLocatableView { }
Localization resources for both front and backend
[Localization(typeof(NewsWidgetResources))]
And more...
![Page 28: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/28.jpg)
Designers Framework
The designer module (designerview-yourView.js):angular.module('designer').requires.push('sfImageField');
Designer View (DesignerView.YourView.cshtml):<sf-image-field
sf-auto-open-selector sf-model="selectedImageId" sf-image="selectedImage" sf-provider="imageProvider"/>
![Page 29: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/29.jpg)
Sitefinity Feather – Reusable components
Directives: Collection, Tree, Sort box, Search box, Infinite scroll, Drag and drop, Flat taxon, etc.
Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children. Selectors: News, Page, Multisite page, Flat taxon, Hierarchical
taxon, Dynamic items, etc.The selectors are part of the Telerik.Sitefinity.Frontend assembly. They are implemented as AngularJS directives.
![Page 30: Modern MVC and Front-End Development with Telerik Sitefinity Peter Marinov](https://reader033.vdocument.in/reader033/viewer/2022061514/56649d305503460f94a081d3/html5/thumbnails/30.jpg)
Q&A