Ctl32 TDI Tabbed Document Interface class

TDI - Tabbed Document Interface class

Home

This class provides a control that can be used for tabbed navigation between forms in a Visual FoxPro application. Very easy to use, implementing it requires minimal modification of existing projects. Download (Last updated 2013.09.24 22:30) CHANGELOG: 2013.09.12 Active tab caption appended to Top Level Form caption. Changed some internal method names for consistency. Fixed some issues with tooltip lingering after tab is closed. tdi.ico removed, now the default form icon for tabs is stored inside the class. To use a custom default icon, add a tdi.ico file. 2013.09.11 12:00 Added TdiCenterDialogs property to TDIMAIN. When set to .T., messageboxes and some other system dialog windows will be centered in relation to the top level form instead of being centered in the desktop. Minor changes to the way some images are generated, now using TEXT/ENDTEXT. Cleaned up some unused DEFINES. Added native windows tooltip for improved looks in newer Windows versions, VFP tooltips look outdated. Added caption shortening with ellipsis when caption does no fit in tab bar label. Changed Tab default font and size to use system status bars font and size. (Segoe UI 9pt in Windows 7) 2013.09.09 23:18 Added example project in example folder. To test it, run main.prg so the default directory and search path get set. 2013.09.09 22:45 Changed default height to 25 instead of 26, changed positions of TABICON and TABBUTTON. Changed position and height TABLABEL. Changed TDIBAR.GetFormIcon 2013.09.05 17:41 Added warning label to TDIBAR 2013.09.05 15:07 Solved projecthook class missing Why? Because today, the most common interface for most users is the tabbed interface of Internet browsers. By replicating the way a browser works in our apps, we have 90% of the job done. No need for menus, toolbars, etc. The only difference is that the first tab gets treated like a "Home Page" that cannot be moved or closed, and becomes our app "Home Page", so there is no "navigation bar" where an URL can be entered (Maybe it could be added later?) How to use To use in an project you will have to use a form that will act as a top level form for your app. You will have to hide the main VFP window in your app, the best way to do this is including a config.fpw file in your project with a "SCREEN=OFF" line. First create a form that will act as a menu form for the app, it will be the first tab. In this form, add controls that will enable the user to open the other forms of the app, set ShowWindow to 1 (In Top-Level Form). Now create a form that will act as the main container form for all the other forms. In this form, drop a TDIMAIN object. Then set ShowWindow to 2 (As Top-Level Form). Double click the TDIMAIN object, add code in TDININT to run the first "menu" form you created. This is all you have to do in this main form. Just call this form from your main prg when the app starts. In the previous image, part of the code sets up some properties of the control. You can use "This" instead of "Thisform.TdiMain" as shown in the image. or you can change the value of the properties of the control. The properties that can be changed are: TabFirstWidth: specifies the width of the first tab. The first tab has no close button so the user cannot close the main menu tab. It has no Icon so the left top corner of the app windows does not look so "heavy" since we already have the main app icon up there. TabMaxWidth: specifies the maximum width of the tabs. TdiGoToFirstTabOnClose: specifies if the first tab should become the active tab when another tab is closed. When set to FALSE, the next/previous tab becomes the active tab after a tab is closed. TdiCenterDialogs: specifies if certain system dialog windows will be centered in relation to the main top level form instead of the Windows Desktop. (Messagebox for example) You can also modify the Height of the TDIMAIN control to change the default Height of the TABBAR. The default value is 25, that seems like a nice default value. In modern versions of Windows, an inside border is added to the forms, so that border becomes the top border of the TABBAR resulting in an effective Height of 26 pixels. Some older versions of Windows or when themes are not used, there is no inside border in the forms. In those cases, the TABBAR increases its own height by one and adds a top border by itself. (Also a left and right border, but the left border gets hidden when the first tab is active.) Most of the UI code is to deal with different versions of Windows and different user settings (Themes, windows composition on/off, etc.) The last step is to set ShowWindow to 1 (In Top-Level Form) to all your forms that will be shown as tabs. NOTE: The PRGs in the winapi folder should be in the VFP search path so the class can find them. no need to set procedure to them or anything like that. The Class The tdi.vcx class library contains the following components: TDIMAIN This is the only class you will use directly. TDIFORM This form class will be added as a child form in your top level form. It will be positioned at the top, and will always be visible. This form class contains just one control, a TDIBAR. TDIBAR This container control is the main UI control users will see. It will contain one TDITAB for each open form, and one TDIBUTTON on the right. TDITAB This class represents an individual TAB. TDIBUTTON This class is a button. How it works The TDIMAIN control you add to your main top level form binds to the Activate event of the top level form. FORM.ACTIVATE -> TDIMAIN.FORMACTIVATE -> TDIFORM.TDIFORMADD In TDIFORMADD a new form is created of class TDIFORM. Since this form has ShowWindow set to 1, it will be contained in the Top Level Form where TDIMAIN is. This form is moved to the top of the TLF, and resized to the width of the TLF, and the height of TDIMAIN. Also it is set to always be on top of any other forms. This TDIFORM contains a TDIBAR class object, that will manage the UI of the Tab controls. TDIBAR also contains a TDIBUTTON that by default activates the first tab. TDIBAR monitors windows creation, and when a window is created by VFP, it monitors when the window is about to be displayed. At that point it checks some properties of the window to determine if the window belongs to an eligible form to get tabbed. If an eligible form is found, some properties of the form are changed, the form controls are all moved down by the height of the TDIBAR, so the TDBAR will not hide some of the form controls, then the form is maximized, some form properties are saved to an array of TDIBAR, and then a TDITAB is added for the form to TDIBAR. The form icon and the form caption are copied to the TDITAB of the form. The form caption is monitored for changes so the TDITAB caption will be updated. If the form has no icon, a standard icon is used instead. If the form BackColor is other than the default BackColor for forms, the TDITAB BackColor will be changed to the form BackColor. The TDIBAR colors/style will be related to the active color scheme of Windows, the Theme settings and DWM Composition. Changes to Windows color schemes or theme settings are NOT monitored. TABS can be dragged and dropped to rearrange them, except for the first TAB that acts as a HOME TAB and cannot be moved or closed. In this image: 1: Top level form that contains a TDIMAIN object and will contain the rest of the forms as child windows. 2: Form that contains a menu to access the rest of the forms, this form is called in TDIMAIN.TDINIT and becomes the first TAB. 3,4,5: Forms that have been modified by the class, borders and title bar removed, controls moved down by the height of the tab bar, height increased by the height of the tab bar, and then maximized. These forms are also contained by the top level form. Notice how these forms have a blank top border with a height equal to the height of the TDIBAR. 6: The TDIFORM added by TDIMAIN. This form contains a TDIBAR and is resized and positioned at the top of the top level form 1. This form is kept always at the top of the Z order by setting its property AlwaysOnTop to TRUE. The end result is this: As can be seen, it is just a TOP LEVEL FORM  with MDI forms inside it (including the form used by the tab bar) arranged in a way as to simulate a tabbed document interface. One side effect is that each time the user clicks in a tab, the active form loses focus, focus goes to the form containing the tab bar, and then focus shifts to the form being activated by the tab clicked. References http://richnewman.wordpress.com/category/tabbed-document-interface/ http://en.wikipedia.org/wiki/Tab_(GUI)