B4J Ribbon application

[PaulMeuris]

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.

tpstart_grp1_layout:

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.

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

To add a tabpage:

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

To add the groups:

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

To add a group pane:

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 Sub

For each group the event subroutines are provided.
As an example, the subroutines for the second group of the Start TabPage are:

#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 Region

Video​

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)

 

[PaulMeuris]

Today i have made some modifications to the Edit TabPage from the ribbon.
In the layout i use an imageview that is disabled but visible and a label that has a transparent color and a tooltip.

When you hover over the label the label gets a light blue color and a tooltip will appear after a second or two.
The tooltip is styled using a stylesheet (in the assets : tooltipstyle.css). Thank you @jmon for the style example (consistent tooltips).
The variable tooltipstyle contains the style string.

    tooltipstyle = File.ReadString(File.DirAssets,"tooltipstyle.css")

This is the code for the Edit group 1 pane:

#Region tpedit_grp1
Private Sub set_tooltip_style(vw As B4XView)
    Dim jo As JavaObject = vw
    Dim tooltip As JavaObject = jo.RunMethodJO("getTooltip",Null)
    tooltip.RunMethod("setStyle",Array As Object(tooltipstyle))
End Sub
Private Sub set_hover_label_style(iv As B4XView, lbl As B4XView)
    iv.BringToFront
    set_tooltip_style(lbl)
    lbl.SetColorAnimated(0,xui.Color_White,xui.Color_ARGB(255,230,230,250))   
End Sub
Private Sub lblcut_MouseClicked (EventData As MouseEvent)
    xui.MsgboxAsync("label Cut clicked","Label Cut")
End Sub
Private Sub lblcut_MouseEntered (EventData As MouseEvent)
    set_hover_label_style(ivcut,lblcut)
End Sub
Private Sub lblcut_MouseExited (EventData As MouseEvent)
    lblcut.As(B4XView).SetColorAnimated(0,xui.Color_ARGB(255,230,230,250),xui.Color_White)
End Sub
Private Sub lblcopy_MouseClicked (EventData As MouseEvent)
    xui.MsgboxAsync("label Copy clicked","Label Copy")
End Sub
Private Sub lblcopy_MouseEntered (EventData As MouseEvent)
    set_hover_label_style(ivcopy,lblcopy)
End Sub
Private Sub lblcopy_MouseExited (EventData As MouseEvent)
    lblcopy.As(B4XView).SetColorAnimated(0,xui.Color_ARGB(255,230,230,250),xui.Color_White)
End Sub
Private Sub lblpaste_MouseClicked (EventData As MouseEvent)
    xui.MsgboxAsync("label Paste clicked","Label Paste")   
End Sub
Private Sub lblpaste_MouseEntered (EventData As MouseEvent)
    set_hover_label_style(ivpaste,lblpaste)
End Sub
Private Sub lblpaste_MouseExited (EventData As MouseEvent)
    lblpaste.As(B4XView).SetColorAnimated(0,xui.Color_ARGB(255,230,230,250),xui.Color_White)
End Sub
#End Region

You can find the source code in the attachment (i have changed the name of the project to "ribbon")

 

[PaulMeuris]

In this new version (ribbon_v1.zip) you can test all the features.
With the New label you can add the default text in the Label and in the bottom left textarea.
If you click on the Open label you can load a previously saved text in the bottom left textarea.
Clicking on the Save label will allow you to save the text from the textarea to a file.
In the second group from the Start TabPage a tooltip is added to the buttons.
In the third group from the Start TabPage you can click on the change paragraph label to show a panel that will appear under the ribbon.

In the B4XCombobox you can choose a font family name.
You can select a font size in the B4XCombobox on the second row to the right.
The Imageview icons can be used to set the text bold, italic, underline or give the text a color (from the colors list).
In the third row you can use the alignment icons (left, center, right, justify, increase indent, decrease indent) and add bullits.
For the justify operation the test text will be larger.
To close the panel click on the change paragraph label again.
If you click on the change colors label a panel will appear under the ribbon.

You can select a named color from the list.
This color will be used as a background for the label, the bottom left textarea and the right textarea 2.
To close this panel click on the change colors label again.
In the Edit TabPage the clipboard labels work as expected.
Select a text in the bottom left textarea and click on the Cut label to remove the selected text and put the text on the clipboard.
With a click on the Copy label you will put the selected text on the clipboard.
Click in the bottom left textarea on the place where you want the text from the clipboard to be inserted or added and click on the Paste label.
The Design TabPage hasn't changed yet.
Remark: some operations (for instance setting the background color or underline the text) on the bottom left textarea don't work (yet) as expected.
The source code is in the attachment (ribbon_v1.zip)

 

[PaulMeuris]

There is a new version of this application available.
You can find the documentation in the attached ribbon_v2.pdf file.
The source code (ribbon_v2.zip) is also available in the attachments.

Spoiler: Design ribbon

 

[PaulMeuris]

A new version... a new ribbon... Photo.

Working with photos made easy, i think…
You can find the documentation in the attachments (ribbon_v3.pdf)
And of course the source code is also available in the attachments (ribbon_v3.zip)
Thanks to @MrKim rotating a photo was easy: Rotate image in ImageView
This is the code i used:

    Dim bmpx As B4XBitmap = ZoomImageView1.ImageView.GetBitmap
    bmpx = bmpx.Rotate(90)
    ZoomImageView1.SetBitmap(bmpx)

To optimize the response time of the application i made some changes to the way the CustomListViews (fonts and colors) are filled.
Clicking on the label in the Design ribbon for the first time will fill the CustomListView.
The CustomListViews are no longer filled during startup which reduces the startup time from 10 seconds to 4 seconds on my old slow laptop.

Tip: using Regions and meaningful variable and subroutine names greatly improves the maintenance of the application.
Check out the source code.