With Sitecore 8.1 we get access to a brand new version of SPEAK, the shiny SPEAK 2.0.
In this blog post we will look at creating a new SPEAK component using the 2.0 framework. We will compare the same SPEAK component built against version 1.0 and 2.0 to see the differences the new framework makes to development.
Its worth noting that SPEAK 1.1 can still be used within Sitecore 8.1. But a SPEAK application has to be fully built against a single SPEAK version, you can’t mix components of different versions.
Enabling SPEAK 2.0 in a SPEAK application
All SPEAK 2.0 components within the version 2 folder in the Business Component Library and sit alongside the version 1 files. “sitecore\shell\client\Business Component Library\version 2\Layouts\Renderings”.
Within Sitecore Rocks, SPEAK 2.0 components can be identified by the SPEAK Core 2-0 tag in the add renderings dialog.
Custom SPEAK components
So onto the main subject of this blog post, creating a new custom SPEAK component with SPEAK 2.0. The code samples below are of a Rich Text Editor component built against both SPEAK 1.1 and SPEAK 2.0.
SPEAK 1.1 Component
This is when the HTML is defined and properties from our parameter template for component in Sitecore are mapped into attributes on our control.
In this example we are getting parameters such as the height from the parameter template in Sitecore using rendering.GetString(“Height“, “Height“, string.Empty); and setting the value into a data attribute rendering.Attributes[“data-sc-height“].
After the standard SPEAK component framework mark-up, we initialize the model for the component, setting each of its properties to null.
In the view initialize function we need to set each model property from the data attribute we created in the cshtml.
SPEAK 2.0 Component
With SPEAK 2.0 much of the heavy lifting and plumbing code is handled by Sitecore SPEAK, we can concentrate more on our component logic.
The biggest change between 1.1 and 2.0 is the inclusion of a server side model. This model represents our rendering parameters for our component. We inherit from the CollectionBaseRenderingModel base class and create a property for each of our rendering parameters, matching their name.
Within Sitecore Rocks for our component we can specific the class in the model field.
As you can see in the Cshtml file it is much cleaner. Sitecore SPEAK is handling all the plumbing between our parameter template and our model.
We simply need to specify our @model to our model class. All properties will be populated by Sitecore at runtime.
The way properties are also accessed in a different way. In SPEAK 1.1 we had to access properties via the view model E.g. this.model.viewModel.height(). In SPEAK 2.0 this has been simplified to this.Height