Best way to Emulate Mobile Tabs using GWT

62 views
Skip to first unread message

Paul Mazzuca

unread,
Sep 27, 2013, 3:52:25 PM9/27/13
to google-we...@googlegroups.com
Many mobile applications have "Tabs" or buttons on the bottom of the View to move from different areas of the application.  Can this be emulated in pure GWT, and if so how would you recommend it?  My initial thought was to use a DockLayoutPanel with the "south" region containing a grid of buttons.  This kinda works, however I then began to think that what I really want is a TabLayoutPanel with the tabs on the bottom, stretched to the width.  Is this even possible in GWT?  After a cursory effort, I am unable to position the tabs on the bottom of the view relative to the tab page, and I am unable to modify the width of the tabs relative to the view.   I tried playing with the gwt-TabLayoutPanel css with no luck.   My other thought is that I need to go lower and use the TabBar and figure out the tab container separately, however I would rather just use the TabLayoutPanel.  Any suggestions would be much appreciated.

Paul

unread,
Sep 29, 2013, 1:12:23 PM9/29/13
to google-we...@googlegroups.com
take a look at how mgwt does it in it's showcase app http://mobilegwt.appspot.com/showcase/

It will a combination of using the css3 flex box model and such to achieve the desired layout

Paul Mazzuca

unread,
Oct 1, 2013, 12:46:49 PM10/1/13
to google-we...@googlegroups.com
Thanks for the quick reply.  Without getting into any details, I am trying to not use mgwt.   But, with that said, I did check out the source which was helpful.  I think I am going to use a TabBar and DeckPanel combination since the native GWT TabPanel does not seem to support positioning the TabBar.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Web Toolkit" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit/Q_PnuA7UMr4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-web-tool...@googlegroups.com.
To post to this group, send email to google-we...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.

Reply all
Reply to author
Forward
0 new messages