Desktop App - Dynamic Menu creation

Hi,
in a linux desktop App,
I would like to create some menu from which I can define the font and the font size.
As I don’t want to change the size of the linux system GUI, I undestand from my reseaches is that the best option is to create a window wihtout “standard menu” bar and create my own.
(The menu structure will be issued from SQLlite.).
Does that make sense or am I goign wrong direction ?
Thanks

i used this for text area

Function ConstructContextualMenu(base As DesktopMenuItem, x As Integer, y As Integer) Handles ConstructContextualMenu as Boolean
  
  Var col As New DesktopMenuItem(kColors)
  col.Icon = MenuIcon(icons8_color_palette_96px)
  
  col.AddMenu DesktopMenuItemColor("Rot",Color.Red)
  col.AddMenu DesktopMenuItemColor("Orange",Color.Orange)
  col.AddMenu DesktopMenuItemColor("Gelb",Color.Yellow)
  col.AddMenu DesktopMenuItemColor("Grün",Color.RGB(0,128,0))
  col.AddMenu DesktopMenuItemColor("Blaugrün",Color.Teal)
  col.AddMenu DesktopMenuItemColor("Blau",Color.RGB(0,0,128))
  col.AddMenu DesktopMenuItemColor("Schwarz",Color.Black)
  col.AddMenu DesktopMenuItemColor("Grau",Color.Gray)
  col.AddMenu DesktopMenuItemColor("Braun",Color.Brown) 
  col.AddMenu DesktopMenuItemColor("Violett",Color.Purple)
  col.AddMenu DesktopMenuItemColor("Purpur",Color.Magenta)
  col.AddMenu DesktopMenuItemColor("Türkis",Color.Cyan)
  
  base.AddMenu col
  
  Var style As New DesktopMenuItem("Style")
  style.Icon = MenuIcon(icons8_typography_96px)
  
  style.AddMenu New DesktopMenuItem("Normal")
  style.AddMenu New DesktopMenuItem("Fett")
  style.AddMenu New DesktopMenuItem("Unterstrichen")
  style.AddMenu New DesktopMenuItem("Kursiv")
  style.AddMenu New DesktopMenuItem("Link")
  
  base.AddMenu style
  
  Var gr As New DesktopMenuItem(kSize) ' in Punkte
  gr.Icon = MenuIcon(icons8_resize_vertical_96px)
  
  gr.AddMenu New DesktopMenuItem("10")
  gr.AddMenu New DesktopMenuItem("12")
  gr.AddMenu New DesktopMenuItem("14")
  gr.AddMenu New DesktopMenuItem("16")
  gr.AddMenu New DesktopMenuItem("18")
  gr.AddMenu New DesktopMenuItem("20")
  gr.AddMenu New DesktopMenuItem("22")
  
  base.AddMenu gr
  
  Return True
End Function

Function ContextualMenuItemSelected(selectedItem As DesktopMenuItem) Handles ContextualMenuItemSelected as Boolean
  Select Case selectedItem.Text
  Case "Farbe", "Color", "Rot", "Red", "Orange", "Gelb", "Yellow", "Grün", "Green", "Blau", "Blue", "Schwarz", "Black", "Grau", "Gray", "Grey", "Braun", "Brown", "Purpur", "Magenta", "Türkis", "Cyan", "Violett", "Purple", "Blaugrün", "Teal"
    Me.SelectionTextColor = selectedItem.Tag.ColorValue
  End Select
  
  Select Case selectedItem.Text
  Case "Bold","Fett"
    Me.SelectionBold = True
  Case "Normal"
    Me.SelectionBold = False
    Me.SelectionItalic = False
    Me.SelectionUnderline = False
    Me.SelectionTextColor = Color.Black
    Me.SelectionFontSize = 14 'Points
  Case "Kursiv", "Italic"
    Me.SelectionItalic = True
  Case "Link"
    Me.SelectionTextColor = Color.Blue
    Me.SelectionUnderline = True
  Case "Unterstrichen", "Underlined"
    Me.SelectionUnderline = True
    
  Case "10"
    Me.SelectionFontSize = 10 'Points
  Case "12"
    Me.SelectionFontSize = 12 'Points
  Case "14"
    Me.SelectionFontSize = 14 'Points
  Case "16"
    Me.SelectionFontSize = 16 'Points
  Case "18"
    Me.SelectionFontSize = 18 'Points
  Case "20"
    Me.SelectionFontSize = 20 'Points
  Case "22"
    Me.SelectionFontSize = 22 'Points
        
  End Select
  
  RaiseEvent NewSize
  
  Return True
End Function
1 Like

Hi @MarkusR , thanks a lot for your answer .
As I"m a newbie , I need more basic insights .
1st, if you know a tutorial which would give me insights on my questions, feel free to point to it. I’m currently going through some …
Your code is definning different functions, ok. Where can I define them ? I read smoehting in module , and make it global, is that the right way ?

As you don’t have a Mac-style menu bar, you need to add the ConstructContextualMenu and ContextualMenuItemSelected event handlers to some object in your app’s window so that when you right-click it, a menu appears. You then add the code above to these two event handlers.

here are menus mentioned, see “Creating menu items from code”
https://documentation.xojo.com/topics/user_interface/desktop/everything_about_desktop_menus.html

Hi @MarkusR @TimStreater ,
I did some tests (it took me some time to understand and make the code you shared with me working as I’m a really rookie on Xojo). I made it working at the end but don’t think this is what I need :
Best is to show a mockup , so here we go :

Something important as well is that I only have arrow keys and 1 button to select ( it will be a kiosk ). I don’t think it is really important but I prefer to mention it in case of.
So I would like to define like a template of this ( like CSS / layout on a website ) , in order to get rid of any change on the global OS font / colors / etc… changes.
Is this possible or should I stick to the standard X theme ?
Thanks

I don’t know any way to change the fonts in a menu.

However, in some of my apps, I use a listbox to display fonts, like would Pages or Word:

By default, the listbox is invisible. The button that shows “Arial” makes the list visible, and a click on the desired font will trigger all appropriate actions, as well as hiding again the listbox.

@Lionel_M Are you talking about the MenuBar at the top of a Desktop App ?

From what I understand by reading this:

Lionel wants to create an application that will run on a kiosk with limited controls, showing a toolbar-like instead of the OS menu.

Hi @AlbertoD , this is exactly it yes. to have something “funny” and “nice” ( as it wil lbe for kids )
if it is not possible, I will stick back to standard menus, but woudl be good to have this as the GUI will be important for this project

you could use an image menu, simple canvas with image,
there define an click event and handle mouse input y into row nr.

1 Like

Hi @MarkusR , apologies in advance, but remember I’m a rookie.
What is an image menu ? I search in the component to add, thre is only menu ot toolbar …etc.?
Thanks
Lio

[MarkusR] simple canvas with image,

Markus explained that the control to use is a Canvas with an image background. You design an Image with the menu to look exactly like you want it to and then use the click event and pixel coordinates in the image to define the menu actions.

1 Like

games using this technique, you divide the y from mouse by rows and get the menu id.

Hi Gilles, no , that’s my request, I don’t want to use the menubar as it will force me to change the whole system font, font size etc…

Hi @Tom_Dixon ,
Thanks for the clarification, I get it now.


drag and dropped the picture into Xojo and it created automatically for the Canvas for the picture.
Now, adding an event handler
image
I can not use the mouse, only keyboard. so let’s imagine I want to use the “G” key
I select this :
image
is it the right thing to do ?
if so, I have to investigate as it is not working for now ( I’m using keydown with char27 ESC as key for tests …)
Thanks

be sure you allow focus and it have focus for keyboard input.
see also Keyboard.AsynckeyDown, maybe you can use this too.

if you subclass this canvas you have more possibilities.

Hi all, I’m going through XOjo Tutorials now as I think despite the fact that Xojo looks simple to use, I’m missing basics …
I will post back after completing this to let you know if I succeded or if I have more questions
in any case, thanks a lot to all already for your help

Xojo may be simple, if you do not know the Computer Basics, you will be lost.

A simple question: how Windows will know what to do when you press the ESC key ?
Better: you talked about the g key: in your software, you type some text about a beggar… how your application makes the difference (to know what to do) between g as text (in a TextArea for example) and g as a Menu command ?

Wikipedia can help you here (but not only, other sites may help too).

1 Like

Hi All,
So Tutorials were beneficials for sure …
I discoverd that a standard option could fit : the tool bar. I can set an Icon with a pict which is enough for my need so far.
Now , I’m tryting to follothe tutorial to create dynamic menu from that video : ( at 14:30 )

I see it’s outdated as per the classname but my guess it that it should work anyway and I don’t understand the complain from xojo
I have


and so :slight_smile:

now trying to build the menu

I get the fact that “append” does not exist.
Itried with DesktopToolBar, but then it complains the dropdown property doesn’t exist

(For the other questions I have , I will create new posts to have proper titles with proper contents )
Thanks