Layout + styling in racket/gui

[Travis Kiefer]

Hello all!

I'm coming from the background of building web apps that are wrapped in a headless browser and would like to take the app development experience and bring it to the racket ecosystem. As an html / css / javascript engineer I'm finding the learning curve pretty daunting with racket's documentation but lack of copious examples... So I'd like to create some practice apps that introduce ideas / concepts that are familiar from the web app realm within the environment of racket... 

That said, what I'd like to do is build the canonical "Todo App" in racket/gui or an equivalent. Basically I'd like the ability to create the equivalent of div / layout elements, sub elements that you are familiar to the browser (text input, checkboxes), and the ability to mix in styles. Basically HTML + CSS.

Ideally I'd like to create a Racket version of the following website: http://photonkit.com.

Any resources to get started would be great.

Best,

Travis

[Jens Axel Søgaard]

If you are looking for examples of how to use the Racket GUI toolkit, I can recommend:

https://github.com/mfelleisen/7GUI

It contains Racket implementations of the 7 gui tasks mentioned here:

https://eugenkiss.github.io/7guis/tasks

/Jens Axel

--
You received this message because you are subscribed to the Google Groups "Racket Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to racket-users...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/racket-users/b88bc758-75bb-4620-b29f-c4f9b1ddf915o%40googlegroups.com.

--

--
Jens Axel Søgaard

[Travis Kiefer]

Jens,

Thank you for the example links. The spreadsheet example gets closer to the right direction of a non-trivial example. What's missing from these is the ability to add styles to the elements... Background colors, gradients, box shadow, border around a container element, left align, right align, et cetera.

Best,

Travis

On Monday, July 6, 2020 at 5:13:37 PM UTC-5, Jens Axel Søgaard wrote:

If you are looking for examples of how to use the Racket GUI toolkit, I can recommend:

https://github.com/mfelleisen/7GUI

It contains Racket implementations of the 7 gui tasks mentioned here:

https://eugenkiss.github.io/7guis/tasks

/Jens Axel

Den man. 6. jul. 2020 kl. 23.54 skrev Travis Kiefer <kiefer...@gmail.com>:

Hello all!

I'm coming from the background of building web apps that are wrapped in a headless browser and would like to take the app development experience and bring it to the racket ecosystem. As an html / css / javascript engineer I'm finding the learning curve pretty daunting with racket's documentation but lack of copious examples... So I'd like to create some practice apps that introduce ideas / concepts that are familiar from the web app realm within the environment of racket... 

That said, what I'd like to do is build the canonical "Todo App" in racket/gui or an equivalent. Basically I'd like the ability to create the equivalent of div / layout elements, sub elements that you are familiar to the browser (text input, checkboxes), and the ability to mix in styles. Basically HTML + CSS.

Ideally I'd like to create a Racket version of the following website: http://photonkit.com.

Any resources to get started would be great.

Best,

Travis

--
You received this message because you are subscribed to the Google Groups "Racket Users" group.

To unsubscribe from this group and stop receiving emails from it, send an email to racket...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/racket-users/b88bc758-75bb-4620-b29f-c4f9b1ddf915o%40googlegroups.com.

[George Neuner]

There is a basic GUI layout editor called "MrED".  It's not included
with Racket, but it is available as an installable package:
   https://pkgs.racket-lang.org/package/mred-designer
http://planet.racket-lang.org/display.ss?package=mred-designer.plt&owner=orseau

The 1st link is newer, but AFAICT doesn't include the documentation. 
2nd link is to the older package server, but includes documentation.


George

[Jens Axel Søgaard]

Hi Travis,

Den tir. 7. jul. 2020 kl. 00.18 skrev Travis Kiefer <kiefer...@gmail.com>:

Thank you for the example links. The spreadsheet example gets closer to the right direction of a non-trivial example. What's missing from these is the ability to add styles to the elements... Background colors, gradients, box shadow, border around a container element, left align, right align, et cetera.

In general (not just in Racket) the styling is more difficult in a cross platform gui.
Since a Racket GUI program needs to run on both macOS, Linux and Windows
and still look "native" - it is usually a good idea to keep the default appearance of
most elements. Also one must accept that guis aren't as flexible as html/css.
The upside is that using standard elements work with custom themes used
in the OS. Screen readers for blind also work with standard elements.
Also when (strictly hypothetically of course) some OS changes buttons from
squares to circles, then nothing in your code needs changing.

However, here is where to look for different knobs to tweak:

Arranging
========

To place gui elements in a row:         use horizontal-pane% or horizontal-panel% 
To place gui elements in a column:   use vertical-pane%     or vertical-panel% 
Use panels if you need to respond to events.
These elements support alignments and borders.

For custom placement in a row, make a subclass of horizontal-panel%.
For custom placement in a column, make a subclass of vertical-panel%.
For custom placement in a 2d-area, make a subclass of panel%.

Use vertical-pane% for left alignment.

Study:   https://docs.racket-lang.org/gui/Windowing_Classes.html?q=gui

Borders
======
For system borders use the a some kind of pane/panel to put your element in.
Then turn on the border of the pane/panel. You can also add padding by
putting an element inside a pane/panel.

Custom borders are tricky. 

Canvas
======
For a canvas you have full control over colors and contents - but the downside
is that you need to draw everything yourself.

Basic Elements
============
The most basic elements: mesages (labels),  buttons, check boxes, sliders etc
are here:

https://docs.racket-lang.org/gui/control___.html?q=gui


Compound Elements / OS Elements
============================
From the basic elements one can build more complicated elements.
Look around in the documentation for these. If you can't find
an element ask around - chances are that you are not the first
to need a certain type of element. 

Some OS level elements such as "pick a file" dialogs finder:put-file and
finder:get-file  are found in `framework` (not in `racket/gui`).


General Advice
============
The gui system uses classes and objects. If you need to change the
behaviour of certain elements, say, a button. One must make a 
subclass, say, my-button%, that overrides/replaces the default
behaviour. Then that class must be instantiated. 

Look in the 7gui repo for examples of this.

Blogs
====
Alex Harsányi has written many blog posts on how to use the Racket gui.
https://racket-stories.com/from/327

Other gui related blog posts:
https://racket-stories.com/from/248

Video in Racket guis:
https://www.youtube.com/watch?v=yo6wVXS6dkU

/Jens Axel

[Hendrik Boom]

On Tue, Jul 07, 2020 at 11:44:53AM +0200, Jens Axel Søgaard wrote:

> The upside is that using standard elements work with custom themes used
> in the OS. Screen readers for blind also work with standard elements.

Just wondering. What is available in the way of screen readers on a
Linux system?
I have a friend who complains there aren't any decent ones.

-- hendrik

[Stephen De Gabrielle]

I've got no experience in this but I found this

https://opensource.com/life/15/8/accessibility-linux-blind-disabled

HTH

Stephen

--
You received this message because you are subscribed to the Google Groups "Racket Users" group.

To unsubscribe from this group and stop receiving emails from it, send an email to racket-users...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/racket-users/20200707120918.wmkqjaoivenub5mm%40topoi.pooq.com.

[Bonface M. K.]

Not exactly a screenreader, but I've heard some really nice things about
Emacspeak(https://en.wikipedia.org/wiki/Emacspeak). HTH!

> -- hendrik

--
Bonface M. K. (https://www.bonfacemunyoki.com)
One Divine Emacs To Rule Them All
GPG key = D4F09EB110177E03C28E2FE1F5BBAE1E0392253F

[WarGrey Gyoudmon Ju]

On Tue, Jul 7, 2020 at 6:18 AM Travis Kiefer <kiefer...@gmail.com> wrote:

Jens,

Thank you for the example links. The spreadsheet example gets closer to the right direction of a non-trivial example. What's missing from these is the ability to add styles to the elements... Background colors, gradients, box shadow, border around a container element, left align, right align, et cetera.

Hi, Travis.

I have a CSS package aimed at this, and I used it to build my GUI Application 4 years ago.

But this approach requires application authors to write their own GUI components with Racket snip%.

I am going to add docs for that package, which is just an engine implementation of CSS 3.0 specs,

and it is really far away from the real world GUI applications.

This field still remains to be further researched,

I have a vague plan to make a GUI framework based on GPU.

This plan sounds too big to be talked about here at the moment.