User Tools

Site Tools


creating_20a_20tab_20control

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

creating_20a_20tab_20control [2018/03/31 13:19]
127.0.0.1 external edit
creating_20a_20tab_20control [2018/04/15 19:16] (current)
tbest3112 Added syntax highlighting
Line 4: Line 4:
 ==== Initialisation ==== ==== Initialisation ====
 \\  Firstly the necessary initialisation:​\\ \\  \\  Firstly the necessary initialisation:​\\ \\ 
 +<code bb4w>
         INSTALL @lib$+"​WINLIB2A"​         INSTALL @lib$+"​WINLIB2A"​
         INSTALL @lib$+"​WINLIB5A"​         INSTALL @lib$+"​WINLIB5A"​
Line 24: Line 25:
         icex.dwICC% = ICC_TAB_CLASSES         icex.dwICC% = ICC_TAB_CLASSES
         SYS "​InitCommonControlsEx",​ icex{}         SYS "​InitCommonControlsEx",​ icex{}
 +</​code>​
 Although not essential, trapping errors is desirable; otherwise an error message may be hidden behind the tab control:\\ \\  Although not essential, trapping errors is desirable; otherwise an error message may be hidden behind the tab control:\\ \\ 
 +<code bb4w>
         ON ERROR SYS "​MessageBox",​ @hwnd%, REPORT$, 0, 48 : QUIT         ON ERROR SYS "​MessageBox",​ @hwnd%, REPORT$, 0, 48 : QUIT
 +</​code>​
 \\  \\ 
 ==== Creating the tab control ==== ==== Creating the tab control ====
 \\  You create an '​empty'​ tab control as follows:\\ \\  \\  You create an '​empty'​ tab control as follows:\\ \\ 
 +<code bb4w>
         Width% = 500         Width% = 500
         Height% = 500         Height% = 500
Line 34: Line 39:
         \                      WS_CLIPSIBLINGS + WS_CLIPCHILDREN,​ 0)         \                      WS_CLIPSIBLINGS + WS_CLIPCHILDREN,​ 0)
         IF hTC% = 0 ERROR 100, "​Couldn'​t create tab control"​         IF hTC% = 0 ERROR 100, "​Couldn'​t create tab control"​
 +</​code>​
 The width and height values are in pixels.\\ \\  At this stage the control doesn'​t have any tabs; to add them use code similar to the following:​\\ \\  The width and height values are in pixels.\\ \\  At this stage the control doesn'​t have any tabs; to add them use code similar to the following:​\\ \\ 
 +<code bb4w>
         PROCadd_tab(hTC%,​ "​First",​ 1)         PROCadd_tab(hTC%,​ "​First",​ 1)
         PROCadd_tab(hTC%,​ "​Second",​ 2)         PROCadd_tab(hTC%,​ "​Second",​ 2)
         PROCadd_tab(hTC%,​ "​Third",​ 3)         PROCadd_tab(hTC%,​ "​Third",​ 3)
 +</​code>​
 Here the second parameter of each call is the text string that appears on the tab, and the third parameter is an ID value for each tab. The **PROCadd_tab** routine is listed later.\\ \\  Here the second parameter of each call is the text string that appears on the tab, and the third parameter is an ID value for each tab. The **PROCadd_tab** routine is listed later.\\ \\ 
 ==== Resizing your main window ==== ==== Resizing your main window ====
 \\  You may, optionally, want to resize your main output window so that it is the same size as the tab control. If you do you can use the following code:\\ \\  \\  You may, optionally, want to resize your main output window so that it is the same size as the tab control. If you do you can use the following code:\\ \\ 
 +<code bb4w>
         DIM rc{l%,​t%,​r%,​b%}         DIM rc{l%,​t%,​r%,​b%}
         SYS "​GetWindowRect",​ hTC%, rc{}         SYS "​GetWindowRect",​ hTC%, rc{}
Line 47: Line 56:
         SYS "​AdjustWindowRect",​ rc{}, style% AND NOT (WS_SIZEBOX + WS_MAXIMIZEBOX),​ 0         SYS "​AdjustWindowRect",​ rc{}, style% AND NOT (WS_SIZEBOX + WS_MAXIMIZEBOX),​ 0
         SYS "​SetWindowPos",​ @hwnd%, 0, 0, 0, rc.r%-rc.l%,​ rc.b%-rc.t%,​ 102         SYS "​SetWindowPos",​ @hwnd%, 0, 0, 0, rc.r%-rc.l%,​ rc.b%-rc.t%,​ 102
 +</​code>​
 This code also disables the ability to resize or maximise the window.\\ \\  This code also disables the ability to resize or maximise the window.\\ \\ 
 ==== Handling page changes ==== ==== Handling page changes ====
 \\  This is where it gets interesting! Unlike a Property Sheet, changing what is displayed on each page as the tabs are clicked by the user is your responsibility. You must monitor the page changes, and automatically hide the contents of the previous page and show the contents of the new page as required. The basic code to monitor changes is as follows:\\ \\  \\  This is where it gets interesting! Unlike a Property Sheet, changing what is displayed on each page as the tabs are clicked by the user is your responsibility. You must monitor the page changes, and automatically hide the contents of the previous page and show the contents of the new page as required. The basic code to monitor changes is as follows:\\ \\ 
 +<code bb4w>
         prevsel% = -1         prevsel% = -1
         REPEAT         REPEAT
Line 60: Line 71:
         UNTIL INKEY(1) = 0         UNTIL INKEY(1) = 0
         END         END
 +</​code>​
 Here two variables **prevsel%** and **currsel%** keep track of the previous and current selections respectively.\\ \\  There are two main approaches to drawing on the pages. One is to draw individual controls (buttons, boxes etc.) and the other is to display a dialogue box on each page, where the dialogue boxes contain the controls. Using dialogue boxes has the advantage of providing the standard navigation controls (e.g. using Tab) but is complicated by the DPI issue (see later).\\ \\  To start off with here is a simple example of displaying an individual button on the second tab (currsel% = 1):\\ \\  Here two variables **prevsel%** and **currsel%** keep track of the previous and current selections respectively.\\ \\  There are two main approaches to drawing on the pages. One is to draw individual controls (buttons, boxes etc.) and the other is to display a dialogue box on each page, where the dialogue boxes contain the controls. Using dialogue boxes has the advantage of providing the standard navigation controls (e.g. using Tab) but is complicated by the DPI issue (see later).\\ \\  To start off with here is a simple example of displaying an individual button on the second tab (currsel% = 1):\\ \\ 
 +<code bb4w>
         hbutton% = FN_button(hTC%,"​Tab Two",​50,​50,​100,​24,​100,​0)         hbutton% = FN_button(hTC%,"​Tab Two",​50,​50,​100,​24,​100,​0)
         SYS "​ShowWindow",​ hbutton%, SW_HIDE         SYS "​ShowWindow",​ hbutton%, SW_HIDE
Line 74: Line 87:
         UNTIL INKEY(1) = 0         UNTIL INKEY(1) = 0
         END         END
 +</​code>​
 Here the button is hidden when the //​previous//​ selection is 1, and shown when the //current// selection is 1. Hopefully you can see how the code could be extended to cover multiple controls on multiple pages. See the description of the [[http://​www.bbcbasic.co.uk/​bbcwin/​manual/​bbcwing.html#​winlib5|WINLIB5A library]] for details of the various controls that can be incorporated.\\ \\  In the alternative case the code to display a dialogue box on each tab would be as follows:\\ \\  Here the button is hidden when the //​previous//​ selection is 1, and shown when the //current// selection is 1. Hopefully you can see how the code could be extended to cover multiple controls on multiple pages. See the description of the [[http://​www.bbcbasic.co.uk/​bbcwin/​manual/​bbcwing.html#​winlib5|WINLIB5A library]] for details of the various controls that can be incorporated.\\ \\  In the alternative case the code to display a dialogue box on each tab would be as follows:\\ \\ 
 +<code bb4w>
         FOR index% = 0 TO DIM(dlg%(), 1)         FOR index% = 0 TO DIM(dlg%(), 1)
           !(dlg%(index%)!4+8) = hTC%           !(dlg%(index%)!4+8) = hTC%
Line 91: Line 106:
         UNTIL INKEY(1) = 0         UNTIL INKEY(1) = 0
         END         END
 +</​code>​
 Here **dlg%()** is an array containing the values returned from [[http://​www.bbcbasic.co.uk/​bbcwin/​manual/​bbcwing.html#​newdialog|FN_newdialog()]]. Note the special piece of '​magic'​ code preceding the **PROC_showdialog()** which is essential to make this work.\\ \\  You should create your dialogue boxes in the usual way, one for each tab; that can be done at the start of the program during the initialisation phase. See the description of the [[http://​www.bbcbasic.co.uk/​bbcwin/​manual/​bbcwing.html#​winlib2|WINLIB2 library]] for details. Since the size of a dialogue box, in pixels, varies with the DPI (dots-per-inch) setting you may need to take special care to ensure the dialogue boxes fit the pages of the tab control (see [[/​Supporting%20different%20DPI%20values|Supporting different DPI values]]).\\ \\  Here **dlg%()** is an array containing the values returned from [[http://​www.bbcbasic.co.uk/​bbcwin/​manual/​bbcwing.html#​newdialog|FN_newdialog()]]. Note the special piece of '​magic'​ code preceding the **PROC_showdialog()** which is essential to make this work.\\ \\  You should create your dialogue boxes in the usual way, one for each tab; that can be done at the start of the program during the initialisation phase. See the description of the [[http://​www.bbcbasic.co.uk/​bbcwin/​manual/​bbcwing.html#​winlib2|WINLIB2 library]] for details. Since the size of a dialogue box, in pixels, varies with the DPI (dots-per-inch) setting you may need to take special care to ensure the dialogue boxes fit the pages of the tab control (see [[/​Supporting%20different%20DPI%20values|Supporting different DPI values]]).\\ \\ 
 ==== Procedures ==== ==== Procedures ====
 \\  Finally, the **PROCadd_tab** procedure:​\\ \\  \\  Finally, the **PROCadd_tab** procedure:​\\ \\ 
 +<code bb4w>
         DEF PROCadd_tab(htc%,​ text$, id%)         DEF PROCadd_tab(htc%,​ text$, id%)
         LOCAL cti{}, res%         LOCAL cti{}, res%
Line 103: Line 120:
         IF res% = -1 ERROR 100, "​Couldn'​t send Tab Control info"         IF res% = -1 ERROR 100, "​Couldn'​t send Tab Control info"
         ENDPROC         ENDPROC
 +</​code>​
creating_20a_20tab_20control.txt ยท Last modified: 2018/04/15 19:16 by tbest3112