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.

66 comments:

  1. Hi Daniel.

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

    ReplyDelete
    Replies
    1. 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
      حسین تهی

      مهراب

      امید

      Delete
  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. 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
  12. 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
  13. ARTECH Experts are Creating Your Professional Blog Website, Agency & Business Website & E-Commerce Website. Beautiful Stunning Website Web Development

    ReplyDelete
  14. 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
  15. 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
  16. 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

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

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

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

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

    ReplyDelete
  21. 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
  22. 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
  23. Absolutely fantastic posting! Lots of useful information and inspiration, both of which we all need!Relay appreciate your work. phone repair ipswich

    ReplyDelete
  24. The most beautiful website in the world local seo services in gurgaon can't generate new customers if it can't be found by the people looking for it or if it doesn't provide a great user experience.

    ReplyDelete
  25. 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... app cloner apk

    ReplyDelete
  26. I admire what you have done here. I like the part where you say you are doing this to give back but I would assume by all the comments that this is working for you as well. https://www.whocall.biz

    ReplyDelete
  27. Keeping track of info was not presented that i like on my transactions but my acquire components Iphone 4 was provided promptly Ersatzteile iPhone

    ReplyDelete
  28. Mobile promoting is very hard on the grounds that you have to convey precisely what clients are searching for to have the option to drive them closer to you. App Development Company

    ReplyDelete
  29. Great post yet I was thinking about whether you could compose a litte more on this subject? I"d be exceptionally grateful in the event that you could expound a tad bit further. Value it! web design london

    ReplyDelete
  30. This comment has been removed by the author.

    ReplyDelete
  31. Maybe perhaps the most hand on free Android apps, Ringdroid enables you to alter different sound records so you can make your own ringtones and cautions.
    https://appcloner.app
    https://appcloner.net

    ReplyDelete
  32. i love reading this article so beautiful!!great job! Mobile Payments Indiana

    ReplyDelete
  33. Though it has a little startup prize, volusion has a decent gathering of plans. The drawback is that it is a facilitated administration and can go down whenever.

    web designer nuneaton

    ReplyDelete
  34. Every site is special in its own specific manner and thus your (SEO) plans contrast from site to site.Webdesign

    ReplyDelete
  35. The most noticeably awful thing any organization can do is to duplicate another organization's site and execute it as his/her own.premium wordpress blog themes

    ReplyDelete
  36. Free Android App Maker is a standout amongst other free utility to make an android application. Bulk SMS Service Provider in Sharjah UAE

    ReplyDelete
  37. The post is written in very a good manner and it contains many useful information for me. web design agency

    ReplyDelete
  38. This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free. web design company

    ReplyDelete
  39. Without a well-planned marketing strategy, a mobile app will get completely lost in this competitive market, resulting in its failure.Top 10 Mobile App development Companies in UK

    ReplyDelete
  40. Very nice article, I enjoyed reading your post, very nice share, I want to twit this to my followers. Thanks!. telefon dla

    ReplyDelete
  41. I hope these stuffs on Sites To Create Your Own Android Application for Free will help you making your own Android apps and share to your friend and entire world & most important making money through Android Apps.Smart AudioBook Player Pro

    ReplyDelete
  42. Finding a decent web designer is getting increasingly hard. The great designers are being grabbed by offices and enormous activities.Webdesign

    ReplyDelete
  43. To get higher ROI, you need to explore ways to increase the number of app downloads. Nowadays, the profitability of each mobile app is directly impacted by its quality and user experience. Each user expects the app to perform flawlessly on his mobile device and platform.this website

    ReplyDelete
  44. In any event, when you approach the Android advertise, the old rendition may not, at this point be accessible. This is an ideal opportunity to ask for or scan for an APK record.

    itools crack

    ReplyDelete
  45. Thank you, I read your blog. It's Nice and Good. It's really a valuable post about web and mobile app developmemnt. We, as best Web Support company in India also work on web and mobile app development for our customers.

    ReplyDelete
  46. Branding is very important and takes mastery to achieve. smm panel

    ReplyDelete
  47. Imagenomic Portraiture Free Crack: This is a software program that can be embedded in Photoshop.
    Hair, eyebrows, eyelashes, and more allow you to preserve the beautiful print and texture of your face in your photos.
    You can change the brightness, contrast, element range, and much more in the plugin settings.
    To get a better result. One of the basic options found in Imagenomic Portraiture for Mac is the automatic mask maker that helps you adjust the pores and
    skin color that you can customize if you want.
    Download it free From Here:
    https://softserialskey.com/imagenomic-portraiture-crack/

    ReplyDelete
  48. America Gun Ban Home, Syndicated by Countrymen Your News Source Worldwide. Taking the stink out of Gun Control and being a Patriot.  marmaris rodos feribot

    ReplyDelete
  49. Will you battle the consistent desire to simply stop? That choice must be made by you. Webdesign

    ReplyDelete
  50. They guarantee that the website has a one of a kind setting that pulls in Internet clients. Website laten maken

    ReplyDelete
  51. So it is interesting and very good written and see what they think about other people. custom patches

    ReplyDelete
  52. Day by day bargains give off an impression of being a hitting home with most SEOs in light of the fact that lone 1% casted a ballot for it. Webdesign-seo-antwerpen.be

    ReplyDelete
  53. Just download and use this software as you want to use it. Imagenomic Portraiture Crack

    ReplyDelete
  54. There isn't any reason to delay your ecommerce website design which is a one time a project. https://www.sandeepmehta.co.in/affordable-seo-services-delhi/

    ReplyDelete
  55. A web designer is more proficient in sustaining your considerations into the real world.
    https://onohosting.com/

    ReplyDelete
  56. That all changed when somebody thought of the idea of "every day dynamic clients." a knockout post

    ReplyDelete
  57. Excellent article. Very interesting to read. I really love to read such a nice article. Thanks! keep rocking. யு.எஸ் விசா விண்ணப்பம்

    ReplyDelete
  58. This is my first time visit to your blog and I am very interested in the articles that you serve. Provide enough knowledge for me. Thank you for sharing useful and don't forget, keep sharing useful info: India üzleti vízum

    ReplyDelete
  59. There are a few significant inquiries to pose to while picking a web designer for your business web webpage. MavericksMedia

    ReplyDelete
  60. We at Antino Labs believe in redefining and refining our model to suit the industry's requirements. Antino Labs' several years of experience in the market has let us register our global presence. Antino Labs' has the vision to become the world's most trusted partner for digital transformation and we aim to become a brand that defines innovation and the latest technology. We offer clients a one-stop solution for all their interests regarding Application building and Web development.
    Web Development Services
    UI UX design Studio

    ReplyDelete
  61. Cool stuff you have got and you keep update all of us. nofollow

    ReplyDelete
  62. I just found this blog and have high hopes for it to continue. Keep up the great work, its hard to find good ones. I have added to my favorites. Thank You. Web Development Melbourne

    ReplyDelete
  63. hop over to this website p1j19u4d26 fake louis vuitton 9a replica bags x6f09s9t77 replica bags in dubai have a peek at this web-site s5w03i6k36 replica bags and shoes replica bags from korea replica gucci bags u5s94j1m05 9a replica bags

    ReplyDelete
  64. During my training, I adhered strictly to OpenAI's policies on ethical usage and confidentiality, ensuring compliance with guidelines to maintain user privacy and data security. This commitment to policy compliance reflects my dedication to responsible and ethical behavior in all interactions.

    click here

    ReplyDelete

  65. The lattice multiplication calculator simplifies complex arithmetic tasks with its structured approach.
    Efficiently compute large multiplications using the lattice method with this intuitive calculator tool.
    https://calculatoruniverse.com/lattice-multiplication-calculator/

    ReplyDelete