Revision history for gtkdialogDocTips10
Additions:
{{image url="http://www.01micko.com/zigbert/gtkdialog/svgButtonLabel.png" title="screenshot" alt="screenshot"}}
Deletions:
Additions:
[[HomePage]] > [[SoftwareIndex|Software Index]] > [[SoftwareDevelopment|Development]] > [[gtkdialog|gtkdialog]] > [[gtkdialogDocTips|Tips and Tricks]]
===@@**#%[[gtkdialogDocTips9.16|❰❰❰ Previous]]#% #%[[gtkdialogDocTips|Index]]#% #%Next ❱❱❱#%**@@===
===@@**#%[[gtkdialogDocTips9.16|❰❰❰ Previous]]#% #%[[gtkdialogDocTips|Index]]#% #%Next ❱❱❱#%**@@===
Deletions:
@@**#%[[gtkdialogDocTips9.16|❰❰❰ Previous]]#% #%[[gtkdialogDocTips|Index]]#% #%Next ❱❱❱#%**@@
Additions:
The holy grail is all about combining knowledge. To find spots in your gui where bash can fuel the gtk-theme or svg to push gtkdialog's limitations. Be aware that both gtk-themes and svg images are basically raw text files. Since bash is a great tool for text managing, it is easy to code a text-file depending on user/system input.
The example is taken from the app 'pFind'. The screenshot shows that pFind has detected 419 files with the pattern "puppy". 2 audiofiles, 67 images...
These are ##<button>## widgets with no button decoration (##relief="2"##), and no ##<label>## defined. The result for the user is a clickable svg that highlights at mouse hovering, and has tooltip text.
The **svg** contains info about
- Category with a representing icon
- Number of hits. If 0, the svg is grayed out
- Active category in the list to the right is shown by the arrow
Coding the same functionality with basic gtkdialog widgets would require more widgets, more code, more clutter, and a less userfriendly gui.
The **gtkdialog** code for the button is extremly simple. What makes the code long is to refresh all ##<button>## widgets when clicking. We have to rebuild the svg for all of them to make the new active svg/button get the arrow.
%%(language-ref)
<button relief="2" tooltip-text="'$(gettext "Sound files")'">
<variable>BUTTON_MUSIC</variable>
<input file>/tmp/pfind_MUSIC.svg</input>
<action>func_viewMusic</action>
<action>func_buildSvg</action>
<action>refresh:TREE</action>
<action>refresh:BUTTON_ALL</action>
<action>refresh:BUTTON_MUSIC</action>
<action>refresh:BUTTON_PIC</action>
<action>refresh:...</action>
</button>
The example is taken from the app 'pFind'. The screenshot shows that pFind has detected 419 files with the pattern "puppy". 2 audiofiles, 67 images...
These are ##<button>## widgets with no button decoration (##relief="2"##), and no ##<label>## defined. The result for the user is a clickable svg that highlights at mouse hovering, and has tooltip text.
The **svg** contains info about
- Category with a representing icon
- Number of hits. If 0, the svg is grayed out
- Active category in the list to the right is shown by the arrow
Coding the same functionality with basic gtkdialog widgets would require more widgets, more code, more clutter, and a less userfriendly gui.
The **gtkdialog** code for the button is extremly simple. What makes the code long is to refresh all ##<button>## widgets when clicking. We have to rebuild the svg for all of them to make the new active svg/button get the arrow.
%%(language-ref)
<button relief="2" tooltip-text="'$(gettext "Sound files")'">
<variable>BUTTON_MUSIC</variable>
<input file>/tmp/pfind_MUSIC.svg</input>
<action>func_viewMusic</action>
<action>func_buildSvg</action>
<action>refresh:TREE</action>
<action>refresh:BUTTON_ALL</action>
<action>refresh:BUTTON_MUSIC</action>
<action>refresh:BUTTON_PIC</action>
<action>refresh:...</action>
</button>
Additions:
====10. The holy grail====
Deletions:
Additions:
====10 The holy grail====
{{image url="http://www.01micko.com/zigbert/gtkdialog/svgButtonLabel.png" title="gtkdialog" alt="gtkdialog"}}
%%(svg)
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="30">
<rect width="80" height="30" style="fill:#ddd; fill-opacity:1; stroke-width:0" />
<path style="fill:#ddd; fill-opacity:0.8; stroke:none" d="m 80,0 20,15 -20,15 z" />
<path style="fill:black; stroke:none;" d="m 5,11 0,8 4,0 7,6 0,-20 -7,6 z M 20,9 c -1,-1 -2,1 -1,2 l 0,0 c 1,1 1,3 1,4 0,1 0,3 -1,4 -1,1 0,3 1,2 2,-2 2,-4 2,-6 0,-2 0,-4 -2,-6 z m 4,-3 c -1,-1 -3,-1 -2,1 3,3 3,5 3,8 0,3 0,5 -3,8 -1,2 1,2 2,1 3,-4 3,-6 3,-9 0,-3 0,-5 -3,-9 z"/>
<text x="75" y="20" style="fill:black; font-family:DejaVu; font-size:14; text-anchor:end;">
2
</text>
</svg>
%%
@@**#%[[gtkdialogDocTips9.16|❰❰❰ Previous]]#% #%[[gtkdialogDocTips|Index]]#% #%Next ❱❱❱#%**@@
{{image url="http://www.01micko.com/zigbert/gtkdialog/svgButtonLabel.png" title="gtkdialog" alt="gtkdialog"}}
%%(svg)
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="30">
<rect width="80" height="30" style="fill:#ddd; fill-opacity:1; stroke-width:0" />
<path style="fill:#ddd; fill-opacity:0.8; stroke:none" d="m 80,0 20,15 -20,15 z" />
<path style="fill:black; stroke:none;" d="m 5,11 0,8 4,0 7,6 0,-20 -7,6 z M 20,9 c -1,-1 -2,1 -1,2 l 0,0 c 1,1 1,3 1,4 0,1 0,3 -1,4 -1,1 0,3 1,2 2,-2 2,-4 2,-6 0,-2 0,-4 -2,-6 z m 4,-3 c -1,-1 -3,-1 -2,1 3,3 3,5 3,8 0,3 0,5 -3,8 -1,2 1,2 2,1 3,-4 3,-6 3,-9 0,-3 0,-5 -3,-9 z"/>
<text x="75" y="20" style="fill:black; font-family:DejaVu; font-size:14; text-anchor:end;">
2
</text>
</svg>
%%
@@**#%[[gtkdialogDocTips9.16|❰❰❰ Previous]]#% #%[[gtkdialogDocTips|Index]]#% #%Next ❱❱❱#%**@@
Deletions:
Recent Gtkdialog allows to hide/show widgets, To hide many widgets at once, you can hide a ##<hbox>## or ##<vbox>##. This will hide all widgets inside the box.
Another approach is to use the notebook attributes ##<notebook show-tabs="false" show-border="false">##. Using several tabs in a notebook with hidden header, we can simulate a gui re-render. The only thing that is happening is that we switch tab, but since the user can't see those, he will be fooled...
More info at [[http://www.murga-linux.com/puppy/viewtopic.php?p=553833#553833]].
@@**#%[[gtkdialogDocTips8|❰❰❰ Previous]]#% #%[[gtkdialogDocTips|Index]]#% #%[[gtkdialogDocTips9.2|Next ❱❱❱]]#%**@@
