We are in the midst of migrating our old workplace server to enterprise portal 6. In fact we should be going live within a forthnight. We decided to take advantage of the migration to change the look and feel of all of our internal applications. This turned out to be rather tedious and time consuming despite the fact that we already used style sheets. Of course there was the usual misuse of style sheets, but there were also the familiar cross platform/browser issues as described in earlier article and web logs. On top of that we wanted to get rid of the graphical buttons that we always needed to change (in multiple languages). So Dries and I were looking for a solution which would make things easier to implement if we wanted to change something again in the future.
We came up with three requirements:
• it should be cross browser/platform, which is harder than it would appear as things always look different on the different browsers, so a good compromise needed to be found.
• it should be easy to adapt when the look and feel needs to change
• it should be easy to adapt when texts in the buttons need to be changed
Why don't you use HTMLB buttons then, I hear you think. Well, there were/are circumstances where they didn't fully fit in with our requirements besides which we wanted to have a standard method across all (also non BSP) applications for future cross application changes.
*Two solutions *
After a lot of testing we came up with two solutions: textual and graphical buttons. Wait a sec, didn't we want to get rid of graphical buttons? Yes, we did, but sometimes they just look better. So we needed to find a solution for “generating” graphical buttons. And we found an easy solution without going “external”.
But let's first take a look at the textual solution.
*CSS *
The only thing that you need to define is a css stylesheet. It is best if this stylesheet is defined only once centrally. Otherwise if you specify the CSS in the BSP pages themselves, you need to change every BSP page everytime a change of layout is needed.
In this stylesheet you specify the following code for example :
.button, .button:visited {
font-family: sans-serif;
font-size: 8pt;
font-weight: bold;
padding: 0px 2px 0px 2px;
background-color: #66c !important;
border:outset #66c 2px;
color: white !important;
text-decoration: none !important;
}
.button:hover {
border:outset #66c 2px;
color:#F90 !important;
}
.button:active {
border: inset #66c 2px ;
color:#F90 !important;
}
I won't go into detail on all of this, if you need more info on CSS itself you can go to W3 Schools for example. The important thing to know is that you define a class button with 3 states.
You will notice this +!important + keyword. Details on this can be found at W3 schools too. We use it for compatibility reasons. Since Internet explorer doesn't understand this keyword we can specify things in order to make things have a similar appearance on the different browsers.
define a table with a link, so no classical href
put the middle gif as background in a table cell with the text (in this case ‘HELP') in it. We define some extra css for the mouse over effect.
put the right gif as background in a table cell
As an additional feature we've also made the texts, as such, dynamic via OTR. Thomas Jung covers this in this thomas.jung3/blog/2004/07/13/bsp-150-a-developer146s-journal-part-vii--dealing-with-multiple-languages-english-german-spanish-thai-and-polish if you need more info on this. Now it's up to you on how to implement this. You can make a BSP extension (see also one of the Thomas' thomas.jung3/blog/2004/07/06/bsp-150-a-developer146s-journal-part-vi--example-application-with-customer-bsp-extensions-and-design-2003-themes) for this. As an example, I defined methods of the application's class over here. </p>
<p> </p>
<p>The whole picture looks a bit like this: </p>
<p> </p>
<p>The css file </p>
<pre>td.but </pre>
<pre>{ </pre>
<pre>font-family:arial; </pre>
<pre>color:black; </pre>
<pre>font-weight:bold; </pre>
<pre>cursor:pointer </pre>
<pre>} </pre>
<pre>td.butover </pre>
<pre>{ </pre>
<pre>font-family:arial; </pre>
<pre>color:orange; </pre>
<pre>font-weight:bold; </pre>
<pre>cursor:pointer </pre>
<pre> </pre>
<pre>} </pre>
<pre> </pre>
<p>The BSP page </p>
<p> </p>
<pre><%=application->disp_button( text = 'HELP' url = 'javascript:help()')%></pre>
<p> </p>
<p>What we do over here is show the button for the otr text HELP. </p>
<p> </p>
<pre>method disp_button. </pre>
<pre>clear html. </pre>
<pre>data: button type string. </pre>
<pre>* retrieve the OTR text </pre>
<pre>button = get_tekst( text ). </pre>
<pre>* make the table html </pre>
<pre>concatenate '<table cellpadding="0" cellspacing="0" onclick="' url </pre>
<pre>'"><tr><td background="_img/left.gif" width="10" height="21"> </td>
<td background="_img/middle.gif" class="but" onMouseOver="this.className=''butover'';" onMouseOut="this.className=''but'';">' button </pre>
<pre>into html. </pre>
<pre>concatenate html '</td><td background="_img/right.gif" width="9"> </td></tr></table>' into html. </pre>
<pre>endmethod. </pre>
<pre> </pre>
<p> </p>
<p>The OTR itself needs to be retrieved </p>
<pre>method get_tekst . </pre>
<pre>data : fullalias TYPE string. </pre>
<pre>* my_class is an app var </pre>
<pre>concatenate my_class alias into fullalias. </pre>
<pre>translate fullalias to upper case. </pre>
<pre>system-call otr get_text_by_alias </pre>
<pre>language lang </pre>
<pre>id fullalias </pre>
<pre>nr '0001' </pre>
<pre>text into text. </pre>
<pre>* lang is an app var, which can be changed depending on the user logged in. </pre>
<pre>endmethod. </pre>
<pre> </pre>
<p> </p>
<p>*Conclusion *</p>
<p>As you can see yet again it's not really rocket science making dynamic buttons. The effort of investigating things pays off well aftwards when you need to change the look or content of the buttons. </p>
<p> </p>
<p> </p>
