Component in SPEAK 1.2 - Server Side

SPEAK 1.2 is not realeased yet

Before reading those lines, I would advise you to read my previous post about How Should I write a component?

Creating my first Component in SPEAK 1.2

Creating a component in SPEAK 1.2 is much more easier that it used to be. Here is a step by step tutorial on how to create your first component.

1. Create the SPEAK View.

In Visual Studio, right click on the folder where you want to add your Component. "Add > New Item". Select "Sitecore > Speak 1.2".

Give it a name and click on Add.

You have now your razor file. This view will output the HTML of your component. This HTML will be used by SPEAK to create the object on the client-side that would be used by a PageCode or another component. As it is not the current subject, just remember that you can act on your view to define javascript behaviours such as databinding and component initialization on the client-side.

2. Create the Component Item.

Now you need to create the component in the Sitecore content tree.

Select the folder where you want to add your component, right-click. "Add New Item"

When you will want to add a Component into a page. This is the component will add in the Page Layout Designer using ROCKS.

3. Create the Parameter Template.

Using ROCKS version > 1.2.0.6

Right click on your Component > "Create SPEAK Parameters Template"

Add your parameters:

This part is really important. It defines the way you can interact with your component. As mentioned in my previous post about How Should I write a component?. It is a best practise to be able to express the component behaviours as much as possible by setting values on the parameters.

If you have a javascript file for your component, those parameters (and their values) will be directly set on the Component object in client-side (this is a new feature in 1.2).

4. Link the Component Item and the Component View

Assign the path parameter to be linked with the View.

By doing this, you are telling to the Sitecore Rendering Engine which Razor View you want to use for the component.

5. Generate the Model

In Speak 1.2, you can now bind a C# Model to your MVC view really easily.

Right click on the Component item and click on "Create SPEAK View Model

A C# files would be generated for you.

This is also a new feature in SPEAK 1.2. Before, all View where using the same Model (the default one). As a consequence, you ended up with a lot of logic in your View (which is generally bad). In order to avoid this, we are now encouraging you to bind your view with a ViewModel. This viewModel is generated by Rocks and you can of course extended it the way you want.

6. Update your view

First, you need to bind the view with your Model.

EX:

7. Testing it

That's it. You have created a first Component.

To test it, you just need to Add the component into an existing page. Choose a SPEAK page, go on the "Design Layout" (ROCKS shortcut: CTRL+U). Add a Rendering and select your component, save and try it into your browser.

Backward Compatibility

We did not delete anything in the Sitecore.Speak.Client library. We have extended it to add all kind of helpers to make your life easier. We will see later all the nice things we have added for you (databinding,...). If you want to create a component in the same way as the 1.1, you can.

Do I need to upgrade my exisint Razor file?

If your component does not have any javascript attached, I would answer, "yes".

If you have javascript attached, you will also need to upgrade your javascript. I will explain this in another post. You can still upgrade it but you will maybe have unexpected behaviour on the js side of thing.

Conclusion

In this blog post, we have seen how ROCKS is helping us to easily create SPEAK Component.

A component is composed by an Item (View Rendering), a Parameters Template, a View (Razor) and optionnaly a Javascript and CSS file. This was also the case in SPEAK 1.1.

On the server-side, the components written in SPEAK 1.1 will still continue to work without any changes as we are full backward compatible in server-side.

As you have noticed, I did not speak about the client-side as it will be a (long) topic addressed in another post.

If you do not have ROCKS installed, just go there http://visualstudiogallery.msdn.microsoft.com/44a26c88-83a7-46f6-903c-5c59bcd3d35b/

As usual, if you have questions or comments, contact me on twitter @dervalp or drop me a comment.

comments powered by Disqus