Skip to content

Commit 3831c7a

Browse files
treefrogframeworktreefrogframework
committed
updated docs.
1 parent 045484d commit 3831c7a

File tree

7 files changed

+493
-195
lines changed

7 files changed

+493
-195
lines changed

‎docs/_includes/footer.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<div class="footer-inner">
2-
&copy 2010 - 2022 <a id="treefrog-homepage-link" href="http://www.treefrogframework.org/" title="TreeFrog Framework" rel="home">TreeFrog Framework Project</a>
2+
&copy 2010 - 2025 <a id="treefrog-homepage-link" href="http://www.treefrogframework.org/" title="TreeFrog Framework" rel="home">TreeFrog Framework Project</a>
33
</div>

‎docs/en/user-guide/tutorial/index.md‎

Lines changed: 6 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -153,16 +153,12 @@ The pre-built SQL driver can be used for SQLite, although the SQLite driver can
153153

154154
## Specifying a Template System
155155

156-
In TreeFrog Framework, we can specify either Otama or ERB as a template system. We will set the TemplateSystem parameter in the _development.ini_ file.
156+
In TreeFrog Framework, ERB is selected as the default template system. It is set in the TemplateSystem parameter of the _development.ini_ file.
157157

158158
```
159159
TemplateSystem=ERB
160-
or
161-
TemplateSystem=Otama
162160
```
163161

164-
ERB is specified by default.
165-
166162
## Automatic Generation of Code Created from the Table
167163

168164
From the command line, run the command generator (tspawn) which will generate the underlying code. The example below shows the production of controller, model, and view. The table name is specified as the command argument.
@@ -188,12 +184,8 @@ Depending on the tspawn option, only controllers or models can be generated.
188184

189185
### Vue.js support
190186

191-
In version 2 and later, it is possible to choose to generate views using [vue.js](https://vuejs.org/).
192-
193-
```
194-
:
195-
Create sources for vue.js? [y/n] y ← Enter 'y'
196-
```
187+
It is possible to choose to generate views using [vue.js](https://vuejs.org/).
188+
See [Vite + Vue](/en/user-guide/view/vite+vue.html){:target="_blank"} chapter.
197189

198190
### Reference: Help for tspawn command
199191

@@ -547,9 +539,9 @@ As you can see, you can use the texport method to pass data to the view (templat
547539
548540
## View Mechanism
549541
550-
Two template systems have been incorporated into TreeFrog so far. These are the proprietary system (called Otama) and ERB. As is familiar from Rails, ERB is used for embedding into HTML.
542+
TreeFrog utilizes the ERB template system, which allows for the embedding of C++ code as it is known in Rails.
551543
552-
The default view that is automatically generated by the generator is an ERB file. So, let's take a look at the contents of index.erb. As you can see, the C++ code is surrounded by <% … %>. When the render method is called from the index action, the content of index.erb is returned as the response.
544+
Let's take a look at the contents of index.erb. As you can see, the C++ code is surrounded by <% … %>. When the render method is called from the index action, the content of index.erb is returned as the response.
553545
554546
```
555547
<!DOCTYPE HTML>
@@ -586,82 +578,6 @@ The default view that is automatically generated by the generator is an ERB file
586578
</table>
587579
```
588580
589-
**Another template system**
590-
591-
Otama is a template system that completely separates the presentation logic from the templates. The template is written in HTML and a "mark" element is inserted as the start tag of the section to be rewritten dynamically. The presentation logic file, written in C++ code, provides the logic in relation to the "mark".
592-
593-
The following example is a file, _index.html_, that is generated by the generator when it is specified in the Otama template system. This can include the file data, but you will see, if you open it in your browser as it is, because it uses HTML5, the design does not collapse at all without the data.
594-
595-
```
596-
<!DOCTYPE HTML>
597-
<html>
598-
<head>
599-
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
600-
<title data-tf="@head_title"></title>
601-
</head>
602-
<body>
603-
<h1>Listing Blog</h1>
604-
<a href="#" data-tf="@link_to_entry">New entry</a><br />
605-
<br />
606-
<table border="1" cellpadding="5" style="border: 1px #d0d0d0 solid; border-collapse: collapse;">
607-
<tr>
608-
<th>ID</th>
609-
<th>Title</th>
610-
<th>Body</th>
611-
<th></th>
612-
</tr>
613-
<tr data-tf="@for"> ← mark '@for'
614-
<td data-tf="@id"></td>
615-
<td data-tf="@title"></td>
616-
<td data-tf="@body"></td>
617-
<td>
618-
<a data-tf="@linkToShow">Show</a>
619-
<a data-tf="@linkToEdit">Edit</a>
620-
<a data-tf="@linkToRemove">Remove</a>
621-
</td>
622-
</tr>
623-
</table>
624-
</body>
625-
</html>
626-
```
627-
628-
A custom attribute called 'data-tf' is used to turn on the "mark". This is a Custom Data Attribute as defined in HTML5. A string beginning with "@" is used as the value for the "mark".
629-
630-
Next, let's look at the index.otm corresponding to the presentation logic.<br>
631-
The mark, which links to the associated logic, is declared in the above template, and continues in effect until a blank line is encountered. The logic is contained in the C++ part of the code.
632-
633-
Operators (such as == ~ =) are also used. The operators control different behaviors (for more information see the following chapters).
634-
635-
```c++
636-
#include "blog.h" ← This is as it is C++ code to include the blog.h
637-
@head_title ~= controller()->controllerName() + ": " + controller()->actionName()
638-
639-
@for :
640-
tfetch(QList<Blog>, blogList); /* Declaration to use the data passed from the controller */
641-
for (QListIterator<Blog> it(blogList); it.hasNext(); ) {
642-
const Blog &i = it.next(); /* reference to Blog object */
643-
%% /* usually, for loop statements, to repeat the child and elements */
644-
}
645-
646-
@id ~= i.id() /* assigns the results of i.id() to the content of the element marked with @id */
647-
648-
@title ~= i.title()
649-
650-
@body ~= i.body()
651-
652-
@linkToShow :== linkTo("Show", urla("show", i.id())) /* replaces the element and child elements with the results of linkTo() */
653-
654-
@linkToEdit :== linkTo("Edit", urla("edit", i.id()))
655-
656-
@linkToRemove :== linkTo("Remove", urla("remove", i.id()), Tf::Post, "confirm('Are you sure?')")
657-
```
658-
659-
The Otama operators, (and their combinations) are fairly simple:<br>
660-
\~ (tilde) sets the content of marked elements to the result of the right-hand side,
661-
\= output the HTML escape, therefore ~= sets the content of the element to the results of the right-hand side then HTML-escape, if you don't want to escape HTML, you can use ~==.
662-
663-
\: (colon) replaces the result of the right-hand child elements and the elements that are marked, therefore :== replaces the element without HTML escape.
664-
665581
### Passing Data from the Service or the Controller to the View
666582
667583
In order to use the exported data (objects) in the view, you need to declare its variables by the tfetch() function. For the argument, specify type of the variable and the variable name. The variables are the same state as immediately before the specified variables are exported, and can be used exactly the same way as a normal variable of C++.
@@ -678,7 +594,7 @@ View side :
678594
tfetch(int, hoge);
679595
```
680596
681-
The Otama system, generates the C++ code based on the presentation file and the template file. Internally, tmake is responsible for processing it. After that the code is compiled, with the shared library as one view, so, the operation is very fast.
597+
To pass multiple variables to the view, simply call _texport_ on each one.
682598
683599
#### HTML Glossary
684600

‎docs/en/user-guide/view/index.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ page_id: "070.0"
55

66
## View
77

8-
The role of view in a Web application is to generate an HTML document from a response. The developer creates each template for an HTML document to be embedded in a predetermined portion of the variable passed from the controller (model).
8+
The role of a view in a web application is to generate an HTML document and return it as a response. Developers create HTML templates in which variables passed from the controller are embedded in predefined locations. These templates can also include conditional branches and loops.
99

10-
There are two template systems so far adopted into the TreeFrog Framework. These are Otama and ERB. In both systems you can output the value dynamically using the template, and perform loops and conditional branching.
10+
TreeFrog allows the use of ERB as its template system. ERB is a system (or library) that lets you write program code directly within templates, similar to what is available in Ruby. While ERB is simple and easy to understand, it has the drawback of making it harder to preview or modify web designs.
1111

12-
The ERB system, such as in Ruby, is used to embed the template code in the program (library). While there are benefits in that it is easy to understand as a mechanism, it is difficult to check or change the Web design.
12+
When code written with the template system is built, it is converted into C++ code, compiled, and turned into a single shared library (dynamic link library). Since it is C++, it runs with high performance.
1313

14-
Otama is a template system that completely separates the presentation logic and the templates. The advantage is that checking or changing the Web Design is easy, and programmers and designers are better able to collaboration. The disadvantage is that a little more complex mechanism is required, and that there will be a slight learning cost.
14+
By delegating the frontend to a JavaScript framework, the backend implementation can be kept minimal. TreeFrog can generate a scaffold for Vite + Vue.
1515

16-
Performance is the same in either. When the codes are built, the templates are compiled after it is converted to C++ code. One shared library (dynamic link library) is created, so both run faster. After that, it depends on user's description of the code.
16+
Although a template system called Otama, which separates templates from presentation logic, was implemented, it is now deprecated.
1717

1818
* [To the chapter of ERB template system >>]({{ site.baseurl }}/en/user-guide/view/erb.html){:target="_blank"}
19-
* [To the chapter of Otama template system >>]({{ site.baseurl }}/en/user-guide/view/otama-template-system.html){:target="_blank"}
19+
* [To the chapter of Vite + Vue >>](/en/user-guide/view/vite+vue.html){:target="_blank"}

0 commit comments

Comments
 (0)