Posts Tagged ‘layout’

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 © 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

Advertisements