July 11, 2004

CSS, Reusability and MachII

One of the arguments to present to move to MachII as a way of developing for a team. Is the aspect of reusability.

Mach II, and CSS fit exceptionately nicely together. Why? Simply Page Views.

Let me elaborate. Let's say your page has three column layout -- the navigation, the entry, and the sidebar. What one can do is have a view set up for each of the elements. IE Navigation.cfm, Entry.cfm, and Sidebar.cfm

So using css layout allows you just to change the appearance of the storefront, not the inner working inside.

So your style sheet looks like the following:

body {
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
margin: 0;
padding: 0;
background:rgb(95%, 95%, 95%);
color: black;
}
h1 {
font-size:200%;
text-transform:lowercase;
letter-spacing:3px;
margin:0;
padding:0.66em 0 0.33em 16%;
background:rgb(85%,85%,70%);
}
#navigation{
position:absolute;
font-size:11px;
top: 3em;
left: 0;
width: 12.5%;
border: 1px solid black;
z-index:10;
}
#navigation a{
display:block;
padding:4px 8px;
margin:0;
text-align:right;
border-top:1px solid gray;
}
#navigation a:hover{
background:#FB9;
}
#navigation h4{
background: rgb(33%,33%,33%);
color:white;
text-align:center;
margin:0;
padding:0.25em 0 0.125em 0;
}
#entry{
margin:0 20% 1em 20%;
padding:0;
}
#sidebar{
position:absolute;
top:4em;
right:0;
width:20%;
font-size:10px;
z-index:11;
}
#sidebar h4{
background: rgb(70%,70%,55%);
color:black;
margin:0;
padding:0.25em 0 0 0.5em;
}
#sidebar a{
display:block;
padding:8px 0 2px 10px;
margin:0;
border-top:1px solid rgb(85%, 85%, 85%);
}
#sidebar a:hover {
background:rgb(85%,85%,85%);
}

Therefore Navigation.cfm looks like

<div id="Navigation">
<p> <a href="./index.cfm?event=home" title="AccessKey: h" accesskey="h">Home</a> <br />
<a href="./index.cfm?event=news" title="AccessKey: f" accesskey="f">faq</a> <br />
<a href="./index.cfm?event=business" title="AccessKey: r" accesskey="r">resources</a> <br />
<a href="./index.cfm?event=techologists" title="AccessKey: a" accesskey="a">about</a></p>
</div>

And your Entry.cfm view would look like

<div id="entry">
<p>The norm of reciprocity is the human tendency to respond to the actions of others with similar actions. If we are treated with contention and distrust, we tend to treat others with contention or distruct. If we are treated by someone with a warm friendly manner, we tend to treat others in a warm friendly manner.</p>

<p>Hostile interactions evolve out of one's tendency to take an exaggerated view of others' perceived hostility or unreasonable behavior. Then the exaggeration causes one to reciprocate with negative behavior. These hostile interactions end up being a self-fulfilling prophecy with each side behaving equally negatively.</p>

<p>Some triggers of this behavior are Naive realism, where people tend to assume that their view of the world reflects the reality of the world. Confirmatory bias is another trigger where we seek to confirm our beliefs or to find flaws. Also accuse bias is another scenario where someone intentionally does one harm, then it is human nature to hold the party responsible for a long time. On the flip side of things, excuser bias is the tendency to focus on factors outside of our control, while turning a blind eye to factors within our control. </p>

<p>Cooperative interactions is triggered by people's perceptions of fairness, the ability to realize that reasonable people will come to different conclusions, (many ways to skin a cat), the ability to accept responsibility for problems, and finally the ability that you don't blame others for the problem exclusively. </p>
</div>

And finally the Sidebar.cfm view would look like

<div id="sidebar">
<a target="_blank" title="A architect's view" href="http://www.corfield.org/blog/">Sean Corfield</a><br />
<a target="_blank" title="Raymond Camden" href="http://www.camdenfamily.com/morpheus/blog/">Raymond Camden</a><br />
<a target="_blank" title="Steve Nelson" href="http://steve.secretagents.com/index.cfm?fuseaction=fuseblog.MainPage">Steve Nelson</a><br />

</div>

So then in Mach-ii the event handlers look like

<event-handler event="home" access="public">
<view-page name="Navigation" />
<view-page name="Entry" />
<view-page name="SiteBar" />
</event-handler>

And then the page views look like:

<page-view name="Navigation" page="/views/Navigation.cfm" />
<page-view name="Entry" page="/views/Entry.cfm" />
<page-view name="SiteBar" page="/views/SiteBar.cfm" />

Thanks to Dave for enlightenment here.
Posted by Elyse at July 11, 2004 9:34 PM | TrackBack