Archive

Archive for the ‘UI’ Category

Modular CSS with PHP

August 1st, 2008
Comments Off

As a web developer, you are often told to keep the presentation layer separate from the logic, data, etc… It becomes frustrating to implement good CSS, especially in modular, OO programs. Many developers bang their heads against their desk with CSS implementations. This has been a frustration for me as well. There are some great ways to keep your CSS contained with your program and still keep it flexible.

A PHP class, in my mind, should be something that can be independently deployed in ANY application, unless it is application specific. There are cases when the code is application specific or there is no need for the developer to control any aspect of the visual implementation. Either way, you want to try and build it so it doesn’t depend on accessing outside assets directly. For example, you want to try and keep your class from accessing external constants, globals, even styles. A more flexible exception to this is environment variables. Ideally, the value of $_SERVER, $_ENV or other Apache variables, should be passed in to your class, however, sometimes it could make more sense to access them directly from inside the class. This usually isn’t a problem because the value normally exists.

Styles and other visual elements become a challenge because they don’t exist in the PHP environment and you can’t feasibly pass in every possible visual element like this:

1
2
3
4
5
6
7
8
9
10
11
12
$thingy = new Widget(
    $var_1,
    $var_2,
    '#000044',
    'center',
    'bold',
    'right',
    'solid 2px #eeeeee',
    'Arial, Verdana',
    '14px',
    '16px'
);

This is just unacceptable and makes for a sloppy API to your program. Plus, you’ll either find yourself adding more arguments as you need more style elements and/or you’ll find that many of the values will always be the same, causing you to pass arguments for nothing.

I will often use an approach that allows me to define the styles in the HEAD of the document, but will still allow me to customize styles at a class level. The “C” in CSS (cascading style sheets) is often ignored. The way they cascade and inherit values can be very useful for a developer if used properly. If you define a DIV tag and give it a class, it will look for that defined class as below:

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
.my_style_class
{
    color:#ffffff;
    background-color: #000000;
}
</style>

......

<div class="my_style_class">HTML Content</div>

If you define the style attribute for the element, values in the style attribute override those in the class:

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
.my_style_class
{
    color:#ffffff;
    background-color: #000000;
}
</style>

......

<div class="my_style_class" style="color: #ff0000; background-color: #ffffff;">HTML Content</div>

The benefits of this approach can be utilized programmaticially to accomplish the same thing and offer the flexibility you need within your application. The way you do this is to create default styles in your constructor, and set them to an emtpy string:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class My_Class()
{
    // make style available to whole class
    private $style;

    function __construct()
    {
        // set default styles representing the class equivalent
        $this->style = new stdClass();
        $this->style->outer_box = '';
        $this->style->control_box = '';
        $this->style->top_html_section = '';
        $this->style->bottom_html_section = '';
    }
}

Adding a method to set these values you can set the style values to any CSS allowable string:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
 * Overwrite default style values
 * 
 * @param STRING    css_class   string name of config value to overwrite (corresponds to css class for that item)
 * @param STRING    style       value to overwrite configuration
 *             
 * @return BOOLEAN  success of overwrite
*/

public function set_Style($css_class, $style)
{
    $success = true;
    if(isset($this->style->{$css_class}))
    {
        $this->style->{$css_class} = $style;
    }
    else
    {
        $success = false;
    }

    return $success;
}

Internal to your class, you then fill HTML style attributes with the internal class values and you also assign them a class by the same name:

1
2
3
4
5
6
7
8
9
10
11
12
13
public function display_Html()
{
    $html = '
        </p><div class="outer_box">
            <div class="control_box">Control buttons</div>
            <div class="top_html_section">Top HTML</div>
            HTML Content
            <div class="bottom_html_section">Bottom HTML</div>
        </div>
    '
;

    return $html;
}

Bringing this all together, this is how it would be implemented. First the PHP class.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
class My_Class()
{
    // make style available to whole class
    private $style;

    function __construct()
    {
        // set default styles representing the class equivalent
        $this->style = new stdClass();
        $this->style->outer_box = '';
        $this->style->control_box = '';
        $this->style->top_html_section = '';
        $this->style->bottom_html_section = '';
    }

    /**
     * Overwrite default style values
     *  
     * @param STRING    css_class   string name of config value to overwrite (corresponds to css class for that item)
     * @param STRING    style       value to overwrite configuration
     *
     * @return BOOLEAN  success of overwrite
    */

    public function set_Style($css_class, $style)
    {
        $success = true;

        if(isset($this->style->{$css_class}))
        {
            $this->style->{$css_class} = $style;
        }
        else
        {
            $success = false;
        }

        return $success;
    }

    public function display_Html()
    {
        $html = '
            <div class="outer_box">
                <div class="control_box">Control buttons</div>
                <div class="top_html_section">Top HTML</div>
                HTML Content
                <div class="bottom_html_section">Bottom HTML</div>
            </div>
        '
;

        return $html;
    }
}

Then the actual PHP page that handles the display:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html>
<head>
<style type="text/css">
.outer_box
{
    color:#ffffff;
}
.control_box
{
    color:#ffffff;
}
.top_html_section
{
    color:#ffffff;
}
.bottom_html_section
{
    color:#ffffff;
}
</style>
</head>
<body>

<?php
$new = new My_Class();
$new->set_Style('top_html_section', 'color: #000000; font-size: 16px;');
$new->set_Style('bottom_html_section', 'color: #000000; font-size: 16px;');

echo $new->display_HTML();
?>

</body>
</html>

Now by default, the ‘outer_box’ and ‘control_box’ style classes will be applied to their respective elements. However, ‘top_html_section’ and ‘bottom_html_section’ will now be overwritten with the style attribute with larger black text from the $new->set_Style() method call.

You now have the ability to control your styles via style classes, style attributes or a combination of both, allowing for independent use of the PHP class within your program if necessary.

PHP, UI , ,

CSS Centering

July 8th, 2008
Comments Off

Centering content using CSS can be challenging. Depending on the support for different versions of CSS and conflicting attributes, it may seem impossible to get it working properly.

After some serious web searching, I came up with a combination of CSS attributes that when applied to a couple of div’s, work beautifully. I can’t promise that it will work in ALL browsers, but it’s worked great for me so far. I also wanted a way to abstract the ability to center the content into something that I could just call using PHP (not good for all situations, but solved my problem), so it has been put into a function for ease of use.

Static HTML implementation:

1
2
3
4
5
<div style="margin-top: 100px; text-align: center; position: absolute; left: 0px; width: 100%; height: 1px; overflow: visible; display: block;">
    <div style="width: 700px; margin-left: -350px; position: absolute; left: 50%; text-align: center;">
        Content goes here...
    </div>
</div>

PHP implementation:

1
2
3
4
5
6
7
8
9
10
11
12
13
function css_Center($html, $width_of_content, $top_margin=0, $h_offset_percent=50)
{
    $center_html = '';
   
    $margin_left = ceil($width_of_content * .5);
   
    $outside_layer_style = 'margin-top: ' . $top_margin . 'px; text-align: center; position: absolute; left: 0px; width: 100%; height: 1px; overflow: visible; display: block;';
    $centering_layer_style = 'width: ' . $width_of_content . 'px; margin-left: -' . $margin_left . 'px; position: absolute; left: ' . $h_offset_percent . '%; text-align: center;';
   
    $center_html .= '<div style="' . $outside_layer_style . '"><div style="' . $centering_layer_style . '">' . $html . '</div></div>';
   
    return $center_html;
}

Obviously, in a real implementation, it would be ideal to use external style sheets and reference a CSS class inline.

UI ,

DHTML is not AJAX!

March 7th, 2008
Comments Off

AJAX seems to be getting grossly confused with interactive DHTML(JavaScript, DOM, CSS and HTML). This confusion has got to stop. It’s making me dizzy!

Okay, so I’m looking at this cool feature on the web. The CEO/CTO comes up behind me and starts looking too. “No problem”, I think to myself. Then he starts going off about how AJAX is cool (just because it says AJAX on the page), and how we should use it for something and how it’s such a great technology and that people have barely scratched the surface. Whoah dude… calm down! Something similar has happened to me a handful of times since then, all by very competent technology persons. 

When did really creative JavaScript work suddenly get mistaken for AJAX? It’s very clear to me that what AJAX actually is has been a fairly fuzzy picture for most people. Let me make this as clear as I possibly can. 

AJAX stands for Asynchronous JavaScript And XML. No more, no less. This denotes the ability to use JavaScript, with XML as the communication protocol, to send and retrieve data from another location (i.e. server) arbitrarily, as needed. This communication happens over an HTTP protocol. That’s it, that is AJAX. There really isn’t a whole lot more to it. Yeah, you can monitor your connections, have fancy functions that handle communication, process data in a particular way. Pure AJAX, according to the name would also ONLY use XML for communcation. However, it has been accepted to use plain strings and name-value pairs as well, when they were more suitable. I am okay with this as this still refers to the process of communication and the added flexibility is good.

What gets under my collar is when people start looking at all that flashy, dynamic interaction and call it AJAX. Certainly, AJAX has made it possible to manipulate data and objects in a MUCH more dynamic way. You are no longer stuck with static page data on your website, giving you much more to work with. However, calling this AJAX would be like calling it “SOAP”, or “XMLRPC”, or for the truly technology impaired, “ethernet”, just because it came through that little wire in the back of the computer. Perhaps you could could do what my 5 year old does and just call every web page you look at “Firefox” (insert desired browser name) just because you are in that program when you see it (I have actually had clients do this, so don’t laugh too hard). 

What needs to be made clear is the distinction between DHTML and AJAX. AJAX is simply another data layer which provides information. DHTML is ability to take that information and do all kinds of flashy, cool and very useful things with it. DHTML and AJAX can actually be used without the other. 

So, next time you see a very cool web application that is very visually impressive, make sure to give credit where credit is due. Give props to his ability to use AJAX, but appreciate his ability to make it useful and interactive. Understand the difference.

JavaScript, UI , ,



Sponsored Links



agile ajax black hat Cake PHP centering clifford stoll css cuckoo's egg energy energy drinks espionage flash Flex hacker jquery modular MVC objects optimization performance PHP script timer smarty smarty templates stylesheet up-time uptime variable scope web 2.0 Zend Framework