bootstrap for extension developers jwc 2012
DESCRIPTION
How to take advantage of the bootstrap framework in your Joomla 3.x extension so you can leave the designing to the designers.TRANSCRIPT
![Page 1: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/1.jpg)
Bootstrap for Extension DevelopersAndrea TarrMetaScale / Sears HoldingsNovember 2012
![Page 2: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/2.jpg)
Outline• Introduction to
Bootstrap• Using Bootstrap
in Joomla extensions• Examples in
Joomla
Novem
ber
20
12
Boots
trap f
or
Exte
nsi
on
Develo
pers
• A
ndre
a T
arr
•
Joom
la W
orl
d C
onfe
rence
2
![Page 3: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/3.jpg)
Bootstrap Introduction• What problem is Joomla trying to solve?• What is Bootstrap?• How does it work?• Exploring Bootstrap N
ovem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
3
![Page 4: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/4.jpg)
The Problem• The need for a consistent style sheet for
extensions• Core extension are the current de facto style
sheet• 3pd & custom extensions make up what they
need that isn't in core – and they all do it differently
• Templates have to code for specific extensions to maintain the look and feel of the web site
• Result is that many extensions look like iframes unrelated to the site
• This is the case in both the frontend and the backend
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
4
![Page 5: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/5.jpg)
What is Bootstrap?• Basic set of CSS for layout• CSS styles for UI elements such as menus &
buttons• CSS styles for responsive design• Integrated JavaScript widgets (jQuery) for UI
elements such as accordions • A set of icons that can be used• Minified versions of the CSS & JS available• Includes the ability to use LESS files to create the
CSS• Can work with different HTML markup• Has docs showing HTML code, but the better code
is in the actual examples folder
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
5
Novem
ber
20
12
![Page 6: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/6.jpg)
How does it work?<!DOCTYPE html><html lang="en"> <head> <title>My Web Site</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <h1>My Web Site</h1> <p>This is a paragraph</p> </body></html>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
6
![Page 7: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/7.jpg)
Exploring Bootstrap• To see examples online• http://twitter.github.com/bootstrap/
• To download Bootstrap to your computer• Download button at twitter.github.com/bootstrap• Full source at https://github.com/twitter/bootstrap
• Call the docs folder in browser
• To see mockup examples for Joomla• http://kyleledbetter.com/jui
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
7
![Page 8: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/8.jpg)
Using Bootstrap inJoomla Extensions• CSS Class names have changed• jQuery is available• Grid System• Classes• Navigation• Tables• Forms
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
8
![Page 9: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/9.jpg)
Grid System - Static
<div class="row"> <div class="span4">...</div> <div class="offset2 span6">...</div></div>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
9
![Page 10: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/10.jpg)
Grid System – Static Nesting• Children add up to the parent<div class="row"> <div class="span4"> <div class="row">
<div class="span1">...</div> <div class="span3">...</div> </div> </div> <div class="offset2 span6">...</div></div>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
10
![Page 11: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/11.jpg)
Grid System - Fluid
<div class="row-fluid"> <div class="span4">...</div> <div class="offset2 span6">...</div></div>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
11
![Page 12: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/12.jpg)
Grid System – Fluid Nesting• Children add up to 12<div class="row-fluid"> <div class="span4"> <div class="row-fluid">
<div class="span3">...</div> <div class="span9">...</div> </div> </div> <div class="offset2 span6">...</div></div>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
12
![Page 13: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/13.jpg)
Boots
trap f
or
Develo
pers
• J
oom
la W
orl
d C
onfe
rence
• A
ndre
a T
arr
Grid System in Joomla• Backend leftnav/list views• span2/span10• Example: Article Manager
• Backend edit views• span10/span2• Example: Article Edit
• Dashboards• span2/span6/span4• Example: Control Panel
Novem
ber
20
12
13
![Page 14: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/14.jpg)
Boots
trap f
or
Develo
pers
• J
oom
la W
orl
d C
onfe
rence
• A
ndre
a T
arr
Responsive classes
Novem
ber
20
12
14
![Page 15: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/15.jpg)
Special Text Designations<p class="muted">Fusce dapibus, mauris nibh.</p><p class="text-warning">Etiam porta euismod.</p><p class="text-error">Donec auctor fringilla.</p><p class="text-info">Aenean eu leo quam. </p><p class="text-success">Duis erat porttitor ligula.</p>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
15
![Page 16: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/16.jpg)
Other Useful Classes• <div class="pull-right">...</div>• <div class="pull-left">...</div>• Clear with clearfix class• (JUI) Hide labels with element-invisible class N
ovem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
16
![Page 17: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/17.jpg)
Tables
All Tables• <table class="table">
Additional table classes to add• .table-striped• .table-condensed• .table-border• .table-hover
Standard Admin tables• class="adminlist table table-striped"
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
17
![Page 18: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/18.jpg)
Tables: Row Classes• .success• .error• .warning• .info N
ovem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
18
![Page 19: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/19.jpg)
Forms• Bootstrap standard with left-adjusted, label above• Optional classes for different types of forms• Inline form• .form-inline
• Horizontal form (normal Joomla backend)• .form-horizontal• wrap label/control in .control-group• .control-label on label• wrap controls in .controls• wrap multiple actions in .form-actions to show
horizontally
• Use input types
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
19
![Page 20: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/20.jpg)
Forms: Radio/Checkbox• Add class .radio or .checkbox on the label for the
control• Use the type of radio or checkbox on the input• To display radio/checkbox label inline• Add class .inline to the label
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
20
![Page 21: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/21.jpg)
Yes/No Radio Button XML<fieldname="link_titles"type="radio"class="btn-group"label="JGLOBAL_LINKED_TITLES_LABEL"description="JGLOBAL_LINKED_TITLES_DESC"labelclass="control-label"> <option value="">JGLOBAL_USE_GLOBAL</option> <optionvalue="0">JNO</option> <option value="1">JYES</option></field>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
21
![Page 22: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/22.jpg)
Forms: Addons• To add text or a button before or after the input
<div class="input-prepend"> <span class="add-on">@</span> <input class="span2" id="prependedInput" size="16" type="text" placeholder="Username"></div><div class="input-append"> <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span></div>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
22
![Page 23: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/23.jpg)
Forms: Addon Buttons• Use button with class .btn instead of the span to
attach a button to a control
<div class="input-append"> <input class="span2" id="appendedInputButton" size="16" type="text"> <button class="btn" type="button">Go!</button></div>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
23
![Page 24: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/24.jpg)
Forms: Sizing• Add class to inputs for relative sizing• .input-mini• .input-small• .input-medium• .input-large• .input-xlarge• .input-xxlarge
• You can also use the span classes• .span1, .span4, .span6, etc.• If using multiple spans on multiple lines, wrap each
row in .control-row.
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
24
![Page 25: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/25.jpg)
Forms: Misc• To make an input read only• Add the disabled attribute (not a class)• <input id="thisInput" type="text" disabled
placeholder="Disabled input here...">
• Show read only text as if it is a form element• .uneditable-input• <span class="input-xlarge uneditable-input">Some
value here</span
• Help text• .help-inline• .help-block• <input type="text"><span class="help-
inline">Inline help text</span>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
25
![Page 26: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/26.jpg)
Buttons
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
26
![Page 27: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/27.jpg)
Buttons: Sizing• Optional: Add a sizing button class• .btn-large• .btn-small• .btn-mini• .btn-block
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
27
![Page 28: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/28.jpg)
Navigation• http://twitter.github.com/bootstrap/
components.html#navs
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
28
![Page 29: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/29.jpg)
Examples in Joomla• Some changes• Manager Example• Chosen select dropdowns• Sidebar• Filters• Sorting• Drag & Drop
• Edit Example• Tabbing Content
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
29
![Page 30: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/30.jpg)
Administrator Changes• JHtml::_('behavior.tooltip'); becomes
JHtml::_('bootstrap.tooltip');• For dropdowns, use JHtml::_('formbehavior.chosen', 'select'); N
ovem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
30
![Page 31: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/31.jpg)
Manager Example
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
31
![Page 32: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/32.jpg)
Set up the Managerdefined('_JEXEC') or die;
JHtml::addIncludePath(JPATH_COMPONENT.'/helpers/html');JHtml::_('bootstrap.tooltip');JHtml::_('behavior.multiselect');JHtml::_('formbehavior.chosen', 'select');
$user = JFactory::getUser();$userId = $user->get('id');
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
32
![Page 33: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/33.jpg)
Drag & Drop Ordering$listOrder = $this->escape($this->state->get('list.ordering'));$listDirn = $this->escape($this->state->get('list.direction'));$canOrder = $user->authorise('core.edit.state', 'com_mycomponent.category');$saveOrder = $listOrder == 'a.ordering';if ($saveOrder) { $saveOrderingUrl = 'index.php?option=com_mycomponent &task=mycomponent.saveOrderAjax&tmpl=component'; JHtml::_('sortablelist.sortable', 'mycomponentList', 'adminForm', strtolower($listDirn), $saveOrderingUrl);}$sortFields = $this->getSortFields();
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
33
![Page 34: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/34.jpg)
Sorting: Script<script type="text/javascript"> Joomla.orderTable = function() { table = document.getElementById("sortTable"); direction = document.getElementById("directionTable"); order = table.options[table.selectedIndex].value; if (order != '<?php echo $listOrder; ?>') { dirn = 'asc'; } else { dirn = direction.options[direction.selectedIndex].value; } Joomla.tableOrdering(order, dirn, ''); }</script>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
34
![Page 35: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/35.jpg)
Sidebar & Start Main Div<form action="url here" method="post" name="adminForm" id="adminForm">
<!-- if there is is a side bar, display the sidebar as span2 and start the main-container as span10. Otherwise, just start the main-container, which will default to the the full span12. -->
<?php if(!empty( $this->sidebar)): ?> <div id="j-sidebar-container" class="span2"> <?php echo $this->sidebar; ?> </div> <div id="j-main-container" class="span10"><?php else : ?> <div id="j-main-container"><?php endif;?>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
35
![Page 36: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/36.jpg)
Searching<!-- The main container for the component starts with the Search & Sorting across the top (Orange should be JText strings) -->
<div id="filter-bar" class="btn-toolbar"> <div class="filter-search btn-group pull-left"> <label for="filter_search" class="element-invisible">Search</label> <input type="text" name="filter_search" id="filter_search" placeholder="Search" value="<?php echo $this->escape($this->state->get('filter.search')); ?>" title="Search" /> </div>
<div class="btn-group pull-left"> <button class="btn hasTooltip" type="submit" title="Submit"><i class="icon-search"></i></button> <button class="btn hasTooltip" type="button" title="Clear" onclick="document.id('filter_search').value='';this.form.submit();"><i class="icon-remove"></i></button> </div>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
36
![Page 37: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/37.jpg)
Sort Filter & Display #<div class="btn-group pull-right hidden-phone"> <label for="limit" class="element-invisible">Label</label> <?php echo $this->pagination->getLimitBox(); ?></div><div class="btn-group pull-right hidden-phone"> <label for="directionTable" class="element-invisible">Label</label> <select name="directionTable" id="directionTable" class="input-medium" onchange="Joomla.orderTable()"> <option value="">Order desc</option> <option value="asc" <?php if ($listDirn == 'asc') echo 'selected="selected"'; ?>>Asc</option> <option value="desc" <?php if ($listDirn == 'desc') echo 'selected="selected"'; ?>>Desc</option> </select></div>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
37
![Page 38: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/38.jpg)
Sort Filter & Display #<div class="btn-group pull-right"> <label for="sortTable" class="element-invisible">Sort by</label> <select name="sortTable" id="sortTable" class="input-medium" onchange="Joomla.orderTable()"> <option value="">Sort by..</option> <?php echo JHtml::_('select.options', $sortFields, 'value', 'text', $listOrder);?> </select></div></div><!-- End Filter bar --><div class="clearfix"> </div>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
38
![Page 39: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/39.jpg)
Manager Table• <table class="adminlist"> becomes<table class="table table-striped" id="xxxxxxList">• Use class="adminlist table table-striped" if you
want backward compatibility• If you want to hide columns on a phone add class
hidden-phone
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
39
![Page 40: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/40.jpg)
Order Field: Field<tr class="row<?php echo $i % 2; ?>" sortable-group-id="<?php echo $item->catid?>"><td class="order nowrap center hidden-phone"> <?php if ($canChange) : $disableClassName = ''; $disabledLabel = ''; if (!$saveOrder) : $disabledLabel = JText::_('JORDERINGDISABLED'); $disableClassName = 'inactive tip-top'; endif; ?> (do something here if you can edit and reorder) <?php else : ?> <span class="sortable-handler inactive" > <i class="icon-menu"></i> </span> <?php endif; ?></td>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
40
![Page 41: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/41.jpg)
Doing the something<span class="sortable-handler hasTooltip <?php echo $disableClassName?>" title="<?php echo $disabledLabel?>"> <i class="icon-menu"></i> </span> <input type="text" style="display:none" name="order[]" size="5" value="<?php echo $item->ordering;?>" class="width-20 text-area-order " />
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
41
![Page 42: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/42.jpg)
Batch Modal Sub-layout$published = $this->state->get('filter.state');?><div class="modal hide fade" id="collapseModal"> <div class="modal-header"> <button type="button" role="presentation" class="close" data-dismiss="modal">x</button> <h3><?php echo JText::_('COM_MYCOMPONENT_BATCH_OPTIONS');?></h3> </div> <div class="modal-body"> (form control-groups go here) </div>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
42
![Page 43: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/43.jpg)
Modal footer<div class="modal-footer"> <button class="btn" type="button" onclick ="document.id('batch-category-id').value ='';document.id('batch-access').value ='';document.id('batch-language-id').value =''" data-dismiss="modal"> <?php echo JText::_('JCANCEL'); ?> </button> <button class="btn btn-primary" type="submit" onclick="Joomla.submitbutton('mycomponent.batch');"> <?php echo JText::_('JGLOBAL_BATCH_PROCESS'); ?> </button></div></div><!-- End collapseModal -->
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
43
![Page 44: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/44.jpg)
Creating $sidebar in view.html.php$this->addToolbar();$this->sidebar = JHtmlSidebar::render();parent::display($tpl);
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
44
![Page 45: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/45.jpg)
Example Edit Screen
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
45
![Page 46: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/46.jpg)
Overview• Simplified example of an edit form in the backend• Set up as tabbed content in a span10 section on
the left with a span2 sidebar that remains constant on the right. N
ovem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
46
![Page 47: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/47.jpg)
Set up the form<!--simplified edit layout --><form action="url here" method="post" name="adminForm" id="mycomponent-form" class="form-validate">
<div class="row-fluid"><!-- Begin Main --><div class="span10 form-horizontal">
<fieldset>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
47
![Page 48: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/48.jpg)
List the tab navigation<!-- List of Tabs --><ul class="nav nav-tabs">
<li class="active"><a href="#details" data-toggle="tab">Details</a></li>
<li><a href="#publishing" data-toggle="tab">Publishing</a></li>
<li>...</li></ul>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
48
![Page 49: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/49.jpg)
List Content in Each Tab<div class="tab-content"> <div class="tab-pane active" id="details"> <div class="control-group"> <div class="control-label"><?php echo $this->form->getLabel('title'); ?></div>
<div class="controls"><?php echo $this->form->getInput('title'); ?></div>
</div> <div class="control-group"> <div class="control-label"><?php echo $this->form->getLabel('url'); ?></div>
<div class="controls"><?php echo $this->form->getInput('url'); ?></div>
</div> <div class="control-group"> ... </div> </div>
<div class="tab-pane" id="publishing"> ... </div>
additional tab-pane divs ....
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
49
![Page 50: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/50.jpg)
Tab Content in sub-layouts<?php echo $this->loadTemplate('params'); ?><?php echo $this->loadTemplate('metadata'); ?>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
50
![Page 51: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/51.jpg)
Hidden inputs and end divs
<input type="hidden" name="task" value="" />
<?php echo JHtml::_('form.token'); ?></div><!-- end tab-content --></div><!-- end span10 -->
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
51
![Page 52: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/52.jpg)
Right sidebar<!-- Begin Sidebar --><div class="span2">
<h4>Details</h4><hr /><fieldset class="form-vertical">
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
52
![Page 53: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/53.jpg)
Form Controls Groups<div class="control-group"> <div class="controls"> <?php echo $this->form->getValue('title'); ?> </div></div><div class="control-group"> <div class="control-label"> <?php echo $this->form->getLabel('state'); ?> </div> <div class="controls"> <?php echo $this->form->getInput('state'); ?> </div></div><div class="control-group"> ...</div>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
53
![Page 54: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/54.jpg)
End the sidebar & form </fieldset> </div><!-- End Sidebar --></form>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
54
![Page 55: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/55.jpg)
Detail on using sub-layouts for tab contents• You can use sub-layouts for tab pane content• Examples: edit_metadata & edit_params• Add a foreach loop to the tab navigation• Add a load to the layouts in the tab content N
ovem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
55
![Page 56: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/56.jpg)
Tab Nav <li> Loop<?php$fieldSets = $this->form->getFieldsets('params');foreach ($fieldSets as $name => $fieldSet) : ?> <li> <a href="#params-<?php echo $name;?>" data-toggle=
"tab"><?php echo JText::_($fieldSet->label);?></a> </li><?php endforeach; ?>
<?php$fieldSets = $this->form->getFieldsets('metadata');foreach ($fieldSets as $name => $fieldSet) : ?> <li> <a href="#metadata-<?php echo $name;?>" data-toggle= "tab"><?php echo JText::_($fieldSet->label);?></a> </li><?php endforeach; ?>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
56
![Page 57: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/57.jpg)
Sub-layout tab pane<div class="tab-pane" id="publishing"> ...</div>
<?php echo $this->loadTemplate('params'); ?><?php echo $this->loadTemplate('metadata'); ?>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
57
![Page 58: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/58.jpg)
Sub-layout<?php$fieldSets = $this->form->getFieldsets('params');foreach ($fieldSets as $name => $fieldSet) :?> <div class="tab-pane" id="params-<?php echo $name;?>">
<?php if (isset($fieldSet->description) && trim($fieldSet->description)) : echo '<p class="alert alert-info">'.$this->escape(JText::_($fieldSet-> description)).'</p>'; endif; ?> <?php foreach ($this->form->getFieldset($name) as $field) : ?> <div class="control-group"> <div class="control-label"><?php echo $field->label; ?></div> <div class="controls"><?php echo $field->input; ?></div> </div> <?php endforeach; ?>
</div><!-- end tab-pane --><?php endforeach; ?>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
58
![Page 59: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/59.jpg)
Resources• Download basic bootstrap• http://twitter.github.com/bootstrap/
• The full bootstrap source• https://github.com/twitter/bootstrap
• Tutorials• http://webdesign.tutsplus.com/series/twitter-
bootstrap-101/
• Tutorials on YouTube• http://www.youtube.com/watch?v=DgwtRpf60xI
• Joomla JUI• http://kyleledbetter.com/jui
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
59
Novem
ber
20
12
![Page 60: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/60.jpg)
Questions ?
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
60
![Page 61: Bootstrap for Extension Developers JWC 2012](https://reader037.vdocument.in/reader037/viewer/2022102805/554be2bfb4c9056b348b4731/html5/thumbnails/61.jpg)
Credits• Background photo by the_tahoe_guy
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
61