Creating your first SPEAK Page

Introduction

In this post, I will explain you how to create a really simple "Hello World" page and what is required to make it work.

Install Sitecore ROCKS

The Sitecore Content Editor does not currently support the creation of a SPEAK Page. To create a SPEAK Application, you will need to use sitecore rocks.

If you do not know sitecore Rocks, it is a Visual Studio plugin which allows you to manage your Sitecore Instance inside Visual Studio. From what I know, it supports almost everything you can do in the Content Editor. For more info, follow the Sitecore Rock's Twitter.

Where are the SPEAK items ?

All the SPEAK Items are located in the Core database under sitecore/client/Speak

Why the core database?

The primary purpose of SPEAK is to create "Sitecore Applications" available to your users and not creating front website, moreover as internally Sitecore begins to use it intensively, it was making sense to create them into the CORE database.

When SPEAK would be available for creating public website?

Sitecore has currently no plan to support this (which does not mean never). On the other hand (and this is my personal opinion), in order for SPEAK to face large scale public websites, we would need more then one or two iterations and let the framework gaining maturity. Moreover, SPEAK only supports "Modern" browsers, so if you would like to support I.E 6, 7 and 8, it would not work. I doubt you want that for your users as they still represent a market share that can't be "overlooked".

The SPEAK layout.

The SPEAK Layout is under Speak/Layouts/Speak-Layout.

What does this layout?

The SPEAK layout item is just a layout pointing to a razor file. This razor file will set the placeholders needed by SPEAK (Page.Stylesheets, Page.Scripts, Page.Code, Page.Body).

Can I create my own layout?

Nothing prevent you to do so, SPEAK is built on top of Sitecore. On the other hand, it is not a good practice to create too many layouts for your application. If you still want to create your own, simply create a new Layout Item, attach it (with the Path parameter) to a razor file. This file will need to contain all the base HTML structure (head, body,...) and most importantly the correct placeholders.

  • Page.Stylesheets (referencing stylesheets)
  • Page.Script (referencing your scripts)
  • Page.Code (this is the most important one, we will cover that later)
  • Page.Body (the content of your page)

Create a Page

Now that you know where the layout is and what it does, we can create our first page.

Internally in Sitecore, we try to create the SPEAK application under the sitecore/client/Sitecore folder. I would advise you to create a folder with the name of your organization under the sitecore/client and put all your SPEAK Applications there.

Let's say, a company called "MakeIt" want to create a Hello World page for a Blog Application.

You would create a Folder "MakeIt" under sitecore/client and inside that folder, create a folder called "Blog".

To add a Page, right-click on the folder, add a "new Item", select SPEAK on the left side, select the Speak-BasePage as template and give it a name "HelloWorld" and click OK.

Assign the SPEAK-Layout

Now that your page is created, you can assign the Speak-Layout to it. Select your page and do "CTRL+SHIFT+U". You will be in the design layout page.

Click on the "Browse..." and select the SPEAK-Layout. You need to end up like this:

Add your First Component.

Sitecore CMS 7.1 releases some components that you can use out of the box. As these components has been used primarly for developing our own applications, it will directly come with our styling in it.

But before adding a component, we need to add the "PageCode" component.

What is the PageCode

The pageCode is a component which gives SPEAK it's power. It references all the Javascript that will be executed in your page. This Javascript will create all your components in client-side and register all the behaviours. It will also handle the bindings parts.

Now that you have your pageCode defined in your page layout, you can now add your first component. Let's add a Text Component.

Do not forget to setup a PlaceHolder (with the Placeholderkey) and set the Text property to "Hello World".

Save the page and go to [yourinstance]/sitecore/client/MakeIt/Blog/HelloWorld

and Tadaam:

Conclusion

As you can see, it is quite easy to create a simple page using ROCKS. It should be really close from what you are used to in a classic Sitecore mode. If you try it yourself, do not forget to add your PageCode and assign the layout for the page.

TIPS: SPEAK includes a debug mode mechanism, to enable it, you just need to add sc_debug=1 at the end of the URL and reaload your page.

If you look at your console, you should see something like:

Now type the following line in your console and see what will happen:

Sitecore.app.Text1.set("text", "Hey duuude!");

Interesting, no? We will talk about this in another blog post, so stay tuned...

comments powered by Disqus