Show text when :button is clicked

[sergioro9]

I would like "hello world" to be displayed below the button when the button is clicked. I tried this but nothing happens when I click the button:

body do
  button("Test button") {
    on_clicked do
      sample_text
    end
  }
end

def sample_text
  label {
    text 'hello world'
  }
end

[AndyObtiva]

When relying on Glimmer::LibUI::Application, it is assumed that the body block would have a window first as the parent of everything.

Also, if you just render a label as in sample_text, but inside an on_clicked listener block, it won't go anywhere. It needs to be added to the content of a parent control in order to show up.

In any case, there are multiple solutions to your problem, included below.

1- Include button and label from the start, and when button is clicked, update label text via data-binding

require 'glimmer-dsl-libui'

class Greeting
  attr_accessor :text

  def initialize(text = '')
    @text = text
  end
end

class ShowLabel
  include Glimmer::LibUI::Application

  before_body do
    @greeting = Greeting.new
  end

  body {
    window('Show Label 1') {
      margined true

      vertical_box {
        button('Show Label') {
          on_clicked do
            @greeting.text = 'hello world'
          end
        }
        label {
          text <= [@greeting, :text]
        }
      }
    }
  }
end

ShowLabel.launch

2- Include button only in the beginning, and when button is clicked, add label to the content of its parent vertical_box (if the button is clicked again, do nothing)

require 'glimmer-dsl-libui'

class ShowLabel
  include Glimmer::LibUI::Application

  body {
    window('Show Label 2') {
      margined true

      vertical_box { |label_box|
        button('Show Label') {
          on_clicked do
            unless @label_shown
              label_box.content {
                label {
                  text 'hello world'
                }
              }
              @label_shown = true
            end
          end
        }
      }
    }
  }
end

ShowLabel.launch

2- Include button only in the beginning, and when button is clicked, destroy button and replace it by adding a label to the content of its parent vertical_box

require 'glimmer-dsl-libui'

class ShowLabel
  include Glimmer::LibUI::Application

  body {
    window('Show Label 3') {
      margined true

      vertical_box { |label_box|
        button('Show Label') { |show_label_button|
          on_clicked do
            unless @label_shown
              show_label_button.destroy
              label_box.content {
                label {
                  text 'hello world'
                }
              }
              @label_shown = true
            end
          end
        }
      }
    }
  }
end

ShowLabel.launch

I am closing this issue assuming I answered your question. If I did not answer your question fully or you have other questions, feel free to reply even if the issue is closed. I will see your replies anyways and will respond further here or even reopen the issue if needed.

[sergioro9]

Thank you, your examples are clear and answered my question.

The first version of my GUI app is ready, but I don't know how to publish it in Windows, MacOS, Linux. It seems that "glimmer package" does that for Glimmer for SWT, but is there a similar command for LibUI?

[AndyObtiva]

I’m glad I answered your question.

I have not done enough work to support packaging on different platforms yet. But, there is a Packaging section in the README with some information about native executable packaging for different platforms: https://github.com/AndyObtiva/glimmer-dsl-libui#packaging

On Windows, there is a new tool to help build a Windows executable: https://github.com/Largo/ocran

If you discover better ways of packaging, you can report back and contribute to the README.

Cheers.

[AndyObtiva]

I just remembered that there is a new way to package Ruby applications on all platforms via Ruby WASM WASI. I haven’t tested it yet, but maybe you can try it if needed. I added it to the packaging section of the project README. Below is the direct link.

https://github.com/ruby/ruby.wasm#quick-example-how-to-package-your-ruby-application-as-a-wasi-application