Node Package: Include and Structure Content


Nodes for different ways to include re-usable content from other sources such as local files, remote urls or WebPal-managed repositories.

To include content harvested from a remote URL, use wpIncludeRemoteContent. Specify the URL or a remote page and this node will render the content from that page within your chapter. Optionally, you can specify a start and end marker to avoid duplicating a site's navigation or graphical elements.

In a wpRepository you can gather a set of named html nodes that you can re-use with in other areas of the site - using the "Include Content" command within WebPal's html editor.

Screen Shots

Tabbed Pane 

Tabbed Pane
 



wpIncludeRemoteContent

Insert this node in a chapter to display content from another web page or URL for re-use. This allows you to mirror foreign content without having to manually update your chapter.

Note: Be aware of copyright-restrictions by the remote content provider. Likewise, remote content is due to change, do not forget to specify an alert-email to receive notifications if this node cannot find the remote content any more.

Where to use this node

Attributes

NameUseValueHelp
url required specify the complete url to the remote content here, including protocol, e.g. "http://www.cbc.ca/new/more.html"
start-tag optional to display only a segment of the remote content, specify here the HTML code just before the desired segment, e.g. "<h1>CBC News</h1>"
end-tag optional specify the HTML code immediately following the desired content segment.
alert-recipient required Including remote content can throw errors if the remote URL changes. Specify an email address here to receive alerts when the included content or the specified start/end markers are no longer found.

Sample

wpRepository

This node holds a set of html nodes which are solely intended to be re-usable content "snippets", intended for re-use throughout your site. This enables you to maintain a "contact-us" paragraph with an address in only a single location while repeating it throughout the site.

This node is best inserted in a dedicated chapter with the show-in-menu attribute set to "no". Create multiple html nodes in this node, and make sure to choose distinguishable names for each html node, e.g. "main_address", "goto_services".

Nested inclusion is not possible - do not use the "Include Content" command inside a repository html node.

Where to use this node

Attributes

NameUseValueHelp
name required enter a name for this repository

Sub Nodes

NameTypeHelp
html wpHtml insert as many html nodes here as needed. They may include graphics, html-code. Nested inclusion is not possible.

Sample

wpTabbedPane

Creates a tabbed area that can be customized with images. All content will be on your page and just hide/display when its specific tab is chosen, this means all the information will be indexed by search engines.

Where to use this node

Attributes

NameUseValueHelp
pane-width optional Determines the width of the area that displays the content (does not include the tabs)
pane-height optional Determines the height of the area that displays the content (does not include the tabs). If this is left blank the area with stretch/shrink depending on the content
lang oneof any, en, fr, de, es Determines the language of this node
overflow oneof scroll, stretch Determines what should be done is the content exceeds the limits of the dimensions specified. "Stretch" will stretch the content area and scroll will add a scroll bar to the content area.
pane-background-color optional Determines the background colour of the area that displays the content
first-tab-left-margin default 0 If this is greater than zero that number of pixels will be added to the left of the first tab.

Sub Nodes

NameTypeHelp
pane-background-image wpPaneImage This will use an image as the pane background instead of a colour
pane-footer-image wpImage This gives you the flexibility to add an image to the bottom of the pane (i.e. add a bottom border)
tab wpTab The container for each tab and its content

Sample

wpTab

This is an instance of a tab within the Tabbed Pane node.

Where to use this node

Attributes

NameUseValueHelp
display-name optional This will be the name that appears on the tab. Leave this blank if the name is already on the tab image
tab-width optional The width of the tab
tab-height optional The height of the tab
padding-top default Adds padding to the top of the tab's content
padding-left default Adds padding to the left of the tab's content
padding-right default Adds padding to the right of the tab's content
padding-bottom default Adds padding to the bottom of the tab's content
tab-on-background-color optional The background colour of the tab when the mouse is hovering over it
tab-off-background-color optional The background colour of the tab when the mouse is not hovering over it

Sub Nodes

NameTypeHelp
tab-on-background-image wpImage The background image of the tab when the mouse is hovering over it
tab-off-background-color wpImage The background image of the tab when the mouse is not hovering over it
html wpHtml The content for the tab
html-code wpRaw Custom html content that will appear in the tab
agenda wpAgenda Allows an agenda node to appear in the tab
newslist wpNewsList Allows a newslist node to appear in the tab
popup-gallery wpPopupGallery Allows a popup-gallery node to appear in the tab
slideshow wpSlideshowV5 Allows a slideshow node to appear in the tab

Sample

wpPaneImage

A Tabbed Pane node can contain several images, specifically, images for a repeating background and the footer of the pane.

Inherits from:

Where to use this node

Attributes

NameUseValueHelp
repeat-image oneof no-repeat, repeat-y, repeat-x Determines how the pane-background-image should be displayed.

Sample

wpTable

This node is used to format content, including: links, images and text, in a table. There are many styles that can be applied to the table; they are defined in the Style node.  

Where to use this node

Attributes

NameUseValueHelp
name required A unique name
lang oneof any, en, fr, de, es Determines the language of this node
table-width default 100% The width of the table
table-cellspacing default The cellspacing for the table

Sub Nodes

NameTypeHelp
row wpTableRow The row within the table

wpTableRow

This is an instance of a row within the Table node.

There are two types:

body - wraps the content in a <td>
heading - wraps the content in a <th>

The use-highlight attribute is used to give a specific row a different type of styling.

Where to use this node

Attributes

NameUseValueHelp
row-type oneof body, heading Describes the type of row
use-highlight oneof no, yes Determines if this row should use the highlight style

Sub Nodes

NameTypeHelp
column1 wpHtml The container that stores the content for the cell
column2 wpHtml The container that stores the content for the cell
column3 wpHtml The container that stores the content for the cell
column4 wpHtml The container that stores the content for the cell
column5 wpHtml The container that stores the content for the cell
column6 wpHtml The container that stores the content for the cell
column7 wpHtml The container that stores the content for the cell
column8 wpHtml The container that stores the content for the cell

wpTableC

This node is the same as wpTable, other than it is meant to be used in a chapter rather than a design.

Inherits from:

Where to use this node

Attributes

NameUseValueHelp
show-in oneof main, related1, related2, related3, related4, related5 Determines where in the design the content will appear.

wpDataTable

This node is used to format text based content. There are many styles that can be applied to the table; they are defined in the Style node.  

Inherits from:

Where to use this node

Sub Nodes

NameTypeHelp
row wpDataTableRow The row within the table

wpDataTableRow

This is an instance of a row within the Data-Table node.

There are two types:

body - wraps the content in a <td>
heading - wraps the content in a <th>

The use-highlight attribute is used to give a specific row a different type of styling.

Where to use this node

Attributes

NameUseValueHelp
row-type oneof body, heading Describes the type of row
use-highlight oneof no, yes Determines if this row should use the highlight style

Sub Nodes

NameTypeHelp
column1 wpString The container that stores the content for the cell
column2 wpString The container that stores the content for the cell
column3 wpString The container that stores the content for the cell
column4 wpString The container that stores the content for the cell
column5 wpString The container that stores the content for the cell
column6 wpString The container that stores the content for the cell
column7 wpString The container that stores the content for the cell
column8 wpString The container that stores the content for the cell

wpDataTableC

This node is the same as wpDataTable, other than it is meant to be used in a chapter rather than a design.

Inherits from:

Where to use this node

Attributes

NameUseValueHelp
show-in oneof main, related1, related2, related3, related4, related5 Determines where in the design the content will appear.

wpDynamicContent

This node is used to format content in a dynamic way. The transition-on attribute is where it is determined how this content area will work.

transition-on

page-load: The content will change every time the page is refreshed/loaded
timer: The content will change at a specified time interval.

Used with these attributes:

  • timer-ms
  • transition-action  
  • transition-speed

manual-browse: The content will change when the user interacts with it, i.e. using a scroll bar.

Used with these attributes:

  • manual-browse (New options coming soon)

Where to use this node

Attributes

NameUseValueHelp
name oneof dynamic-content1, dynamic-content2, dynamic-content3, dynamic-content4, dynamic-content5 A unique name
width optional The width of the area
height optional The height of the area
transition-on oneof page-load, timer, manual-browse Determines when the content will transition, see above for more details.
timer-ms default 5000 Time in milliseconds in which the content should rotate. (1 second = 1000 milliseconds)
transition-action oneof fade, blindX, blindY, blindZ, cover, curtainX, curtainY, fadeZoom, scrollLeft, scrollRight, scrollUp, scrollDown, scrollHorz, scrollVert, shuffle, slideX, slideY, toss, turnLeft, turnRight, turnUp, turnDown, uncover, wipe, zoom Determines how the content transitions, fade is the most popular.
transition-speed default 1000 Time in milliseconds in how long the transition should take. (1 second = 1000 milliseconds)
manual-browse oneof horizontal-scrollbar, vertical-scrollbar When transition-on = manual-browse here is where you would further describe how the manual browsing will work.

Sub Nodes

NameTypeHelp
image wpDynamicContentImage The image used in the dynamic content.
text wpHtml The text used in the dynamic content.

wpDynamicContentImage

This is an instance of an image within the Dynamic Content node. Links and rollover effects can be added this node.  

Where to use this node

Attributes

NameUseValueHelp
lang oneof any, en, fr, de, es Determines the language of this node
url optional The url the image links to
open-new-window oneof no, yes When specifying the url, here is where you decide if the link should open in a new window.
alt-text optional When this is filled out, the alt and title attributes will be added to the image.

Sub Nodes

NameTypeHelp
image-rollover wpImage The image used when a mouse hovers over the current image

wpDynamicContentC

This node is the same as wpDynamicContent, other than it is meant to be used in a chapter rather than a design.

Inherits from:

Where to use this node

Attributes

NameUseValueHelp
show-in oneof main, related1, related2, related3, related4, related5 Determines where in the design the content will appear.

wpDynamicContentImageC

This node is the same as wpDynamicContentImage, other than it is meant to be used in a chapter rather than a design.

Inherits from:

Where to use this node

Attributes

NameUseValueHelp
show-in oneof dynamic-content1, dynamic-content2, dynamic-content3, dynamic-content4, dynamic-content5 Determines which dynamic-content node in the design the content will appear.

wpDatabaseQuery

This is where the query would be setup for the default results.

Example

select-clause

               name as `Company Name`, addr as `Address`, city, fax

from-clause

               company

where-clause

               fax != ""

 

This is the query that will be created out of the above example:

SELECT name as `Company Name`, addr as `Address`, city, fax FROM company WHERE fax != ""

Where to use this node

    Attributes

    NameUseValueHelp
    name optional A unique name
    items-per-page oneof all(no paging), 10, 15, 20, 30, 40, 50 Number of rows that will appear on each page
    layout oneof table-with-header, table Determines how the data should be displayed
    show-number-of-results oneof yes, no Determines whether the number of results should be displayed

    Sub Nodes

    NameTypeHelp
    select-clause wpRaw This is where the select portion of the query is specified. Please note that the word SELECT automatically gets updated to the beginning of this text.
    from-clause wpRaw This is where the FROM portion of the query is specified. Please note that the word FROM automatically gets updated to the beginning of this text.
    where-clause wpRaw This is where the where portion of the query is specified. Please note that the word WHERE automatically gets updated to the beginning of this text.
    column wpDatabaseQueryColumn Defines a column in the table layout
    search-form wpDatabaseQuerySearch Defines a search form that can be used to filter the results.

    wpDatabaseQueryColumn

    This is where the column settings would be specified.

    Example  (continuing from above)

    Column
      name = "Company Name" sortable = "yes" width = "30%"

    Column  
      name = "city" sortable = "yes" width = "10%" title = "City"

    *** Please note that not all columns need to be defined here, only if the column is sortable, needs a specific width, and the column header needs to be language sensitive.

    Where to use this node

    Attributes

    NameUseValueHelp
    name required The name of the column in the database
    sortable oneof no, yes Determines if the column can be sorted by clicking on the column header.
    width optional Determines the width of the column, if this is blank, the column will be dynamically sized by the browser.

    Sub Nodes

    NameTypeHelp
    title wpStringL The label that will appear as the header for this column.

    wpDatabaseQuerySearch

    Where to use this node

    Sub Nodes

    NameTypeHelp
    submit-button wpDatabaseQuerySubmit Defines the submit button used in the form
    clear-button wpActionClear Defines the clear button used in the form
    search-fields wpDatabaseQueryFields Defines the fields used in the form

    wpDatabaseQuerySubmit

    Where to use this node

    Sub Nodes

    NameTypeHelp
    button-caption wpStringL Language sensitive label for the submit button
    button-image wpImage The image used for the submit button

    wpDatabaseQueryFields

    Where to use this node

    Sub Nodes

    NameTypeHelp
    search-field wpDatabaseQueryField Defines the search fields

    wpDatabaseQueryField

    where-clause

    ex: name = '{$name}'

    Default where-clause: LOWER(name) LIKE '%{$name}%'

    *** Please note name is replaced by the actual column name and {$name} represents that value posted by the user.

    database-options (only for type=dropdown)

    ex: SELECT id, name FROM product

    *** Please note the first column will be used as the value and the second column will be used as the label.

    Only one of database-options or options element should be used for type=dropdown

    Where to use this node

    Attributes

    NameUseValueHelp
    name required The name of the column being searched in the database
    type oneof text, dropdown The type of element used in the search form. Only text and drop-down elements are allowed.
    display-label oneof left-of-input, right-of-input, inside-input, above-input, below-input The position where the label will be displayed
    width optional The width of the search element

    Sub Nodes

    NameTypeHelp
    label wpStringL The label of the search element
    where-clause wpRaw The where clause used to search the column. Please note that the word WHERE automatically gets updated to the beginning of this text.
    database-options wpRaw A SQL query can be entered here to populate the dropdown element. Please note that first column selected will be used as the value and the second column will be used as the label.
    options wpWebFormElementOptions Used to populate the dropdown element.

    More Information

    Quick Navigation

    Home

    Company Profile

    Our Clients

    Latest News

    Web Content Management

    Document Management

    Web Database Platform

    Email Marketing

    Software Development

    Web Design & Development

    Application Hosting

    WebPal Knowledgebase

    | More

     

    Search Site