2 UI comments on the Alpha Sneak Preview

[Ned Baldessin]

Hi,

I've just played with the Alpha Sneak Preview, it's very impressive.

I have two comments regarding the user interface that may be worthwhile
looking into. These comments have been made after using BXE on the
"inline BXE demo".

1. Toolbar
The user is viewing and editing the page at the same time, so why put
the editor toolbar over the top of the page ? Why not create a new 'row'
in the browser, under the location bar ? I'm thinking of a XUL overlay
here. The idea is to have a row of "standard" widgets, visualy
integrated with the browser.
Pros :
- Very clear distinction between the document and the tool (buttons,
menus, etc).
- Better consistency with the browser : the widgets follow the
look-and-feel of the current theme.
Cons :
- Not cross-browser (XUL). I understand that at this point you have
more or less abandonned support for IE, that is a dying browser anyway,
so I'm not sure if this is really important or not.


2. Modal Dialogs
The dialogs used to create tables, links, or insert images are pretty
poor (are they JS confirm()ations ?). Ideally, there should be a way to
create widgets that call custom dialog windows with multiple user input
fields. For example, if you click on the "create table" button, you
should have a single dialog window that contains input fields such as :
rows, columns, title, summary. Or the dialog for an image insertion
should let you upload the image to the server, etc.
Maybe the UI of these dialog windows could be automatically created,
based on the requested data fields and types (like the admin in BX-CMS).
But it would also be desirable to be able to override this, and create
(in XHTML ? in XUL ? in Flash ?) a custom user interface.
Example of "rich" dialogs, in IE/Win only :
http://www.fredck.com/FCKeditor/Demo/


Cheers.

[Christian Stocker]

Post by Ned Baldessin
Hi,
I've just played with the Alpha Sneak Preview, it's very impressive.

thanks

Post by Ned Baldessin
I have two comments regarding the user interface that may be worthwhile
looking into. These comments have been made after using BXE on the
"inline BXE demo".

we appreciate every input/feedback.

Post by Ned Baldessin
1. Toolbar
The user is viewing and editing the page at the same time, so why put
the editor toolbar over the top of the page ? Why not create a new 'row'
in the browser, under the location bar ? I'm thinking of a XUL overlay
here. The idea is to have a row of "standard" widgets, visualy
integrated with the browser.
- Very clear distinction between the document and the tool (buttons,
menus, etc).
- Better consistency with the browser : the widgets follow the
look-and-feel of the current theme.
- Not cross-browser (XUL). I understand that at this point you have
more or less abandonned support for IE, that is a dying browser anyway,
so I'm not sure if this is really important or not.

I played with XUL and wanted to use it (neglecting the crossbrowser
stuff). There were to main issues with it

- XUL within XHTML doesn't work properly. Or better said, _I_ couldn't
make it work properly ;) One of the main ideas of BXE was and still is
to provide easy integration in existing projects/CMS/you-name-it. And
therefore it has to work with simple HTML documents. It's too much pain
to have the implementators force to deliver XUL, IMHO.

- remote xul is also one of those not much used features out there. You
get a lot of tutorials/help etc, if you serve XUL from your chrome
directory, but leaving that, you're mostly on you own (maybe that
improved). Furthermore you have a lot of security restrictions if you
serve XUL remotely. This is another goal of BXE: It should work
remotely, meaning you don't have to install anything to get it work
(this will change a little in the future, if you want some of the more
advanced stuff, which you only can make work, if it's installed locally,
like really-native-clipboard access, saving to local files, etc..)

Having said that, i'd like to point out, that there are implementations
for mozile, which use XUL, and AFAIK the xpi version of mozile does have
a seperate tool bar as well. And BXE uses it's own widget system
(implement in js/widgets.js). It's maybe not perfect (since I didn't
check for dependencies), but it should be possible to take the API of
that and rewrite it using XUL or any other system you want.

Post by Ned Baldessin
2. Modal Dialogs
The dialogs used to create tables, links, or insert images are pretty
poor (are they JS confirm()ations ?).

They are f***ing ugly ;) And it's even worse on OSX as they stupidly
slide-in in a too slow speed...

I completely agree with you. I just didn't write a widget until now to
get them nicer and easy configurable. I first just needed the
functionality.

I filled a bug about it ->

http://bugs.bitfluxeditor.org/show_bug.cgi?id=311

Post by Ned Baldessin
Ideally, there should be a way to
create widgets that call custom dialog windows with multiple user input
fields. For example, if you click on the "create table" button, you
rows, columns, title, summary. Or the dialog for an image insertion
should let you upload the image to the server, etc.
Maybe the UI of these dialog windows could be automatically created,
based on the requested data fields and types (like the admin in BX-CMS).
But it would also be desirable to be able to override this, and create
(in XHTML ? in XUL ? in Flash ?) a custom user interface.

If you change the widget, this should be possible.

Post by Ned Baldessin
http://www.fredck.com/FCKeditor/Demo/

no IE/Win here at the moment ;)

chregu

Post by Ned Baldessin
Cheers.

[Ned Baldessin]

Post by Christian Stocker
Having said that, i'd like to point out, that there are implementations
for mozile, which use XUL, and AFAIK the xpi version of mozile does have
a seperate tool bar as well.

Acutally, the xpi version of Mozile is exactly what I was thinking
about, UI wise.

Regarding the usability of XUL for BXE, the xpi installation process is
pretty streamlined : click on a link, validate the security dialog, quit
the browser, relaunch the browser.

Post by Christian Stocker
And BXE uses it's own widget system
(implement in js/widgets.js). It's maybe not perfect (since I didn't
check for dependencies), but it should be possible to take the API of
that and rewrite it using XUL or any other system you want.

That looks interesting, and challenging.
I'll look into it when I start working with BXE (next month probably).

[Christian Stocker]

Post by Ned Baldessin

Post by Christian Stocker
Having said that, i'd like to point out, that there are implementations
for mozile, which use XUL, and AFAIK the xpi version of mozile does have
a seperate tool bar as well.

Acutally, the xpi version of Mozile is exactly what I was thinking
about, UI wise.

thought so ;)

Post by Ned Baldessin
Regarding the usability of XUL for BXE, the xpi installation process is
pretty streamlined : click on a link, validate the security dialog, quit
the browser, relaunch the browser.

It is quite streamlined, yes, but still too much for the casual case and
a lot of users (not the usual geek) find even this still scary ;) Or if
you do a large deployement, you don't want to have to install BXE on
every seat. Or if your outside of your normal workspace and want to do a
quick edit on some of your content.

There is no argument against doing it as XPI and doing it in XUL, but I
think the alternative (working without the need of an installation
process) should also be possible, maybe with less features, but it has
to work. Otherwise it's too complicated

Post by Ned Baldessin

Post by Christian Stocker
And BXE uses it's own widget system
(implement in js/widgets.js). It's maybe not perfect (since I didn't
check for dependencies), but it should be possible to take the API of
that and rewrite it using XUL or any other system you want.

That looks interesting, and challenging.
I'll look into it when I start working with BXE (next month probably).

As I said, I didn't really test the portability of the API, when I
started, I used some names from XUL for the widgets and their methods.
But it's certainly not consistent. Therefore, if you find any flaws,
have improvements, etc, just tell me about them ;)

chregu

[Ned Baldessin]

Post by Christian Stocker
It is quite streamlined, yes, but still too much for the casual case and
a lot of users (not the usual geek) find even this still scary ;) Or if
you do a large deployement, you don't want to have to install BXE on
every seat. Or if your outside of your normal workspace and want to do a
quick edit on some of your content.

Well, one requisite for BXE is to have a Mozilla-based browser
installed. In my experience over here in france, the only major
institution that complies to that is the ministry of agriculture (!).
The point is : when asked, people don't seem put off by installing a new
browser, so I don't think that adding a second step (the xpi) would make
much of a difference.
I agree that it's an inconveniance, but probably not a big one.

Post by Christian Stocker
There is no argument against doing it as XPI and doing it in XUL, but I
think the alternative (working without the need of an installation
process) should also be possible, maybe with less features, but it has
to work. Otherwise it's too complicated

Hum, current version + remote XUL version + XPI version, that sounds
extra-fluffy.
Actually, my major «complaint» with the current toolbar is that is
overlaps on the page. Off the top of my head : why not set the <body>
top padding to the height of the toolbar ?

[Christian Stocker]

Post by Ned Baldessin

Post by Christian Stocker
It is quite streamlined, yes, but still too much for the casual case and
a lot of users (not the usual geek) find even this still scary ;) Or if
you do a large deployement, you don't want to have to install BXE on
every seat. Or if your outside of your normal workspace and want to do a
quick edit on some of your content.

Well, one requisite for BXE is to have a Mozilla-based browser
installed. In my experience over here in france, the only major
institution that complies to that is the ministry of agriculture (!).
The point is : when asked, people don't seem put off by installing a new
browser, so I don't think that adding a second step (the xpi) would make
much of a difference.
I agree that it's an inconveniance, but probably not a big one.

Post by Christian Stocker
There is no argument against doing it as XPI and doing it in XUL, but I
think the alternative (working without the need of an installation
process) should also be possible, maybe with less features, but it has
to work. Otherwise it's too complicated

Hum, current version + remote XUL version + XPI version, that sounds
extra-fluffy.
Actually, my major «complaint» with the current toolbar is that is
overlaps on the page. Off the top of my head : why not set the <body>
top padding to the height of the toolbar ?

We actually had that, and it's really no problem for you (or anyone
else) to have this feature for your own project. Just add the
appropriate CSS "instructions". We put that over the page, 'cause if
putting it above it jumps annoyingly around and we wanted to give the
inline editing experience. But certainly, both approaches have their
drawbacks ,)

chregu

[Brian King]

FYI ...

Post by Christian Stocker
- XUL within XHTML doesn't work properly. Or better said, _I_ couldn't
make it work properly ;) One of the main ideas of BXE was and still is
to provide easy integration in existing projects/CMS/you-name-it. And
therefore it has to work with simple HTML documents. It's too much pain
to have the implementators force to deliver XUL, IMHO.

Are BXE loaded documents XML or XHTML?

http://bugzilla.mozilla.org/show_bug.cgi?id=183641
http://bugzilla.mozilla.org/show_bug.cgi?id=70049

Post by Christian Stocker
- remote xul is also one of those not much used features out there. You
get a lot of tutorials/help etc, if you serve XUL from your chrome
directory, but leaving that, you're mostly on you own (maybe that
improved). Furthermore you have a lot of security restrictions if you
serve XUL remotely. This is another goal of BXE: It should work
remotely, meaning you don't have to install anything to get it work
(this will change a little in the future, if you want some of the more
advanced stuff, which you only can make work, if it's installed locally,
like really-native-clipboard access, saving to local files, etc..)

http://bugzilla.mozilla.org/show_bug.cgi?id=133695

More details for the interested here:
http://www.oreillynet.com/pub/a/mozilla/2002/12/17/app_dev.html
http://www.oreillynet.com/pub/a/mozilla/2003/05/02/casestudy2.html

Post by Christian Stocker
Having said that, i'd like to point out, that there are implementations
for mozile, which use XUL, and AFAIK the xpi version of mozile does have
a seperate tool bar as well.

I have not looked at mozile, but their XPI must be installing the
toolbar into chrome. This would be one option for BXE ... though would
not be cross-browser. You could have an optional XUL toolbar, but this
would mean maintaining 2 toolbars, the HTML one and this one.

[Christian Stocker]

Post by Brian King
FYI ...

Post by Christian Stocker
- XUL within XHTML doesn't work properly. Or better said, _I_ couldn't
make it work properly ;) One of the main ideas of BXE was and still is
to provide easy integration in existing projects/CMS/you-name-it. And
therefore it has to work with simple HTML documents. It's too much
pain to have the implementators force to deliver XUL, IMHO.

Are BXE loaded documents XML or XHTML?

(X)HTML, doesn't matter right now, if with X or without ;)

Post by Brian King
http://bugzilla.mozilla.org/show_bug.cgi?id=183641
http://bugzilla.mozilla.org/show_bug.cgi?id=70049

Post by Christian Stocker
- remote xul is also one of those not much used features out there.
You get a lot of tutorials/help etc, if you serve XUL from your chrome
directory, but leaving that, you're mostly on you own (maybe that
improved). Furthermore you have a lot of security restrictions if you
serve XUL remotely. This is another goal of BXE: It should work
remotely, meaning you don't have to install anything to get it work
(this will change a little in the future, if you want some of the more
advanced stuff, which you only can make work, if it's installed
locally, like really-native-clipboard access, saving to local files,
etc..)

http://bugzilla.mozilla.org/show_bug.cgi?id=133695
http://www.oreillynet.com/pub/a/mozilla/2002/12/17/app_dev.html
http://www.oreillynet.com/pub/a/mozilla/2003/05/02/casestudy2.html

ah, cool, thanks for those links, will have to look deeper into it later.

Post by Brian King

Post by Christian Stocker
Having said that, i'd like to point out, that there are
implementations for mozile, which use XUL, and AFAIK the xpi version
of mozile does have a seperate tool bar as well.

I have not looked at mozile, but their XPI must be installing the
toolbar into chrome. This would be one option for BXE ... though would
not be cross-browser. You could have an optional XUL toolbar, but this
would mean maintaining 2 toolbars, the HTML one and this one.

Yep, the idea of the new BXE was always, that it's possible to change
the widget-system and that you can have different ones. Was just not my
priority to actually test, if it works ;)

chregu

[Christian Stocker]

Post by Christian Stocker

Post by Ned Baldessin
2. Modal Dialogs
The dialogs used to create tables, links, or insert images are pretty
poor (are they JS confirm()ations ?).

They are f***ing ugly ;) And it's even worse on OSX as they stupidly
slide-in in a too slow speed...
I completely agree with you. I just didn't write a widget until now to
get them nicer and easy configurable. I first just needed the
functionality.

Ok, it's implemented now, meaning we have now a modalbox widget, which
is useable ,) Table/Image/Link dialogs are already using it.

a simple example:

var mod = mozilla.getWidgetModalBox("Create Table", callbackfunction);
mod.addItem("rows",2,"textfield","number of rows");
mod.addItem("cols",2,"textfield","number of cols");
mod.show(100,50, "fixed");

and you get your modalbox

It's certainly extensible. At the moment it supports textfield and
select fields (if you go to "Edit Attributes" in a table, you see it
there, the values of that select box are taken from the relax-ng file)

chregu