Box/index.html at master · webability/Box · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <!-- Generic browser family -->
  <title>Box Model Demos, a WebAbility&reg; Network Project</title>
  <meta http-equiv="PRAGMA" content="NO-CACHE" />
  <meta http-equiv="Expires" content="-1" />

  <meta name="Keywords" content="Box Model, Pattern, WebAbility" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="Charset" content="UTF-8" />
  <meta name="Language" content="en" />
  <link rel="stylesheet" href="/skins/css/boxmodel.css" type="text/css" />

</head>
<body>

<div class="container">

<h1><a href="http://www.webability.info/?P=box" target="_blank">Box Model</a> - A pattern for Real-life Web Programming</h1>
<h2>A sub project of the <a href="http://www.webability.info" target="_blank">WebAbility&reg; Network</a></h2>
<h2>Box Model uses <a href="http://www.webability.info/?P=domcore" target="_blank">DomCore</a></h2>

Any doubt ? please refer to the <a href="http://www.webability.info/?P=documentacion" target="_blank">Box Model v1 Documentation</a><br />

<br />

<h1 class="h1">A product Catalog example step by step:</h1>

<h2 class="h2">How does this work?</h2>

The construction of a product catalog can be exploded in some basic tasks.
The following diagram shows the tasks and its equivalence with the visual html template page.
<br />
<br />
<img src="examples/product.png" alt="The box model for a product catalog" title="The box model for a product catalog" />
<br />
The thick red arrows show the data flow through the boxes.<br />
The green boxes are user-defined, while all other template boxes are basic already-existing boxes ready-to-use.<br />
You may explode pretty anything into basic boxes and some user-defined information access boxes,<br />
which hugely simplify the coding of the construction of your libraries, modules and pages.<br /><br />

<hr />

<!--
<h2 class="h2">Lets analyse each box of this example:</h2>
<a href="examples/productcount.php">Box #1: The counter of products</a><br />
<a href="examples/productpages.php">Box #2: The pagination of products</a><br />
<a href="examples/productquery.php">Box #3: The query of products</a><br />
<a href="examples/producttemplate.php">Box #4: The template of products</a><br />
<a href="examples/productmatrix.php">Box #5: The matrix of products</a><br />
<a href="examples/productfinal.php">Box #6: The final template of products</a><br />
-->
<h2 class="h2">Lets integrate anything working:</h2>

<a href="examples/product.php">The product catalog integrated using all the boxes</a> (definition and parameters into the PHP code)<br />
<a href="examples/productauto.php">The product catalog integrated using all the boxes</a> (XML definition and parameter box)<br />

<h2 class="h2">When reusable boxes become really interesting:</h2>

Now we have the product catalog done, lets build a news blog. We will use nearly all the same boxes except the data boxes.<br />
<br />
<a href="examples/news.php">The product catalog integrated using all the boxes</a> (XML definition and parameter box)<br />


<br /><br /><br />
<br /><br /><br />
<br /><br /><br />

</div>

</body>

</html>