CssBase - The source code for the component with sample code and tutorial @ finnrasmussen.dk

Navn : CssBase.php

Sample code, tutorial

Sådan benyttes komponenten CssBase klassen

Først skal du inkludere den fil der beskriver komponenten, som en klasse fil

<? require_once(HTML_PACKAGE_PATH.'/CssBase.php'); ?>

Dernæst kan du enten benytte komponenten som et taglib (statiske metoder):

<? CssBase::display($param1, $param2, $param3, ...); ?>

eller du kan lave en instance af komponenten og benytte metoderne direkte:

<? $object = new CssBase($param1, $param2, $param3, ...); print $object->getHtml(); ?>

PHP source code

Den fulde PHP kildekode for CssBase klassen

<?
/**
* @package base
* @see HTML_BASE_PAGE_PATH.'/CssBase.php'
* @copyright (c) http://Finn-Rasmussen.com
* @license http://Finn-Rasmussen.com/license/ myPHP License conditions
* @author http://Finn-Rasmussen.com
* @version 1.10
* @since 22-feb-2007
*/

/**
* The required files
*/
require_once(HTML_BASE_PAGE_PATH.'/Css.php');
require_once(HTML_BASE_UTIL_PATH.'/Images.php');

/**
* The CSS for the Base package
* Generates the Base CSS
* <code>
* Usage:
*   $css = new CssBase($href);
*   print $css->getHtml();
* Or:
*   CssBase::display($href);
* </code>
* @package base
*/

class CssBase extends Css {
    /**
     * Constructor
     * @param  String $href The url to the css filename (i.e. /css/my.css)
     */
    function CssBase($href='') {
        $this->Css($href!=''?$href:CSS_FILE_NAME_BASE);
    }

    /**
     * Get the class for the display:none
     * Note: This CSS class name is used when printing
     * @return array The array of CSS key/value pairs
     */
    function getPrinterStyle() {
        return array(
            CSS_NAME_STYLE_PROPERTY=>".".CSS_PRINTER,
            CSS_NAME_DISPLAY=>CSS_DISPLAY_NONE,
        );
    }

    /**
     * Get the class for the printer
     * @return String The CSS for the printer
     */
    function getMediaPrint() {
        $html  = $this->getStart("@media print");
        $html .= $this->getCssArray($this->getPrinterStyle());
        $html .= $this->getEnd();
        return $html;
    }

    /**
     * Returns the css Base components
     * @return String the complete css
     */
    function getCustom() {
        $html = '';
        $html .= $this->getHeader($this->getClassName());
        // The html tags
        $html .= $this->getTag('body',CSS_CANVAS_COLOR,CSS_CANVAS_BACKGROUND, CSS_FONT_FAMILY, CSS_FONT_SIZE, CSS_TEXT_ALIGN_LEFT, CSS_MARGIN_TOP, CSS_MARGIN_LEFT);
        $html .= $this->getTag('h1,h2,h3,h4,h5,h6,th,td,p,b,ul,li,pre,fieldset,legend',CSS_BODY_COLOR,CSS_BODY_BACKGROUND, CSS_FONT_FAMILY, CSS_FONT_SIZE, CSS_TEXT_ALIGN_LEFT);
        // Components
        $html .= $this->getComponent('',CSS_BODY_COLOR,CSS_BODY_BACKGROUND);
        $html .= $this->getComponent('.'.CSS_COLOR_HEADER ,CSS_COLOR_HEADER_COLOR  ,CSS_COLOR_HEADER_BACKGROUND);
        $html .= $this->getComponent('.'.CSS_COLOR_LIGHT  ,CSS_COLOR_LIGHT_COLOR   ,CSS_COLOR_LIGHT_BACKGROUND);
        $html .= $this->getComponent('.'.CSS_COLOR_DARK   ,CSS_COLOR_DARK_COLOR    ,CSS_COLOR_DARK_BACKGROUND);
        $html .= $this->getComponent('.'.CSS_LINK_COLOR,CSS_BODY_COLOR,CSS_BODY_BACKGROUND);
        $html .= $this->getComponent('.'.CSS_BODY,CSS_BODY_COLOR,CSS_BODY_BACKGROUND);
        // TODO used when maximize links are in action
        $html .= $this->getComponent('.'.CSS_XYZ,CSS_BODY_COLOR,CSS_NORMAL_XYZ);
        // Header, Alignment
        $html .= $this->getClass('.'.CSS_ARROW_HEADLINE,CSS_ARROW_HEADLINE_COLOR,CSS_ARROW_HEADLINE_BACKGROUND,CSS_ARROW_HEADLINE_WIDTH);
        $html .= $this->getClass('.'.CSS_ALIGN_LEFT  ,'','','','left');
        $html .= $this->getClass('.'.CSS_ALIGN_CENTER,'','','','center');
        $html .= $this->getClass('.'.CSS_ALIGN_RIGHT ,'','','','right');
        // TH should not wrap when sorting with image link
        $html .= $this->getSingle('.'.CSS_NO_WRAP ,'white-space','nowrap');

        // Legend/Fieldset TODO CSS_BORDER
        $html .= $this->getClass('.'.CSS_ONEPC  ,'','',CSS_1PC);
        $html .= $this->getClass('.'.CSS_ONEPX  ,'','',CSS_1PX);
        // Utils
        $html .= $this->getSingle('.'.CSS_FLOAT_LEFT, 'float', 'left');
        $html .= $this->getSingle('.'.CSS_FLOAT_NONE, 'float', 'none');
        $html .= $this->getSingle('.'.CSS_FLOAT_RIGHT,'float', 'right');
        $html .= $this->getSingle('.xTransparent', 'background', 'transparent');
        $html .= $this->getSingle('.'.CSS_HELP , 'cursor', CSS_CURSOR_HELP);
        $html .= $this->getHidden('.'.CSS_HIDDEN);
        $html .= $this->getHr(CSS_BODY_COLOR,CSS_BODY_BACKGROUND,CSS_1PX);
        $html .= $this->getWidth('.'.CSS_FILL_OUT  ,CSS_WIDTH_FILL_OUT);
        $html .= $this->getFieldset('.'.CSS_FIELDSET);
        $html .= $this->getLegend('.'.CSS_LEGEND);
        // The css, when printing
        $html .= $this->getMediaPrint();

        // Images
        $arrowBullit = new Images(IMAGE_ARROW_BULLIT);
        $arrowBullitDown = new Images(IMAGE_ARROW_BULLIT_DOWN);
        $arrowBullitSublevel = new Images(IMAGE_ARROW_BULLIT_SUBLEVEL);
        $arrowHeadline = new Images(IMAGE_ARROW_HEADLINE);
        $arrowBullitUp = new Images(IMAGE_ARROW_BULLIT_UP);
        // Lists
        $html .= $this->getLi('.AB,li' ,'circle',$arrowBullit->get('src'));
        $html .= $this->getLi('.ABD'   ,'square',$arrowBullitDown->get('src'));
        $html .= $this->getLi('.ABS'   ,'disc'  ,$arrowBullitSublevel->get('src'));
        $html .= $this->getLi('.AH'    ,'square',$arrowHeadline->get('src'));
        $html .= $this->getLi('.ABU'   ,'circle',$arrowBullitUp->get('src'));
        $html .= $this->getLi('.ABX'   ,'none'  ,CSS_STYLE_IMAGE_NONE);
        // Border / no border
        $html .= $this->getBorder('.'.CSS_BORDER,CSS_BORDER_COLOR,CSS_1PX);
        $html .= $this->getBorder('.'.CSS_NO_BORDER);

        return $html;
    }

    /**
     * Display html
     * <code>
     * Usage:
     *    CssBase::display($href);
     * </code>
     * @static
     * @param String $href, The url to the css file (i.e. /css/my.css)
     */
    function display($href='') {
        $html = new CssBase($href);
        $html->addHtml();
    }
}
?>

HTML source code

Den fulde HTML kildekode for CssBase klassen

<?
<style type="text/css">
/**
* Autocreated css cache file
* @description Cssbase
* @file /cache/css/finnrasmussen.dk-base.css
* @copyright (c) http://Finn-Rasmussen.com
* @author http://Finn-Rasmussen.com
* @date 17-May-2008 06:22:49
* @note The url(/images/filename.gif) must be located here
*/
body{color:#000;background-color:#ddd;font-family:verdana,"lucida sans unicode",lucida,"lucida sans",sans-serif;font-size:11px;text-align:left;margin-top:10px;margin-bottom:10px;margin-left:10px;margin-right:10px;}
h1,h2,h3,h4,h5,h6,th,td,p,b,ul,li,pre,fieldset,legend{color:#000;background-color:#fff;font-family:verdana,"lucida sans unicode",lucida,"lucida sans",sans-serif;font-size:11px;text-align:left;}
a:link,a:visited,a:active{color:#000;background-color:#fff;font-size:11px;font-weight:bold;text-decoration:underline;}
a:hover{color:#fff;background-color:#000;font-size:11px;font-weight:bold;text-decoration:underline;}
.baseColorHeader{color:#000;background-color:#aaa;}
a:link.baseColorHeader,a:visited.baseColorHeader,a:active.baseColorHeader{color:#000;background-color:#aaa;font-size:11px;font-weight:bold;text-decoration:underline;}
a:hover.baseColorHeader{color:#aaa;background-color:#000;font-size:11px;font-weight:bold;text-decoration:underline;}
img.baseColorHeader{color:#aaaaab;background-color:#aaa;border-style:none;}
.baseColorLight{color:#000;background-color:#ddd;}
a:link.baseColorLight,a:visited.baseColorLight,a:active.baseColorLight{color:#000;background-color:#ddd;font-size:11px;font-weight:bold;text-decoration:underline;}
a:hover.baseColorLight{color:#ddd;background-color:#000;font-size:11px;font-weight:bold;text-decoration:underline;}
img.baseColorLight{color:#ddddde;background-color:#ddd;border-style:none;}
.baseColorDark{color:#000;background-color:#ccc;}
a:link.baseColorDark,a:visited.baseColorDark,a:active.baseColorDark{color:#000;background-color:#ccc;font-size:11px;font-weight:bold;text-decoration:underline;}
a:hover.baseColorDark{color:#ccc;background-color:#000;font-size:11px;font-weight:bold;text-decoration:underline;}
img.baseColorDark{color:#cccccd;background-color:#ccc;border-style:none;}
.baseLinkColor{color:#000;background-color:#fff;}
a:link.baseLinkColor,a:visited.baseLinkColor,a:active.baseLinkColor{color:#000;background-color:#fff;font-size:11px;font-weight:bold;text-decoration:underline;}
a:hover.baseLinkColor{color:#fff;background-color:#000;font-size:11px;font-weight:bold;text-decoration:underline;}
img.baseLinkColor{color:#fffffe;background-color:#fff;border-style:none;}
.baseBody{color:#000;background-color:#fff;}
a:link.baseBody,a:visited.baseBody,a:active.baseBody{color:#000;background-color:#fff;font-size:11px;font-weight:bold;text-decoration:underline;}
a:hover.baseBody{color:#fff;background-color:#000;font-size:11px;font-weight:bold;text-decoration:underline;}
img.baseBody{color:#fffffe;background-color:#fff;border-style:none;}
.baseXys{color:#000;background-color:#ddd;}
a:link.baseXys,a:visited.baseXys,a:active.baseXys{color:#000;background-color:#ddd;font-size:11px;font-weight:bold;text-decoration:underline;}
a:hover.baseXys{color:#ddd;background-color:#000;font-size:11px;font-weight:bold;text-decoration:underline;}
img.baseXys{color:#ddddde;background-color:#ddd;border-style:none;}
.baseArrowHeader{color:#000;background-color:#f00;width:1%;}
.baseAlignLeft{text-align:left;}
.baseAlignCenter{text-align:center;}
.baseAlignRight{text-align:right;}
.baseNoWrap{white-space:nowrap;}
.baseOnepc{width:1%;}
.baseOnepx{width:1px;}
.baseFloatLeft{float:left;}
.baseFloatNone{float:none;}
.baseFloatRight{float:right;}
.xTransparent{background:transparent;}
.baseHelp{cursor:help;}
.baseHidden{position:relative;z-index:-1;visibility:hidden;}
hr{color:#000;background-color:#fff;height:1px;}
.baseFillOut{width:100%;cursor:help;}
.baseFieldset{padding:2px;border:#000 1px solid;border-top-color:#000;border-top-width:1px;border-top-style:solid;border-left-color:#000;border-left-width:1px;border-left-style:solid;border-right-color:#000;border-right-width:1px;border-right-style:solid;border-bottom-color:#000;border-bottom-width:1px;border-bottom-style:solid;}
.baseLegend{padding:2px;border:#000 1px solid;border-top-color:#000;border-top-width:1px;border-top-style:solid;border-left-color:#000;border-left-width:1px;border-left-style:solid;border-right-color:#000;border-right-width:1px;border-right-style:solid;border-bottom-color:#000;border-bottom-width:1px;border-bottom-style:solid;}
@media print{.basePrinter{display:none;}
}
.AB,li{list-style-type:circle;list-style-image:url('/images/arrow-bullit.gif');}
.ABD{list-style-type:square;list-style-image:url('/images/arrow-bullit-down.gif');}
.ABS{list-style-type:disc;list-style-image:url('/images/arrow-bullit-sublevel.gif');}
.AH{list-style-type:square;list-style-image:url('/images/arrow-headline.gif');}
.ABU{list-style-type:circle;list-style-image:url('/images/arrow-bullit-up.gif');}
.ABX{list-style-type:none;list-style-image:none;}
.baseBorder{border:#000 1px solid;border-top-color:#000;border-top-width:1px;border-top-style:solid;border-left-color:#000;border-left-width:1px;border-left-style:solid;border-right-color:#000;border-right-width:1px;border-right-style:solid;border-bottom-color:#000;border-bottom-width:1px;border-bottom-style:solid;}
.baseNoBorder{border:#000 0px solid;border-top-color:#000;border-top-width:0px;border-top-style:solid;border-left-color:#000;border-left-width:0px;border-left-style:solid;border-right-color:#000;border-right-width:0px;border-right-style:solid;border-bottom-color:#000;border-bottom-width:0px;border-bottom-style:solid;}

</style>

?>

Class methods

Her er 'klasse metoderne' for CssBase klassen:

cssbase

getprinterstyle

getmediaprint

getcustom

display

object

getclassname

getmsg

addhtml

gethtml

tostring

getcachefilename

save

content

html

setobject

set

get

getattribute

gettag

add

getsizeof

getelement

getelements

gettoogle

getmaximize

getminimize

newtriangle

showsource

css

getlink

getlinknormal

getlinkhover

getlinkimage

getimage

getcomponent

getborderline

getbordersingle

getborder

gettab

gettabactive

gettabbody

getbutton

getclass

getli

getsingle

getcssarray

gethidden

gethr

getwidth

getstart

getcss

getfieldset

getlegend

getselect

getend

getheader

getinline

Navn : CssBase.php

Sample code, tutorial

Parent html

PHP source code

HTML source code

Class methods

Object vars