Ooops
November 25, 2020, 08:25:29 AM

Author Topic: [bmx] Side tabber by matibee [ 1+ years ago ]  (Read 620 times)

Offline BlitzBot

  • Jr. Member
  • **
  • Posts: 1
[bmx] Side tabber by matibee [ 1+ years ago ]
« on: June 29, 2017, 12:28:39 AM »
Title : Side tabber
Author : matibee
Posted : 1+ years ago

Description : Original post: <a href="../Community/posts9208-3.html?topic=97253" target="_blank">http://www.blitzbasic.com/Community/posts.php?topic=97253[/url]

A picture tells a thousand words..


Download the images for the sample code, the source and even the photoshop doc used to create the sample layout.. <a href="http://www.matibee.co.uk/temp/sidetab.zip" target="_blank">http://www.matibee.co.uk/temp/sidetab.zip[/url]

This side tab "Gadget" will manage the tab panels for you and supports customization via interchangable images.

The tab labels are left blank for you to create unique active and inactive images (these will look way cooler than ordinary text labels :) ) The tab label images can be any height in Y, not just limited to the size provided in the sample.

Limitations:  No code is provided for destroying a tabber or an individual tab.  Resizing the parent view smaller than the tabber needs will result in its distortion.

Have fun.
Matt


Code :
Code: BlitzMax
  1. SuperStrict
  2. Import maxgui.drivers
  3.  
  4. Incbin "incbin//sidetab_leftedge.png"
  5. Incbin "incbin//sidetab_rightedge.png"
  6. Incbin "incbin//sidetab_topedge.png"
  7. Incbin "incbin//sidetab_btmedge.png"
  8.  
  9. Incbin "incbin//sidetab_coltop_active.png"
  10. Incbin "incbin//sidetab_coltop_inactive.png"
  11.  
  12. Incbin "incbin//sidetab_colleft_active.png"
  13. Incbin "incbin//sidetab_colleft_inactive.png"
  14.  
  15. Incbin "incbin//sidetab_colmidtop_active.png"
  16. Incbin "incbin//sidetab_colmidbtm_active.png"
  17.  
  18. Incbin "incbin//sidetab_colmid_inactive.png"
  19.  
  20. Incbin "incbin//sidetab_colbtm_active.png"
  21. Incbin "incbin//sidetab_colbtm_inactive.png"
  22.  
  23. Incbin "incbin//sidetab_corner_tl.png"
  24. Incbin "incbin//sidetab_corner_tr.png"
  25. Incbin "incbin//sidetab_corner_bl.png"
  26. Incbin "incbin//sidetab_corner_br.png"
  27.  
  28. '-----------------------------------------------------------------------------------------------------------------
  29. '----------------------------------------------------------------------------------------------------------------------
  30. Type sideTabPixmapPair
  31.         Field activePixmap:TPixmap
  32.         Field inactivePixmap:TPixmap
  33. End Type
  34. '----------------------------------------------------------------------------------------------------------------------
  35. Type sideTab
  36.        
  37.         Global stImages:TPixmap[17]
  38.         Global STIC_LEFT_EDGE%          =       0
  39.         Global STIC_RIGHT_EDGE%         =       1
  40.         Global STIC_TOP_EDGE%           =       2
  41.         Global STIC_BTM_EDGE%           =       3
  42.         Global STIC_COL_TOP_ACTIVE%     =       4
  43.         Global STIC_COL_TOP_INACTIVE% =         5
  44.         Global STIC_COL_LEFT_ACTIVE%    =       6
  45.         Global STIC_COL_LEFT_INACTIVE% =        7
  46.         Global STIC_COL_MID_TOP_ACTIVE% =       8
  47.         Global STIC_COL_MID_BTM_ACTIVE% =       9
  48.         Global STIC_COL_MID_INACTIVE%   =       10
  49.         Global STIC_COL_BTM_ACTIVE%     =       11
  50.         Global STIC_COL_BTM_INACTIVE% =         12
  51.         Global STIC_TL_CORNER%          =       13
  52.         Global STIC_TR_CORNER%          =       14
  53.         Global STIC_BL_CORNER%          =       15
  54.         Global STIC_BR_CORNER%          =       16
  55.        
  56.         '-----------------------------------------------------------------------------------------------------------------
  57.         Global borderSize:Int           ' pixel size taken from the images
  58.         Global tabWidth:Int                     ' pixel size taken from the images
  59.         Global sideTabList:TList                ' a list of all created sideTabs for the event handler
  60.  
  61.         '-----------------------------------------------------------------------------------------------------------------
  62.         Field parent:TGadget            ' parent gadget of this tabview
  63.         Field xPos:Int                          ' position inside the parent
  64.         Field yPos:Int
  65.         Field currentTab:Int = -1       ' currently active tab (this is invalid before any tabs are created)
  66.         Field leftBorderPanel:TGadget ' the only panel we have to resize when the user adds a tab
  67.         Field tabButtons:TList          ' an active panel for each tab, that acts as a clickable area
  68.         Field leftColumnPanels:TList    ' list of panels that make up the left column of images
  69.         Field tabPixmaps:TList          ' a list of pixmaps in use
  70.         Field managedPanels:TList       ' a panel is automatically created for each newly created tab
  71.         Field client:TGadget            ' the main "client area" (a panel) inside the tab view
  72.         '-----------------------------------------------------------------------------------------------------------------
  73.         '-----------------------------------------------------------------------------------------------------------------     
  74.         Function Create:sideTab( parent:TGadget, X:Int, Y:Int, Width:Int, Height:Int, r:Int, g:Int, b:Int )
  75.                
  76.                 Local st:sideTab = New sideTab
  77.                
  78.                 If ( sideTabList = Null )
  79.                         sideTabList = New TList
  80.                         AddHook EmitEventHook, eventHandler, Null, 1
  81.                 End If
  82.                
  83.                 sideTabList.AddLast( st )
  84.        
  85.                 st.parent = parent
  86.                 st.managedPanels = New TList
  87.  
  88.                 st.tabButtons = New TList
  89.                 st.leftColumnPanels = New TList
  90.                 st.tabPixmaps = New TList
  91.                 st.xPos = X
  92.                 st.yPos = Y
  93.                
  94.                 If ( stImages[0] = Null )
  95.                         LoadImages()
  96.                 End If
  97.                
  98.                 Local x2:Int = X + tabWidth                     ' start of first corner
  99.                 Local x3:Int = x2 + borderSize          ' start of client area
  100.                 Local x4:Int = X + Width - bordersize   ' end of client area
  101.                
  102.                 Local y2:Int = Y + borderSize                   ' start of client area
  103.                 Local y3:Int = Height - bordersize
  104.                
  105.                 Local cliHeight:Int = Height - bordersize * 2
  106.                 Local cliWidth:Int = Width - tabWidth - bordersize * 2
  107.                
  108.                
  109.                 Local p:Tgadget = CreatePanel( x2, Y, borderSize, borderSize, parent ) ' top left corner
  110.                 SetGadgetLayout( p, 1,0,1,0 )
  111.                 SetGadgetPixmap( p, stImages[STIC_TL_CORNER] )
  112.                                
  113.                 p = CreatePanel( x3, Y, cliWidth, bordersize, parent )  ' top border
  114.                 SetGadgetLayout( p, 1,1,1,0 )
  115.                 SetGadgetPixmap( p, stImages[STIC_TOP_EDGE] )
  116.                                
  117.                 p = CreatePanel( x4, Y, bordersize, bordersize, parent )        ' top right corner
  118.                 SetGadgetLayout( p, 0,1,1,0 )
  119.                 SetGadgetPixmap( p, stImages[STIC_TR_CORNER] )
  120.                                
  121.                 st.client = CreatePanel( x3, y2, cliWidth, cliHeight, parent )  ' client area
  122.                 SetGadgetLayout( st.client, 1,1,1,1 )
  123.                 SetPanelColor( st.client, r, g, b )
  124.                                
  125.                 st.leftBorderPanel = CreatePanel( x2, y2, bordersize, cliHeight, parent ) ' left border
  126.                 SetGadgetLayout( st.leftBorderPanel, 1,0,1,1 )
  127.                 SetGadgetPixmap( st.leftBorderPanel, stImages[STIC_LEFT_EDGE] )
  128.                
  129.                 p = CreatePanel( x4, y2, bordersize, cliHeight, parent )        ' right border
  130.                 SetGadgetLayout( p, 0,1,1,1 )
  131.                 SetGadgetPixmap( p, stImages[STIC_RIGHT_EDGE] )
  132.                
  133.                 p = CreatePanel( x2, y3, bordersize, bordersize, parent )       ' bottom left corner
  134.                 SetGadgetLayout( p, 1,0,0,1 )
  135.                 SetGadgetPixmap( p, stImages[STIC_BL_CORNER] )
  136.  
  137.                 p = CreatePanel( x4, y3, bordersize, bordersize, parent )       ' bottom right corner
  138.                 SetGadgetLayout( p, 0,1,0,1 )
  139.                 SetGadgetPixmap( p, stImages[STIC_BR_CORNER] )
  140.                
  141.                 p = CreatePanel( x3, y3, cliWidth, bordersize, parent )         ' bottom border
  142.                 SetGadgetLayout( p, 1,1,0,1 )
  143.                 SetGadgetPixmap( p, stImages[STIC_BTM_EDGE] )
  144.                
  145.                 Return st
  146.         End Function
  147.         '-----------------------------------------------------------------------------------------------------------------     
  148.         '-----------------------------------------------------------------------------------------------------------------
  149.         Function LoadImages()
  150.                 stImages[STIC_LEFT_EDGE] = LoadPixmap( "incbin::incbin//sidetab_leftedge.png" )
  151.                 stImages[STIC_RIGHT_EDGE] = LoadPixmap( "incbin::incbin//sidetab_rightedge.png" )
  152.                 stImages[STIC_TOP_EDGE] = LoadPixmap( "incbin::incbin//sidetab_topedge.png" )
  153.                 stImages[STIC_BTM_EDGE] = LoadPixmap( "incbin::incbin//sidetab_btmedge.png" )
  154.                 stImages[STIC_COL_TOP_ACTIVE] = LoadPixmap( "incbin::incbin//sidetab_coltop_active.png" )
  155.                 stImages[STIC_COL_TOP_INACTIVE] = LoadPixmap( "incbin::incbin//sidetab_coltop_inactive.png" )
  156.                 stImages[STIC_COL_LEFT_ACTIVE] = LoadPixmap( "incbin::incbin//sidetab_colleft_active.png" )
  157.                 stImages[STIC_COL_LEFT_INACTIVE] = LoadPixmap( "incbin::incbin//sidetab_colleft_inactive.png" )
  158.                 stImages[STIC_COL_MID_TOP_ACTIVE] = LoadPixmap( "incbin::incbin//sidetab_colmidtop_active.png" )
  159.                 stImages[STIC_COL_MID_BTM_ACTIVE] = LoadPixmap( "incbin::incbin//sidetab_colmidbtm_active.png" )
  160.                 stImages[STIC_COL_MID_INACTIVE] = LoadPixmap( "incbin::incbin//sidetab_colmid_inactive.png" )
  161.                 stImages[STIC_COL_BTM_ACTIVE] = LoadPixmap( "incbin::incbin//sidetab_colbtm_active.png" )
  162.                 stImages[STIC_COL_BTM_INACTIVE] = LoadPixmap( "incbin::incbin//sidetab_colbtm_inactive.png" )
  163.                 stImages[STIC_TL_CORNER] = LoadPixmap( "incbin::incbin//sidetab_corner_tl.png" )
  164.                 stImages[STIC_TR_CORNER] = LoadPixmap( "incbin::incbin//sidetab_corner_tr.png" )
  165.                 stImages[STIC_BL_CORNER] = LoadPixmap( "incbin::incbin//sidetab_corner_bl.png" )
  166.                 stImages[STIC_BR_CORNER] = LoadPixmap( "incbin::incbin//sidetab_corner_br.png" )
  167.                 borderSize = PixmapWidth( stImages[STIC_TL_CORNER] ) ' borders must be square
  168.                 tabWidth = PixmapWidth( stImages[STIC_COL_BTM_ACTIVE] ) - borderSize
  169.         End Function
  170.         '-----------------------------------------------------------------------------------------------------------------
  171.         '-----------------------------------------------------------------------------------------------------------------
  172.         Function eventHandler:Object( pID%, pData:Object, pContext:Object )
  173.                 Local event:TEvent = TEvent(pData)
  174.                 If event
  175.                         If ( event.id = EVENT_MOUSEUP )
  176.                                 Local tabber:sideTab
  177.                                 For tabber = EachIn sideTabList
  178.                                         Local i:Int = 0
  179.                                         For Local b:TGadget = EachIn tabber.tabButtons
  180.                                                 If ( event.source = b )
  181.                                                         tabber.ActivateTab( i )
  182.                                                         Return event
  183.                                                 End If
  184.                                                 i :+ 1
  185.                                         Next
  186.                                 Next
  187.                         End If
  188.                 EndIf
  189.                 Return pData
  190.         EndFunction
  191.         '-----------------------------------------------------------------------------------------------------------------
  192.         '-----------------------------------------------------------------------------------------------------------------     
  193.         Method AddTab:TGadget( activePixmap:TPixmap, inactivePixmap:TPixmap )
  194.                
  195.                 If ( currentTab < 0 ) currentTab = 0
  196.                
  197.                 Local p:TGadget
  198.                 Local yStart:Int = yPos + borderSize
  199.                
  200.                 For Local p:TGadget = EachIn leftColumnPanels
  201.                         yStart :+ GadgetHeight( p )
  202.                 Next
  203.                
  204.                 Local yEnd:Int = yStart + borderSize
  205.                
  206.                 If ( leftColumnPanels.Count() = 0 )
  207.                         p = CreatePanel( xPos, yStart, tabwidth + borderSize, borderSize, parent )
  208.                         SetGadgetLayout( p, 1,0,1,0 )
  209.                         leftColumnPanels.AddLast( p )
  210.                 Else
  211.                         yStart :- borderSize
  212.                         yEnd :- borderSize
  213.                 End If
  214.                
  215.                 p = CreatePanel( xPos, yStart + bordersize, bordersize, PixmapHeight( activePixmap ), parent )
  216.                 SetGadgetLayout( p, 1,0,1,0)
  217.  
  218.                 yEnd :+ PixmapHeight( activePixmap )
  219.                 leftColumnPanels.AddLast( p )
  220.                
  221.                 Local pp:sideTabPixmapPair = New sideTabPixmapPair
  222.                 pp.activePixmap = activePixmap
  223.                 pp.inactivePixmap = inactivePixmap
  224.                 tabPixmaps.AddLast( pp )
  225.                
  226.                 p = CreatePanel( xpos, yStart + borderSize + PixmapHeight( activePixmap ), tabWidth + borderSize, ..
  227.                                                 borderSize, parent )
  228.                 SetGadgetLayout( p, 1,0,1,0 )
  229.  
  230.                 yEnd :+ borderSize
  231.                 leftColumnPanels.AddLast( p )
  232.                 p = CreatePanel( xpos + borderSize, yStart + borderSize, tabWidth + bordersize, ..
  233.                                                 PixmapHeight( activePixmap ), parent, PANEL_ACTIVE  )
  234.                 SetGadgetLayout( p, 1,0,1,0 )
  235.                
  236.                 If ( tabButtons.Count() = 0 )
  237.                         SetPanelPixmap( p, activePixmap )
  238.                 Else
  239.                         SetPanelPixmap( p, inactivePixmap )
  240.                 End If
  241.                 tabButtons.AddLast( p )
  242.                
  243.                 SetGadgetShape( leftBorderPanel, xpos + tabWidth, yEnd, borderSize, ..
  244.                                                 yPos + GadgetHeight( client ) - yEnd + borderSize )
  245.                
  246.                 AdjustActiveImages()
  247.                
  248.                 Local newPanel:TGadget = CreatePanel( 0, 0, GadgetWidth( client ), GadgetHeight( client ), client )
  249.                 SetGadgetLayout( newPanel, 1, 1, 1, 1 )
  250.                 managedPanels.AddLast( newPanel )
  251.                 Return newPanel
  252.                
  253.         End Method
  254.         '-----------------------------------------------------------------------------------------------------------------
  255.         '-----------------------------------------------------------------------------------------------------------------     
  256.         Method AdjustActiveImages()
  257.                 Local tab:Int = 0
  258.                 Local c:Int = 0
  259.                 Local lasttab:Int = tabButtons.Count() - 1
  260.                 For Local p:TGadget = EachIn leftColumnPanels
  261.                         Select c
  262.                         Case 0
  263.                                 If tab = 0
  264.                                         If currentTab = tab
  265.                                                 SetPanelPixmap( p, stImages[STIC_COL_TOP_ACTIVE] )
  266.                                         Else
  267.                                                 SetPanelPixmap( p, stImages[STIC_COL_TOP_INACTIVE] )
  268.                                         End If
  269.                                 End If
  270.                         Case 1
  271.                                 If currentTab = tab
  272.                                         SetPanelPixmap( p, stImages[STIC_COL_LEFT_ACTIVE] )
  273.                                 Else
  274.                                         SetPanelPixmap( p, stImages[STIC_COL_LEFT_INACTIVE] )
  275.                                 End If
  276.                         Case 2
  277.                                 If currentTab = tab
  278.                                         If ( tab = lasttab )
  279.                                                 SetPanelPixmap( p, stImages[STIC_COL_BTM_ACTIVE] )
  280.                                         Else
  281.                                                 SetPanelPixmap( p, stImages[STIC_COL_MID_BTM_ACTIVE] )
  282.                                         End If
  283.                                 Else If currentTab = tab + 1
  284.                                         SetPanelPixmap( p, stImages[STIC_COL_MID_TOP_ACTIVE] )
  285.                                 Else
  286.                                         If ( tab < lasttab )
  287.                                                 SetPanelPixmap( p, stImages[STIC_COL_MID_INACTIVE] )
  288.                                         Else
  289.                                                 SetPanelPixmap( p, stImages[STIC_COL_BTM_INACTIVE] )
  290.                                         End If
  291.                                 End If  
  292.                         End Select
  293.                        
  294.                         c :+ 1
  295.                         If ( c = 3 )
  296.                                 c = 1
  297.                                 tab :+ 1
  298.                         End If
  299.                        
  300.                 Next    
  301.                 Local i:Int = 0
  302.                 For Local p:TGadget = EachIn tabButtons
  303.                         If ( currentTab = i )
  304.                                 SetGadgetPixmap( p, sideTabPixmapPair(tabPixmaps.ValueAtIndex( i )).activePixmap )
  305.                         Else
  306.                                 SetGadgetPixmap( p, sideTabPixmapPair(tabPixmaps.ValueAtIndex( i )).inactivePixmap )
  307.                         End If
  308.                         i :+ 1
  309.                 Next
  310.         End Method
  311.         '-----------------------------------------------------------------------------------------------------------------
  312.         '-----------------------------------------------------------------------------------------------------------------     
  313.         Method ActivateTab( tabID:Int )
  314.                 Assert( managedPanels <> Null )
  315.                 Assert( tabID < managedPanels.Count() )
  316.                 For Local p:TGadget = EachIn managedPanels
  317.                         If ( Not GadgetHidden( p ) ) Then HideGadget( p )
  318.                 Next
  319.                 Local p:TGadget = TGadget( managedPanels.ValueAtIndex( tabID ) )
  320.                 ShowGadget( p )                                
  321.                 currentTab = tabID
  322.                 AdjustActiveImages()
  323.                 Local e:TEvent = New TEvent
  324.                 e.id = EVENT_GADGETACTION
  325.                 e.source = Self
  326.                 e.data = tabID         
  327.                 PostEvent( e )
  328.         End Method
  329.         '-----------------------------------------------------------------------------------------------------------------
  330.         '-----------------------------------------------------------------------------------------------------------------     
  331.         Method ActiveTab:Int( )
  332.                 Return currentTab       ' the current active tab
  333.         End Method
  334.         '-----------------------------------------------------------------------------------------------------------------
  335.         '-----------------------------------------------------------------------------------------------------------------     
  336.         Method ClientArea:TGadget()
  337.                 Return client           ' main client area
  338.         End Method
  339.         '-----------------------------------------------------------------------------------------------------------------
  340.         '-----------------------------------------------------------------------------------------------------------------     
  341.         Method RetrieveManagedPanel:TGadget( tabID:Int )
  342.                 Assert( managedPanels <> Null )
  343.                 Assert( tabID < managedPanels.Count() )
  344.                 Return TGadget( managedPanels.ValueAtIndex( tabID ) ) ' the managed panel for this tab
  345.         End Method
  346.         '-----------------------------------------------------------------------------------------------------------------
  347.        
  348. End Type
  349. '----------------------------------------------------------------------------------------------------------------------
  350. '----------------------------------------------------------------------------------------------------------------------
  351.                
  352. 'Rem
  353. '----------------------------------------------------------------------------------------------------------------------
  354. ' DEMO
  355. '----------------------------------------------------------------------------------------------------------------------
  356. Global window:TGadget = CreateWindow( "Side tab test", 400, 200, 600, 600, Null, ..
  357.                                                                 WINDOW_TITLEBAR | WINDOW_RESIZABLE | WINDOW_CLIENTCOORDS )
  358. SetMinWindowSize( window, 600, 600 )
  359.                                                
  360. ' The tabber can use unique pixmaps for each tab, and each state (active or inactive)
  361. ' Here we just apply the same pixmaps to each tab.
  362. ' These blank pixmaps should be edited to create your own unique tab descriptors.  They
  363. ' can be any size in Y and not limited to the size provided
  364. Local activePixmap:TPixmap = LoadPixmap( "incbin//sidetab_label_active.png" )
  365. Local inactivePixmap:TPixmap = LoadPixmap( "incbin//sidetab_label_inactive.png" )
  366.  
  367. Global tabPanel:TGadget
  368. Global lbl:Tgadget
  369.  
  370. ' create a panel to house the first tabber
  371. Global p1:TGadget = CreatePanel( 0, 0, 208, 560, window )
  372. SetGadgetLayout( p1, 1, 1, 1, 1 )
  373. Global st1:sideTab = sideTab.Create( p1, 4, 4, 200, 550, 255, 255, 255 )
  374.  
  375. ' Create 5 tabs..
  376. For Local t:Int = 1 To 5
  377. tabPanel = st1.AddTab( activePixmap , inactivePixmap  )
  378. lbl=CreateLabel( "Tab " + t, 0, 0, 40, 20, tabPanel )
  379. SetGadgetLayout( lbl, 1,0,1,0 )
  380. Next
  381.  
  382. ' create a panel to house the 2nd tabber
  383. Global p2:TGadget = CreatePanel( 240, 0, 208, 400, window )
  384. SetGadgetLayout( p2, 0, 1, 1, 1 )
  385. Global st2:sideTab = sideTab.Create( p2, 4, 4, 200, 390, 255, 255, 255 )
  386.  
  387. ' Create 3 tabs..
  388. For Local t:Int = 1 To 3
  389. tabPanel = st2.AddTab( activePixmap , inactivePixmap  )
  390. lbl=CreateLabel( "Tab " + t, 0, 0, 40, 20, tabPanel )
  391. SetGadgetLayout( lbl, 1,0,1,0 )
  392. Next
  393.  
  394. Repeat
  395.         WaitEvent()
  396.         Select EventID()
  397.                 Case EVENT_GADGETACTION
  398.                         Select EventSource()
  399.                         Case st1
  400.                                 Print "side tabber 1 changed to tab " + st1.ActiveTab()
  401.                         Case st2
  402.                                 Print "side tabber 2 changed to tab " + st2.ActiveTab()
  403.                         End Select
  404.                 Case EVENT_WINDOWCLOSE
  405.                         End
  406.         EndSelect
  407. Forever
  408. 'End Rem


Comments : none...

 

SimplePortal 2.3.6 © 2008-2014, SimplePortal