Difference between #3 and #4 of Creating HTML code using Jamboree Panels

unchanged
Title
Creating HTML code using Jamboree Panels
unchanged
Category
Tutorials
unchanged
Tags
jqueryui, layouts, layout, views, view
changed
Content
<html>
<div style='padding: 3px; background-color: #fe9; border: #aaa;
border-radius: 3px;'>
Por: <b><a
<b><a href='https://plus.google.com/107716720815385421516'
rel='author' title='author profile'><spanprofile'>
<span itemprop='name'>Christian
Salazar</span></a></b>

<aSalazar</span>
</a></b>
<a href="https://twitter.com/salazarchris74"
class="twitter-follow-button" data-show-count="false"
data-lang="es">Followdata-lang="es">Seguir
a @salazarchris74</a>
</div>
<script>!function(d,s,id){var
js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</html>

<script type="text/javascript"><!--
google_ad_client = "ca-pub-5791317089514247";
/* firma */
google_ad_slot = "6843698352";
google_ad_width = 234;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</html>

Jamboree Wiki
-------------

Official Website:

[http://christiansalazar.github.com/jamboree/](http://christiansalazar.github.com/jamboree/
"http://christiansalazar.github.com/jamboree/")

Extension URL (Yii Framework Extensions):


[http://www.yiiframework.com/extension/jamboree/](http://www.yiiframework.com/extension/jamboree/
"http://www.yiiframework.com/extension/jamboree/")


## What is Jamboree ?

Jamboree is a Layout and View builder based on create nested (or single) panels
containing each of them pieces of raw text, html,more panels and those code
generated by CHtml. Using jamboree you can create forms (inclusive active
forms), views better suited for ajax rendering (like the one below), and the
most important thing: when using jamboree you can abstract your code from html
details leaving it to jamboree.

You can use Jamboree in a non-yiiframework application too.

## A real website built using Jamboree

![real checkout
example](https://github.com/christiansalazar/jamboree/wiki/checkout-example.png
"real checkout")

![real
e-commerce](https://github.com/christiansalazar/jamboree/wiki/jamboree-example1.png
"real e-commerce")



## About playing this demos.

First, [download the
extension](https://github.com/christiansalazar/jamboree/archive/master.zip),
install it in your 'extensions' directory, and publish it in your 'imports'.
You can use the GIT command for cloning this repo instead of downloading it, to
do so please:

`cd /home/yourapp/protected/extensions`

`git clone https://github.com/christiansalazar/jamboree.git`

Next, create an action (in siteController.php), 
~~~
public function actionTest(){
   $this->render('test');
}
~~~

And finally, copy & paste the showcase code below in
`/<yourapp>/protected/views/site/test.php`

To test it, in your browser type:
`http://localhost/yourapp/index.php?r=site/test`

#Showcase / Examples:


The most single usage for jamboree is:
~~~
<?php
$mypanel = new JamVertPanel();
$mypanel->add("hello");
$mypanel->add("hello again..");
$mypanel->render();
~~~

A more complex usage for jamboree is:
~~~
<?php
$main = new JamHorzPanel();

$mypanel = new JamVertPanel();
$mypanel->add("hello");
$mypanel->add("hello again..");
$mypanel->render();

$main->setSolidBorder('3px','red');
// insert a raw text, return it and decorate:
$newelement = $main->add("this is a new single row");
$newelement->addHtmlOption('style','font-weight: bold; color: darkred;');
// insert a nested panel
$main->add($mypanel); 
// insert a new panel and return it
$newpanel = $main->add(new JamHorzPanel()); 
$newpanel->setBgColor('#def');
$newpanel->add($mypanel); // nested again...
$main->render();
~~~


## Forms (checkbox, radiobuttons, etc)

~~~
<?php
$form = new JamVertPanel('form'); // creates a 'form', instead of default 'div'
$allLabels = array();

// standard input
$label = $form->add(new JamElement('label','Your Name:'));
$label->setHtmlOption('for','firstname');
$allLabels[] = $label;
$firstname = $form->add(new JamElement('input'));
$firstname->setId('firstname');

// a Radio Buttons
$label = $form->add(new JamElement('label','Gender:'));
$radio = $form->add(new JamHorzRadioButtons('gender'));
$radio->add('Male');
$radio->add('Female');
$allLabels[] = $label;

// checkboxes
$label = $form->add(new JamElement('label','Do you like Jamboree ?'));
$checkbox = $form->add(new JamElement('input'));
$checkbox->setHtmlOption('type','checkbox');
$checkbox->setHtmlOption('checked','checked');
$allLabels[] = $label;

$bottomPanel = new JamHorzPanel();
$bottomPanel->setBgColor('#def');
$submit = $bottomPanel->add(new JamElement('input'));
$submit->setHtmlOption('type','submit');
$submit->setHtmlOption('value','Send');

$form->add($bottomPanel);

foreach($allLabels as $label){
	$label->setColor('darkred');
	$label->addHtmlOption('style','font-weight: bold;');
}

$form->setId('myform');
$form->setHtmlOption('method','post');
$form->setHtmlOption('action',CHtml::normalizeUrl(array('/site/test')));
$form->setWidth('200px');

$form->render();
~~~

It will render:

![A form](https://github.com/christiansalazar/jamboree/wiki/form-example.png
"A form")


## Tables

~~~
<?php
$table = new JamTable();
$table->setWidth('300px');
$table->setSolidBorder('3px','#def');
$table->head(
	array(
		array('text'=>'col 1',
			'htmlOptions'=>array('style'=>'background-color: #eee')),
		'any col',
		array('text'=>'price',
			'htmlOptions'=>array('style'=>'text-align: right')),
	)
	,array('style'=>'border: none;')
);
for($i=0;$i<3;$i++)
	$table->row(array(
		array('text'=>'abc'.$i,
		'htmlOptions'=>array('style'=>'background-color: #eee;border: none;')),
		'some text',
		array('text'=>'123.00',
			'htmlOptions'=>array('style'=>'text-align: right')),
	));
$table->render();
~~~

It will render:

![A table](https://github.com/christiansalazar/jamboree/wiki/table-example.png
"A table")


## A 3panel layout, top and bottom bars.

~~~
<?php
$main = new JamVertPanel();
$topbar = new JamHorzPanel();
$bottombar = new JamHorzPanel();
$bodybar = new JamHorzPanel();
$panel1 = new JamVertPanel();
$panel2 = new JamVertPanel();
$panel3 = new JamVertPanel();

// basic layout

$main->add($topbar);
$main->add($bodybar);
$main->add($bottombar);

$bodybar->add($panel1);
$bodybar->add($panel2);
$bodybar->add($panel3);

// stylish

$main->setAutoMargin();
$main->setWidth('90%');

$topbar->setWidth('auto');
$topbar->addHtmlOption('style','background-color: darkred; color: white;');
$topbar->setBorderNone();
$topbar->addChildHtmlOptions(array(
	'style'=>'margin-right: 20px;padding: 3px;border: none;'));
$topbar->add("item 1");
$topbar->add("item 2");
$topbar->add("item 3");
$topbar->add("item 4");

$bodybar->addHtmlOption('style','background-color: #fec;');
$bodybar->setWidth('auto');

$panel1->addHtmlOption('style','background-color: #eee');
$panel1->setWidth('150px');
$panel1->setHeight('200px');
$panel1->add("panel 1 text content");

$panel2->setWidth('auto');
$panel2->add('content for panel 2');
$panel2->setHeight('200px');

$panel3->setWidth('auto');
$panel3->add('content for panel 3');
$panel3->setHeight('200px');

$bottombar->add('this is the bottom bar, you can insert more panels here');
$bottombar->addHtmlOption('style','background-color: #eee;');

$main->render();
~~~

it will render:

![3 panel layout with top and bottom
bar](https://github.com/christiansalazar/jamboree/wiki/panel3.png "3 panel
layout with top and bottom bar")