Bootstrap Theme Experimentation

[Someone]

This is not intended for the user who want a usable theme, its intended for experimentation use only

I have been experimenting with using http://twitter.github.com/bootstrap/index.html

Mainly for the CSS framework.

Added to this thread are two files, a theme file [ATTACH]839[/ATTACH] unzip it and place the folder in your templates folder. And a [ATTACH]838[/ATTACH] module,this is a hack of the original inside_menu that comes with NWE. Unzip and place it in the modules folder.

In order to use the bootstrap theme you need to disable inside_menu and enable inside_menu_boot in the Module Manager DO NOT ENABLE BOTH AT THE SAME TIME, if you do, disable one of them by placing a file named "module.lock" in one of the module folders.

 

Sample content.php that uses this theme:

<div>
<h3>City Bank <small>Your Money Is Our Buisness</small></h3>
<div class=""><div class="label label-success pull-right">5,137$</div>
<form method="post" class="form-horizontal" name="bankDeposit"><div class="control-group">
<legend>Deposit</legend>
<div class="control-group"><label class="control-label" for="amount">Amount</label><div class="controls"><input name="deposit_amount" value="" id="amount" placeholder="1000$ Minimum" type="text"></div></div> <div class="controls"><input class="btn" value="Make Deposit" type="submit"></div></div></form><form method="post" class="form-horizontal" name="bankWithdrawal"><div class="control-group"><legend>Withdrawal</legend><div class="control-group"><label class="control-label" for="with_amount">Amount</label><div class="controls"><input name="with_amount" value="" id="with_amount" placeholder="1000$ Minimum" type="text"></div></div> <div class="controls"><input class="btn" value="Make Withdrawal" type="submit"></div></div></form></div></div><div><h3>Current Deposits <small>Send Your Money To Me</small></h3><div class="">

<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
	<th style="width: 13%;"> </th>
	<th>Deposited</th>
	<th>Intrest</th>
	<th>Time Left</th>
</tr>
</thead>

<tbody>
	<tr><td><a class="btn btn-mini btn-danger" href="index.php?p=ngm_bank&cancel=3&token=8df9dbc00e6491c80658f534c698fc29">Cancel Transaction</a></td><td> 1,000</td><td>10 1%</td><td>1h 50m </td></tr>
	<tr><td><a class="btn btn-mini btn-danger" href="index.php?p=ngm_bank&cancel=4&token=7d440ca88d99d6a972912684f36ad089">Cancel Transaction</a></td><td> 1,500</td><td>15 1%</td><td>2h 50m </td></tr><tr><td><a class="btn btn-mini btn-danger" href="index.php?p=ngm_bank&cancel=5&token=52b3d66b4c86632ef72a0b3799397394">Cancel Transaction</a></td><td> 2,000</td><td>20 1%</td><td>2h 50m </td></tr><tr><td><a class="btn btn-mini btn-danger" href="index.php?p=ngm_bank&cancel=6&token=c92c8b4b9a2c74c5bb70d9d64256c4cd">Cancel Transaction</a></td><td> 1,000</td><td>10 1%</td><td>2h 50m </td></tr>	
</tbody>

</table>
</div></div>

<div class="alert alert-block alert-info">
<h4>How Money Grows in Computers</h4>
<p class="text-info">After you deposit money, you will after some time get an interest back. That is if the bank you deposited in dont get robbed.</p>
</div>

This results in:

[ATTACH=CONFIG]840[/ATTACH]

Using the default bootstrap theme

inside_menu_boots.zip

bootstrap.zip

Edited January 6, 2013 by Someone

[Someone]

Boots class, placed in a pre_proccess.php file

 

class Boot{
private $return = '';

public function CreateForm($name){
	echo 	'<form method="post" class="form-horizontal" name="'.$name.'"><div class="control-group">';
}

public function AlertBox($title, $message, $titleClass, $textClass){
	return '<div class="alert alert-block '.$titleClass.'"><h4>'.$title.'</h4><p class="'.$textClass.'">'.$message.'</p></div>';
}	

public function EndForm(){
	echo '</div></form>';
}

public function Legend($legend_value){
	echo '<legend>'.$legend_value.'</legend>';
}

public function Input($label,$name, $value,$id,$placeholder ){
	echo '<div class="control-group"><label class="control-label" for="'.$id.'">'.$label.'</label><div class="controls"><input type="text" name="'.$name.'" value="'.$value.'" id="'.$id.'" placeholder="'.$placeholder.'"></div></div>';
}

public function Radio($label,$name, $value,$id,$checked = FALSE ){
	if(!$checked){
		$checked_html = '';
	} else {
		$checked_html = 'checked';
	}
	echo '<label class="radio"><input type="radio" name="'.$name.'" id="'.$id.'" value="'.$value.'" '.$checked_html.'>'.Translate($label).'</label>';
}	

function StartTabList(){
	echo '<ul class="nav nav-tabs">';
}

function EndTabList(){
	echo '</ul>';
}

function TabListItem($id,$label, $active = false){
	if($active == false){
		echo '<li><a href="#'.$id.'" data-toggle="tab">'.$label.'</a></li>';
	} else {
		echo '<li class="active"><a href="#'.$id.'" data-toggle="tab">'.$label.'</a></li>';
	}
}

function TabContentStart($id = 'myTabContent'){
	echo '<div id="'.$id.'" class="tab-content">';

}

function TabContentItemStart($id, $active = false){
	if($active == false){
		echo '<div class="tab-pane fade" id="'.$id.'">';
	} else {
		echo '<div class="tab-pane fade active in" id="'.$id.'">';
	}

}

function TabContentItemEnd(){
	echo '</div>';

}	

function TabContentEnd(){
	echo '</div>';
}

public function Submit($label){
	echo ' <div class="controls"><input type="submit" class="btn" value="'.$label.'"></div>';
}

}

 

Sample bank page above made with the class:

$boot = new Boot();

echo TableHeader('City Bank-Your Money Is Our Buisness');

echo '<div class="label label-success pull-right">'.number_format($userStats['bank']->value).'$</div>';

$boot->CreateForm('bankDeposit');
$boot->Legend('Deposit');
if( strlen($msg) > 0 ){
echo  $boot->AlertBox('Banker', $msg, 'alert-success', 'text-sucess');	
}


$boot->Input('Amount','deposit_amount','', 'amount','1000$ Minimum');
$boot->Submit('Make Deposit');
//SubmitButtonV2('Make Deposit Damit','bankDeposit');
$boot->EndForm();



$boot->CreateForm('bankWithdrawal');
$boot->Legend('Withdrawal');
$boot->Input('Amount','with_amount','', 'with_amount','1000$ Minimum');

$boot->Submit('Make Withdrawal','makeCrime','', 'makeCrime','Howto');
$boot->EndForm();



echo TableFooter();





echo TableHeader('Current Deposits-Send Your Money To Me');
?>


<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
	<th style="width: 13%;"> </th>
	<th>Deposited</th>
	<th>Intrest</th>
	<th>Time Left</th>
</tr>
</thead>

<tbody>
	<?php echo $list; ?>	
</tbody>

</table>
<?php 
echo TableFooter();

echo $boot->AlertBox('How Money Grows in Computers', 'After you deposit money, you will after some time get an interest back. That is if the bank you deposited in dont get robbed.', 'alert-info', 'text-info');
?>

Edited January 7, 2013 by Someone

[gmoore]

Your Money Is Our Business!!! lol ty

[Someone]

hehe glad I made you lol

Problem is that when I make new modules, its not very compatible. Benn thinking about it, I could simply have the standard class names in there as well. Or improve the boot class, to have setting for if it is to use the bootstrap CSS framework or not.

[a_bertrand]

1331: if you define a lib.php file in any module, it will be always loaded by the engine. This should offer you the option to define your own class / tools which can be used by other modules.

[gmoore]

http://themeforest.net templates (for the most part) use bootstrap in their themes, in case anyone wants to see them in action. I have purchased a couple of these themes and its really easy to lay out the pages. Now we just need to get some jQuery flowing in NWE and the world is our oyster.

Greg

[Someone]

Ok lib.php is the way to go. Gonna read up structuring classes, and not naming things on random such as I am doing atm.

+1 for cheap templates, also belive it should be easier/cheaper to get pro designers who know the framework through sites such as oDesk and freelancer.com

jQuery is already used by NWE as default, so jQuery away :)

[gmoore]

1331 are you my long lost twin or what? lol

[Someone]

Your more like the grandfather I never got ;)

[Someone]

Been working on the Boots class.

I have it so the class figures out whether or not the current theme is using the Bootstrap framework. If the theme is not using Bootstrap, it uses the built in engine functions such as LinkButton(). My goal is to be able to make moduels, that have no html in the content.php instead it lets the Boot class handle all displaying of content.

 

class Boot{
public		$returnResult		= false; //true = return the result, false = echo the result
public		$activeForm		= ''; //The name of the form currently working with
private 	$return = '';

private 	$useBoots			=	false;
private 	$currentTemplate 	= '';
private 	$formType 			= '';

function __construct(){
	global $baseDir;
	$this->currentTemplate = GetUserVariable(userTemplate);
	if (file_exists($baseDir.'/templates/'.$this->currentTemplate.'/useBoots.txt')){			
		$this->useBoots = true;
		echo 'use boots';
	} else {
		echo 'no boots';
	}
}

/**
 * 	Creates a button
 *
 * @param string $label 	The label shown infront of the input element
 * @param string $name 		Input element name attribute
 * @param mixed[] $options	Optional to use, array('id' => 'inputid|-generatedid-', 'size' => 'mini|small|large', 'type' => 'info|success|warning|danger|inverse|link', 'blocklevel' => 'true', 'addClasses' => 'any additinal classes you want added to the button', 'javascript' => 'JS that is on activated on onclick', 'disabled' => 'true/false', 'target' => 'target frame', 'tooltip' => 'if other than null, will show the value above the button');
 * @return string Html to start a form
 */

public function Button($label, $url, $options = array() ){
	$btnClasses	= $this->ButtonBuildClasses($options);
	$id			= '';
	$rel 		= '';
	$title 		= '';
	$js			= '';
	$target		= '';



	if( isset($options['id']) ){
		$id = $options['id']; 						
	} else {
		$id = MakeId('btn_', $label);
	}

	if( isset($options['javascript']) &&  $this->useBoots){
		$js = 'onClick="'.$options['javascript'].'"';
	} elseif( isset($options['javascript']) ) {
		$js = $options['javascript'];
	}

	if( isset($options['disabled']) ){
		$enabled = $options['disabled'];
	} elseif(!$this->useBoots){
		$enabled = FALSE;
	}		

	if( isset($options['target']) &&  $this->useBoots){
		$target = 'target="'.$options['target'].'"';
	} elseif( isset($options['target']) ) {
		$target = $options['target'];
	}		


	if( isset($options['tooltip']) ){
		$rel .= ' rel="tooltip" title="'.$options['tooltip'].'"';
	}						

	if($this->useBoots){
		$this->ButtonBuildClasses($options);
		$out = '<a href="'.Secure($url, true).'"'.$rel.' class="'.$btnClasses.'" id="'.$id.'" '.$js.' " '.$target.'>'.$label.'</a>';	
	} else {
		// LinkButton ($label, $url, $javascript = NULL, $target = NULL, $return = FALSE, $enabled = TRUE)
		$out = LinkButton($label, $url,  $js, $target, TRUE, $enabled);
	}

	if($this->returnResult){
		return $out;
	} else {
		echo $out;
	}

}

/**
 * 	Creates a an input with a label infront
 *
 * @param string $label 	The label shown infront of the input element
 * @param string $name 		Input element name attribute
 * @param mixed[] $options	array('id' => 'inputid|-generatedid-', 'placeholder' => 'this text will be shown in the input field', );
 * @return string Html to start a form
 */	

public function InputWithLabel($label,$name, $value, $options = array() ){
	if( isset($options['id']) ){
		$id = $options['id'];
	} else {
		$id = MakeId('inp_', $label);
	}

	if( isset($options['placeholder']) ){
		$placeholder = $options['placeholder'];
	} else {
		$placeholder = '';
	}		

	if($this->useBoots){
		$out = '<div class="control-group"><label class="control-label" for="'.$id.'">'.$label.'</label><div class="controls"><input type="text" name="'.$name.'" value="'.$value.'" id="'.$id.'" placeholder="'.$placeholder.'"></div></div>';
	} else {
// How to better handle this if the game is not using a bootstrap enabled theme
		$out = "$label <input type=\"text\" name=\"$name\" value=\"$value\" />";
	}

	if($this->returnResult){
		return $out;
	} else {
		echo $out;
	}
}



private function ButtonBuildClasses($options = array() ){
	$btnClasses = 'btn';
	if( isset($options['size']) ){
		$btnClasses .= ' btn-'.$options['size'];
	}
	if( isset($options['type']) ){
		$btnClasses .= ' btn-'.$options['type'];

	}
	if( isset($options['blocklevel']) ){
		$btnClasses .= ' btn-block';			
	}
	if( isset($options['disabled']) && $this->useBoots){
		$btnClasses .= ' disabled';				
	} 
	if( isset($options['addClasses']) ){
		$btnClasses .= ' '.$options['addClasses'];		
	}

	return $btnClasses;

}

 

Some sample use of the class

 

// Have options in a var
$options = array('type'=> 'danger','toolTip' => 'My tooltip');
$boot->Button('My Button', 'index.php', $options);

//Or passed directly
$boot->Button('My Large Button', 'index.php', array(
	'type'		=> 'danger',
	'size'		=> 'large',
	'toolTip'	=> 'My tooltip'
));

//Or no options at all
$boot->Button('My Defult Button', 'index.php');

$boot->InputWithLabel(Translate('Amount'),'deposit_amount','', array(
	'placeholder' => '1000$ minimum'
));


//for this one I want the data to be returned and not echoed
$boot->returnResult = true; 
$boot->Button(Translate('Cancel Transaction'), 'index.php?p=ngm_bank&cancel='.$result->fields[0], array(
	'size' => 'mini', 
	'type' => 'danger'
	));

 

What is making my brain hurt atm, is how to best handle if the theme is not using Bootstrap. Hard-coding into the class somewhat dilutes the purpose of the class as well.

I have no control of what classes other themes uses, besides perhaps the default ones that comes with NWE.

Should I extend the current template system, like how templates/templatename/functions.php works.

[a_bertrand]

Mmmm I will think about it, as ideally such class should then apply to all the code, the provided mods as well as your own.

[Someone]

I have been working on this. The system I ended up with has nothing todo with Bootstrap though. Instead its a simple template system, that should be both lightweight expandable both for module developers and game owners running custom themes.

First there is a template file, just like the engine does for functions.php this template module will check for a template file first in the currently active template folder. If none is found, it will fall back to a default one. I will write one for each of the default themes.

Samples from template (ini format) file:

;<?php die; ?>
; This is not a php file, its an ini file, use " around values, as ' is only supported around values in PHP 5.3


; What should the tags default to if not being supplied to $options, 
; if no default is set, the tag will simply be removed.
[default] 
inputText['style'] = "width: 200px;"



; This will be added before default value, or the value passed
; as option. Useful if you want to add a attribute to a HTML element.
[prepend]
inputText['style'] = "style='"
textArea['style'] = "style='"


messageBox['class'] = "class='" 
messageBox['title'] = "<h4 style='margin:0;'>"



; This will be added after the default value, or the value passed
; as option. 

[append]
inputText['style'] = "'"

messageBox['class'] = "'"
messageBox['title'] = "</h4>"

textArea['style'] = "'" 



[html]
formStart = "<form method='post' name='**name**'>"
formEnd = "</form>"

button = "<a href='**url**' class='linkButton'>**label**</a>"


inputText = "<input class='##class##' ##style## type='text' name='**name**' value='##value=100##' />";
inputHidden = "<input type='hidden' name='**name**' value='**value**' />"
textArea = "<textarea ##style=margin: 5px; width: 95%;## name='**name**'>##value##</textarea>"
legend = "<legend>##label##</legend>"

radio = "<label class='radio'><input type='radio' name='**name**' id='##id##' value='##value##' ##ischecked##>**label**</label>"


messageBox 	= 	"<div ##class## style='padding: 5px'>##title##**message**</div>"

 

It works like this:

$tpl->Element('contentHeader',array(
		'title' => Translate('Create Gradient')
		));

	$tpl->Element('formStart', array('name' => 'makeUserGradient'));
		$tpl->Element('messageBox',['message' => 'Insert the colors you want to use in the field below. One color per line.<br/>You can add conditions for the gradients by editing the gradient_types table in the admin panel']);
		$tpl->Element('textArea', [
				'name' => 'colors',
				'value' => $sent_colors
				]);
		SubmitButton('Generate Gradient');
	$tpl->Element('formEnd');
$tpl->Element('contentFooter');

 

$tpl->Element($elementName = 'string', $options = array())

$tpl->Element will try to match up $elementName with the key in the ini file. The keys in $options will try to match up with the tags that are in ## or **

Tags that are in ** are required, and must be passed as part of $options, or the sript will fail in error.

For the optional tags you can set default values, either inline like ##style=margin: 5px; width: 95%;## or listed under [default]

I have two volunteers who will help testing this, but though I might as well get it out there for feedback and suggestions.

[Dave]

I've always personally been against making functions to write out HTML and rather build the HTML into templates so you can further expand on the design without having to hack around functions etc.

Still looks like it could produce something helpful and simple, and nice to see bootstrap come out and play.

[Someone]

I have not really liked it much either. I was messing around using functions, making a function, guess the right term is method, for each kind of common HTML stuff you need. Well I was fast up in 20+ methods and 500 lines of code :)

Checked the incoming data, and returned the "correct" html, depending on if Bootstrap is used.

Using this system, its just a matter of browsing through and adding classes where needed to turn it into Bootstrap ready. Or another framework, or custom theme.

The most time consuming for me when making stuff is the HTML elements. And I want it to be uniform, so each page looks like its part of the whole. And then what if I change something around, a lot to update.

Also, it makes it possible to not having to change the content page at all, but instead modify the template file when a module is updated.

Note about the exampe:

Using inline style in the example, that is to show examples. And to avoid having to get people to modify their default theme css. In an actual production that should be moved to a css file

[Spudinski]

Tips:

PHP generating HTML, out of an "OOP" class is a dangerous business. Using templating(layout+template) is recommended, as you are able to decouple the logic and presentation.

Even if you have to write a quick decorator for this, it will separate the responsibilities and help other developers along the way when wanting to edit this.

http://en.wikipedia.org/wiki/Single_responsibility_principle

http://www.martinfowler.com/eaaDev/uiArchs.html

Second thing I did noticed(or first actually), is the usage of a user-generated file to verify the type of template in use. This seems a bit excessive.

I don't know if you've heard of ext/tokenizer, but it can read DocBlocks as well as classify pretty much any piece of PHP code. It's enabled by default and can safely be used on versions above 4.3.0 - link below.

Wordpress uses a similar method to name template parts, and it's proven to be quite successful.

http://www.php.net/manual/en/tokenizer.installation.php

Edited March 5, 2013 by Spudinski