Hi,
I was lucky enough to have saved the emails from most of the thread on this
topic. I took that information, removed some of the repeating text, added a
little background, and came up with the below content. I hope this is accurate.
I strongly advise you to first go through basic tutorial of wx python to
understand the concept of sizer and containers.
once you have good understanding of wx python, you can resume the wxGlade
tutorial.
remember, there is 0 shortcut in learning map. you have to understand the
basics concepts first.
I don’t think there is any accessible tutorial for wxGlade.
Here is the link to wxpython tutorial:
http://zetcode.com/wxpython/
One of the really nice things with WXWidgets/WXPython is that you don't need to
use a GUI builder, nor to set manually the position and size of the GUI
components. All positionning stuff is done with sizers, and in fact the only
thing you need to learn is how to use these sizers.
The basic principles behind sizers is very simple, you don't give actual
positions and sizes but just tell a few simple indications. The indications you
need to give depends on the sizer you have chosen and its logic.
For example, the simplest sizer, wx.BoxSizer, place elements horizontally or
vertically just one after the other, and the size is set to be at least enough
to see all the text/icon. You only give two
indications: the orientation, and how each element has to deal with extra
available space (take it or not, or share across all components).
The next step is grid-based sizers, which defines a 2D grid and each element
occupies a cell; the size of the rows and columns are whether
fixed/constant/all the same (wx.GridSizer) or flexible/variable/adjusted
depending on the contents (wx.FlexGridSizer).
wx.BoxSizer and wx.FlexGridSizer are the most useful sizers and you can already
do quite a lot only with these two. And the result will almost always be at
least usable by a sighted person.
Yes, you’re right. I do know that wx python uses sizer to handle app layout.
Even fix positioning of UI elements is discouraged in wx widget.
But the only reason for recommending wxGlade instead of manual coding; because
how it handles creating of UI.
WxGlade uses the same techniques that you mention in your last E-mail.
The interface is specially optimized for screen reader users.
]Inserted by Jim]
The repository for WXGlade is here:
https://github.com/wxGlade/wxGlade
From here you can make your own copy of the repository on Github, if you have a
Github account, by pressing the Fork button, or you can press the Clone button
and put the repository on your computer. You would press the Fork button if you
think you want to play around with the code and possibly contribute.
Check out the Readme file for links to documentation and information about
reporting bugs and so on.
Once you have it on your computer, from what I can tell about the email thread
to this point, you would want to have Git installed, so you can point to the
ACCESSIBILITY branch and run WXGlade once you have switched to that branch. If
you do not have Git on your computer, you can read all about it here.
https://git-scm.com/book/en/v2
Chapter 1 of the book tells you the basics for getting Git installed and set
up. Chapter 2 gives you the foundation you need on basic commands. Chapter 3
talks about branches.
Continuing through the email thread.
[End of Jim insert]
Run Git CMD on your computer.
Run:git checkout ACCESSIBILITY
This puts you in the Accessibility branch.
You should get a prompt something like: “Switched to branch 'ACCESSIBILITY'
Your branch is up to date with 'origin/ACCESSIBILITY'.”
to find out the current branch, run the command git branch.
the current branch should be highlighted with *.
E. G. run: git branch
*ACCESSIBILITY
Master
Once you are in the ACCESSIBILITY branch, type the following command. Take note
of the exact case of the letters:
py wxGlade.py
Once WXGlade is running, you can do the following among other things.
To create a window with a frame and a panel,
Check the frame from available widgets (all widgets are available as checkboxes)
Press f2 to navigate to tree view (here sizer, frame, panel etc are added)
Press enter to drop the selected widget
Then do the same for a sizer and a panel.
When you drop the sizer in tree view, it should prompt you to select the sizer
type. and an edit box is available to you to specify the required number of
slots.
WxGlade truly shines when it comes to generating code because it can generate
code in python (2 and 3 are supported), C++, purl, XRC and lisp.
The link for the tutorial on creating a calculator app is
http://wxglade.sourceforge.net/docs/tutorial.html
Here is the link to the issue on GitHub for the ACCESSIBILITY branch:
https://github.com/wxGlade/wxGlade/issues/317
Other tips:
Besides turning on lables, try disableing show icons and maximizing the window.
Here are some keyboard shortcuts that I use frequently with wxGlade.
In tree view when any widget is focus:
1. F2 to rename
2. F3 for common property
3. F9 for layout
4. F10 for widget
5. F11 for events
6. F12 for code
7. Del for deleting widget or empty slot
8. CTRL +a to add slot
9. Standard copy paste command also works for widget
Additionally, f2 to go to tree view and f5 to see preview
Information About Making The Calculator App
Create the basic structure:
1. Select “File->New” to create a new file and “File->Save” to save a .wx file
to a directory.
with screen reader: follow the standard procedure of saving and creating files
2. Add the frame:
◦ click on the Frame icon frame on the “Windows” line of the Palette panels
◦ as class name, enter CalculatorFrame: New Frame dialog
with screen reader: press F2 and then press tab to get frame button and then
press space to activate it.
a dialogue box should open
here in first field, you can select the type of frame
leave it to the default and press tab to get class name edit box
type: calculatorFrame in edit box and press tab and then activate the OK button.
note: imagine frame as a chess board when maximized, covers your entire screen.
but there are no black or white cells in frame as of now. I mean, ther are no
widget.
3. A frame with a sizer and one slot is now visible in the Tree view and the
Design window (there the slot is visualized by a hatched area)
it means, whenever you add a frame in your app, a frame has a vertical sizer
and one slot.
4. It would be possible to place controls directly on the frame, but usually a
panel is added first, as a frame is really just a frame around the other
things.
To add the panel:
◦ in the Palette of the main window (again on the “Windows” line) click on the
Panel icon panel to start the placement
◦ in the Tree view or the Design window, click in the slot to place the panel
there
with screen reader: press f2 and press tab until you get to panel check box and
then press space to check it.
press f2 to go to tree view (design view)
press down arrow to get to slot 0 and press enter to add panel here.
note: slot 0 is slot 1 here. it doesn't mean, there is no slot.
remember: if we use the same chess analogy, a slot is similar to the chess
cell. but it can have properties like expand, shrink etc.
usually, you would add different widget on slot and modify their properties.
5. On the panel we need a vertical box sizer with six slots:
◦ in the Palette on the “Sizer” line click on the BoxSizer icon sizer to start
the placement
◦ in the Tree view or the Design window, click on the panel to place the sizer
there
◦ a dialog will open
◦ set “Orientation” to Vertical and the number of slots to 6 New Sizer dialog
with screen reader:
press f2 (not always required)
press tab until you get to boxSizer check box and then press space to check it.
press f2 to go to tree view and press down arrow until you get the panel1
press enter to add sizer here.
in dialogue box, use down arrow and up arrow to choose vertical sizer
press tab and type: 6 to add 6 slots and press tab and activate OK button.
6. Now add a horizontal box sizer to the first slot: do as before, but keep
“Orientation” as Horizontal and set the number of slots to 2
with screen reader:
here, we're talking about 6 newly added slots.
using up and down arrow go to slot 0
press enter to add sizer here
in dialogue box, choose horigentle sizer and press tab and then type: 2
press tab and activate OK button.
7. Place a Static Text static text as label (found on the “Static” line of
Palette) in the top left slot and a TextControl text_ctrl (found on the
“Inputs” line) in the right
with screen reader:
press tab until you get to static text check box and press space check it.
press f2 and then press down arrow until you get slot 0
press enter to add static text (label) here.
repeat the same procedure to add edit box on slot 1
Jim
==========
Jim Homme
Digital Accessibility
Bender Consulting Services
412-787-8567
https://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
-----Original Message-----
From: program-l-bounce@xxxxxxxxxxxxx <program-l-bounce@xxxxxxxxxxxxx> On Behalf
Of ntsiklauri2@xxxxxxxxx
Sent: Friday, June 21, 2019 1:16 AM
To: program-l@xxxxxxxxxxxxx
Subject: [program-l] Re: GUI app layout with wxpython.
hi Jim! Thank you very much! That will be fantastic.
Thanks
Nick.
Sent from my iPhone
On Jun 21, 2019, at 00:21, Jim Homme <jhomme@xxxxxxxxxxxxxxxxx> wrote:.n7œµöª¢» Ö¦zËëh¦º ©¥ê®zË_祊Ël¢¸0ŠØm…ä®n7œµöª
Hi,
I know we talked about this. I will try to see if I can find those messages
in the archive.
Thanks.
Jim
==========
Jim Homme
Digital Accessibility
Bender Consulting Services
412-787-8567
https://www.benderconsult.com/our%20services/hightest-accessible-techn
ology-solutions
-----Original Message-----
From: program-l-bounce@xxxxxxxxxxxxx <program-l-bounce@xxxxxxxxxxxxx>
On Behalf Of nikoloz
Sent: Thursday, June 20, 2019 10:59 AM
To: program-l@xxxxxxxxxxxxx
Subject: [program-l] GUI app layout with wxpython.
Hello everyone! I have heared that it is possible to develop great looking
applications while being completely blind with wxpython. The question here
is, which sizers do you guys use for doing that? hor how do you even produce
a good looking apps?
Thanks,
Nick.
** To leave the list, click on the immediately-following link:-
** [mailto:program-l-request@xxxxxxxxxxxxx?subject=unsubscribe]
** If this link doesn't work then send a message to:
** program-l-request@xxxxxxxxxxxxx
** and in the Subject line type
** unsubscribe
** For other list commands such as vacation mode, click on the
** immediately-following link:-
** [mailto:program-l-request@xxxxxxxxxxxxx?subject=faq]
** or send a message, to
** program-l-request@xxxxxxxxxxxxx with the Subject:- faq
¢Wš½ëazX¬µÉbrJ'¶¢šg‰«^—'è–Z0Šx%Šy&j)m¢šè‚¶¦–·ª¹ë-~·ž–+-²Šà²æãyËnžË›
±Êâmⶬ–)äv‡¬žÜ(®Kaz{ Ö¦zËëh¦º
©¥ê®zË_祊Ël¢¸Ø§¶’¹¸ÞrÙbër¥ë§²æìr¸›xZ+¢Ø^®X¬µÊ&™©Ý²Ëœ…«/iÆŠ‰æ¡
ל–'$¢{az)¦yØšµér~‰e£§‚X§’f¢–Ú)®ˆ+jikz«ž²×ëyéb²Û(®
