CSS support / CSS demo

[rubyFeedback]

Heya Andy,

First let me copy/paste an example with CSS and ruby-gtk3; I will refer to this later.

require 'gtk3'

module Gtk

class HoverButtonExampleViaCss < ::Gtk::Box # === Gtk::HoverButtonExampleViaCss

  alias e puts

  # ========================================================================= #
  # === USE_THIS_AS_THE_CSS_STRING
  # ========================================================================= #
  USE_THIS_AS_THE_CSS_STRING = <<-EOF

button {
  font-size: 36px;
  background-image: none;
  background-color: yellow;
}

button:hover {
  transition: 4000ms linear;
  background-color: lightblue;
}

#bblack1 { border: 1px solid black; }

EOF

  # ========================================================================= #
  # === initialize
  # ========================================================================= #
  def initialize
    super(:vertical)
    enable_CSS_support
    set_border_width(25)
    button = ::Gtk::Button.new(
      label: "Test hover action and transition -\n"\
             "place the mouse cursor over this text.\n"\
             "This functionality is implemented via button:hover, and transition:"
    )
    button.set_name('bblack1')
    button.signal_connect(:clicked) { e 'Click me!' }
    add(button)
    add(::Gtk::Separator.new(:horizontal))
  end

  # ========================================================================= #
  # === enable_CSS_support
  # ========================================================================= #
  def enable_CSS_support
    provider = ::Gtk::CssProvider.new
    provider.load(data: USE_THIS_AS_THE_CSS_STRING)
    ::Gtk::StyleContext.add_provider_for_screen(
      Gdk::Screen.default,
      provider,
      Gtk::StyleProvider::PRIORITY_APPLICATION
    )
  end

end; end

if __FILE__ == $PROGRAM_NAME
  window = Gtk::Window.new
  window.add(Gtk::HoverButtonExampleViaCss.new)
  window.show_all
  window.set_size_request(880, 600)
  window.move(0, 0)
  Gtk.main  
end

This example only needs the "gtk3" gem as far as I know. No idea whether
that works fine on macosx but on linux it works very well.

Anyway - let me next briefly explain what the above does:

It is just showing a simple button. If you put the mouse cursor over it,
aka a hover effect, it will slowly change the colour. The
responsible CSS is:

  transition: 4000ms linear;
  background-color: lightblue;

Ok so far.

I would like to ask whether it is possible for Glimmer to support
CSS, or some aspects of CSS. For instance, colours in particular.

I believe most toolkits support colours, including ruby-tk.

This may not be 1:1 "true" CSS, but even gtk does not use
all CSS features, so I refer here more towards a "CSS-like
support" of functionality.

I think it would be nice if glimmer itself could directly support
it as-is. Again, I don't mean "true" CSS per se, but kind of
like a wrapper, a DSL wrapper, that can support SOME CSS
elements. I am not necessarily asking for ALL CSS rules, mind
you, not even all within ruby-gtk3, but more like a "demo" or
"proof of concept" for glimmer, so that at some later point
in time, if it ever becomes important, we could say: "yes,
glimmer supports some CSS functionality, at the least
color and background-color". Perhaps even border or border
color properties.

For the www this may be even more important, as glimmer
may not have to do much here, since the browsers support
CSS. For the traditional toolkits this may be a bit more
work, in particular for, say, ruby-tk where you probably may
have to support some mapping. Like:

.button1 { # our CSS class called button1
  color: green; # for green colour
}

We may also need a way to add an id and a css-class to
all widgets. Not sure if glimmer supports this or would like
to support it, but I think as an additional option this could
be useful. Write once, run everywhere.

Now in the main README you mention this:

"Glimmer DSL for CSS | All Web Browsers | No | Yes | Programmable | CSS Is Over-Engineered / Too Many Features To Learn"

I am not sure if the "Too many features to learn" is an inside-joke or
something :D - but I do not disagree. CSS is very complex. Which is
why I refer to a subset of CSS really, keep it simple. That is why I
think starting with colours is just about the simplest and best
"common grounds" for CSS. A lot of the extra stuff is not necessary
although it can be cool to write down full animations in CSS. I
tested some of them in the browser and some animations are
awesome. But again, I focus here on SIMPLICITY; so - just colours.

My goal here is not solely confined to ruby-gtk of course. I more
would like to see how much glimmer itself could support a
"CSS-like concept", and how much work it would be to have
it for, say, a few of the glimmer "dialects". Say, glimmer-swt
since that seems to be your main focus, perhaps glimmer-gtk
because ruby-gtk3 supports it, and last but not least perhaps
ruby-tk as proof-of-concept to show how CSS-like properties
could be supported.

I think in the simplest case you could just wrap the CSS rules
into one big string like:

foobar_CSS_rules '

tons of code here

'

And then have one class in glimmer that can parse these
rules accordingly to the backend that is used. Perhaps even
showcase that in sinatra/rails/opal.

I am not sure how much work that would be, and I mostly
refer to a proof-of-concept just to showcase that this
could be done. You are doing a LOT of video tutorials
and I don't want to distract you from that, but if in some months
down the road you come to revisit glimmer-gtk as well as
the idea for CSS or CSS-like properties, I think it could be
a nice use case for glimmer. Kind of like offering additional
ways to style applications - and it could be an appeal for
people who come from a background of CSS and HTML rather
than ruby itself. Ideally we could then specify our UI elements
in CSS and have these work in www-apps as well as across
glimmer. And who knows, perhaps one day glimmer can even
autogenerate tons of additional code, such as crystal! Or C,
and we can all re-use that and have tons of autogenerated
code and bindings. :D

Anyway that's it for now, thanks for reading, as always please
proceed in any way shape or form. I have a few more ad-hoc
ideas, including "support for Shoes 1:1" syntax (just to showcase
how glimmer could work with a Shoes DSL 1:1) as well as a
more important suggestion in regards to glimmer's DSL.
You kind of mentioneed this indirectly, lately, via this here:

AndyObtiva/glimmer@56eee0d

Aka that part:

"Allow being able to include Glimmer for a particular DSL (e.g. include Glimmer[:data_binding] to add observe keyword only) without having to enable/disable DSLs (create scoped realms of DSL activation)"

And I think this is a VERY good idea. Perhaps I just briefly mention my
rough idea here too but disregard it please for now :D

I want to add a glimmer-like DSL to the gem called gtk_paradise
eventually, or perhaps two DSLs. One that should be 100% compatible
to glimmer as-is; and a second one that I want to toy around a bit with.
To see how much more effective a glimmer DSL could be.

One problem I have is that I don't understand all of the DSL. I think
kojix2 had a similar problem via the <=> or whatever it was, and I
think while it is probably super-simple to you, it may be hard for newcomers
or other folks. And this is why I think a modular DSL may be a great idea.
Kind of like where people can:

a) mix and combine it via traditional OOP, e. g. keep some parts in an
OOP style, oldschool, but also add some glimmer-variants in the middle,
before doing a "full port" or something

and

b) also very important, to slowly learn new things. I should be fine learning
things slowly step by step, but to go from 0 to understanding a whole DSL
suite can be very, very difficult. I know a little bit of rails but there are still
many things that look very alien and confusing to me. So providing smaller
"baby steps" along the way is a good idea IMO. So a fine-tuned modular DSL
we can cherry-pick from would be great. But anyway, this is an aside, I may
create a separate issue in a few days or so in the main glimmer repository.

This here is mostly just about CSS or CSS-like support, kind of providing
users with an additional option how they could use glimmer to style
applications. (And if this works to perhaps showcase ONE simple example
with it. But this may refer to the whole glimmer suite; it is probably not worth
to add it only for glimmer-gtk. It would be better to have the whole glimmer
suite support it, or a subset at the least. A bit like libui does things for
cross-platform support, although I would not mind platform-specific UI
improvements.)

[rubyFeedback]

By the way, only semi-related to the issue here but I just found a discussion about
the Shoes API:

https://forum.crystal-lang.org/t/gui-library-similar-to-rubys-shoes/1406

I am not sure if I could recommend glimmer as a 1:1 API yet, but I think others
may have similar use cases or idea. This is also a reason why I think a Shoes
"compatibility API" (on the DSL level) may be interesting. Perhaps internally
it could be mapped towards what glimmer already supports (not sure if the
functionality is 1:1 identical, but I guess you can estimate this better than
I can).

That discussion is ~3 years old so probably a lot changed.

I also found old crystal bindings to libui from 2020:

https://github.com/Fusion/libui.cr

Glimmer brings people and languages together! \o/
(I just like that slogan. Even if you may not have coined it ... :P)