9:10 a.m.
Hi all,
When errai is going to make development on mobile phones easier, then one thing it should
definitely support is responsive layout. Than means that when the screen sizes get smaller
that the display changes accordingly. Normally these things are done in css so one could
argue that, because of the way that errai is decoupling ui from the gwt components that we
can leave this to who ever is designing the front-end.
Another option is to take the twitter bootstrap approach and have some sort of framework
to support building responsive layouts. The way that bootstrap does it is that they have
columns that when the display gets smaller they start making the columns smaller and in
the end place them under each other. On top of that they have build some pre defined css
classes that will make elements visible or invisible on certain device types.
What we can do is create column gwt components and add the css to make it work. Then the
user can bind different divs to the various columns and things get aligned when the view
gets smaller.
see:
http://twitter.github.com/bootstrap/scaffolding.html#responsive
What do you think, any other ideas?
Cheers,
Erik Jan
10:27 p.m.
Bootstrap responsive UI combined with Errai UI works very well. I've used
this in a few demos already actually.
On Tue, Dec 18, 2012 at 3:10 AM, Erik Jan de Wit <edewit(a)redhat.com> wrote:
Hi all,
When errai is going to make development on mobile phones easier, then one
thing it should definitely support is responsive layout. Than means that
when the screen sizes get smaller that the display changes accordingly.
Normally these things are done in css so one could argue that, because of
the way that errai is decoupling ui from the gwt components that we can
leave this to who ever is designing the front-end.
Another option is to take the twitter bootstrap approach and have some
sort of framework to support building responsive layouts. The way that
bootstrap does it is that they have columns that when the display gets
smaller they start making the columns smaller and in the end place them
under each other. On top of that they have build some pre defined css
classes that will make elements visible or invisible on certain device
types.
What we can do is create column gwt components and add the css to make it
work. Then the user can bind different divs to the various columns and
things get aligned when the view gets smaller.
see:
http://twitter.github.com/bootstrap/scaffolding.html#responsive
What do you think, any other ideas?
Cheers,
Erik Jan
_______________________________________________
errai-dev mailing list
errai-dev(a)lists.jboss.org
https://lists.jboss.org/mailman/listinfo/errai-dev
--
Lincoln Baxter, III
http://ocpsoft.org
"Simpler is better."
9:44 a.m.
Hi,
Bootstrap responsive UI combined with Errai UI works very well.
I've used this in a few demos already actually.
Right, but what I was thinking about was to help a developer user it more easy instead of
creating his own css and html (or use what twitter bootstrap provides) we include a grid
concept like twitter bootstrap. For example:
<r:Row>
<r:Column size="12">
<g:Label>Level 1 of Column</g:Label>
<r:Row>
<r:Column size="6">
<g:Label>Level 2</g:Label>
</r:Column>
<r:Column size="6">
<g:Label>Level 2</g:Label>
</r:Column>
</r:Row>
</r:Column>
</r:Row>
what do you think?
Cheers,
Erik Jan
4:34 p.m.
On 2012-12-19, at 3:44 AM, Erik Jan de Wit wrote:
Hi,
> Bootstrap responsive UI combined with Errai UI works very well. I've used this in
a few demos already actually.
Right, but what I was thinking about was to help a developer user it more easy instead of
creating his own css and html (or use what twitter bootstrap provides) we include a grid
concept like twitter bootstrap. For example:
<r:Row>
<r:Column size="12">
<g:Label>Level 1 of Column</g:Label>
<r:Row>
<r:Column size="6">
<g:Label>Level 2</g:Label>
</r:Column>
<r:Column size="6">
<g:Label>Level 2</g:Label>
</r:Column>
</r:Row>
</r:Column>
</r:Row>
That would be really useful for people who use GWT UiBinder and/or programmatic layout of
widgets. This is definitely something we support, but we're angling toward ErraiUI for
our demos and stuff. I think with ErraiUI, special row and column widgets for Bootstrap
wouldn't be super-useful.
One thing I definitely did run into with Bootstrap was that it's super-awkward to use
their jQuery addons in an ErraiUI project. All of the CSS is reusable, but the logic in
the plugin is difficult to include and invoke in a natural way. I ended up recreating the
popover plugin code in the Grocery List demo:
https://github.com/errai/errai/blob/master/errai-jpa/demos/errai-jpa-demo...
It would be cool to have a module that provides the Bootstrap stylesheets plus GWT
reimplementations of all the jQuery plugins. That would help everyone no matter it
they're doing programmatic, UiBinder, or ErraiUI.
-Jonathan
5:53 p.m.
Agreed.
But I'm not sure that it's in our best interest to re-invent something
that's already being done in pure javascript frameworks. This is one of the
reasons we designed Errai UI, so that it could support pure JS/CSS, and
developers could use whatever grid system/responsive layouts they want.
However, there is a good chance that a young new project starting up will
be addressing creating re-usable javascript widgets. In which case, we may
actually see a widget library come about for Errai. That would be where
this belongs, I imagine, and should be something to bring up then.
I see value in this, but I think the new widgets project (or the Errai
module supporting that) is the place for this.
~Lincoln
On Wed, Dec 19, 2012 at 10:34 AM, Jonathan Fuerth <jfuerth(a)redhat.com>wrote:
On 2012-12-19, at 3:44 AM, Erik Jan de Wit wrote:
Hi,
Bootstrap responsive UI combined with Errai UI works very well. I've used
this in a few demos already actually.
Right, but what I was thinking about was to help a developer user it more
easy instead of creating his own css and html (or use what twitter
bootstrap provides) we include a grid concept like twitter bootstrap. For
example:
<r:Row>
<r:Column size="12">
<g:Label>Level 1 of Column</g:Label>
<r:Row>
<r:Column size="6">
<g:Label>Level 2</g:Label>
</r:Column>
<r:Column size="6">
<g:Label>Level 2</g:Label>
</r:Column>
</r:Row>
</r:Column>
</r:Row>
That would be really useful for people who use GWT UiBinder and/or
programmatic layout of widgets. This is definitely something we support,
but we're angling toward ErraiUI for our demos and stuff. I think with
ErraiUI, special row and column widgets for Bootstrap wouldn't be
super-useful.
One thing I definitely did run into with Bootstrap was that it's
super-awkward to use their jQuery addons in an ErraiUI project. All of the
CSS is reusable, but the logic in the plugin is difficult to include and
invoke in a natural way. I ended up recreating the popover plugin code in
the Grocery List demo:
https://github.com/errai/errai/blob/master/errai-jpa/demos/errai-jpa-demo...
It would be cool to have a module that provides the Bootstrap stylesheets
plus GWT reimplementations of all the jQuery plugins. That would help
everyone no matter it they're doing programmatic, UiBinder, or ErraiUI.
-Jonathan
_______________________________________________
errai-dev mailing list
errai-dev(a)lists.jboss.org
https://lists.jboss.org/mailman/listinfo/errai-dev
--
Lincoln Baxter, III
http://ocpsoft.org
"Simpler is better."
11:14 a.m.
Hi,
So I see the point that Lincoln is makes and I fully agree. My suggestion is only useful
for people that want to use the ui-binder. Because in the end all it does is create divs
with the right classes and some checks and include the css. There are of course things
that are hard to nice with just css and then a component could provide some ease of use,
I'm thinking about tables that are responsive.
That would be really useful for people who use GWT UiBinder and/or programmatic layout of
widgets. This is definitely something we support, but we're angling toward ErraiUI for
our demos and stuff. I think with ErraiUI, special row and column widgets for Bootstrap
wouldn't be super-useful.
So then it doesn't make sense to include something like this. I'll now make the
cordova demo look a bit nicer on the phone and table by using twitter bootstrap css and
ErraiUI.
One thing I definitely did run into with Bootstrap was that it's super-awkward to use
their jQuery addons in an ErraiUI project. All of the CSS is reusable, but the logic in
the plugin is difficult to include and invoke in a natural way. I ended up recreating the
popover plugin code in the Grocery List demo:
Couldn't you use JSNI or gwtquery for that? I guess making something like a component
for this is then going to be more of a mis direction.
Cheers,
Erik Jan
3:17 p.m.
On 2012-12-20, at 5:14 AM, Erik Jan de Wit wrote:
>
> One thing I definitely did run into with Bootstrap was that it's super-awkward to
use their jQuery addons in an ErraiUI project. All of the CSS is reusable, but the logic
in the plugin is difficult to include and invoke in a natural way. I ended up recreating
the popover plugin code in the Grocery List demo:
>
Couldn't you use JSNI or gwtquery for that? I guess making something like a component
for this is then going to be more of a mis direction.
Yes, you definitely can. What I couldn't figure out was a *nice* way of arranging
everything while still using the Bootstrap-provided jQuery plugin. It all became pleasant
to use again when I reimplemented the behaviour in plain GWT.
So far we've avoided getting into the "here's a set of widgets" game
because there are so many widgets for GWT already. I just brought this up because you were
suggesting to make some Bootstrap-specific widgets (the row/column/responsive table ones)
and I thought the Bootstrap jQuery widgets were a closely related idea. :)
-Jonathan
4144
days inactive
4146
days old
6 comments
3 participants
participants (3)
-
Erik Jan de Wit -
Jonathan Fuerth -
Lincoln Baxter, III