--- /dev/null
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+ <title></title>
+ <meta name="generator" content="LibreOffice 6.0.7.3 (Linux)"/>
+ <meta name="created" content="2019-04-24T18:47:00"/>
+ <meta name="changed" content="2019-08-12T15:18:00"/>
+ <style type="text/css">
+ @page { margin: 0.79in }
+ p { margin-bottom: 0.1in; direction: ltr; color: #000000; line-height: 115%; text-align: left; orphans: 2; widows: 2 }
+ p.western { font-family: "Liberation Serif", serif; font-size: 12pt }
+ p.cjk { font-family: "Lohit Devanagari"; font-size: 12pt; so-language: hi-IN }
+ p.ctl { font-family: "Liberation Serif"; font-size: 12pt; so-language: en-US }
+ h1 { margin-bottom: 0.08in; border-top: none; border-bottom: 1px solid #000000; border-left: none; border-right: none; padding-top: 0in; padding-bottom: 0.01in; padding-left: 0in; padding-right: 0in; direction: ltr; color: #000000; text-align: left; orphans: 2; widows: 2; text-decoration: none }
+ h1.western { font-family: "Liberation Sans", sans-serif; font-size: 18pt }
+ h1.cjk { font-family: "Lohit Devanagari"; font-size: 18pt; so-language: hi-IN }
+ h1.ctl { font-family: "Liberation Serif"; font-size: 12pt; so-language: en-US; font-weight: normal }
+ h2 { direction: ltr; color: #000000; text-align: left; orphans: 2; widows: 2; text-decoration: underline }
+ h2.western { font-family: "Liberation Sans", sans-serif; font-size: 16pt }
+ h2.cjk { font-family: "Lohit Devanagari"; font-size: 16pt; so-language: hi-IN }
+ h2.ctl { font-family: "Liberation Serif"; font-size: 12pt; so-language: en-US; font-weight: normal }
+ </style>
+</head>
+<body lang="en-US" text="#000000" dir="ltr">
+<ol>
+ <li/>
+<h1 class="western" style="border-top: none; border-bottom: 1px solid #000000; border-left: none; border-right: none; padding-top: 0in; padding-bottom: 0.01in; padding-left: 0in; padding-right: 0in">
+ <font face="Liberation Sans, serif"><font size="5" style="font-size: 18pt"><span style="text-decoration: none"><b>GLM
+ UI Elements</b></span></font></font></h1>
+</ol>
+<p class="western" style="line-height: 115%"><br/>
+<br/>
+
+</p>
+<p class="western" style="line-height: 115%"><font face="Liberation Serif, serif">The
+GLM UI Elements are a collection of HTML files that provide a means
+to implement standarized user interface features and associated
+elements for layout. Each element consists of one HTML file and in
+some cases a pair of HTML files (start/end) that may be called along
+with a set of parameters ($ui array) to generate all HTML code needed
+to implement a certain user interface feature. In short, an entire
+user input form can be created using only a sequence of $ui array
+definitions and include statements for the UI html files. </font>
+</p>
+<p class="western" style="line-height: 115%"><font face="Liberation Serif, serif">These
+standardized UI Elements are designed to include support for all
+standard features including form field titles, input fields,
+descriptive text, help tips, form validation, field error messages,
+field error highlighting, form submission blocking on error, page
+change warning if form data has been modified, responsive layout, and
+compliance with audio page readers. All GLM UI Elements assume that
+Foundation 6 XY Grid will be used to layout the contents. That must
+be initialized for any of this to work.</font></p>
+<p class="western" style="line-height: 115%"><font face="Liberation Serif, serif">These
+GLM UI Elements should only exist once in a project so that there is
+only one UI element of a specific type to update when the user
+interface for these elements needs to be updated. Those changes will
+therefore be consistent thoughout the project. </font>
+</p>
+<ol>
+ <ol>
+ <li/>
+<h2 class="western"><font face="Liberation Sans, serif"><font size="4" style="font-size: 16pt"><u><b>Implementation</b></u></font></font></h2>
+ </ol>
+</ol>
+<p class="western" style="line-height: 115%"><font face="Liberation Serif, serif">GLM
+UI Elements are incorporated into a view (HTML file with Smarty
+templating) by first defining the $ui array that controls a
+particular UI element and then including the UI element as shown in
+the following example.</font></p>
+<p class="western" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"><font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">{*
+cust_contact *}</font></font></font></p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"><font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">{$ui
+= [</font></font></font></p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"> <font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">'field'
+ => 'cust_contact',</font></font></font></p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"> <font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">'value'
+ => {$settings.cust_contact},</font></font></font></p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"> <font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">'label'
+ => 'Customer Contact E-Mail',</font></font></font></p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"> <font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">'required'
+ => false,</font></font></font></p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"> <font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">'helpText'
+ => 'Leave empty to prevent any E-mail from being sent for
+this site.'</font></font></font></p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"><font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">]}</font></font></font></p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"><font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">{include
+file="ui/f6/text.html"}</font></font></font></p>
+<p class="western" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<br/>
+
+</p>
+<p class="western" style="margin-bottom: 0in; line-height: 100%"><font color="#000000"><font face="Liberation Serif, serif"><font size="3" style="font-size: 12pt">The
+example above creates a standard text input field. There are three
+parts to this. </font></font></font>
+</p>
+<p class="western" style="margin-bottom: 0in; line-height: 100%"><br/>
+
+</p>
+<ul>
+ <li/>
+<p class="western" style="margin-bottom: 0in; line-height: 100%">
+ <font color="#000000"><font face="Liberation Serif, serif"><font size="3" style="font-size: 12pt">At
+ the top is a Smarty style commend that indicates the field that is
+ being created. This makes it easy to scan down a file and identify
+ certain UI elements.</font></font></font></p>
+ <li/>
+<p class="western" style="margin-bottom: 0in; line-height: 100%">
+ <font color="#000000"><font face="Liberation Serif, serif"><font size="3" style="font-size: 12pt">In
+ the middle is the $ui assignment. It contains the information
+ required to customize this UI element for the specified field. An
+ explanation of the information that can be supplied is described at
+ the top of each UI Element HTML file and in this document. (The
+ information in the UI Element will be the definative information.)</font></font></font></p>
+ <li/>
+<p class="western" style="margin-bottom: 0in; line-height: 100%">
+ <font color="#000000"><font face="Liberation Serif, serif"><font size="3" style="font-size: 12pt">At
+ the bottom is the Smarty include statement that will cause the
+ specific UI element to be included in the tempate at this point.</font></font></font></p>
+</ul>
+<p class="western" style="margin-bottom: 0in; line-height: 100%"><br/>
+
+</p>
+<p class="western" style="margin-bottom: 0in; line-height: 100%"><font color="#000000"><font face="Liberation Serif, serif"><font size="3" style="font-size: 12pt">As
+noted in the previous secion, some UI elements may have 2 separate
+pieces. An example is below.</font></font></font></p>
+<p class="western" style="margin-bottom: 0in; line-height: 100%"><br/>
+
+</p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"><font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">{*
+Grid Start *}</font></font></font></p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"><font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">{$ui
+= [</font></font></font></p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"> <font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">'sectionColor'
+ => '#ffE',</font></font></font></p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"> <font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">'nowrap'
+ => true</font></font></font></p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"><font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">]}</font></font></font></p>
+<p class="western" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"><font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">{include
+file="ui/f6/grid-start.html"}</font></font></font></p>
+<p class="western" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<br/>
+
+</p>
+<p class="western" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"> <font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">***
+content here ****</font></font></font></p>
+<p class="western" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<br/>
+
+</p>
+<p class="western" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"><font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">{*
+Grid End *}</font></font></font></p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"><font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">{$ui
+= [</font></font></font></p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"> <font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">'noFoundationInit'
+ => true</font></font></font></p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"><font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">]}</font></font></font></p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"><font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">{include
+file="ui/f6/grid-end.html"}</font></font></font></p>
+<p class="western" style="margin-bottom: 0in; line-height: 100%"><br/>
+
+</p>
+<p class="western" style="margin-bottom: 0in; line-height: 100%"><font color="#000000"><font face="Liberation Serif, serif"><font size="3" style="font-size: 12pt">In
+this case there is a UI element that is used to start an area of the
+view that will contain Foundation 6 XY grid content followed by a UI
+element that ends that area and that may or may not initialize
+Foundation 6.</font></font></font></p>
+<p class="western" style="margin-bottom: 0in; line-height: 100%"><font color="#000000">
+</font><br/>
+
+</p>
+<p class="western" style="margin-bottom: 0in; line-height: 100%"><br/>
+
+</p>
+<ol>
+ <ol start="2">
+ <li/>
+<h2 class="western"><font face="Liberation Sans, serif"><font size="4" style="font-size: 16pt"><u><b>GLM
+ UI Element Reference</b></u></font></font></h2>
+ </ol>
+</ol>
+<p class="western" style="line-height: 115%"><font face="Liberation Serif, serif">***
+NEED TO WRITE *** </font>
+</p>
+<p class="western" style="line-height: 115%"><font face="Liberation Serif, serif">GLM
+UI Elements are incorporated into a view (HTML file with Smarty
+templating) by first defining the $ui array that controls a
+particular UI element and then including the UI element as shown in
+the following example.</font></p>
+<p class="western" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"><font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">{*
+cust_contact *}</font></font></font></p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"><font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">{$ui
+= [</font></font></font></p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"> <font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">'field'
+ => 'cust_contact',</font></font></font></p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"> <font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">'value'
+ => {$settings.cust_contact},</font></font></font></p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"> <font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">'label'
+ => 'Customer Contact E-Mail',</font></font></font></p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"> <font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">'required'
+ => false,</font></font></font></p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"> <font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">'helpText'
+ => 'Leave empty to prevent any E-mail from being sent for
+this site.'</font></font></font></p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"><font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">]}</font></font></font></p>
+<p class="western" align="left" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<font color="#232627"><font face="Liberation Mono, serif"><font size="2" style="font-size: 9pt">{include
+file="ui/f6/text.html"}</font></font></font></p>
+<p class="western" style="margin-left: 0.5in; margin-bottom: 0in; line-height: 100%">
+<br/>
+
+</p>
+<p class="western" style="margin-bottom: 0in; line-height: 100%"><font color="#000000"><font face="Liberation Serif, serif"><font size="3" style="font-size: 12pt">The
+example above creates a standard text input field. There are three
+parts to this. </font></font></font>
+</p>
+<p class="western" style="margin-bottom: 0in; line-height: 100%"><br/>
+
+</p>
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+{\rtf1\ansi\deff3\adeflang1025
+{\fonttbl{\f0\froman\fprq2\fcharset0 Times New Roman;}{\f1\froman\fprq2\fcharset2 Symbol;}{\f2\fswiss\fprq2\fcharset0 Arial;}{\f3\froman\fprq2\fcharset0 Liberation Serif{\*\falt Times New Roman};}{\f4\fswiss\fprq2\fcharset0 Liberation Sans{\*\falt Arial};}{\f5\fmodern\fprq1\fcharset0 Liberation Mono{\*\falt Courier New};}{\f6\fnil\fprq0\fcharset2 OpenSymbol{\*\falt Arial Unicode MS};}{\f7\fnil\fprq2\fcharset0 Noto Sans CJK SC Regular;}{\f8\fmodern\fprq1\fcharset0 Droid Sans Fallback;}{\f9\fnil\fprq2\fcharset0 Lohit Devanagari;}{\f10\fnil\fprq0\fcharset0 Lohit Devanagari;}}
+{\colortbl;\red0\green0\blue0;\red0\green0\blue255;\red0\green255\blue255;\red0\green255\blue0;\red255\green0\blue255;\red255\green0\blue0;\red255\green255\blue0;\red255\green255\blue255;\red0\green0\blue128;\red0\green128\blue128;\red0\green128\blue0;\red128\green0\blue128;\red128\green0\blue0;\red128\green128\blue0;\red128\green128\blue128;\red192\green192\blue192;\red35\green38\blue39;}
+{\stylesheet{\s0\snext0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033 Normal;}
+{\s1\sbasedon17\snext18\sautoupd\ilvl0\outlinelevel0\ql\sb240\sa120\brdrb\brdrhair\brdrw1\brdrcf1\brsp29\keepn\ulnone\ulc0\b\dbch\af7\dbch\af9\afs36\ab\loch\f4\fs36 Heading 1;}
+{\s2\sbasedon17\snext18\sautoupd\ilvl1\outlinelevel1\sb200\sa120\keepn\ul\ulc0\b\dbch\af7\dbch\af9\afs32\ab\loch\f4\fs32 Heading 2;}
+{\s3\sbasedon17\snext18\ilvl2\outlinelevel2\sb140\sa120\keepn\b\dbch\af7\dbch\af9\afs28\ab\loch\f4\fs28 Heading 3;}
+{\*\cs15\snext15\dbch\af6\dbch\af6\loch\f6 Bullets;}
+{\*\cs16\snext16 Numbering Symbols;}
+{\s17\sbasedon0\snext18\sb240\sa120\keepn\dbch\af7\dbch\af9\afs28\loch\f4\fs28 Heading;}
+{\s18\sbasedon0\snext18\sl276\slmult1\sb0\sa140 Text Body;}
+{\s19\sbasedon18\snext19\sl276\slmult1\sb0\sa140\dbch\af10 List;}
+{\s20\sbasedon0\snext20\sb120\sa120\noline\i\dbch\af10\afs24\ai\fs24 Caption;}
+{\s21\sbasedon0\snext21\noline\dbch\af10 Index;}
+{\s22\sbasedon0\snext22\sb0\sa0\dbch\af8\dbch\af5\afs20\loch\f5\fs20 Preformatted Text;}
+}{\*\listtable{\list\listtemplateid1
+{\listlevel\levelnfc255\leveljc0\levelstartat1\levelfollow2{\leveltext \'00;}{\levelnumbers;}\fi0\li0}
+{\listlevel\levelnfc255\leveljc0\levelstartat1\levelfollow2{\leveltext \'00;}{\levelnumbers;}\fi0\li0}
+{\listlevel\levelnfc255\leveljc0\levelstartat1\levelfollow2{\leveltext \'00;}{\levelnumbers;}\fi0\li0}
+{\listlevel\levelnfc255\leveljc0\levelstartat1\levelfollow2{\leveltext \'00;}{\levelnumbers;}\fi0\li0}
+{\listlevel\levelnfc255\leveljc0\levelstartat1\levelfollow2{\leveltext \'00;}{\levelnumbers;}\fi0\li0}
+{\listlevel\levelnfc255\leveljc0\levelstartat1\levelfollow2{\leveltext \'00;}{\levelnumbers;}\fi0\li0}
+{\listlevel\levelnfc255\leveljc0\levelstartat1\levelfollow2{\leveltext \'00;}{\levelnumbers;}\fi0\li0}
+{\listlevel\levelnfc255\leveljc0\levelstartat1\levelfollow2{\leveltext \'00;}{\levelnumbers;}\fi0\li0}
+{\listlevel\levelnfc255\leveljc0\levelstartat1\levelfollow2{\leveltext \'00;}{\levelnumbers;}\fi0\li0}\listid1}
+{\list\listtemplateid2
+{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u8226 ?;}{\levelnumbers;}\f6\dbch\af6\fi-360\li720}
+{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u9702 ?;}{\levelnumbers;}\f6\dbch\af6\fi-360\li1080}
+{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u9642 ?;}{\levelnumbers;}\f6\dbch\af6\fi-360\li1440}
+{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u8226 ?;}{\levelnumbers;}\f6\dbch\af6\fi-360\li1800}
+{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u9702 ?;}{\levelnumbers;}\f6\dbch\af6\fi-360\li2160}
+{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u9642 ?;}{\levelnumbers;}\f6\dbch\af6\fi-360\li2520}
+{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u8226 ?;}{\levelnumbers;}\f6\dbch\af6\fi-360\li2880}
+{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u9702 ?;}{\levelnumbers;}\f6\dbch\af6\fi-360\li3240}
+{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u9642 ?;}{\levelnumbers;}\f6\dbch\af6\fi-360\li3600}\listid2}
+}{\listoverridetable{\listoverride\listid1\listoverridecount0\ls1}{\listoverride\listid2\listoverridecount0\ls2}}{\*\generator LibreOffice/6.0.7.3$Linux_X86_64 LibreOffice_project/00m0$Build-3}{\info{\creatim\yr2019\mo4\dy24\hr18\min47}{\revtim\yr2019\mo8\dy12\hr15\min18}{\printim\yr0\mo0\dy0\hr0\min0}}{\*\userprops}\deftab720
+\viewscale160
+{\*\pgdsctbl
+{\pgdsc0\pgdscuse451\pgwsxn12240\pghsxn15840\marglsxn1134\margrsxn1134\margtsxn1134\margbsxn1134\pgdscnxt0 Default Style;}}
+\formshade\paperh15840\paperw12240\margl1134\margr1134\margt1134\margb1134\sectd\sbknone\sectunlocked1\pgndec\pgwsxn12240\pghsxn15840\marglsxn1134\margrsxn1134\margtsxn1134\margbsxn1134\ftnbj\ftnstart1\ftnrstcont\ftnnar\aenddoc\aftnrstcont\aftnstart1\aftnnrlc
+{\*\ftnsep\chftnsep}\pgndec\pard\plain \s1\ilvl0\outlinelevel0\ql\sb240\sa120\brdrb\brdrhair\brdrw1\brdrcf1\brsp29\keepn\ulnone\ulc0\b\dbch\af7\dbch\af9\afs36\ab\loch\f4\fs36{\listtext\pard\plain \tab}\ls1 \li0\ri0\lin0\rin0\fi0\sb240\sa120\brdrb\brdrhair\brdrw1\brdrcf1\brsp29\keepn{\b\dbch\af7\dbch\af9\afs36\ab\rtlch \ltrch\loch\fs36
+GLM UI Elements}
+\par \pard\plain \s18\sl276\slmult1\sb0\sa140\rtlch \ltrch\loch
+
+\par \pard\plain \s18\sl276\slmult1\sb0\sa140{\rtlch \ltrch\loch
+The GLM UI Elements are a collection of HTM}{\rtlch \ltrch\loch
+L}{\rtlch \ltrch\loch
+ files that provide a means to implement standarized user interface features and associated elements for layout. Each element consists of one HTML file and in some cases a pair of HTML files (start/end) that may be called along with a set of parameters ($ui array) to generate all HTML code needed to implement a certain user interface feature. In short, an entire user input form can be created using only a sequence of $ui array definitions and include statements for the UI html files. }
+\par \pard\plain \s18\sl276\slmult1\sb0\sa140{\rtlch \ltrch\loch
+These standardized UI Elements are designed to include support for all standard features including form field titles, input fields, descriptive text, help tips, form validation, field error messages, field error highlighting, form submission blocking on error, page change }{\rtlch \ltrch\loch
+warning if form data has been modified, responsive layout, and compliance with audio page readers. All GLM UI Elements assume that Foundation 6 XY Grid will be used to layout the contents. That must be initialized for any of this to work.}
+\par \pard\plain \s18\sl276\slmult1\sb0\sa140{\rtlch \ltrch\loch
+These GLM UI Elements should only exist once in a project so that there is only one UI element of a specific type to update when the user interface for these elements needs to be updated. Those changes will therefore be consistent thoughout the project. }
+\par \pard\plain \s2\ilvl1\outlinelevel1\sb200\sa120\keepn\ul\ulc0\b\dbch\af7\dbch\af9\afs32\ab\loch\f4\fs32{\listtext\pard\plain \tab}\ls1 \li0\ri0\lin0\rin0\fi0{\rtlch \ltrch\loch
+Implementation}
+\par \pard\plain \s18\sl276\slmult1\sb0\sa140{\rtlch \ltrch\loch
+GLM UI Elements are incorporated into a view (HTML file with Smarty templating) by first defining the $ui array that controls a particular UI element and then including the UI element as shown in the following example.}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+\{* cust_contact *\}}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+\{$ui = [}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\fs18\loch\f5\hich\af5
+ }{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+'field' => 'cust_contact',}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\fs18\loch\f5\hich\af5
+ }{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+'value' => \{$settings.cust_contact\},}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\fs18\loch\f5\hich\af5
+ }{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+'label' => 'Customer Contact E-Mail',}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\fs18\loch\f5\hich\af5
+ }{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+'required' => false,}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\fs18\loch\f5\hich\af5
+ }{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+'helpText' => 'Leave empty to prevent any E-mail from being sent for this site.'}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+]\}}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+\{include file="ui/f6/text.html"\}}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\li720\ri0\lin720\rin0\fi0\afs16\rtlch \ltrch\loch\fs16
+
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033{\rtlch \ltrch\loch
+The example above creates a standard text input field. There are three parts to this. }
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\rtlch \ltrch\loch
+
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033{\listtext\pard\plain \dbch\af6\dbch\af6\loch\f6 \u8226\'95\tab}\ilvl0\ls2 \li720\ri0\lin720\rin0\fi-360{\rtlch \ltrch\loch
+At the top is a Smarty style commend that indicates the field that is being created. This makes it easy to scan down a file and identify certain UI elements.}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033{\listtext\pard\plain \dbch\af6\dbch\af6\loch\f6 \u8226\'95\tab}\ilvl0\ls2 \li720\ri0\lin720\rin0\fi-360{\rtlch \ltrch\loch
+In the middle is the $ui assignment. It contains the information required to customize this UI element for the specified field. An explanation of the information that can be supplied is described at the top of each UI Element HTML file and in this document. (The information in the UI Element will be the definative information.)}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033{\listtext\pard\plain \dbch\af6\dbch\af6\loch\f6 \u8226\'95\tab}\ilvl0\ls2 \li720\ri0\lin720\rin0\fi-360{\rtlch \ltrch\loch
+At the bottom is the Smarty include statement that will cause the specific UI element to be included in the tempate at this point.}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033{\rtlch \ltrch\loch
+As noted in the previous secion, some UI elements may have 2 separate pieces. An exa}{\rtlch \ltrch\loch
+mple is below.}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\rtlch \ltrch\loch
+
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+\{* Grid Start *\}}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+\{$ui = [}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\fs18\loch\f5\hich\af5
+ }{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+'sectionColor' => '#ffE',}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\fs18\loch\f5\hich\af5
+ }{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+'nowrap' => true}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+]\}}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+\{include file="ui/f6/grid-start.html"\}}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\li720\ri0\lin720\rin0\fi0\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\fs18\loch\f5\hich\af5
+ }{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+*** }{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+content here ****}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\li720\ri0\lin720\rin0\fi0\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+\{* Grid End *\}}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+\{$ui = [}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\fs18\loch\f5\hich\af5
+ }{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+'noFoundationInit' => true}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+]\}}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+\{include file="ui/f6/grid-end.html"\}}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033{\rtlch \ltrch\loch
+In this case }{\rtlch \ltrch\loch
+there is a UI element that is used to start an area of the view that will contain Foundation 6 XY grid content followed by a UI element that ends that area and that may or may not initialize Foundation 6.}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033{\rtlch \ltrch
+ }
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\rtlch \ltrch\loch
+
+\par \pard\plain \s2\ilvl1\outlinelevel1\sb200\sa120\keepn\ul\ulc0\b\dbch\af7\dbch\af9\afs32\ab\loch\f4\fs32{\listtext\pard\plain \tab}\ls1 \li0\ri0\lin0\rin0\fi0{\rtlch \ltrch\loch
+GLM UI Element Reference}
+\par \pard\plain \s18\sl276\slmult1\sb0\sa140{\rtlch \ltrch\loch
+*** }{\rtlch \ltrch\loch
+NEED TO WRITE *** }
+\par \pard\plain \s18\sl276\slmult1\sb0\sa140{\rtlch \ltrch\loch
+GLM UI Elements are incorporated into a view (HTML file with Smarty templating) by first defining the $ui array that controls a particular UI element and then including the UI element as shown in the following example.}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+\{* cust_contact *\}}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+\{$ui = [}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\fs18\loch\f5\hich\af5
+ }{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+'field' => 'cust_contact',}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\fs18\loch\f5\hich\af5
+ }{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+'value' => \{$settings.cust_contact\},}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\fs18\loch\f5\hich\af5
+ }{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+'label' => 'Customer Contact E-Mail',}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\fs18\loch\f5\hich\af5
+ }{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+'required' => false,}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\fs18\loch\f5\hich\af5
+ }{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+'helpText' => 'Leave empty to prevent any E-mail from being sent for this site.'}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+]\}}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\ql\li720\ri0\lin720\rin0\fi0{\cf17\afs18\rtlch \ltrch\loch\fs18\loch\f5\hich\af5
+\{include file="ui/f6/text.html"\}}
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\li720\ri0\lin720\rin0\fi0\afs16\rtlch \ltrch\loch\fs16
+
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033{\rtlch \ltrch\loch
+The example above creates a standard text input field. There are three parts to this. }
+\par \pard\plain \s0\widctlpar\hyphpar0\aspalpha\ltrpar\cf0\kerning1\dbch\af7\langfe2052\dbch\af9\afs24\alang1081\loch\f3\hich\af3\fs24\lang1033\rtlch \ltrch\loch
+
+\par }
\ No newline at end of file
projects / prog / glm-documentation.git / commitdiff