# **Chapter 10: Code Blocks - Enhancing FrontFile Design**
> **File Extension Reference:**
> - Gate Files: `*.gate.php` (e.g., `Index.gate.php`)
> - Front Files: `*.front` (e.g., `index_main.front`)
> - Master Files: `*.mast.php` (e.g., `default/master.mast.php`)
> - Front Places: `*.place.front` or `*.place.php`
---
## **10.1 What are Code Blocks?**
Code Blocks (`runcb="true"`) allow you to apply pre-defined styling and layout transformations to any HTML element in your FrontFile without writing custom PHP code. They work similar to CSS utility classes but with server-side processing.
Think of code blocks as **reusable design patterns** that transform simple HTML into styled, structured output.
## **10.2 Basic Syntax**
```html
<!-- Apply a code block -->
<div runcb="true" sphp-cb-card="Header,Footer">Content</div>
```
- `runcb="true"` - Enable code block processing
- `sphp-cb-[blockname]` - Apply the named block
- Parameters can be passed after the block name
## **10.3 Defining Code Blocks**
Code blocks are defined in `masters/sphpcodeblock.php`:
```php
<?php
// masters/sphpcodeblock.php
SphpCodeBlock::addCodeBlock('card', function($element, $args, $lstOther_CB) {
// Wrap the element in a card structure
$element->wrapTag('<div class="card"></div>');
$element->wrapInnerTags('<div class="card-body"></div>');
// Add header if first argument provided
if (!empty($args[0])) {
$element->setPreTag('<div class="card-header">' . $args[0] . '</div>');
}
// Add footer if second argument provided
if (!empty($args[1])) {
$element->setPostTag('<div class="card-footer">' . $args[1] . '</div>');
}
});
```
## **10.4 Using Code Blocks in FrontFile**
### **Basic Card**
```html
<!-- Simple card -->
<div runcb="true" sphp-cb-card>
This is card content
</div>
<!-- Output -->
<div class="card">
<div class="card-body">
This is card content
</div>
</div>
```
### **Card with Header and Footer**
```html
<div runcb="true" sphp-cb-card="Product Details,View All">
This is the card body content
</div>
<!-- Output -->
<div class="card">
<div class="card-header">Product Details</div>
<div class="card-body">
This is the card body content
</div>
<div class="card-footer">View All</div>
</div>
```
## **10.5 Common Code Block Examples**
### **Alert Block**
```php
// Define
SphpCodeBlock::addCodeBlock('alert', function($element, $args) {
$type = $args[0] ?? 'info'; // info, success, warning, danger
$element->wrapTag('<div class="alert alert-' . $type . '"></div>');
if (!empty($args[1])) {
$element->setPreTag('<strong>' . $args[1] . ':</strong> ');
}
});
```
```html
<!-- Usage -->
<div runcb="true" sphp-cb-alert="success,Success">Operation completed!</div>
<div runcb="true" sphp-cb-alert="danger,Error">Something went wrong!</div>
```
### **Button Block**
```php
SphpCodeBlock::addCodeBlock('btn', function($element, $args) {
$style = $args[0] ?? 'primary'; // primary, secondary, success, etc.
$size = $args[1] ?? ''; // sm, lg
$classes = "btn btn-$style";
if ($size) $classes .= " btn-$size";
$element->appendAttribute('class', $classes);
$element->setAttribute('type', 'button');
});
```
```html
<button runcb="true" sphp-cb-btn="primary">Submit</button>
<button runcb="true" sphp-cb-btn="danger,sm">Delete</button>
```
### **Shadow Block**
```php
SphpCodeBlock::addCodeBlock('shadow', function($element, $args) {
$size = $args[0] ?? 'md'; // sm, md, lg, xl
$element->appendAttribute('class', "shadow-$size");
});
```
```html
<div runcb="true" sphp-cb-shadow="lg">Content with large shadow</div>
```
### **Spacing Block**
```php
SphpCodeBlock::addCodeBlock('padding', function($element, $args) {
$size = $args[0] ?? '3'; // 0-5
$element->appendAttribute('class', "p-$size");
});
SphpCodeBlock::addCodeBlock('margin', function($element, $args) {
$size = $args[0] ?? '3';
$dir = $args[1] ?? ''; // t, b, l, r
$dirMap = ['' => '', 't' => '-t', 'b' => '-b', 'l' => '-l', 'r' => '-r'];
$dirSuffix = $dirMap[$dir] ?? '';
$element->appendAttribute('class', "m$dirSuffix-$size");
});
```
```html
<div runcb="true" sphp-cb-padding="4">Padded content</div>
<div runcb="true" sphp-cb-margin="2,t">Margin top</div>
```
## **10.6 Combining Multiple Code Blocks**
You can apply multiple code blocks to the same element:
```html
<!-- Apply multiple blocks -->
<div runcb="true"
sphp-cb-card="Info"
sphp-cb-shadow="md"
sphp-cb-padding="3">
Content with card, shadow, and padding
</div>
```
The blocks are processed in order, so later blocks can build on earlier transformations.
## **10.7 Using Code Blocks for Layout**
### **Grid Layout**
```php
SphpCodeBlock::addCodeBlock('row', function($element, $args) {
$element->wrapTag('<div class="row"></div>');
$element->appendAttribute('class', 'row');
});
SphpCodeBlock::addCodeBlock('col', function($element, $args) {
$size = $args[0] ?? '12'; // 1-12
$element->appendAttribute('class', "col-md-$size");
});
```
```html
<div runcb="true" sphp-cb-row>
<div runcb="true" sphp-cb-col="6">Column 1</div>
<div runcb="true" sphp-cb-col="6">Column 2</div>
</div>
```
### **Flex Box**
```php
SphpCodeBlock::addCodeBlock('flex', function($element, $args) {
$dir = $args[0] ?? 'row'; // row, column
$justify = $args[1] ?? ''; // start, center, end, between, around
$element->wrapTag('<div class="d-flex flex-' . $dir . '"></div>');
if ($justify) {
$justifyMap = [
'start' => 'justify-content-start',
'center' => 'justify-content-center',
'end' => 'justify-content-end',
'between' => 'justify-content-between',
'around' => 'justify-content-around'
];
$element->appendAttribute('class', $justifyMap[$justify] ?? '');
}
});
```
```html
<div runcb="true" sphp-cb-flex="row,between">
<span>Left</span>
<span>Right</span>
</div>
```
## **10.8 Practical Example - Product Card**
### Define the code blocks:
```php
// masters/sphpcodeblock.php
// Product Card
SphpCodeBlock::addCodeBlock('productCard', function($element, $args) {
// Wrap in card
$element->wrapTag('<div class="card h-100"></div>');
// Add image container if image provided
if (!empty($args[0])) {
$element->setPreTag(
'<img src="' . $args[0] . '" class="card-img-top" alt="Product">' .
$element->getPreTag()
);
}
// Wrap body
$element->wrapInnerTags('<div class="card-body"></div>');
// Add footer if price provided
if (!empty($args[1])) {
$element->setPostTag('<div class="card-footer">$' . $args[1] . '</div>');
}
});
// Badge
SphpCodeBlock::addCodeBlock('badge', function($element, $args) {
$color = $args[0] ?? 'primary';
$element->wrapTag('<span class="badge bg-' . $color . '"></span>');
});
```
### Use in FrontFile:
```html
<!-- product_list.front -->
<!-- Product 1 -->
<div class="col-md-4">
<div runcb="true" sphp-cb-productCard="/img/product1.jpg,29.99">
<h5 class="card-title">Product Name</h5>
<p class="card-text">Description goes here.</p>
</div>
</div>
<!-- Product 2 -->
<div class="col-md-4">
<div runcb="true" sphp-cb-productCard="/img/product2.jpg,49.99">
<h5 class="card-title">Another Product</h5>
<p class="card-text">Another description.</p>
</div>
</div>
<!-- Status Badge -->
<span runcb="true" sphp-cb-badge="success">In Stock</span>
<span runcb="true" sphp-cb-badge="warning">Low Stock</span>
```
## **10.9 Code Blocks vs Components**
| Feature | Code Blocks | Components |
|---------|-------------|-------------|
| Syntax | `runcb="true"` | `runat="server"` |
| Creates Object | No | Yes |
| Interactive | No | Yes |
| Database Binding | No | Yes (dtable/dfield) |
| Best For | Styling, layout | Forms, data display |
| Complexity | Low | Higher |
## **10.10 Chapter Summary**
1. **Code Blocks** (`runcb="true"`) apply pre-defined transformations
2. **sphp-cb-[name]** applies the named block
3. **Arguments** can be passed: `sphp-cb-card="Header,Footer"`
4. **Multiple blocks** can be combined on one element
5. **Define** in `masters/sphpcodeblock.php`
6. Use code blocks for **styling, cards, badges, spacing**
7. Use components (`runat="server"`) for **interactive elements**
## **10.11 What's Next?**
Now let's put everything together in a complete example application!
---
*Next: Chapter 11 - Putting It All Together*