Sign in Join
Wiki copytemporary

TurboPower Internet Pro: what changed

Revision 0 to 1. Removed lines have a minus sign; added lines have a plus sign.

Title: TurboPower Internet Pro

OldNewLine
1+[[Template:TurboPower Internet Pro]]
2+
3+### About
4+
5+Lazarus provides the package TurboPowerIPro (lazarus/components/turbopower_ipro/turbopoweripro.lpk) with the following features:
6+
7+ * It contains a visual control to put onto a form. When you install the package in the IDE, you get some new components in the palette, so you can drop them onto a form just like any LCL control.
8+ * It is written completely in Pascal and therefore works on all platforms out of the box without any extra installation.
9+ * You have the full control, what files/urls are opened.
10+ * It does not have all the features of a full webbrowser. No multimedia stuff, javascript or flash. This must be implemented by you.
11+
12+### Layouts
13+
14+ * Flow Layout (Normal Layout) - [![Checkmark.png](https://upload.wikimedia.org/wikipedia/commons/5/5a/Checkmark.png)](</File:Checkmark.png>)
15+ * Flexbox Layout - not supported
16+ * Grid layout - not supported
17+
18+### CSS
19+
20+ * width - [![Checkmark.png](https://upload.wikimedia.org/wikipedia/commons/5/5a/Checkmark.png)](</File:Checkmark.png>)
21+ * padding - is not supported
22+ * background - supports only color argument. image, image repeat, attachment, position are not supported
23+ * -border
24+ * border - [![Checkmark.png](https://upload.wikimedia.org/wikipedia/commons/5/5a/Checkmark.png)](</File:Checkmark.png>)
25+ * border-bottom - not supported
26+ * border-width - [![Checkmark.png](https://upload.wikimedia.org/wikipedia/commons/5/5a/Checkmark.png)](</File:Checkmark.png>)
27+ * border-color - [![Checkmark.png](https://upload.wikimedia.org/wikipedia/commons/5/5a/Checkmark.png)](</File:Checkmark.png>)
28+ * border-style - [![Checkmark.png](https://upload.wikimedia.org/wikipedia/commons/5/5a/Checkmark.png)](</File:Checkmark.png>)
29+ * height - not supported
30+
31+### Development information
32+
33+#### About
34+
35+ * Parsing the html document is important stage where a tree of nodes is generated, which represents the html document
36+ * Rendering - in this stage the controls are ordered and painted
37+
38+#### Units
39+
40+ * IpHtml -
41+ * IpHtmlNodes - contains classes for Tree structure representing the html document (like DOM). Some of the nodes classes are in IpHtml
42+ * IpHtmlParser - contains TIpHtmlParser class which parses the html document and generates tree.
43+ * IpCSS - Classes related to CSS. Classes for poperties, also parsing related routines,
44+
45+#### Parsing
46+
47+Important methods in TIpHtmlParser PARSE
48+
49+ * Create - AOwner: TIpHtml; - The result of parsing goes to AOwner. AStream: TStream - Here is the full html content to be parsed.
50+
51+ * Execute -
52+
53+ * ParseHtml
54+
55+ * ParseBody
56+
57+ * ParseInline
58+
59+ * ParseBodyText - parses the string content between the open and end tag -
60+```
61+<div>This is what is parsed</div>
62+```
63+
64+It could be just text or other html elements inside the tag
65+
66+ * ParseBlock
67+
68+ * ParseBaseProps - Parses the attributes of a Tag -
69+```
70+<div width="150px">
71+```
72+
73+##### Parse tree classes hierarchy
74+
75+Here you can see hierarchy of classes of nodes for parse tree
76+
77+**TIpHtmlNode** \- The base class for all HTML nodes
78+
79+ * **TIpHtmlNodeNv** \- Base class for all Non-visual nodes
80+ * **TIpHtmlNodeTITLE**
81+ * **TIpHtmlNodeMETA**
82+ * **TIpHtmlNodePARAM**
83+ * **TIpHtmlNodeSCRIPT**
84+
85+ * **TIpHtmlNodeMulti**
86+ * **TIpHtmlNodeCore** \- Introduces id, class, style ... attributes
87+ * **TIpHtmlNodeInline**
88+ * **TIpHtmlNodeAlignInline**
89+ * **TIpHtmlNodeControl**
90+ * **TIpHtmlNodeIFRAME**
91+ * **TIpHtmlNodeBUTTON**
92+ * **TIpHtmlNodeINPUT**
93+ * **TIpHtmlNodeSELECT**
94+ * **TIpHtmlNodeTEXTAREA**
95+ * **TIpHtmlNodeHR**
96+ * **TIpHtmlNodeIMG**
97+ * **TIpHtmlNodeLI**
98+ * **TIpHtmlNodeTABLE**
99+ * **TIpHtmlNodeHeader**
100+ * **TIpHtmlNodeP**
101+ * **TIpHtmlNodeA**
102+ * **TIpHtmlNodeADDRESS**
103+ * **TIpHtmlNodeAPPLET**
104+ * **TIpHtmlNodeBLINK**
105+ * **TIpHtmlNodeBLOCKQUOTE**
106+ * **TIpHtmlNodeBR**
107+ * **TIpHtmlNodeDD**
108+ * **TIpHtmlNodeDIV**
109+ * **TIpHtmlNodeDL**
110+ * **TIpHtmlNodeDT**
111+ * **TIpHtmlNodeFORM**
112+ * **TIpHtmlNodeGenInline**
113+ * **TIpHtmlNodeBASEFONT**
114+ * **TIpHtmlNodeDEL**
115+ * **TIpHtmlNodeFONT**
116+ * **TIpHtmlNodeFontStyle**
117+ * **TIpHtmlNodeINS**
118+ * **TIpHtmlNodeNOBR**
119+ * **TIpHtmlNodePhrase**
120+ * **TIpHtmlNodeSPAN**
121+ * **TIpHtmlNodeLABEL**
122+ * **TIpHtmlNodeList**
123+ * **TIpHtmlNodeUL**
124+ * **TIpHtmlNodeDIR**
125+ * **TIpHtmlNodeMENU**
126+ * **TIpHtmlNodeNOSCRIPT**
127+ * **TIpHtmlNodeOBJECT**
128+ * **TIpHtmlNodePRE**
129+ * **TIpHtmlNodeQ**
130+ * **TIpHtmlNodeOL**
131+ * **TIpHtmlNodeBlock**
132+ * **TIpHtmlNodeBODY**
133+ * **TIpHtmlNodeCAPTION**
134+ * **TIpHtmlNodeTableHeaderOrCell**
135+ * **TIpHtmlNodeTH**
136+ * **TIpHtmlNodeTD**
137+ * **TIpHtmlNodeFRAMESET**
138+ * **TIpHtmlNodeAREA**
139+ * **TIpHtmlNodeCOL**
140+ * **TIpHtmlNodeCOLGROUP**
141+ * **TIpHtmlNodeFIELDSET**
142+ * **TIpHtmlNodeFRAME**
143+ * **TIpHtmlNodeLEGEND**
144+ * **TIpHtmlNodeLINK**
145+ * **TIpHtmlNodeMAP**
146+ * **TIpHtmlNodeNOFRAMES**
147+ * **TIpHtmlNodeOPTGROUP**
148+ * **TIpHtmlNodeOPTION**
149+ * **TIpHtmlNodeTHeadFootBody**
150+ * **TIpHtmlNodeTBODY**
151+ * **TIpHtmlNodeTFOOT**
152+ * **TIpHtmlNodeTHEAD**
153+ * **TIpHtmlNodeTR**
154+
155+ * **TIpHtmlNodeHEAD**
156+ * **TIpHtmlNodeSTYLE**
157+ * **TIpHtmlNodeHtml**
158+ * **TIpHtmlNodeText**
159+
160+#### Classes
161+
162+##### TIpNodeBlockLayouter
163+
164+Parsing generated a tree of nodes representing the html document.
165+After that enqueue is preparing list of elements from the DOM tree structure
166+And TIpNodeBlockLayouter class works on this list to layout
167+
168+ 1. Method Calls Structure for TIpNodeBlockLayouter
169+
170+Below is a list of all methods in the class with the methods they call from the class.
171+If the method name has number next to it like CalcVRemain (2) it means the method is called from 2 methods in the class. No number indicates that just one method calls it.
172+If the called method has a number next to it, like DoQueueAlign (3) it means that the method is called 3 times in the current method. No number indicates that it is called just one time in the method.
173+
174+ * **Layout** (0)
175+ * **RemoveLeadingLFs**
176+ * **ProcessDuplicateLFs**
177+ * **RelocateQueue**
178+ * **LayoutQueue**
179+ * **LayoutQueue**
180+ * **QueueInit**
181+ * **InitMetrics**
182+ * **QueueLeadingObjects**
183+ * **TrimTrailingBlanks**
184+ * **DoQueueAlign** (3)
185+ * **InitInner**
186+ * **ApplyQueueProps**
187+ * **DoQueueElemWord**
188+ * **DoQueueElemObject**
189+ * **DoQueueElemSoftLF**
190+ * **DoQueueElemHardLF**
191+ * **DoQueueElemClear**
192+ * **DoQueueElemIndentOutdent** (2)
193+ * **DoQueueElemSoftHyphen**
194+ * **ContinueRow**
195+ * **EndRow**
196+ * **OutputQueueLine**
197+ * **DoQueueClear**
198+ * **CalcVRemain** (2)
199+ * **SetWordInfoLength**
200+ * **NextElemIsSoftLF**
201+ * **UpdateCurrent**
202+ * **Destroy**
203+ * **ClearWordList**
204+ * **UpdSpaceHyphenSize**
205+ * **UpdPropMetrics** (2)
206+ * **QueueInit**
207+ * **InitMetrics**
208+ * **QueueLeadingObjects**
209+ * **TrimTrailingBlanks**
210+ * **DoQueueAlign**
211+ * **OutputQueueLine**
212+ * **DoQueueClear**
213+ * **ApplyQueueProps**
214+ * **UpdPropMetrics**
215+ * **DoQueueElemWord**
216+ * **DoQueueElemObject**
217+ * **ObjectVertical**
218+ * **ObjectHorizontal**
219+ * **DoQueueElemSoftLF**
220+ * **DoQueueElemHardLF**
221+ * **DoQueueElemClear**
222+ * **DoQueueElemIndentOutdent**
223+ * **DoQueueElemSoftHyphen**
224+ * **CalcVRemain**
225+ * **SetWordInfoLength**
226+ * **NextElemIsSoftLF**
227+ * **RelocateQueue**
228+ * **CalcMinMaxQueueWidth**
229+ * **UpdateCurrent**
230+ * **UpdSpaceHyphenSize**
231+ * **ApplyMinMaxProps**
232+ * **UpdPropMetrics**
233+ * **TrimTrailingBlanks**
234+ * **CalcMinMaxPropWidth** (0)
235+ * **CalcMinMaxQueueWidth**
236+ * **DoRenderFont**
237+ * **DoRenderElemWord**
238+ * **saveCanvasProperties**
239+ * **RestoreCanvasProperties**
240+ * **RenderQueue**
241+ * **DoRenderFont**
242+ * **DoRenderElemWord**
243+ * **Render** (0)
244+ * **RenderQueue**
245+
246+#### Enqueue
247+
248+ 1. Intro
249+
250+The layouter is not using directly the DOM tree to layout the elements, it uses FElementQueue: TFPList list (in TIpHtmlBaseLayouter class) to layout elements.
251+FElementQueue is filled based on the Parsed Nodes Tree (DOM)
252+
253+ 1. What items are in the list
254+
255+In the FElementQueue list we can find
256+```
257+TIpHtmlElement = record
258+ ElementType : TElementType;
259+ AnsiWord: string;
260+ IsBlank : Integer;
261+ SizeProp: TIpHtmlPropA;
262+ Size: TSize;
263+ WordRect2 : TRect;
264+ Props : TIpHtmlProps;
265+ Owner : TIpHtmlNode;
266+ LFHeight : Integer; // Height of LineFeed elements
267+ IsSelected: boolean;
268+ end;
269+ PIpHtmlElement = ^TIpHtmlElement;
270+```
271+
272+Note that Owner : TIpHtmlNode; is holding the actual node from the DOM tree.
273+One node from the DOM tree can have multiple items in the FElementQueue list.
274+
275+ 1. Trigger of process
276+
277+The enqueue process can start in 3 places in TIpNodeBlockLayouter
278+when on of these methods is called - Layout, CalcMinMaxPropWidth or Render
279+In each of these 3 methods we can see the code
280+
281+```
282+if FElementQueue.Count = 0 then
283+ FOwner.Enqueue;
284+```
285+
286+If the list is empty it assumes that the Enque was not done and needs to be done.
287+Layout, CalcMinMaxPropWidth, Render need to have FElementQueue properly filled to proceed.
288+Calling enqueue in these 3 methods ensures that it will be done just before the first time the filled FElementQueue is needed.
289+
290+FOwner which enqueue method is called is declared as
291+FOwner : TIpHtmlNodeCore but it is usually TIpHtmlNodeBlock descendant
292+```
293+constructor TIpHtmlNodeBlock.Create(ParentNode: TIpHtmlNode;
294+ LayouterClass: TIpHtmlBaseLayouterClass);
295+ begin
296+ inherited Create(ParentNode);
297+ FBgColor := clNone;
298+ FTextColor := clNone;
299+ FBackground := '';
300+ FLayouter := LayouterClass.Create(Self);
301+ end;
302+```
303+
304+and most of the time it is the body node - TIpHtmlNodeBODY
305+
306+ 1. Filling FElementQueue
307+
308+As we said FOwner.enqueue is the starting point and FOwner is typically TIpHtmlNodeBODY.
309+What it does is to itterate all the children and call their enqueue method.
310+```
311+procedure TIpHtmlNodeMulti.Enqueue;
312+ var
313+ i : Integer;
314+ begin
315+ for i := 0 to Pred(FChildren.Count) do
316+ TIpHtmlNode(FChildren[i]).Enqueue;
317+ end;
318+```
319+
320+So, it does not add anything in FElementQueue directly but its children or their children will add.
321+
322+By default enqueue does nothing as we can see the implementation in TIpHtmlNode (top most Node class in the Nodes class hierarchy)
323+```
324+procedure TIpHtmlNode.Enqueue;
325+ begin
326+
327+ end;
328+```
329+
330+Different node classes overrides the Enqueue method to add elements in the FElementQueue list Such nodes classes are - TIpHtmlNodeText, TIpHtmlNodeDIV, TIpHtmlNodeBLOCKQUOTE, TIpHtmlNodeBR, TIpHtmlNodeDD ...
331+
332+#### Layout
333+
334+ 1. Intro
335+
336+#### Render
337+
338+ 1. Intro
339+
340+---
341+*From the Free Pascal wiki, page "TurboPower Internet Pro", as the Internet Archive kept it on 2026-01-16, last changed on 2025-05-01. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).*

Back to history