History of TemplateAndCssGuidelines
Version 6 | Current version | |
---|---|---|
Noteswe have dedicated a lot of our time to tidy up our php, templates and css, which seems to be greatly appreciated by anyone who decides to delve into the guts of bitweaver.to maintain this high standard and make it easy for new developers to understand what is going on, we would like to ask you to stick to these few simple rules:
it would be a shame to see sloppy php / html code being reintroduced into this rather quite clean code again, after having tidied it up. How-ToHere are basic instructions on how to build your template, using Bitweaver standard Smarty tags.Firstly, we want the template all indented correctly, but don't want the whitespace - so we use the {strip}...{/strip} tags to surround the template, from top to bottom.{CODE()}{* $Header: *} {strip}{CODE} Next theres the Overlib Javascript library (I don't know what this does yet? But it appears everywhere. - wolff_borg){CODE()}{popup_init src="`$smarty.const.THEMES_PKG_URL`js/overlib.js"}{CODE} Next, is the {bithelp} tag (I don't know what this does yet? But it appears everywhere. - wolff_borg){CODE()} {bithelp} {CODE}Ok, now the fun begins. The first thing we want is an all-encapsulating to help format the panel. We normally include a CSS class of the same name as the package here, to help with per package look-and-feel.{CODE()} </v></ctrl></alt>{CODE} Within this , we now start the HEADER section of the page and place the title of the page within tags. We use the {tr}...{/tr} tags to translate text for different languages.{CODE()}{tr}Admin process roles{/tr}Next we open the BODY section of the page.{CODE()} {CODE} In this example, we have a navigation bar and set of error message that will only appear if editing content. We use the {formfeedback} tag to iterate through an array and present the information as a list.{CODE()} {if $pid > 0} Please enter a valid 'page_name', 'page_id' or 'content_id' to include in this page. {if count($errors) > 0} {tr}This process is invalid{/tr}: {formfeedback hash=$errors} {/if} {/if}{CODE} Ok, more fun! We use Javascript tabs throughout Bitweaver to provide an intuitive and standardise navigation environment. The {jstabs} tag will surround all content on the page that will appear in separate tabs. If any information is to appear below, for every tab, it will be outside the closing tag. The {jstab} tag (notice the singular) begin an individual tab with title. We do not use {tr} tags around the title, as they are provided by the tag.{CODE()} {jstabs} {jstab title="Create / Edit Role"}{CODE} We use {form} tags to simplify and standardise the forms used in Bitweaver. The legend parameter provide a title to our form.{CODE()} {form legend="Create / Edit Role"}{CODE} The following hidden parameters are used by the sorting and filtering components below. As a standard, we specify these early on in the form.{CODE()} <input type="hidden" name="role_id" value="{$info.role_id|escape}" /><input type="hidden" name="pid" value="{$info.p_id|escape}" /><input type="hidden" name="offset" value="{$offset|escape}" /><input type="hidden" name="where" value="{$where|escape}" /><input type="hidden" name="find" value="{$find|escape}" /><input type="hidden" name="sort_mode" value="{$sort_mode|escape}" /><input type="hidden" name="sort_mode2" value="{$sort_mode2|escape}" />{CODE} Next are the individual form inputs. This is our standard layout, using {formlabel}, {forminput}, and {formhelp} tags to simplify look-and-feel.{CODE()} {formlabel label="Description" for="description"} {forminput} <textarea rows="5" cols="60" name="description" id="description">{$info.description|escape}</textarea> {formhelp note="A brief description about the purpose of the role"} {/forminput} Next, is our SAVE button and closing the form. Similar to the form inputs. The {smartlink} tag is used for...(I don't know what this does yet? But it appears everywhere. - wolff_borg){CODE()} <input type="submit" name="save" value="{if $info.role_id > 0}{tr}Update{/tr}{else}{tr}Create{/tr}{/if}" /> {if $info.role_id > 0} {smartlink ititle="New Role" pid=$info.p_id} {/if} {/form}{CODE} ...MORE TO COME... We close the BODY and page, using the following.{CODE()} </h1> {/strip}{CODE} | Noteswe have dedicated a lot of our time to tidy up our php, templates and css, which seems to be greatly appreciated by anyone who decides to delve into the guts of bitweaver.to maintain this high standard and make it easy for new developers to understand what is going on, we would like to ask you to stick to these few simple rules:
it would be a shame to see sloppy php / html code being reintroduced into this rather quite clean code again, after having tidied it up. How-ToHere are basic instructions on how to build your template, using Bitweaver standard Smarty tags.The BeginningFirstly, we want the template all indented correctly, but don't want the whitespace - so we use the {strip}...{/strip} tags to surround the template, from top to bottom.
Next, is the {bithelp} tag. this will hopefully be a link to online help docuemntation at some point. it is currenlty not maintained well, but will be important in the future.
Ok, now the fun begins. The first thing we want is an all-encapsulating < div> to help format the panel. We normally include a CSS class of the type of page and the same name as the package here, to help with per package look-and-feel.
HeaderWithin this ))((, we now start the header section of the page and place the title of the page within < h1> tags. We use the {tr}...{/tr} tags to translate text for different languages. </v></ctrl></alt>
BodyNext we open the BODY section of the page.
In this example, we have a navigation bar and set of error message that will only appear if editing content. We use the {formfeedback} tag to iterate through an array and present the information as a list.
Some templates rely on the use of solely {formfeedback} which is quite a clever function since it only displays information when it's handed information: no need to check for contents of the array:
TabsOk, more fun! We use Javascript tabs throughout Bitweaver to provide an intuitive and standardise navigation environment. The {jstabs} tag will surround all content on the page that will appear in separate tabs. If any information is to appear below, for every tab, it will be outside the closing tag. The {jstab} tag (notice the singular) begin an individual tab with title. We do not use {tr} tags around the title, as they are provided by the tag.
FormsWe use {form} tags to simplify and standardise the forms used in Bitweaver. The legend parameter provide a title to our form.
The following hidden parameters are used by the sorting and filtering components below. As a standard, we specify these early on in the form.
Next are the individual form inputs. This is our standard layout, using {formlabel}, {forminput}, and {formhelp} tags to simplify look-and-feel.
{formlabel}<label> is used to link a text filed to a particular input field using an id. in the above example, the label links to the input filed that has the description id.formlebel simplifies and standardises the use of <label for="" />. this should make the use of labels easier in bitweaver and should improve access for handicapped people since it allows the user to determine what text elements belong to what input fields. {forminput}the forminput simply inserts a div class around the input area with the correct class names. the reason why we use this, is that we can potentially exchange all div driven forms with tables and it should simplify upgrading to XFORMS in the future.SubmissionNext, is our SAVE button and closing the form. Similar to the form inputs. The {smartlink} tag is used to simplify the insertion of html links. originally created for the simple insertion of links in tables to create links for sorting tables.
...MORE TO COME... We close the BODY and page, using the following.
</label> |