Feature dcUI - Gadreel/divconq GitHub Wiki

Real World Concerns

Page Indexing

If a page can be indexed:

<dcui Title="N" Index="True">

Then links to the page and on the page need to be followed by Googlebot, so <a href="/dcm/About" ...

If a search result leads a customer to /dcm/About we need to get them to /dcw/Main#/dcm/About but if it leads Googlebot (or other search engine) to /dcm/About we need to keep the url as is. Important that we must be careful because Googlebot can execute JS and therefore could hit our redirect.

Home Page

Even though we mean to load /dcw/Main first - thus appearing that this is home - for indexing purposes we should point to /dcw/Home. Thus / should equate to /dcw/Home (or the home ovrride) no to /dcw/Main inspite of the apparent extra effort of then loading Main to show Home.

Page Print and Email

/dcm/Email-2014-12-14 needs to return plain simple code fit for inclusion in email or print. Image and link urls need to be fully expanded.

Analytics

We need to record page views. even though the location bar says /dcw/Main#/dcm/About we need to record /dcm/About. See:

Page Loading

Example URL: /dcm/About

Return the page as completely as possible but without the standard html skeleton. Instead return a "hidden" version of the page for crawlers and a little javascript that rewrites the URL (location).

Rewritten URL: /dcw/Main#/dcm/About@[uniqueid]

Now the standard html skeleton is loaded. A key feature of which is "pageContent", which is where Main is loaded but then immediately shows About:

<!DOCTYPE html>
<html>
<head dir="ltr" lang="en">	
   ...
</head>
<body>
	<div id="pgMain" data-role="page">
		<div data-role="header" id="pageHeader">
		 
		<!-- Body Content -->
		<div role="main" id="pageMain" class="ui-content">
			<div id="pageContent">
			</div>
		</div>
		
		<div data-role="footer" id="pageFooter">
	</div>
	
	<!-- global popup -->
	<div data-role="popup" id="puInfo" data-theme="a" class="ui-content" data-overlay-theme="b">
		...
	
	<!-- right panel -->
	<div data-role="panel" id="rightPagePanel" data-position="right" data-display="reveal" data-theme="a">
		...
	
	<!-- left panel -->
	<div data-role="panel" id="leftPagePanel" data-position="left" data-display="reveal" data-theme="a">
		...
</body>
</html>

If the unique id (after the @) is found after the display URL (e.g. after About) then we try to look it up and us it. If that doesn't exist show just the page (e.g. About).

Back on the server the load of Main looks like: /dcw/Main and then the load of About looks like /dcm/About?_dcui=dyn&nocache=NNNN even though browser shows something different for the URL.

On the server we find /dcw/Main.dcui.xml and /dcm/About.dcui.xml. Main is returned as HTML but About is returned as JavaScript the second time (the initial request to About is returned as HTML.

dcui Modes

std
- render the page dynamically on server for crawlers but tell the browser to redirect
html
- useful for creating a static CDN site
- render the page dynamically on server and do not redirect in browser
- only features that work via "attach" mode are present (see code mode below)
clean
- useful for creating a print or an email from
- render the page dynamically on server and do not redirect in browser
- only features that work via "attach" mode are present (see code mode below)
dyn[amic]
- render the pageContent only, do not add skeleton - render dynamically on server
- return as JS
- output is compressed
code
- render just the functions and return them in "attach" mode meaning these functions attach to current page
- return as JS
- output is compressed
style
- render the Styles only
- return as CSS
- output is compressed

dcui Basic Usage

<dcui Title="N" Index="True" DefaultMode="[std]|html|js" Skeleton="[default]">
	<Description />
	<Keywords />
	<Style ... />
	<Header ... />
	<Footer ... />
	<LeftPanel ... />
	<RightPanel ... />
	<ScriptLib .. />
	<Layout Display="[ScrollDisplay]|FullDisplay|FullScrollDisplay" Class="qname of class to generate content">
		HTML / ViewML (Page Content)
	</Layout>
	<Fragment Id="sect1" Format="md" Locale="">
		CDATA content - HTML, MD, BB, etc
	</Fragment>
	<Function Name="Load">
	</Function>
</dcui>

Header, Footer and Panels can be overridden or extended for each page, or use a common block. Main sets the default. PageContent may be in FullDisplay, FullScrollDisplay or ScrollDisplay (normal web scroll) modes.

Additional scripts (ScriptLib) can be loaded with the page. Page not considered fully loaded until all the libs are loaded, then page Load occurs. A ScriptLib is loaded only once for whole site visit.

Security

<dcui Title="N" AuthTags="tag1|tag2|tag3">

If user is logged in they get a "not authorized" message when loading from Main. If not logged in they get redirected to SignIn. If direct link with std mode then redirect and SignIn. If direct link with html mode then simply the "not authorized" message.

Server Tags

IncludePart

Use a View Include and View Part, which could be a block from the CMS

PagePart

A part of a page to fill in a hole.

Use a View Include with an identity specific to this page. Generally for editable areas.

Name

name of the block to use

Type

content type: MD, BB, HTML
if present means this block can be edited

Image and ImageBlock and SlideBlock

ImageBlock has a caption too
SlideBlock has a caption, multiple slides in any order, etc

Path

use local or CDN URLs (where ever the static web extension - dcm - goes for this domain)
loads from the static folder (configured in dcm, e.g. ./public/dcw/domain-alias/static) rather than checking all over the place hunting packages for a path match
- Image Path="/Photos/part.png" becomes "https://domain.name.com/dcm/Galleries/Photos/part.png"
use full URL for email generation

Selector

name of gallery to select from. for use during live page editing

ImageLink

use local or CDN URLs
loads from the static folder (from dcm)
- Image Path="/Photos/part.png" becomes "https://domain.name.com/dcm/Galleries/Photos/part.png"
use full URL for email generation

FileLink

use local or CDN URLs
loads from the static folder (from dcm)
- FileLink Path="/meetings/notes.docs" becomes "https://domain.name.com/dcm/Files/meetings/notes.docs"
use full URL for email generation

Link and WideLink

link to another page if Path
otherwise assume it will be used with a Click event

Server Templates

Template is based off Service calls or off Composite. Record result runs template once, List result repeats the template.

Example

<Template Service="dcCoreDataServices" Feature="Users" Op="ListUsers">
	<tr>
		<td>@tpl|Username@</td>
		<td>@tpl|FirstName@ @tpl|LastName@</td>
		<td>@tpl|Email@</td>
		<td><Link Click="DoEditUser" Label="Edit" Icon="check" Data="@tpl|Id@" /></td>
	</tr>
</Template>

Request can be based on HTTP params:

<Template Service="dcCoreDataServices" Feature="Users" Op="LoadUser">
	<RequestField Name="Id" Value="@param|id@" />
	<tr>
		<td>@tpl|Username@</td>
		<td>@tpl|FirstName@ @tpl|LastName@</td>
		<td>@tpl|Email@</td>
		<td>
			<ul>
				<Template Source="@tpl|Groups@" Name="tpl2">
					<li>@tpl2|.@</li>
				</Template>
			</ul>
		</td>
	</tr>
</Template>

Load Page

using `std` (default) mode

Server Side
- if Auth no good then return not found
- otherwise render normally except for addition of 'attach scripts' to load own page scripts
Browser Side
- if navigator.userAgent contains Googlebot then don't engage comm at all, just stop after page is loaded
- if location.pathname is not equal to Main path, redirect to Main path and append current #location.pathname to it
- otherwise engage the comm
  - load the # path if present
  - load Home otherwise
  - if we detect we need a signin then do the signin

using `html` mode

Server Side
- if Auth no good then return not found
- otherwise render normally except for addition of 'attach scripts' to load own page scripts
Browser Side
- if navigator.userAgent contains Googlebot then don't engage comm at all, just stop after page is loaded
- otherwise engage the comm but do not redirect

using `dynamic` mode

Server Side
- if Auth no good then return JS with error result (error pop up)
- return JS of only the Layout and related but no skeleton
Browser Side
- responds to the returned JS
- may need to load some JS libraries

using `code` mode

Server Side
- if Auth no good then return JS with error result (error pop up)
- return JS of only the script and related but no skeleton
Browser Side
- attach the script to the current viewed page

not found rule

if ?_dcui=dyn or ?_dcui=code present, return js error for non-auth
otherwise redirect to Main

Client side info

Where to get info?

<html data-dcw-SignIn="..." data-dcw-Main="..." data-dcw-Home="..." data-dcw-SiteName="..." >

Notes:

we need domain level alias
we need domain level SignIn path
we need domain level Main path
we need domain level Home path
we need domain level SiteName path
we need domain level SiteAuthor path
we need domain level SiteCopyright path
we need dc.ui to load

Special Folders

Galleries
- ./public/dcw/domain-alias/static/galleries
- GalleryImage Path="/Photos/part.png" becomes "https://domain.name.com/dcm/galleries/Photos/part.png"
Files
- ./public/dcw/domain-alias/static/files
- FileLink Path="/meetings/notes.docs" becomes "https://domain.name.com/dcm/files/meetings/notes.docs"
WWW
- ./public/dcw/domain-alias/static/www
- Path="/dcf/js/x.js" becomes "https://domain.name.com/dcm/www/dcf/js/x.js"
archive
- for www files...TODO

CMS

edit pages contained in dcm
- ./public/dcw/domain-alias/phantom/www/pages
- ./public/dcw/domain-alias/static/www/pages
- URL /dcm/pages/About is ./public/dcw/domain-alias/static/www/pages/About
edit blocks contained in dcm
- ./public/dcw/domain-alias/phantom/www/blocks
- ./public/dcw/domain-alias/static/www/blocks

Gallery

Top ./public/dcw/domain-alias/static/Galleries
Name is folder name: ./public/dcw/domain-alias/static/Galleries/Horizon
Setting are in file: ./public/dcw/domain-alias/static/Galleries/Horizon/meta.json
A subset is formed just by creating a subfolder
- example: ./public/dcw/domain-alias/static/Galleries/Horizon/Underwater-Garden
- this could be category/product relationship ./public/dcw/domain-alias/static/Galleries/[cat]/[prod]
- default display order, description, title can be specified in subset folder
- order example: ./public/dcw/domain-alias/static/Galleries/Horizon/Underwater-Garden/meta.json
Variations are also a subfolder. name of photo is name of folder plus a .v
- example: ./public/dcw/domain-alias/static/Galleries/Horizon/Underwater-Garden/Center.v/img_thumb.jpg
- example: ./public/dcw/domain-alias/static/Galleries/Horizon/Underwater-Garden/Center.v/img_list.jpg
- example: ./public/dcw/domain-alias/static/Galleries/Horizon/Underwater-Garden/Center.v/img_slide.jpg
- example: ./public/dcw/domain-alias/static/Galleries/Horizon/Underwater-Garden/Center.v/original.jpg
- example: ./public/dcw/domain-alias/static/Galleries/Horizon/Underwater-Garden/Center.v/meta.json
- example: ./public/dcw/domain-alias/static/Galleries/Horizon/Underwater-Garden/Left.v/img_thumb.jpg
- example: ./public/dcw/domain-alias/static/Galleries/Horizon/Underwater-Garden/Left.v/img_list.jpg
- example: ./public/dcw/domain-alias/static/Galleries/Horizon/Underwater-Garden/Left.v/img_slide.jpg
- example: ./public/dcw/domain-alias/static/Galleries/Horizon/Underwater-Garden/Left.v/original.jpg
- example: ./public/dcw/domain-alias/static/Galleries/Horizon/Underwater-Garden/Left.v/meta.json