{maketoc}
!Notes
we 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:

* please maintain all __indenting__ in the template files. i know everyone has different ideas of what the real way to do intenting is, but the bitweaver way is to indent using tabs, every nested tag is indented and smarty block commands are treated like html tags in terms of indenting. if you are worried about excess __white space__, it __is stripped__ using the {strip} tags in virtually all templates.
* please try to __reuse css classes__. try to make yourself familiar with how classes are used in bw by viewing some template files and by visiting pages such as ThemeTutorial and CssSchema. we have been working with bitweaver for quite some time now, and there has been virtually no occasions where we've had to introduce new classes. hell, we even have __individual classes for every single wiki page__.
* if you should feel that you need more classes to get the styling you require, you might want to consider __creating a custom theme__ where you store your custom template files.
* please try not to add definitions to __base.css__ unless you've tested the changes with all themes that use it. this file is used by several other themes and other users might not appreciate your custom settings.
* this point i cannot stress enough: __check your html code on w3c__! if you think it's tedious, use a browser like firefox and use the web developers extension. better yet, use opera, and hit <Alt><Ctrl><v>, which will upload the file to w3c and get it checked (since it uploads the file automatically, you can even use a local URL). the link to the validator is: [http://validator.w3.org/]

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-To
Here are basic instructions on how to build your template, using Bitweaver standard Smarty tags.

!!The Beginning
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 source=Html4Strict}{strip}{code}

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. {code source=Html4Strict}<div class="floaticon">{bithelp}</div>{code}

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. {code source=Html4Strict}<div class="admin galaxia">{code}

!!Header
Within this __<div>__, 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.{code source=Html4Strict}<div class="header">
<h1>{tr}Admin process roles{/tr}</h1>
</div>{code}

!!Body
Next we open the BODY section of the page.{code source=Html4Strict}<div class="body">{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 source=Html4Strict}{if $pid > 0}
{ include file="bitpackage:Galaxia/process_nav.tpl"}
{if count($errors) > 0}
<div class="error">
{tr}This process is invalid{/tr}:<br />
{formfeedback hash=$errors}
</div>
{/if}
{/if}{code}
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:{code source=Html4Strict}{formfeedback hash=$feedback}{code}

!!!Tabs
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 source=Html4Strict}{jstabs}
{jstab title="Create / Edit Role"}{code}

!!!Forms
We use __{form}__ tags to simplify and standardise the forms used in Bitweaver. The ''legend'' parameter provide a title to our form.{code source=Html4Strict}{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 source=Html4Strict} <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 source=Html4Strict} <div class="row">
{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}
</div>{code}

!!!!{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=""></label>. 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.

!!!!Submission
Next, 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. {code source=Html4Strict} <div class="row submit">
<input type="submit" name="save" value="{if $info.role_id > 0}{tr}Update{/tr}{else}{tr}Create{/tr}{/if}" />
{if $info.role_id > 0}
&nbsp; {smartlink ititle="New Role" pid=$info.p_id}
{/if}
</div>
{/form}{code}

...MORE TO COME...

We close the BODY and page, using the following.{code source=Html4Strict} </div><!-- end .body -->
</div><!-- end .galaxia -->
{/strip}{code}

Page History
Date/CommentUserIPVersion
09 Jun 2010 (09:12 UTC)
Tochinet193.191.209.24413
Current • Source
Tochinet193.191.209.24411
View • Compare • Difference • Source
Tochinet193.191.209.24410
View • Compare • Difference • Source
xing194.152.164.459
View • Compare • Difference • Source
xing194.152.164.458
View • Compare • Difference • Source
xing194.152.164.457
View • Compare • Difference • Source
Stephan Borg218.214.1.1136
View • Compare • Difference • Source
xing194.152.164.451
View • Compare • Difference • Source