Class for all kinds of HTML output

[SpectreNectar]

Hi, I'd like some feedback on this class I wrote for easing output in general:

 

http://www.recursive.dk

 

Thank you

[thewooleymammoth]

mmm sorry but i just dont see what advantage this has too:

<?php
     echo "
              <table>
                 <tr>
                     <td>
                           some stuff
                     </td>
                </tr>
              </table>
             ";
?>

 

and the page doesnt really explain. it just says that it cleaner somehow.

[SpectreNectar]

Ok, try this example:

 

<?php

require_once("htmlist.php");

//Prepare some HTML content
$ul = array(
	"<ul>",
	array(
		"<li>One</li>",
		"<li>Two</li>",
		"<li>Three</li>"
	),
	"</ul>"
);

//Create a new list using the content array
$a = new HTMList($ul);

//Insert content at the beginning
$a -> add_before("<span>As easy as:</span><br />");

//Using labeled content
$a -> add_after(array("footnote"=>array("<i>This goes after everything else.</i>")));

//Add a div around "footnote" and call it wrapper
$a -> add_around("<div>", "</div>", "footnote", "wrapper");


//Prepare some CSS
$css = array(
	"div {",
	array(
		"background: #ff0080;"
	),
	"}"
);

//Make a new HTMList with it
$b = new HTMList();
$b -> add_css_before($css);

//Add the obj with the CSS to our first obj
$a -> add_before($b);

//Debug:
//print_r($a);

//Final output
$a -> str(true);

/*
	<style>

		div {
			background: #ff0080;
		}

	</style>
	<span>As easy as:</span><br />
	<ul>
		<li>One</li>
		<li>Two</li>
		<li>Three</li>
	</ul>
	<div>
		<i>This goes after everything else.</i>
	</div>
*/


?>

[thewooleymammoth]

Its cool, and im sure it took a while to write. But i dont know if a lot of people will use it because its alot easier and less complex to just write out a paragraph of html...

 

i mean, look at your example vs.

<style>

		div {
			background: #ff0080;
		}

	</style>
	<span>As easy as:</span><br />
	<ul>
		<li>One</li>
		<li>Two</li>
		<li>Three</li>
	</ul>
	<div>
		<i>This goes after everything else.</i>
	</div>

your class would require a lot of thinking, arrays, classes, #of code lines (i like to use as few as possible), syntax etc..  Where simple html is exactly that, simple. Not to say that people wont use it, i just dont think it will explode.

 

as for the class, it seems pretty cool and well written, but there is one thing i would change. for the css method, couldnt you make it so that the brackets are added automatically?

$css = array(
	"div {",
	array(
		"background: #ff0080;"
	),
	"}"
);
// could be
$css = array(
	array(
                        "div",
		"background: #ff0080;",
                        "border: 1px solid green;"
	),
               array(
                       "#specific_div",
                       "background: white;"
               )
  );

 

and just use the first element in the array to start the block.

 

Also i think you should change your site colors a little, its kinda hard to read.

 

[SpectreNectar]

"easier and less complex to just write out a paragraph of html"

 

Ok, but this class only start to make sense when your dealing with dynamic content. Consider these examples:

You have a breadcrumb div at the top of the page. Later on you decide to add in some content. But you already echoed out the breadcrumb. How do you change it without storing it somewhere along the way so that you can change it?

Or wait I can come up with an even better example: You decide to add an external javascript or page title as the very last thing. These things wont be a problem if you use this class.

 

 

 

I like the idea with the css function, but I think it goes against the structure and purpose of the class. Right now I'm trying to think of a way to include a helper function instead though, would be pretty sweet, but it wouldn't be possible to make one liners like this:

 

div { font-size: 0.8em; font-style: italic; }

 

What colors do you find is hard to read? The gray ones?

[iblood]

hmmm..

I haven't check you class yet..

but in your example,

I guess it would be bette if you have it like this instead. Example

$html = new Class();

$attrib['class'] = 'classname';
$attrib['id'] = 'idname';
$attrib['style'] = 'color:#000';
$html->ul->li('xxxx',$attrib);
$html->ul->li('yyyy');

/*
OUtPUT:
<ul>
      <li id="idname" class="classname" style="color#000">xxx</li>
      <li>yyyy</li>
</ul>
*/

it's much more cleaner and we might end up using it instead of the one you did and using arrays..ins unconventional...

we'd rather

echo '
               <ul>
		<li>One</li>
		<li>Two</li>
		<li>Three</li>
	</ul>
';

much cleaner and much understandable..

 

the sample I posted is just a sample idea for implementation,.If you want to use it, then do the coding/processes LOL,

And to think of it, That gave me an idea LOL,hmmmmmmmmmmmmm

[Philip]

"easier and less complex to just write out a paragraph of html"

 

Ok, but this class only start to make sense when your dealing with dynamic content. Consider these examples:

You have a breadcrumb div at the top of the page. Later on you decide to add in some content. But you already echoed out the breadcrumb. How do you change it without storing it somewhere along the way so that you can change it?

Or wait I can come up with an even better example: You decide to add an external javascript or page title as the very last thing. These things wont be a problem if you use this class.

If you don't know the structure/content of the page before/while you are building the page, that isn't very good code design IMO. Gather the info you need, and then build the page data

 

I like the idea with the css function, but I think it goes against the structure and purpose of the class. Right now I'm trying to think of a way to include a helper function instead though, would be pretty sweet, but it wouldn't be possible to make one liners like this:

 

div { font-size: 0.8em; font-style: italic; }

Personally, I'd do it as an associative array:

$css = array(
'div' => array(
	'background'	=>	'#ff0080',
	'border'	=>	'1px solid green',
),
'#specific_div' => array(
	'background'	=>	'white',
)
);

 

But that is just me. Also, why not have your class compress the CSS? It's not like the human is going to read it after it goes through your class.

 

What colors do you find is hard to read? The gray ones?

 

Typically it isn't good to have lighter colors on a dark background. The main ones that I have a problem with are your code examples.  Especially the greens.

 

[thewooleymammoth]

"easier and less complex to just write out a paragraph of html"

 

Ok, but this class only start to make sense when your dealing with dynamic content. Consider these examples:

You have a breadcrumb div at the top of the page. Later on you decide to add in some content. But you already echoed out the breadcrumb. How do you change it without storing it somewhere along the way so that you can change it?

Or wait I can come up with an even better example: You decide to add an external javascript or page title as the very last thing. These things wont be a problem if you use this class.

 

 

 

I like the idea with the css function, but I think it goes against the structure and purpose of the class. Right now I'm trying to think of a way to include a helper function instead though, would be pretty sweet, but it wouldn't be possible to make one liners like this:

 

div { font-size: 0.8em; font-style: italic; }

 

What colors do you find is hard to read? The gray ones?

 

Maybe i am mis-understanding... but if i decide later that i want to add JavaScript to the page i just scroll up and do it...? same with breadcrumbs...? besides, if someone else were breaking down your code and trying to decipher whats going on, it would be really hard to scroll through the whole page to find where you added what in if you were just adding them in whatever order they came into your head.

 

also i like that associative way as well for the css. and i dont see why it wouldnt be possible to have one liners in there either way

<?php
$css = array(
'div' => array(
	'background'	=>	'#ff0080',
	'border'	=>	'1px solid green',
),
'#specific_div' => array(
	'background'	=>	'white',
)
);
function css_compile($css)
{
   foreach($css as $resource=>$block)
   {
       $str.=$resource." {";
       foreach($block as $prop=>$val)
       {
           $str.=$prop.": ".$val.";";
       }
       $str.="}"
   }
   return $str;
}
?>

[SpectreNectar]

iblood:

 

"I guess it would be bette if you have it like this instead"

I'm not out to reinvent XML. I see how it would be convenient to be able to grab any html element by it's name, but actually you can do something similar with my class:

 

$content = array(
"span1" => <span class="someclass">something</span>",
"ul1_in" => "<ul>",
"ul1" => array(
	"li1" => "<li>replace this</li>"
),
"ul1_out" => "<ul>",
);


$html = new HTMList($content);
$html -> sub("ul1") -> sub("li1") -> set("<li>with this</li>")

$html -> str(true);

 

Not quite as good as if your example was possible, but maybe something similar would be possible - now you made me think.

 

 

 

KingPhilip:

 

"If you don't know the structure/content of the page before/while you are building the page..."

I would agree in most cases, but I have been using this class to work on some pretty dynamic sites and I personally found it helpful with them.

I'm including css relevant to a design that get's loaded in when it gets loaded in rather than in the header - I'm building head section / design / content in their seperate files and then work on them as I want afterwards in a very easy to manage form - oh look now you gone and got me all exited - but anyway, all I'm saying is that it makes thing less strict, for whomever may want that.

 

"It's not like the human is going to read it after it goes through your class"

Part of the idea behind this class is to make indented, easily readable source code for your page. If you ment something differently please help me understand.

 

"lighter colors"

Ok

 

 

thewooleymammoth:

"but if i decide later that i want to add JavaScript to the page i just scroll up and do it...?"

 

Me too, only I find it nice to be able to only include the javascript I need with the content I'm including. OK, so maybe there's ways to do this without my class but I find it convenient to do it like my class suggests. I haven't come up with the best examples (namely have been using static content to simplify things).

 

The whole CSS discussion is interesting yes, but the purpose of the class isn't to automate content generation, it is to generate content differently - how you want it to be. You can use whatever code structure you choose, the only rules are that a sub array indents and a string starts with tabs and ends with a newline.