{"id":315,"date":"2022-01-07T18:21:08","date_gmt":"2022-01-07T21:21:08","guid":{"rendered":"https:\/\/gladiston.net.br\/?page_id=315"},"modified":"2022-07-13T16:05:35","modified_gmt":"2022-07-13T19:05:35","slug":"tdinotebook","status":"publish","type":"page","link":"https:\/\/gladiston.net.br\/en\/programacao\/lazarus-ide\/tdinotebook\/","title":{"rendered":"TDINotebook"},"content":{"rendered":"<p>A different way instead of opening modal windows (SDI) or multiple documents (MDI) is to open them using tabs, a method known as TDI. The TDI Interface is generally used in two ways: (1) with several tabs, similar to Google Chrome or Firefox where each tab represents a different and independent window and the TDINotebook comes ready to use so, for those who were used to the interface MDI maybe this method is the closest or (2) keep a single tab with the \u201clittle ear\u201d invisible and make forms be embedded inside them and then with the \u201clittle ears\u201d invisible we can change tabs where each one of them (or just one) will have its own form.<\/p>\n\n\n\n<p>The video below shows what a TDI interface is and how to install the TDINotebook component:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Lazarus IDE: What is a TDI application and how to install TDINotebook\" width=\"580\" height=\"326\" src=\"https:\/\/www.youtube.com\/embed\/IZFOSHklOJY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Note that the application is always taking advantage of the main window instead of creating a new window on top of it.<\/p>\n\n\n\n<p>You can use a method similar to the #2 option by creating a form inside a panel or PageControl, but if you do, you must also remember to destroy it manually and that&#039;s where TDINotebook helps, because closing a tab is inside it(a form) will be destroyed too. There will also be less code when you need to return to a previous window.<\/p>\n\n\n\n<p>Even mobile apps use this concept of tabs, but no app looks like Google Chrome or Firefox because only a single tab is visible and it is switched between forms, showing only one form at a time.<\/p>\n\n\n\n<p>If you liked this approach then install this component.<\/p>\n\n\n\n<p>More information at:<br><a href=\"https:\/\/wiki.freepascal.org\/TTDINotebook\">TTDINotebook \u2013 Lazarus wiki (freepascal.org)<\/a><\/p>\n\n\n\n<p>I wrote a demo where you can see in practice the simplicity of creating programs like this:<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/gladiston\/lazdemos_gsl\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/gladiston\/lazdemos_gsl<\/a><br><\/p>\n\n\n\n<p>Basically, you include the TDINotebook component in your main window and for the application not to look like a Google Chrome or Firefox browser, you include these lines in the OnCreate of your main form:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>\/\/ A TDINotebook doesn&#039;t work without a MainMenu to associate with.<br>\/\/ This is weird, but I have to accept it. The instruction below<br>\/\/ is innocuous, you have to make the association below in time<br>\/\/ of design<br>TDINoteBook1.MainMenu:=MainMenu1;<br>\/\/ TDINoteook will cover the entire area, uncomment it to<br>\/\/ let your application not look like a google chrome browser<br>\/\/ otherwise, leaving them will be practical, but with a google chrome look<br>TDINoteBook1.Align:=alClient;<br>\/\/ If your windows have a close or exit button then that&#039;s good<br>\/\/ hide close button &quot;X&quot; in tab with tbNone, otherwise<br>\/\/ use tbMenu or tbButtom to represent a closing ed option<br>\/\/TDINoteBook1.CloseTabButtom:=tbButtom; \/\/ tbNone, tbMenu, tbButtom<br>\/\/ nboHidePageListPopup: There is no popup to show the tabs(pages)<br>\/\/TDINoteBook1.Options:=TDINoteBook1.Options+[nboHidePageListPopup];<br>\/\/ nboShowAddTabButton: Does not show option to add new tab<br>\/\/TDINoteBook1.Options:=TDINoteBook1.Options+[n<\/code>boShowAddTabButton];<br>\/\/ nboShowCloseButtons:<code> Close buttons will not be displayed<br>\/\/TDINoteBook1.Options:=TDINoteBook1.Options+[nboShowCloseButtons];<br>\/\/ Whether or not to show the ears in the tabs<br>TDINoteBook1.ShowTabs:=false;<br>\/\/ Since this is a commercial application and not a browser so<br>\/\/ it&#039;s better to hide other buttons<br>TDINoteBook1.TDIActions.CloseAllTabs.Visible:=false;<br>TDINoteBook1.TDIActions.CloseTab.Visible:=false;<br>TDINoteBook1.TDIActions.NextTab.Visible:=false;<br>TDINoteBook1.TDIActions.PreviousTab.Visible:=false;<br>TDINoteBook1.TDIActions.TabsMenu.Visible:=false;<\/code><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><code>procedure TForm1.actClientesExecute(Sender: TObject);\nvar\ni:Integer;\nbegin\n  i:=TDINoteBook1.FindFormInPages(fmClientes);\n  if i&lt;0 then\n    fmClientes:=TfmClientes.Create(Self);\n  TDINoteBook1.ShowFormInPage(fmClientes, i);<\/code><\/code><\/pre>\n\n\n\n<p>The code above is to be didactic, you can add much more.<\/p>\n\n\n\n<p>Still in doubt? Watch the video on how to create a hands-on TDI application:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Creating a TDI application with TDINotebook\" width=\"580\" height=\"326\" src=\"https:\/\/www.youtube.com\/embed\/lKhq5phLEas?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Of course, using the TDINotebook component can make creating a TDI application easier, but it&#039;s not the only way to do it, we can create a TDI application using the TPageControl component. How? Watch the video below where I demonstrate how to do it:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Lazarus: Create a TDI application with just TPageControl\" width=\"580\" height=\"326\" src=\"https:\/\/www.youtube.com\/embed\/pcYDz4ix0BM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>","protected":false},"excerpt":{"rendered":"<p>Um jeito diferente de ao inv\u00e9s de abrir janelas modais(SDI) ou multiplos documentos(MDI) \u00e9 abrir usando tabs, m\u00e9todo conhecido como TDI. A Interface TDI geralmente \u00e9 usada de dois modos: (1) com varias tabs, similar ao Google Chrome ou Firefox onde cada tab representa uma janela diferente e independente e o TDINotebook j\u00e1 vem pronto [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":159,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/template-full-width.php","meta":{"footnotes":""},"class_list":["post-315","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/gladiston.net.br\/en\/wp-json\/wp\/v2\/pages\/315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gladiston.net.br\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gladiston.net.br\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gladiston.net.br\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gladiston.net.br\/en\/wp-json\/wp\/v2\/comments?post=315"}],"version-history":[{"count":5,"href":"https:\/\/gladiston.net.br\/en\/wp-json\/wp\/v2\/pages\/315\/revisions"}],"predecessor-version":[{"id":1011,"href":"https:\/\/gladiston.net.br\/en\/wp-json\/wp\/v2\/pages\/315\/revisions\/1011"}],"up":[{"embeddable":true,"href":"https:\/\/gladiston.net.br\/en\/wp-json\/wp\/v2\/pages\/159"}],"wp:attachment":[{"href":"https:\/\/gladiston.net.br\/en\/wp-json\/wp\/v2\/media?parent=315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}