In search of a GUI designer

classic Classic list List threaded Threaded
13 messages Options
Reply | Threaded
Open this post in threaded view
|

In search of a GUI designer

Werner Thie
Hi

Don't know if Ken with it's server side UI generation has a fancy
designer at hand (my LISP experience was before GUIs) but going further
than aggregating a few elements, UI writing and maintenance becomes a
pain real fast. Just had a look at the qooxdoo contrib Blueprint and get
the feeling that this project is stalling because svn commits are scant
and few spaced over the last six months.

May I ask if the dear people on the list enlighten me what the current
state of the affairs in GUI designers for qooxdoo is?

TIA, Werner

------------------------------------------------------------------------------
ThinkGeek and WIRED's GeekDad team up for the Ultimate
GeekDad Father's Day Giveaway. ONE MASSIVE PRIZE to the
lucky parental unit.  See the prize list and enter to win:
http://p.sf.net/sfu/thinkgeek-promo
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

werner.vcf (311 bytes) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: In search of a GUI designer

panyasan
Hello,

I know Derrell is working on a GUI designer, but I don't know what the state is.

That said, my personal experience so far is that I don't spend much time on the GUI design itself, but rather with the businesss logic. It seems to me that the widgets that can be quickly drawn with a GUI designer are those which are quite trivial to write in code (especially when using a declarative markup  - I use the XML->Javascript converter QxTransformer which is available as a contrib). In contrast, the really useful widgets that combined access control, interactiveness and client-server databinding require a lot of business logic that cannot be realized in a GUI designer anyways. So my personal feeling is that I would gain only little from such a tool.

*That* said,  I would of course welcome a designer and would use it, especially if it could produce QxTransformer-compliant XML :-)

C.
Reply | Threaded
Open this post in threaded view
|

Re: In search of a GUI designer

Werner Thie
...writing business logic might even constitute fun whereas writing wads
and wads of containers in containers containing widgets is abusing the
programmer as a GUI compiler.

And contrary to all logic which should be applied to GUI design
customers often know what they want the moment when they see an
implementation which they don't want, meaning you have to react fast may
be even on the spot to redesign. It also happens quite often that   a
customer is willing to 'draw' its own GUI up to a point where there is
only business logic to write.

All in all, even a wimpy tool which implements only the basics would be
a huge progress compared to nothing at all (so far).

Werner

On 08.06.2010 16:30, panyasan wrote:

>
> Hello,
>
> I know Derrell is working on a GUI designer, but I don't know what the state
> is.
>
> That said, my personal experience so far is that I don't spend much time on
> the GUI design itself, but rather with the businesss logic. It seems to me
> that the widgets that can be quickly drawn with a GUI designer are those
> which are quite trivial to write in code (especially when using a
> declarative markup  - I use the XML->Javascript converter QxTransformer
> which is available as a contrib). In contrast, the really useful widgets
> that combined access control, interactiveness and client-server databinding
> require a lot of business logic that cannot be realized in a GUI designer
> anyways. So my personal feeling is that I would gain only little from such a
> tool.
>
> *That* said,  I would of course welcome a designer and would use it,
> especially if it could produce QxTransformer-compliant XML :-)
>
> C.

------------------------------------------------------------------------------
ThinkGeek and WIRED's GeekDad team up for the Ultimate
GeekDad Father's Day Giveaway. ONE MASSIVE PRIZE to the
lucky parental unit.  See the prize list and enter to win:
http://p.sf.net/sfu/thinkgeek-promo
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

werner.vcf (311 bytes) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: In search of a GUI designer

Derrell Lipman
In reply to this post by panyasan
On Tue, Jun 8, 2010 at 10:30, panyasan <[hidden email]> wrote:

I know Derrell is working on a GUI designer, but I don't know what the state
is.

Yes, I made some good progress on my qooxdoo-contrib project called 'qooxit' but have not had the time in the past few months to work on it. One of the items on my hoped-for to-do list for this summer is to get back to that and take it from its current state of development to something truly usable. It currently shows lots of potential, but isn't quite practical (or featureful enough yet) to be generally useful.
 
That said, my personal experience so far is that I don't spend much time on
the GUI design itself, but rather with the businesss logic. It seems to me
that the widgets that can be quickly drawn with a GUI designer are those
which are quite trivial to write in code

One difference in qooxit from traditional GUI designers is (will be) the ability to add common application functionality to the gui, not just the gui appearance itself. For example, there is sometimes a significant amount of code to set up a Table or a TreeVirtual, where much of that code is done the same way in many applications. Switching to the Resize column model is a common operation that can be quickly automated in qooxit. Users will be able to add "snippets" that can be incorporated into applications, so anyplace there are pieces of code that you need frequently, you would create a snippet which could be applied to a widget, container, etc.

Alas although the design is in place for such things, they're not yet implemented. Once I get farther along with it, to the point that I think it's useful for others to play with, I'll make an announcement.

Derrell




------------------------------------------------------------------------------
ThinkGeek and WIRED's GeekDad team up for the Ultimate
GeekDad Father's Day Giveaway. ONE MASSIVE PRIZE to the
lucky parental unit.  See the prize list and enter to win:
http://p.sf.net/sfu/thinkgeek-promo
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: In search of a GUI designer

Stefan Volbers
In reply to this post by Werner Thie
Hi Werner,

you should have a look at Burak Arslan's JsQt ([1]).
It makes use of the Qt Designer, which IMHO is a nice GUI designer; it
compiles the resulting XML to qooxdoo classes, which you can then fill
with all the necessary business logic.

HTH,

greetings,
Stefan

[1] http://jsqt.org/


On 08.06.2010 17:17, Werner Thie wrote:

> ...writing business logic might even constitute fun whereas writing wads
> and wads of containers in containers containing widgets is abusing the
> programmer as a GUI compiler.
>
> And contrary to all logic which should be applied to GUI design
> customers often know what they want the moment when they see an
> implementation which they don't want, meaning you have to react fast may
> be even on the spot to redesign. It also happens quite often that a
> customer is willing to 'draw' its own GUI up to a point where there is
> only business logic to write.
>
> All in all, even a wimpy tool which implements only the basics would be
> a huge progress compared to nothing at all (so far).

------------------------------------------------------------------------------
ThinkGeek and WIRED's GeekDad team up for the Ultimate
GeekDad Father's Day Giveaway. ONE MASSIVE PRIZE to the
lucky parental unit.  See the prize list and enter to win:
http://p.sf.net/sfu/thinkgeek-promo
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: In search of a GUI designer

Kenneth Tilton
In reply to this post by Werner Thie


Werner Thie wrote:
> Hi
>
> Don't know if Ken with it's server side UI generation has a fancy
> designer at hand (my LISP experience was before GUIs) but going further
> than aggregating a few elements, UI writing and maintenance becomes a
> pain real fast.

What we do in Lisp is use macros and other neat features of the language
to make the code assembling a GUI so dense that it is faster to juggle
the code than it would be to mess with a GUI builder:

(defun search-panel-kt (self)
   (hbox (:align-y 'middle :spacing 12)
     (:allow-grow-y :js-false
       :padding 4)
     (lbl "Search for:")
     (textfield :symbol-string ;; WARNING -- new and untested
       :add '(:flex 1)
       :allow-grow-x t
       :onchangevalue (lambda (self req)
                        (let ((sympart (req-val req "value")))
                          (setf (sym-seg (u^ qxl-session)) sympart))))
     (button "Search" (:enabled (c? (> (length (value (psib))) 1)))
       :onexec (b-when sympart (value (psib))
                 (print `(:sympart-onexec ,sympart))
                 (setf (sym-seg (u^ qxl-session)) sympart)))))

And because it is code (and because I am driving qooxdoo dynamically
from the code) I can move things around in the code and hit refresh in
the browser and see the result. Even against a "build" version, which I
only need to regenerate if I start using a new qx class.

Note also the "enabled" rule*. In this case it is just looking at
another widget, but it could also being looking at business data and
making a decision based on business logic. Even better, instead of just
deciding the enabled state of a widget, a rule for the children of a
composite widget could decide to put up a whole new (or just slightly
modified interface) based on business logic. This lets GUIs be leaner,
smarter, and more helpful, showing users only what is appropriate for
the state of their particular browsing experience as it unfolds.

kt

* Actually, I took that rule out of the demo. A bit of trouble detecting
/as they type/ (that being the whole idea) whether the field is empty or
not -- the (I think) "input" event happens before the text gets updated,
so I ended up guessing (badly) based on the keystrokes whether the field
was empty or not and punted on that.

--
http://www.stuckonalgebra.com
"The best Algebra tutorial program I have seen... in a class by itself."
Macworld

------------------------------------------------------------------------------
ThinkGeek and WIRED's GeekDad team up for the Ultimate
GeekDad Father's Day Giveaway. ONE MASSIVE PRIZE to the
lucky parental unit.  See the prize list and enter to win:
http://p.sf.net/sfu/thinkgeek-promo
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: In search of a GUI designer

Kenneth Tilton


Kenneth Tilton wrote:

>
> Werner Thie wrote:
>> Hi
>>
>> Don't know if Ken with it's server side UI generation has a fancy
>> designer at hand (my LISP experience was before GUIs) but going further
>> than aggregating a few elements, UI writing and maintenance becomes a
>> pain real fast.
>
> What we do in Lisp is use macros and other neat features of the language
> to make the code assembling a GUI so dense that it is faster to juggle
> the code than it would be to mess with a GUI builder:
>
> (defun search-panel-kt (self)
>    (hbox (:align-y 'middle :spacing 12)
>      (:allow-grow-y :js-false
>        :padding 4)
>      (lbl "Search for:")
>      (textfield :symbol-string ;; WARNING -- new and untested
>        :add '(:flex 1)
>        :allow-grow-x t
>        :onchangevalue (lambda (self req)
>                         (let ((sympart (req-val req "value")))
>                           (setf (sym-seg (u^ qxl-session)) sympart))))
>      (button "Search" (:enabled (c? (> (length (value (psib))) 1)))
>        :onexec (b-when sympart (value (psib))
>                  (print `(:sympart-onexec ,sympart))
>                  (setf (sym-seg (u^ qxl-session)) sympart)))))
>
> And because it is code (and because I am driving qooxdoo dynamically
> from the code) I can move things around in the code and hit refresh in
> the browser and see the result. Even against a "build" version, which I
> only need to regenerate if I start using a new qx class.
>
> Note also the "enabled" rule*. In this case it is just looking at
> another widget, but it could also being looking at business data and
> making a decision based on business logic. Even better, instead of just
> deciding the enabled state of a widget, a rule for the children of a
> composite widget could decide to put up a whole new (or just slightly
> modified interface) based on business logic. This lets GUIs be leaner,
> smarter, and more helpful, showing users only what is appropriate for
> the state of their particular browsing experience as it unfolds.
>
> kt
>
> * Actually, I took that rule out of the demo. A bit of trouble detecting
> /as they type/ (that being the whole idea) whether the field is empty or
> not -- the (I think) "input" event happens before the text gets updated,
> so I ended up guessing (badly) based on the keystrokes whether the field
> was empty or not and punted on that.
>

[A link to the subject og this stuff: http://teamalgebra.com/]

I meant to share the remote table model, which relies on a subclass I
created of the qx remote model. With that, the three callbacks are
parameters so there is no need to subclass further, and then I write
code like this:

(defun symbols-found-rethought (self)
   (make-kid 'qxl-table-remote
     :md-name :sym-info-table
     :add '(:flex 1)
     :allow-grow-x t
     :allow-grow-y t

     ;; next three are for data model delegate
     ;; the first is a Lisp anonymous function. The sort fn could be
     ;; as well, it is not much longer. See below for those.
     :cb-row-count (lambda (self req)
                     (declare (ignore req))
                     (length (sym-info (u^ qxl-session))))
     :cb-load-row-data 'sym-get
     :cb-sort-row-data 'sym-sort

     :block-size 100
     ;; column attributes get dispersed variously to table, table model,
     ;; table column model, resize behavior....
     :columns (flet ((mtc (n i &rest iargs)
                       (apply 'make-table-column :name n :id i iargs)))
                (list
                 (mtc "Symbol Name" 'name :width 192)
                 (mtc "Package" 'pkg)
                 (mtc "Function" 'fntype)
                 (mtc "Setf" 'setf? :width 48 :renderer 'boolean)
                 (mtc "Var" 'var? :width 48)
                 (mtc "Class" 'class? :width 48 :renderer 'boolean)
                 (mtc "Exp" 'exported? :width 48 :renderer 'boolean)
                 ))))

(defun sym-get (self req)
   (let* ((start (req-val req "start"))
          (row-count (req-val req "count")))
     (setf start (parse-integer start))
     (setf row-count (parse-integer row-count))

     (loop for sym in (sym-info (u^ qxl-session))
         for n upfrom 0
         when (< (1- start) n (+ start row-count))
         collect (list
                  (cons :name (symbol-info-name sym))
                  (cons :pkg (b-if nns (remove "" (package-nicknames
(symbol-info-pkg sym))
                                         :test 'string-equal)
                               (car nns)
                               (package-name (symbol-info-pkg sym))))
                  (cons :fntype (symbol-info-fntype sym))
                  (cons :var? (symbol-info-var? sym))
                  (cons :setf? (symbol-info-setf? sym))
                  (cons :class? (symbol-info-class? sym))
                  (cons :exported? (symbol-info-exported? sym))))))

(defun sym-sort (self req)
   (prog1 nil
     (setf (sym-sort-spec (u^ qxl-session))
       (list (req-val req "key")(req-val req "order")))))

kt

--
http://www.stuckonalgebra.com
"The best Algebra tutorial program I have seen... in a class by itself."
Macworld

------------------------------------------------------------------------------
ThinkGeek and WIRED's GeekDad team up for the Ultimate
GeekDad Father's Day Giveaway. ONE MASSIVE PRIZE to the
lucky parental unit.  See the prize list and enter to win:
http://p.sf.net/sfu/thinkgeek-promo
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: In search of a GUI designer

panyasan
Hello,

since Kenny is advertising the LISP table, I cannot resist to throw in the QxTransformer table syntax as a shameless plug ;-):

<qx:table  
        id="containingFoldersTable"
  tableColumnModel="qx.ui.table.columnmodel.Remote"
  keepFirstVisibleRowComplete="true"
        showCellFocusIndicator="false"
        selectionMode="{js}qx.ui.table.selection.Model.SINGLE_SELECTION"
        statusBarVisible="false"
  initializeWidthsOnEveryAppear="true">
  <qx:tableModel
    class="qx.ui.table.model.Simple" />
  <qx:tableColumn
    id="folderId" label="FID" visible="false"/>               
  <qx:tableColumn
    id="icon" label=" " width="30"
    dataCellRenderer="{js}qx.ui.table.cellrenderer.Image"/>                                                       
  <qx:tableColumn
    id="path" label="Folder"  />
</qx:table>

Of course, the server logic is not included here - for this, a different tableModel is necessary - I use the virtualdata contrib's model, controller and store for that.

C.


Reply | Threaded
Open this post in threaded view
|

Re: In search of a GUI designer

panyasan
... of course it must be  'tableColumnModel="qx.ui.table.columnmodel.Simple"'

Reply | Threaded
Open this post in threaded view
|

Re: In search of a GUI designer

Kenneth Tilton
In reply to this post by panyasan


panyasan wrote:

> Hello,
>
> since Kenny is advertising the LISP table, I cannot resist to throw in the
> QxTransformer table syntax as a shameless plug ;-):
>
> <qx:table  
> id="containingFoldersTable"
>   tableColumnModel="qx.ui.table.columnmodel.Remote"
>   keepFirstVisibleRowComplete="true"
> showCellFocusIndicator="false"
> selectionMode="{js}qx.ui.table.selection.Model.SINGLE_SELECTION"
> statusBarVisible="false"
>   initializeWidthsOnEveryAppear="true">
>   <qx:tableModel
>     class="qx.ui.table.model.Simple" />
>   <qx:tableColumn
>     id="folderId" label="FID" visible="false"/>
>   <qx:tableColumn
>     id="icon" label=" " width="30"
>     dataCellRenderer="{js}qx.ui.table.cellrenderer.Image"/>
>   <qx:tableColumn
>     id="path" label="Folder"  />
> </qx:table>

Nice! Declarative rocks.

Now if you change something above like a width or label, what are the
steps to see it in a browser? ie, is there just one step that generates
a containingFoldersTable.js and away we go?

If QxTransformer knows its stuff it could be a good way to learn how to
write the hairier qooxdoo stuff: do it in QxTransformer and see what
code it writes.

What do event handlers look like? And the message mechanism: I made good
use of that when I was Just Writing JS to use qooxdoo.

kt

--
http://www.stuckonalgebra.com
"The best Algebra tutorial program I have seen... in a class by itself."
Macworld

------------------------------------------------------------------------------
ThinkGeek and WIRED's GeekDad team up for the Ultimate
GeekDad Father's Day Giveaway. ONE MASSIVE PRIZE to the
lucky parental unit.  See the prize list and enter to win:
http://p.sf.net/sfu/thinkgeek-promo
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: In search of a GUI designer

panyasan
Hi,

qxtransformer is built into the qooxdoo tool chain, so when you have set it up, you can do a simple ./generate.py transform to have the code written to class files [1]. You still need to do "source" or "build" afterwards before you can load the application into the browser - it is currently not meant to be used for on-demand code generation.

The "compiled" code is not very pretty and contains many redundancies. Formatted, the table code would look like this:

var containingFoldersTable = new qx.ui.table.Table(null, {
                        tableColumnModel : function(obj) {
                                return new qx.ui.table.columnmodel.Resize(obj);
                        }
                });
this.containingFoldersTable = containingFoldersTable;

containingFoldersTable.setShowCellFocusIndicator(false);
containingFoldersTable.setStatusBarVisible(false);
containingFoldersTable
                .getSelectionModel()
                .setSelectionMode(qx.ui.table.selection.Model.SINGLE_SELECTION);
containingFoldersTable.setKeepFirstVisibleRowComplete(true);

qxGroupBox2.add(containingFoldersTable, {
                        flex : 1
                });

var qxTableModel1 = new qx.ui.table.model.Simple();
qxTableModel1.setColumns(["FID", " ", "Folder"], ["folderId",
                                "icon", "path"]);

containingFoldersTable.setTableModel(qxTableModel1);

containingFoldersTable.getTableColumnModel().setColumnVisible(0,
                false);

containingFoldersTable.getTableColumnModel().setColumnWidth(1, 30);
containingFoldersTable.getTableColumnModel().getBehavior()
                .setWidth(1, 30);

containingFoldersTable.getTableColumnModel().setDataCellRenderer(1,
                new qx.ui.table.cellrenderer.Image);

The non-optimized state of the code can be accepted, in my opinion, because the UI generation is done only once, at application setup, so the gains from any potential code-intensive optimization will be minimal.

What is important for me, when coding, is to be able to quickly throw in a table with cut & paste without having to look up the quite complex syntax that is necessary to set it up in javascript. For example, adding or deleting columns is a snap in the declarative way, whereas in javascript, columns have to be numbered explicitly and their properties are dispersed over different models (the table model, the table column (resize) model).

Cheers,
C.

[1] http://qooxdoo.org/contrib/project/qxtransformer
Reply | Threaded
Open this post in threaded view
|

Re: In search of a GUI designer

Werner Thie

> The non-optimized state of the code can be accepted, in my opinion, because
> the UI generation is done only once, at application setup, so the gains from
> any potential code-intensive optimization will be minimal.
>
> What is important for me, when coding, is to be able to quickly throw in a
> table with cut&  paste without having to look up the quite complex syntax
> that is necessary to set it up in javascript. For example, adding or
> deleting columns is a snap in the declarative way, whereas in javascript,
> columns have to be numbered explicitly and their properties are dispersed
> over different models (the table model, the table column (resize) model).
Exactly my point, sorted top/down according to pain I would say

- procedural
- declarative
- visual

and on top of that, visual/dynamic such that you not even have to hit
refresh for changes to be reflected.

Hmm, I have the dynamic side completely solved, being able to inject
widgets into live pages at server or clients will (see
http://nqx.thieprojects.ch , the calculator(s) are by no means present
when loading the page, they are injected on the fly), seems I only need
the transformation from declarative to code on the fly...

We then only need a visual tool >> declarative >> procedural, probably a
cool website, which would let you do manipulations on every level,
whatever is preferred at that time.

Werner

------------------------------------------------------------------------------
ThinkGeek and WIRED's GeekDad team up for the Ultimate
GeekDad Father's Day Giveaway. ONE MASSIVE PRIZE to the
lucky parental unit.  See the prize list and enter to win:
http://p.sf.net/sfu/thinkgeek-promo
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

werner.vcf (311 bytes) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: In search of a GUI designer

panyasan
In reply to this post by panyasan
panyasan wrote
qxtransformer is built into the qooxdoo tool chain, so when you have set it up, you can do a simple ./generate.py transform to have the code written to class files [1]. You still need to do "source" or "build" afterwards before you can load the application into the browser - it is currently not meant to be used for on-demand code generation.
That said, I am sure you could hire Siarhei, the mastermind behind qtransformer to do on-demand code generation with qxtransfomer ;-)