Saturday, June 16, 2012

using mgwt header list

This post is part of a series of blogposts that show the usage of  some mgwt / gwt-phonegap components.

The mgwt HeaderList is is a widget that can display data grouped within a list. It can render data similar to the contacts in the phone app of an iPhone.

It uses cells for the content and for the headers to do so. Rendering html with cell is much more efficient than using widgets directly. This is how it looks on an iPhone:



With HeaderList you need to specify two cell. One for the content and one for the headers.
Lets say we have two simple Java POJOs that we consider the model:



public class Header {
 private final String name;

 public Header(String name) {
  this.name = name;
 }

 public String getName() {
  return name;
 }

}

public class Content {

 private final String name;

 public Content(String name) {
  this.name = name;
 }

 public String getName() {
  return name;
 }

}

Then we need to build two cells that can render this into html:

private class ContentCell implements Cell {

 @Override
 public void render(SafeHtmlBuilder safeHtmlBuilder, Content model) {
  safeHtmlBuilder.appendEscaped(model.getName());

 }

 @Override
 public boolean canBeSelected(Content model) {
  return true;
 }

}

private class HeaderCell implements Cell
{ @Override public void render(SafeHtmlBuilder safeHtmlBuilder, Header model) { safeHtmlBuilder.appendEscaped(model.getName()); } @Override public boolean canBeSelected(Header model) { return false; } }

Note: within the cell you can render any html with any css classes. So if you want to add images or other things, this is the way to go.


After we have set this up cell list is very easy to use:

To build this you need to do the following steps:

1. Setup the viewport for the mobile browser:
MGWT.applySettings(MGWTSettings.getAppSetting());

2. Instantiate an AnimationHelper and attach it to the RootPanel:

AnimationHelper animationHelper = new AnimationHelper();
RootPanel.get().add(animationHelper);

3. Instantiate a LayoutPanel, GroupingCellList and HeaderList:
LayoutPanel layoutPanel = new LayoutPanel();
  
GroupingCellList<Header, Content> groupingCellList = new GroupingCellList<Header, Content>(new ContentCell(), new HeaderCell());

HeaderList<Header, Content> headerList = new HeaderList<Header, Content>(groupingCellList);

layoutPanel.add(headerList);


4. Animate to the created UI:
animationHelper.goTo(layoutPanel, Animation.SLIDE);

The complete source can be found here. If you want to see the widget in action you can visit the showcase.

25 comments:

  1. Hi Daniel.

    I'm having some trouble to add a Selection Handler to the contents. Would you recommend any tutorial? Thanks!

    ReplyDelete
  2. Hi Daniel,

    I don't need the quick links that are shown in the right side.Can I able to remove it via any settings

    Thanks,
    Sundar

    ReplyDelete
  3. Good article knowledge gaining article. This post is really the best on this valuable topic. moving checklist app

    ReplyDelete
  4. Get into the development procedure with the goal that a reasonable comprehension is developed in your psyche about the item that is being developed for you. best javascript framework

    ReplyDelete
  5. One present why galore businesses opt for postcards is because they are overmuch cheaper to be prefab and this can forbear a lot of expenses on the lengthened run.  Mobile phone reviews and specifications

    ReplyDelete
  6. It's appropriate time to make some plans for the future and it's time to be happy. I have read this publish and if I could I desire to suggest you some attention-grabbing issues or tips. Perhaps you could write next articles referring to this article. I desire to learn more things about it! How To Make Your Own Android App Without Coding

    ReplyDelete
  7. Hi, i read your blog occasionally and i own a similar one and i was just curious if you get a lot of spam responses? If so how do you stop it, any plugin or anything you can advise? I get so much lately it's driving me insane so any help is very much appreciated.
    Build Your Own Mobile App Without Programming Skills

    ReplyDelete
  8. I've been surfing online greater than 3 hours these days, but I never discovered any fascinating article like yours. It's lovely value enough for me. In my view, if all web owners and bloggers made just right content material as you probably did, the web will be a lot more useful than ever before.
    Mobile App Reseller Program And Business

    ReplyDelete
  9. This is my first time pay a quick visit at here and i am genuinely happy to read everthing at one place. How To Make An App Without Coding Skills

    ReplyDelete
  10. Hey! This is kind of off topic but I need some guidance from an established blog. Is it very hard to set up your own blog? I'm not very techincal but I can figure things out pretty quick. I'm thinking about making my own but I'm not sure where to start. Do you have any points or suggestions? Appreciate it How To Start A Mobile App Reseller Business

    ReplyDelete
  11. This is genuinely an awesome read for me. I have bookmarked it and I am anticipating perusing new articles. Keep doing awesome!
    Web Development

    ReplyDelete
  12. Hi there! I know this is kind of off topic but I was wondering if you knew where I could find a captcha plugin for my comment form? I'm using the same blog platform as yours and I'm having problems finding one? Thanks a lot! Create An App For My Restaurant

    ReplyDelete
  13. This is my first time i visit here and I found so many interesting stuff in your blog especially it's discussion, thank you. The Sims Mobile Hack

    ReplyDelete
  14. ARTECH Experts are Creating Your Professional Blog Website, Agency & Business Website & E-Commerce Website. Beautiful Stunning Website Web Development

    ReplyDelete
  15. Wow! This could be one of the most useful blogs we have ever come across on thesubject. Actually excellent info! I’m also an expert in this topic so I can understand your effort. oneplus 5T review by saifkhatri.com

    ReplyDelete
  16. It has enhanced its features in a short span of time to meet the demand of the market. So what is this framework is all about? AngularJS is an open-source and structural framework for dynamic web applications.

    ReplyDelete
  17. It’s laborious to search out knowledgeable folks on this matter, but you sound like you realize what you’re speaking about! Thanks PSD to Email

    ReplyDelete

  18. Respecting the time and exertion you put into your site and point by point data you offer!..
    Web Development

    ReplyDelete
  19. For web-based social networking, the conveyance channel is electronic (through a web-based social networking website)

    ReplyDelete
  20. Your great features appearing on your web development services will definitely attract more clients. The sky is the limit guys. web development services

    ReplyDelete
  21. Nice to read your article! I am looking forward to sharing your adventures and experiences. Whocall

    ReplyDelete
  22. With expanding number of well informed clients over the globe, versatile application improvement has made disturbances over every single significant industry for offering business-benevolence, incredible convenience, and in a hurry information availability to representatives and clients alike. Web Development Company

    ReplyDelete
  23. I’m going to read this. I’ll be sure to come back. thanks for sharing. and also This article gives the light in which we can observe the reality. this is very nice one and gives indepth information. thanks for this nice article... unlockmobiledevice

    ReplyDelete
  24. Building a construction site when it is of great importance. The text color design and images add something to say about the refreshing crowd.https://www.capitalnumbers.com/backend-development.php

    ReplyDelete
  25. Absolutely fantastic posting! Lots of useful information and inspiration, both of which we all need!Relay appreciate your work. phone repair ipswich

    ReplyDelete