2SexyContent with Lists and QuickMenu

A big day for 2SexyContent – Version 3.0 Beta is out, with two features that will revolutionize the handling – again 🙂

The first feature is called Fast Toolbars
It works for @Razor and [Tokens]. It creates fast, hovering menus that appear directly above the items that you want to edit – like this:

To create them is very simple

1. [Tokens]: Add a token called [Content:Toolbar] in your template, and ensure that a HTML-Element around this has a class=“sc-element“ (for SexyContent-Element). In your code this could look like this:
   <div class=“sc-element“>    [Content:Toolbar]    <h1>[Content:Title]</h1>   </div>
2. @Razor: Same concept, just different. Again add a Content.Toolbar, but make sure you get raw HTML. So you’ll actually need @Html.Raw(Content.Toolbar). Add the div, and it will look like this
   <div class=“sc-element“>    <h1>@Content.Title</h1>    @Html.Raw(Content.Toolbar)   </div>

Why is the fast toolbar so important? It’s actually because of…

The second feature is a long awaited Content-List Feature

Again, works with @Razor and [Tokens]. You can now enable any template to support Lists. In the simple mode, it just repeats the template for every item, but there’s a lot more to it. Watch the upcoming video, because the UX is awesome :). All that changes is a little (+) button.

Activating Lists
Very simple, in the Template-Configuration, tick the new feature like this:

Using Lists with [Tokens]
Just the short version, as we’re a bit short on time – a video will follow 🙂

Features

• Add an internal repeater to control what part of the HTML is repeated – like this:
  <div>  some intro text <repeat>   <div  class=“sc-element“>    [Content:Toolbar]    <h1>[Content:Title]</h1>   </div>  </repeat> and some additional footer text </div>
• Without the <repeat>, it will simply repeat the entire template
• The <repeat> tag is removed, so it will never reach the browser

Show Information about the list with new Tokens

• [List:Count] – shows the amount of items in the List
• [List:Index] – Shows the index number of the item that is being rendered
• [List:IsFirst] – is blank, or „First“. Very usefull for adding CSS-Classes like <div class=“SomeKindOfBox [List:IsFirst]“>
• [List:IsLast] – same as above, but returns „Last“ on the last item
• [List:Alternator2] – returns 0 or 1 on each item, ideal for alternately coloring rows etc. like <tr class=“Row[List:Alternator2]“>
• [List:Alternator3] – returns 0, 1 or 2. Usefull for lists that display 3 boxes side by side, maybe with a line between the box 1 and 2, and wrap after the third one.
• [List:Alternator4] – same as above, just 0,1,2,3
• [List:Alternator5] – same as above, just 0,1,2,3,4

Using the Lists with @Razor
Existing @Razor-Templates will continue to work, but will NOT repeat automatically. This is because Razor allows much finer control over what you do, and automatically repeating it would kind of mess up the concept. Here’s a @Razor-Sample:

<div>
@foreach(var Element in List)  {
<div  class=“sc-element“>
@{ var Content = Element.Content; }
<h1>@Content.Title</h1>
@Html.Raw(Content.Toolbar)
</div>
}
</div>
Found @List.Count entries

Code formatting isn’t exactly this blogs strength, but we’ll try to add some better samples later. The main things to understand are:

1. The @Content-Object still exists, but initially just contains the FIRST item in the list. So if all you have is one item, the @Content.Title, @Content.FirstName, @Content.Toolbar etc. will work as before
2. New is the @List-Object, which contains a List of Elements. These elements each contain 1 Content object. To keep the code simple and readable, we recommend creating a new Content variable and putting the content there, as you can see from this line of code: @{ var Content = Element.Content; }
3. So after adding a repeater and the variable-copy line, the entire template can stay identical to the previous template which did not support repeating. Simple right 🙂
4. In case you’re wondering why the List contains Elements (and not Content-Objects) – this is a surprise for later. Believe me when I say, this took a lot of planning and has a greater purpose 🙂

The List object also has a few more properties, but not the same ones as the Tokens-List, because the ASP.net Framework already provides everything you need for the same functionality. We’ll document that later.

For now – Download it ASAP from Codeplex directly http://SexyContent.CodePlex.com/ or install it using the Installer http://2SexyContentInstall.CodePlex.com. And drop us an info – we hope you LOVE it!

Werbung