Check out version 3 in the message #5 !!!
In this tutorial you can learn how to build a custom ribbon. A ribbon consist of a TabPane with TabPages.
Each TabPage contains a Pane with a ribbon Pane and a ScrollPane.
Each ribbon Pane consists of the group Panes for that TabPage.
You can scroll horizontally through the group Panes to bring them into view.
For each group you create a layout file with the group views (buttons, labels, imageviews, comboboxes, custom listviews and so on.
You can use the events from each view in the group Panes: click on a button, label, pane, combobox and so on. Scroll through the list of a custom listview.
The main page contains a label to show an example of a text in a selected font and how the text looks in bold, italic and so on.
You can add your code to the event subroutines.
This application is just a proof of concept.
You decide what you want in the ribbon and which events should be triggered.
The TabPages are created in the B4Xpage_Created subroutine.
To add a tabpage:
To add the groups:
To add a group pane:
For each group the event subroutines are provided.
As an example, the subroutines for the second group of the Start TabPage are:
Link: ribbon test
If you click on the ribbon but not on a view then you can also use the arrow keys left and right.
The “hover” effect is performed using the MouseEntered and MouseExited subroutines.
The Sender object is used to identify the view being used.
You can find the source code in the attachment (testenvironment43)
In this tutorial you can learn how to build a custom ribbon. A ribbon consist of a TabPane with TabPages.
Each TabPage contains a Pane with a ribbon Pane and a ScrollPane.
Each ribbon Pane consists of the group Panes for that TabPage.
You can scroll horizontally through the group Panes to bring them into view.
For each group you create a layout file with the group views (buttons, labels, imageviews, comboboxes, custom listviews and so on.
You can use the events from each view in the group Panes: click on a button, label, pane, combobox and so on. Scroll through the list of a custom listview.
The main page contains a label to show an example of a text in a selected font and how the text looks in bold, italic and so on.
You can add your code to the event subroutines.
This application is just a proof of concept.
You decide what you want in the ribbon and which events should be triggered.
B4J code
The TabPages are created in the B4Xpage_Created subroutine.
B4X:
Private Sub B4XPage_Created (Root1 As B4XView)
Root = Root1
Root.LoadLayout("MainPage")
B4XPages.SetTitle(Me,"Ribbon test")
tpg1 = add_tabpage("Start","tpstart")
add_tpg1_groups
tpg2 = add_tabpage("Edit","tpedit")
add_tpg2_groups
tpg3 = add_tabpage("Design","tpdesign")
add_tpg3_groups
End Sub
B4X:
Private Sub add_tabpage(tabname As String, tag As String) As TabPage
Dim tpg As TabPage = tp1.LoadLayout("pntab_layout",tabname)
pntab.LoadLayout("pnribbon_layout")
tpg.Content = pntab
tpg.Tag = tag
Return tpg
End Sub
B4X:
Private Sub add_tpg1_groups
add_group_pane(tpg1,tpg1.Tag & "_grp1",0,0,200,150)
add_group_pane(tpg1,tpg1.Tag & "_grp2",200,0,200,150)
fill_cbxfont
' to test the scrolling
add_group_pane(tpg1,tpg1.Tag & "_grp1",400,0,200,150)
add_group_pane(tpg1,tpg1.Tag & "_grp2",600,0,200,150)
fill_cbxfont
End Sub
B4X:
Private Sub add_group_pane(tpg As TabPage, tag As String, left As Int, top As Int, width As Int, height As Int)
Dim pngr As Pane
pngr.Initialize(tag)
pngr.LoadLayout(tag & "_layout")
pngr.Tag = tag
Dim pnc As Pane = tpg.Content
Dim pnr As Pane = pnc.GetNode(0)
Dim sp As ScrollPane = pnc.GetNode(1)
pnr.AddNode(pngr,left,top,width,height)
sp.InnerNode = pnr
End SubAs an example, the subroutines for the second group of the Start TabPage are:
B4X:
#Region tpstart_grp2
Private Sub fill_cbxfont
Dim lst As List = fx.GetAllFontFamilies
cbxfont.SetItems(lst)
End Sub
Private Sub cbxfont_SelectedIndexChanged (Index As Int)
change_lbltest_font(cbxfont.GetItem(Index))
End Sub
Private Sub btnbold_Click
lbltest.Font = fx.CreateFont(cbxfont.GetItem(cbxfont.SelectedIndex),20,True,False)
End Sub
Private Sub btnitalic_Click
lbltest.Font = fx.CreateFont(cbxfont.GetItem(cbxfont.SelectedIndex),20,False,True)
End Sub
Private Sub btnunderline_Click
End Sub
#End RegionVideo
You can see the ribbon being used in a short video example.Link: ribbon test
Remarks
The horizontal scrolling of the ribbon can be done using the mouse by clicking and dragging left or right.If you click on the ribbon but not on a view then you can also use the arrow keys left and right.
The “hover” effect is performed using the MouseEntered and MouseExited subroutines.
The Sender object is used to identify the view being used.
You can find the source code in the attachment (testenvironment43)
Last edited: