Skip to content

Basic Rock Concepts

Jump to bottom
nairdo edited this page Mar 11, 2013 · 9 revisions

Rock Basics

From a simplified perspective, Rock is primarily made up of three parts: Theme Layouts, Pages, and Blocks. Themes have layouts that control the placement and definition of content areas called "Zones" and also include the pieces that define the styling. Blocks are the fundamental, functional code-parts that make up an application, widget, control, module -- or whatever you you call them.

When combined, Pages, Layouts and Blocks allow you to compose a powerful application. In fact, the ChMS parts of Rock are built using these very things. We like to say "Rock is built on Rock".

Blocks

Blocks are usually small pieces of HTML and code (your custom ASP.NET User Controls) and are the fundamental, functional "building blocks" that make up your Plugin, widget, application or whatever you want to call it. They can include anything you want but they must inherit from the Rock.Web.UI.RockBlock class as shown in the following example which is using a Code Behind file.

An example Block (ExampleTimeBlock.ascx):

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ExampleTimeBlock.ascx.cs" 
	Inherits="FakeCompany.Examples.ExampleTimeBlock" %>

<h2>An Example Block</h2>
The time is <asp:Literal ID="lTime" runat="server"></asp:Literal>

The code-behind for the example Block (ExampleCustomBlock.ascx.cs):

using System;
using Rock.Cms;

namespace FakeCompany.Examples
{
    public partial class ExampleTimeBlock : RockBlock
    {
        protected void Page_Load( object sender, EventArgs e )
        {
            lTime.Text = DateTime.Now.ToShortTimeString();
        }
    }
}

Theme Layouts

A Theme Layout is really just HTML. It's simply an ASP.NET Web Page (.aspx) that basically defines zero or more "Zones" where Blocks can reside, and it will also typically refer to css, javascript, and images. Theme Layouts can include just about anything you wish, but they must inherit from the Rock.Web.UI.Page class as shown in the following example.

An example Theme Layout, Splash.aspx, which has a single Zone called "Content":

<%@ Page Title="" ValidateRequest="false" Language="C#" AutoEventWireup="true" Inherits="Rock.Web.UI.Page" %>

<html>
<head id="Head1" runat="server">
    <meta charset="utf-8">
    <title></title>
    
    <!--[if lt IE 9]>
        <script src="<%# ResolveUrl("~/Themes/RockCms/Scripts/html5.js") %>" ></script>
    <![endif]-->

    <!-- Set the viewport width to device width for mobile -->
    <meta name="viewport" content="width=device-width" />

    <!-- Included CSS Files -->
    <link rel="stylesheet" href="<%# ResolveUrl("~/CSS/base.css") %>">
    <link rel="stylesheet" href="<%# ResolveUrl("~/CSS/cms-core.css") %>">
    <link rel="stylesheet" href="<%# ResolveUrl("~/CSS/grid.css") %>">
    <link rel="stylesheet" href="<%# ResolveUrl("~/Themes/RockCms/CSS/rock.css") %>">

    <script src="<%# ResolveUrl("~/Scripts/jquery-1.8.0.min.js") %>" ></script>
    <script src="<%# ResolveUrl("~/Scripts/jquery-ui-1.8.23.custom.min.js") %>" ></script>
    <script src="<%# ResolveUrl("~/Scripts/bootstrap.min.js") %>" ></script>
</head>
<body id="splash">
    <form id="form1" runat="server">
            <div id="content">
                <h1>Rock ChMS</h1>
                
                <div id="content-box" class="group">
                    <Rock:Zone ID="Content" runat="server" />
                </div>
            </div>
    </form>
</body>
</html>

Notice how that single <Rock:Zone with ID "Content" is defined in the layout. Although not shown here, there is another kind of special control called <Rock:PageTitle that allows the page title to be set dynamically if needed. Lastly, your layout can also use standard .NET master pages. They will work as you'd expect them to.

The recommended folder structure for any custom themes you create should be similar to the default RockCMS theme which has four layouts (Default, Dialog, OneColumn, and Splash) as shown below.

Sample folder structure for the RockCMS theme:

\---Themes
    \---RockCMS
        +---Assets
        |   +---Fonts
        |   |       OpenSans-Regular-webfont.eot
        |   |       OpenSans-Regular-webfont.svg
        |   |       OpenSans-Regular-webfont.ttf
        |   |       OpenSans-Regular-webfont.woff
        |   |
        |   +---Icons
        |   |       apple-icon.png
        |   |       favicon.ico
        |   |
        |   +---Images
        |   |       header-lock-un.png
        |   |       header-lock.png
        |   |       header-logo.png
        |   |
        |   \---Mock-Images
        |           staff-directory.png
        |
        +---CSS
        |       rock.css
        |
        +---Layouts
        |       Default.aspx
        |       Dialog.aspx
        |       Dialog.master
        |       Dialog.master.cs
        |       Site.Master
        |       Site.Master.cs
        |       Splash.aspx
        |
        \---Scripts
                html5.js

We recommend an Assets folder be used to store any fonts, icons and images your theme uses. Likewise, the CSS and Scripts folder would be used to store stylesheets and any JavaScripts (respectively).

Pages

Ultimately, a page is what is displayed to Rock users. A page will use a particular layout, and Blocks will be placed on that page directly or indirectly due to being placed into a layout zone. See the Pages for more details.

Clone this wiki locally