Composite C1 5.0

Composite C1 5.0 (5.0.5827.21806)

What’s new?

Version 5 is our third major release since we open-sourced Composite C1 five years ago, and in terms of both visuals / UX and developer tooling, there is a lot of good new stuff in this one.

You can download the release here: https://github.com/Orckestra/C1-CMS/releases/download/v5.0/Composite.C1.5.0.zip

End users will appreciate that the C1 Console has a brand new look and feel, is even simpler to use and runs a lot faster. The editing experience is a lot more visual, most notably the media browsing experience.

Developers have much better MVC support when building applications, Razor developers can create data views a lot faster and new tooling in the C1 Console lets you test pages on different devices, analyze pages using services like Google PageSpeed and the W3C validator, quickly locate the C1 Functions running on a page.

We also added support for storing media on external locations, like a CDN, dependency injection support on C1 Functions and improvements around data and URL handling.

We completely redesigned the UI

The biggest change in v5 is the UI in the C1 Console – the classic Windows look and feel is gone and replaced with a modern and simplified user interface. It is also faster - while redesigning the console, we replaced the parts of the client framework that contained “legacy compromises” we initially had to support for older IE. With these elements gone, the new console is a lot faster to work with.

Locating content is a visual experience

The C1 Console is not re-skinned – we have also moved a few big elements around, which you will notice when you start to navigate content. We made content navigation a visual experience by introducing a browser view that matches (displays) the content node you have navigated to. This concept existed to some degree in previous versions, but now it is fully baked into the UI and spans things like data items, media, log views as well as pages.

Device previews and handy page analysis tools

The browser – when viewing HTML pages – now also offers you different view modes. You can choose to view pages as they will render within the browser, or you can select between different device sizes to see how your pages adapt on devices like phones and tablets. A view can also be a service like Google PageSpeed Insights and the W3C markup validator or the built-in C1 Page Speed report that will give you a performance report on a page, making it easy to identify which C1 Functions take the most time to render on any given page.

The UI adapts to fit your task

Once you start editing pages, you will notice another big change. The tree and related command buttons are no longer globally available when you focus on a concrete task. We have made the tree/commands/browser combo a tab element, and switching to a new tab removes all these elements from your immediate view. This eliminates a lot of visible complexity from the UI and opens up the available workspace, ultimately giving a better user experience.

Linking to data items

With v5 it is now possible to link to data items and tree elements that are associated with a URL provider. For developers who use the new RoutedData<T> feature, this association happens automatically, and for more advanced scenarios, you can register your own provider.

Data item browser previews

Data items and tree elements that are associated with a URL provider will now render a preview in the C1 Console browser when selected, and the tree elements will be auto-selected when you browse to such elements. This makes the “browse to an item to edit” scenario work for both pages and data items in the console.

Excellent support for MVC

With v5 we also introduce MVC Functions, which enable you to embed MVC Controllers and Actions in C1 templates and content at a much deeper level than our MVC Player.

If you have an MVC application that you want to run on top of Composite C1 – or you simply prefer building and testing your app in a pure MVC scenario, without involving the CMS in this process – MVC Functions will enable you to do just that. We have created a development model where you do not have to put any CMS specific code into your controllers: no forced inheritance or attributes in your MVC project. Instead, you use startup code to register the controllers and/or methods that you want to turn into C1 Functions.

namespace Demo
{
    [ApplicationStartup]
    internal static class StartupHandler
    {
        public static void OnBeforeInitialize()
        {
            var functions = MvcFunctionRegistry.NewFunctionCollection();

            RegisterMvcFunctions(functions);
            RegisterFunctionRoutes(functions);
        }

        private static void RegisterMvcFunctions(FunctionCollection functionCollection)
        {
            functionCollection.AutoDiscoverFunctions(typeof(StartupHandler).Assembly);
            functionCollection.RegisterController<CarController>("Demo.AnotherCarController").AddUrlMapping<ICar>(new Guid("92144635-9e4e-4000-a7df-6f3fb68be3b5"), "details");
        }

        private static void RegisterFunctionRoutes(FunctionCollection functionCollection)
        {
            functionCollection.RouteCollection.MapMvcAttributeRoutes();
            functionCollection.RouteCollection.MapRoute(
                "Default",
                "{controller}/{action}/{id}",
                new { action = "Index", id = UrlParameter.Optional }
                );
        }

        public static void OnInitialized()
        {

        }
    }
}

Alternatively, you can do the registrations by decorating your MVC controllers and methods with C1 specific attributes. If you do not care about having your MVC code “pure”, this option may appeal to you.

Dynamic data types - control the ID field, define the default data URL pattern

In v5 you can rename the ID field for data types created via the UI, and you can also choose not to use a GUID for the ID value. For data types that you wish to expose via a URL this is a welcomed improvement. You can also select fields on the data type that should be part of a “data URL” to identify the data – this could be a title field and an ID, to ensure that URLs to the data type are more SEO-friendly.

Please see http://docs.composite.net/Random-Strings-as-IDs for the information about using random strings as key fields in data types.

Please also see http://docs.composite.net/Using-Fields-in-Data-URLs for a quick guide to selecting fields for data URLs.

RoutedData helper, making list/detail views in no time

C1 Function developers who use Razor or User Controls to create list views and detail views showing C1 data can dramatically simplify the development task by using the new RoutedData<T> type. You use it to declare a parameter on your function, specifying the type of data you are exposing, like RoutedData<IProduct>. The new Dependency Injection feature in v5 (see below) is used to auto instantiate a request-level object, and based on the URL and meta data for the data type, it will determine if a list view or detail view is being requested and will make data readily available to you.

When RoutedData<T> is invoked on a C1 Function parameter, it will also register the page hosting it as capable of displaying the specified data type, enabling features like “Link to data item” dialogs and ensuring that the C1 Console tree and browser is in sync when navigating to detail views.

Please see http://docs.composite.net/Data-URL-Routing for an example of using RoutedData<T>.

We can map between data items, URLs and tree elements

With v5 we are now able to map relations between URLs, data items and tree elements. Previously the C1 Core only had a first-class concept for mapping pages and media files to/from the URLs, but this area is now pluggable and the new knowledge we gain from this is driving a number of very useful new features, described below.

We approached this area by introducing some low-level registries and APIs that developers can use to handle even the most exotic scenarios. On top of that, we built the UI and simplified developer tooling that make it very easy to hook into this area when building features that fit common patterns like list/detail views (see the RoutedData<T> description).

Please see http://docs.composite.net/Data-URL-Routing for an example of an easy way to hook into the data URL mapping when building List/Detail views.

Built-in performance tool and C1 Function locator

One of the browser views that are available to you is a C1 Page Speed report, which will measure the time it takes to construct any given C1 page rendering. The breakdown will include time consumed by all C1 Functions on the page, making it easy to identify any function that takes too long to execute. The report also helps by listing all the C1 Functions active on a given request and each function will link you to the C1 Function element on the Functions perspective, making it trivial to locate the original source code.

Dependency Injection on C1 Function parameters

With v5 we have introduced the concept of dependency injection (IoC) on C1 Function parameters. This allows you to register a service provider for a given type and a given scope (global or per request), and, as a result, Composite C1 will use your service provider to deliver instances for C1 Function parameter values of this type.

See http://docs.composite.net/Dependency-Injections-on-Parameters#DI-in-C1 for more.

Media Providers can return URLs instead of a file

If you write a media provider for Composite C1, you can now choose to have the media provider stream the media files via the C1 website or return URLs to externally hosted files instead. For example, this enables you to host media files on a CDN.

Deep linking into the C1 Console (open-ended feature)

We have added a new type of plug-in, which can be activated via an anchor when loading the C1 Console and react to the value of the anchor text. By default we ship with the command “BrowseUrl”, which will take a path as a second argument and make the C1 Console immediately browse to (and select) the specified URL, making it possible to deep link into a page or data item in the C1 Console. For example “…/Composite/top.aspx#BrowseUrl;/Blog” will make the C1 Console show the page /Blog on startup.