Skip to main content
System StatusContact Support
VersionOne Community

Continuum Canvas Layout Tutorial

This feature is available in Ultimate edition only.

editions-u.png

Overview

This tutorial walks you through the process of building several different kinds of Continuum Canvas Layouts, starting with an easy 'hello world' and advancing to a complex layout populated using Ajax calls to load Widget data.

This tutorial is intended for Layout developers who have a fundamental understanding of web technology source code, specifically HTML, CSS and Javascript. It covers how to build a Canvas Layout. It does not cover any HTML, Javascript or Style specifics (refer to W3 Schools for additional web development resources).

Before You Begin

Please read the introductory documents before starting the Layout tutorial.

This tutorial assumes Canvas is up and running on localhost. Replace localhost with the appropriate hostname in your environment.

Log in to Continuum and go to the upper-right menu, select Canvas - Canvas Editor.

The Canvas Editor

The Canvas editor is a text editor with syntax checking. The screen is divided into two parts: on the left is the resource browser, on the right is the content editor.

Take care when changing resources - the Editor sees all resources, and you might be messing with someone else's work!

For certain resources, a Test button will be available in the editor to open a test window. The test button will only work if a .widget or .layout resource is selected.

Hello World

At the bottom of the resource browser is a button. Click New Item. A dialog will appear and prompt for Project, Component, and Name.

Enter tutorials as the Project, layouts as the Component, and hello.layout as the Name. Click Save.

The new Project, Component and resource will appear in the resource browser. A default Layout definition will appear in the editor.

Layouts definition documents in JSON format. For our first example, let's not worry about the details. Copy and paste the following into the editor and click the Save button in the upper-right corner of the editor.

{
    "type": "template",
    "templates": [
        {
            "project": "tutorials",
            "component": "layouts",
            "name": "hello.html"
        }
    ]
}

All Layouts require a type property. See the Layout Reference for a definition of all valid types.

At this time, the only supported Layout type is template. A template Layout will use multiple .html, .js and .css resources to construct a page.

Creating an HTML template

The Layout definition alone doesn't generate any content - think of it as a recipe of how to construct a page. A Layout definition can reference one or more additional html, js and css resources, and they are all included in a sensible order.

In the definition above, you see we're referencing a resource called hello.html. A quick look in the browser and we see that resource doesn't exist. Let's create it.

Click the + in the Resource Browser beside the layouts component. In the dialog, enter hello.html as the Name and click Save.

Paste the following into the editor and click Save.

<p>Hello World</p>

Click the Test button. A new tab/window should appear that says 'Hello World'. Congratulations, you made a Layout!

Clicking the Test button will save the contents of the editor.

CSS

Let's add some custom CSS to this page.

Click the + in the Resource Browser beside the layouts component. In the dialog, enter hello.css as the Name and click Save.

Paste the following into the editor and click Save.

p {
    color: red;
}

Now, go back to hello.layout and update the editor to the following:

{
    "type": "template",
    "styles": [
        {
            "project": "tutorials",
            "component": "layouts",
            "name": "hello.css"
        }
    ],
    "templates": [
        {
            "project": "tutorials",
            "component": "layouts",
            "name": "hello.html"
        }
    ]
}

By adding a styles section to the Layout, we've told it to include our hello.css resource.

Javascript

These days a page is useless without some script, so let's add a Script resource to the Layout.

Click the + in the Resource Browser beside the layouts component. In the dialog, enter hello.js as the Name and click Save.

Paste the following into the editor and click Save.

document.write("This was added by Javascript");

Now, go back to hello.layout and update the editor to the following:

{
    "type": "template",
    "styles": [
        {
            "project": "tutorials",
            "component": "layouts",
            "name": "hello.css"
        }
    ],
    "scripts": [
        {
            "project": "tutorials",
            "component": "layouts",
            "name": "hello.js"
        }
    ],
    "templates": [
        {
            "project": "tutorials",
            "component": "layouts",
            "name": "hello.html"
        }
    ]
}

By adding a scripts section to the Layout, we've told it to include our hello.js resource.

The templates, scripts and styles sections are lists. Multiple resources can be defined in each section. This allows advanced use, specifically the ability to create common, shared resources and include them on multiple Layouts.

An Important Note

Let's take a look under the hood at the source being generated by this layout. Depending on your browser this may vary, but all browsers have some equivalent of Right-Click and View Source.

Edit hello.layout and click Test. Switch to the Test window, and take a look at the source. You'll see a very basic bit of HTML markup, something like this:

<style type="text/css">
body {
    color: red;
}
</style>
<p>Hello World</p>
<script type="text/javascript">
document.write("This was added by Javascript");

</script>

As you can tell, this is not a 'complete' web page - rather it's more of a snippet. Layouts have two options when building a page - the 'plain' option that we're seeing here, and a more 'complete' option.

This 'plain' option is the default behavior. It's useful in cases where minimal code is desired, as in when embedding a Canvas in an external application.

Let's change the Layout to generate a complete web page instead of just this little snippet.

Select hello.layout in the editor, and add the following to the definition, after the type.

"include_html_markup": true,

Click Test and view the source of the Test page again. Now you'll see a complete HTML document.

Using include_html_markup builds an HTML5 document, and includes jQuery and a few core styles and libs used by Canvas.

jQuery

Not familiar with jQuery? You should be! According to Wikipedia:

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. Used by over 31% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.

Check out the W3 Schools jQuery tutorials.

By turning our page into a well-formed HTML5 document using the include_html_markup property, we've also included the jQuery framework. So, let's update our hello.js file to use jQuery.

Edit hello.js and change the editor to the following:

$(function(){
    $(document.body).append("<br />This was added by jQuery!");
});

Refresh the Test page to see the results.

jQuery is an amazing set of feature and function enhancements to Javascript, that eliminates a developers need to worry about cross-browser syntax quirks and other

Wrapping Up

In this tutorial, we've been introduced to the basics of building a Layout. Layouts can contain far more complex information, including Widget data either generated inside the Layout or populated by Ajax.

  • Was this article helpful?