Posts Tagged ‘html’

Redfruits uses Renders to ‘render’ the pages (or others objects) into HTML. Redfruitsh has a default render called ADDefaultRender.

You can create a render from zero, or better to extend the default render. The ADWordpressRender is the more successfully render of the Redfruits’ renders.

For example, with redfruits, you can define a form in this way:

<?php
require_once(REDFRUITS_PATH.'gui/ADCoreGui.php');
$form = new ADForm();
$form->add(new ADLabeledField('Firts name:', new ADTextField('first_name', '', 20, 40)));
$form->add(new ADLabeledField('Last name:', new ADTextField('last_name', '', 20, 40)));
$form->add(new ADSubmit('save', 'save'));

echo $form;
echo $form->render('ADWordpressRender');
?>

Redfruits renders this example in two different formats, as you can see in the next piece of html code:

Default render:

<form  method="post">
<label  for="first_name">Firts name:</label>
<input type="text" id="first_name" name="first_name" value="" size="20" maxlength="40"/>
<label  for="last_name">Last name:</label>
<input type="text" id="last_name" name="last_name" value="" size="20" maxlength="40"/>
<input type="submit" id="save" name="save" value="save"/>
</form>
<div class="wrap"><form  name="frm" id="internalId_0" method="post">

WordPressRender:

<div class="clear"></div>
<table class="form-table">
<tr valign="top">
<th scope="row"><label  for="first_name">Firts name:</label>

</td>
<td><input type="text" id="first_name" name="first_name" value="" size="20" maxlength="40"/></td>
</tr>
<tr valign="top">
<th scope="row"><label  for="last_name">Last name:</label>
</td>
<td><input type="text" id="last_name" name="last_name" value="" size="20" maxlength="40"/></td>
</tr>
</table>

<p class="submit"><input type="submit" id="save" class="button-primary" name="save" value="save"/></p>
</form>
</div>

If you have a web site create with Redfruits, you can change its look by making others renders, or you can create a plugin for WordPress reusing your code.
In next posts we see how to create a WordPress’ plugin with Redfruits, and then, we can see the ‘power’ of the Redfruits’ render for WordPress.

You can see an example in this successfully plugin called TWPCTree. This plugin has a widget to show category trees for custom taxonomies, one of the new features in WordPress 3.0.

Thats’ all for now!!!

No problem. RedFruits has an Object called ADPage. This object allows to create HTML pages and of course page layouts.

How RedFruits implements layouts?

It’s so simple, please read the next example:

//
//FILE: AdminLayout.class.php
//
require_once(REDFRUITS_PATH.'redfruits/gui/ADCoreGui.php');

class AdminLayout extends ADPAge
{
	function __construct($title = 'Admin layout')
	{
		parent::__construct($title);
		$this->addCssPath('layout.css');
		$header = $this->add(new ADLayer('header'));
		$header->add($this->getHeader());
		$bodyContent = $this->add(new ADLayer('body-content'));
		$leftMenu = $bodyContent->add(new ADLayer('left-menu'));
		$leftMenu->add($this->getLeftMenu());
		$content = $bodyContent->add(new ADLayer('main-content'));
		$content->add($this->getContent());
		$footer = $this->add(new ADLayer('footer'));
		$footer->add($this->getFooter());
	}

	function getHeader()
	{
		return new ADTitle1($this->getTitle());
	}

	function getLeftMenu()
	{
		$ul = new ADUList();
		$postMnu = $ul->add(new ADContainer());
		$postMnu->add('Posts');
		$postMnu = $postMnu->add(new ADUList('mnu_posts'));
		$postMnu->add(new ADLink('posts.php', 'posts'));
		$postMnu->add(new ADLink('new_post.php', 'new post'));

		$pagesMnu = $ul->add(new ADContainer());
		$pagesMnu->add('Pages');
		$pagesMnu = $pagesMnu->add(new ADUList('mnu_pages'));
		$pagesMnu->add(new ADLink('pages.php', 'pages'));
		$pagesMnu->add(new ADLink('new_page.php', 'new page'));
		return $ul;
	}

	function getContent()
	{
		return 'content';
	}

	function getFooter()
	{
		return '2010 &copy; RedFruits';
	}
}

In this code we have defined a PHP class that extends the redfruits’ class called ADPage and It has four ‘get’ functions: getHeader, getLeftMenu, getContent and getFooter.

Now the simple way to make admin pages for this web sites is to write classes like this:

require_once('AdminLayout.class.php');
class PostEdit extends AdminLayout
{
	function __construct()
	{
		parent::__construct();
	}

	function getContent()
	{
		$w = new ADContainer();
		$w->add(new ADTitle2('Post Edit'));
		$form = $w->add(new ADForm());
		$form->add(new ADHiddenField('post_id'));
		$form->add(new ADLabel('Title:', 'title'));
		$form->add(new ADTextField('title', '', 40, 100));
		$form->add(new ADLabel('Content:', 'content'));
		$form->add(new ADTextArea('content', '', 40, 10));
		$form->add(new ADLabel('Excerpt:', 'excerpt'));
		$form->add(new ADTextArea('excerpt', '', 40, 3));
		$form->add(new ADSubmit('save', 'save'));
		$form->setValues($_REQUEST);
		return $w;
	}
}
$p = new PostEdit();
echo $p->render('ADSimpleRender');

See the code in action:A page extending the class AdminLayout
to see the example in this way you must use this css file:

div.header {
	border-bottom: 1px solid gray;
}
div.left-menu {
	width: 20%;
	float: left;
}

div.main-content {
	border-left: 1px solid gray;
	float: left;
}

div.main-content {
	padding: 1em;
}

div.footer {
	border-top: 1px solid gray;
	clear: both;
}

In this post we have use a lot of new classes. Now, we list them:
ADLayer -> div,
ADContainer -> not HTML coincidence. It helps to grouped a set of controls,
ADForm -> form,
ADHiddenField -> input type hidden
ADLabel -> label,
ADTextField -> input type text,
ADTextArea -> text area.

As you can see this Redfruits example make an hypothetical page to edit post in an hypothetical CMS.
That’s all for now