A first stab at a better templating system for Chisimba The Chisimba Canvas.

Slides:



Advertisements
Similar presentations
Chapter 3 – Web Design Tables & Page Layout
Advertisements

CSS Layout Crash Course An Advance CSS Tutorial. Inline vs. Block Many HTML elements have a default display setting of Block. Block elements take up the.
Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is.
Introduction to MVC Adding a View Page NTPCUG Tom Perkins, Ph.D.
INTRODUCTORY Tutorial 7 Creating Liquid Layouts. XP Objectives Discern the differences among various types of layouts Create a liquid layout Create a.
C++ Programming: From Problem Analysis to Program Design, Third Edition Chapter 7: User-Defined Functions II.
Chapter 12 Creating and Using Templates. If you have already created and designed a page you like, you can use the layout and design for other pages in.
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
AD Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC CSS Cascading Style Sheets.
Object-Oriented Enterprise Application Development Tomcat 3.2 Configuration Last Updated: 03/30/2001.
Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.
Inline, Internal, and External FIle
Lecture 2 - Struts ENTERPRISE JAVA. 2 Contents  Servlet Deployment  Servlet Filters  Model View Controllers  Struts  Dependency Injection.
® IBM Software Group © 2006 IBM Corporation Creating JSF/EGL Template Pages This section describes how to create.JTPL (Java Template Pages) using the Page.
WRA /16/13 HTML VALIDATION & HTML5. TODAY’S AGENDA Overview of new objects: lists, tables Overview of metadata: meta tags, comments History of the.
DHTML. What is DHTML?  DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more.
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
Cascading Style Sheets Dreamweaver. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more.
XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.
CSS Style Rules Guang Tong, Zhan L;lo’p[ Css Style Rule Guang Tong Zhan Three ways to insert CSS 1 External style sheet 2 Internal style sheet 3 Inline.
Using Styles and Style Sheets for Design
Lesson 4: Using HTML5 Markup.  The distinguishing characteristics of HTML5 syntax  The new HTML5 sectioning elements  Adding support for HTML5 elements.
Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.
CNIT 133 Interactive Web Pags – JavaScript and AJAX JavaScript Environment.
Session 1 SESSION 1 Working with Dreamweaver 8.0.
Cascade Style Sheet Introduction. What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added.
Cascading Style Sheets Dreamweaver. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Tutorial 7.
Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober
Introduction to JavaServer Pages. 2 JSP and Servlet Limitations of servlet  It’s inaccessible to non-programmers JSP is a complement to servlet  focuses.
What you don’t know you don’t know about Drupal 6 Dan Harris daneesia on drupal.org.
XP Tutorial 8 Adding Interactivity with ActionScript.
Server-side Programming The combination of –HTML –JavaScript –DOM is sometimes referred to as Dynamic HTML (DHTML) Web pages that include scripting are.
CSCI 6962: Server-side Design and Programming Master Pages.
CSCI 6962: Server-side Design and Programming Facelets and User Interface Design.
HTML JAVASCRIPT. CONTENTS Javascript Example NOSCRIPT Tag Advantages Summary Exercise.
CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.
Javascript Overview. What is Javascript? May be one of the most popular programming languages ever Runs in the browser, not on the server All modern browsers.
CSS Positioning & Layout Creating layouts and controlling elements.
Data transfer and type conversion One of the common tasks of the web application domain was moving and converting data from string-based HTTP to the various.
© 2010 Delmar, Cengage Learning Chapter 11 Creating and Using Templates.
CHAPTER 7 LESSON C Creating Database Reports. Lesson C Objectives  Display image data in a report  Manually create queries and data links  Create summary.
© 2008 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice Niranjan Damera-Venkata HP Labs Design.
NASRULLAHIBA.  It is time to take your web designing skills to the next level with Cascading Style Sheets (CSS). They are a way to control the look and.
Understanding CSS Cascading Style Sheets control the presentation of content in HTML pages Style Sheets separate formatting from the content –Styles defined.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
CHAPTER 15 Floating and Positioning. FLOAT VS. POSITION  Floating an element moves it to the left or right, allowing the following text to wrap around.
INTRODUCTION ABOUT DIV Most websites have put their content in multiple columns. Multiple columns are created by using or elements. The div element is.
Making the Most of Search in SharePoint 2013 Christina Wheeler.
Chapter 2 Creating Website with Web Forms. Objectives Understand the different project types and templates when building ASP.NET web sites. The different.
Cascading Style Sheets for layout
Working with Cascading Style Sheets
DHTML.
Internet of the Past.
>> CSS Rules Selection
AVOIR -African virtual
Putting Things Where We Want Them
Cascading Style Sheets - Building a stylesheet
MVC Framework, in general.
Customizing Editable Regions and Building Templates
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
Chapter 7: User-Defined Functions II
Positioning.
MASTER PAGES.
The need for server pages
Cascading Style Sheets - Building a stylesheet
5.00 Apply procedures to organize content by using Dreamweaver. (22%)
CSc 337 Lecture 5: Grid layout.
MAKING XSL-PCF PAGES FROM SCRATCH
3rd Party Widgets & Custom Code
Presentation transcript:

A first stab at a better templating system for Chisimba The Chisimba Canvas

Canvas.Id / Canvas.Type = static | dynamic Canvas.Content Canvas.Content.Head Canvas.Content.Head.Header Canvas.Content.Head.Breadcrumbs Canvas.Content.Head.Navigation Canvas.Content.Body Canvas.Content.Footer Canvas.Content.Body.Region2 Canvas.Content.Body.Region1 Canvas.Content.Body.Region3 A canvas can be dynamic (allows turn editing on) or static. A canvas has an ID, which links it to a user, context, or other determining factor.

Canvas.Content.Body.Region2 Canvas.Content.Body.Region1 Canvas.Content.Body.Region3 Wide block Narrow block

Getting the master canvas Currently, the page template does a lot of rendering This would become the responsibility of the master canvas The page template would render the master canvas, with the layout template rendering all the inner layers of the canvas. The page template would contain everything as current up to and including the tag and including and after the tag. $objMasterCanvas = $this->getObject(“mastercanvas”); $objMasterCanvas->renderCanvas(); The rest of the canvas would be rendered by the layout and body templates.

The Layout Template The layout template is static HTML, except for the content, and controls (as was originally intended) the layout. Page templates only setup the properties of the template for rendering. Most of the actual rendering is done in helper classes, not natively in the template as is mostly the case at present. Backward compatibility will be preserved.

For a static canvas, the layout template might look something like the code below: objCanvas->renderId();?>"> Note that the DIVs will be rendered using the appropriate class, they will not be hand coded as in this example. Note that if statements would have to be used to determine if a given layer is to be rendered or not.

Page templates Page templates will typically only set the values of the content elements that will be rendered There should be almost no logic in a page template.  Logic should be in methods of one or more View classes How would we make it backward compatible?

The canvas The canvas would contain all the turn editing on/off logic, and all the logic needed to save the canvas state for a particular rendering of the canvas Turn editing on / off would be available to all modules via a config setting in register.conf. Modules would not output blocks directly, but would create blocks that could be rendered anywhere, and included via default settings. Modules could turn manual block manipulation off by a config parameter.