Get Started!

Canvas Core Sections

Sections are the Heart of Canvas and manage what content should be rendered when a URL is requested.

General

Sections allow the developer / designer to define how a requested URL should be handled by the server, and what should be rendered as a result of a given request.

A section can respond to a pre-defined static URL, /index.html for example, or a dynamic URL where it's components are accessible via variables for such as /products/{product-name}.html.

Section's Content

The content rendered might be anything from a HTML page, CSS, some JSON data or a file such as a PDF.

Under most cases you'll be rendering HTML.

Using Design Mode.

Each section can be accessed via the Designer in the dot-dash of the NetCanvas site. From the designer, a range of "Controls" can be added to the section to build up the appropriate response.

Sections & Templates

Layout p-r

Each Section has a Top-Level "Template", defined on the Section Edit Page. Normally you will use the blank template. The other template, _main_, is used for administrative pages.

The blank template, as the name suggests, presents you with an empty page. Most sites, from page-to-page, will conform to a standard layout. For example the header, navigation, footer, etc. appear the same on every page.

To achieve the same in NetCanvas, you would create a TemplateControl, which is a special type of Canvas Control where the ASCX HTML can contain <n4:canvasplacholder> elements, which define the available locations for other controls.

Each <n4:canvasplacholder> / Location has an ID, which determines the name of the Location. Every Location name must be unique.

Templates can contain other templates. Taking the example layout in the image above, the MAIN_CONTENT location might contain another template that defines the layout for a specific page, be it a Product page or a blog post. For example the following image shows a possible layout for a Product page, where another template has been added to the Location - MAIN_CONTENT. This allows the developer to create modular and reusable controls.

Product Layout p-r

Taking the Product Page example further, you might add to MAIN_IMG Location :

  • An Image control
  • A List of Other Images

To the PRODUCT_MAIN Location :

  • A PlainText Control for the Main Title
  • A PlainText Control for the Sub Title
  • A RichText Control for the Product Description
  • A AddToBasket Control to Buying the Product

To the PRODUCT_META Location :

  • A Recently Viewed Products Control
  • A Similar / Customers Also Viewed Control