DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Data Engineering
  3. Data
  4. Writing Custom CellRenderer using the Declarative new GWT 2.5 UiRenderer

Writing Custom CellRenderer using the Declarative new GWT 2.5 UiRenderer

Mrabti Idriss user avatar by
Mrabti Idriss
·
Dec. 05, 12 · Interview
Like (0)
Save
Tweet
Share
7.07K Views

Join the DZone community and get the full member experience.

Join For Free

before gwt 2.5, writing a custom cellrenderer to present data in a certain manner was very complicated and very difficult to achieve.

all the custom ui code had to be written inside a java class that inherits from the abstractcell class, using html strings concatenation, which is a pretty clunky solution. if you want something cleaner you could choose to use the @template class, but still it is very difficult to write and to maintain.

i always said, if only google would add in gwt the ability to define the ui of a custom cellrenderer using xml, just like they did with the introduction of uibinder, and to have the possibility to bind the ui components using the @uifield and to hook event processing using @uihandler ==> hooraaahhhh !!!! this dream came true with gwt 2.5, and it is called the uirenderer .

in this article i’ll show some snippets of codes of a real use case example to explore most of the features brought to us with uirender. first let’s describe the custom cellrenderer we will implement.

image

as you can see in the schema, the cell item renderer is composed of a picture, a text and two buttons, one to remove the item and the other one to open a popup for editing data.

to create a custom cellrenderer using uirenderer we have to create two files, one containing the xml declarative ui code (think of the myview.ui.xml files), and the other one holds the associated java view (think of the myview.java). the two files must have the same name.

declarative ui code of mycellrenderer.ui.xml :

one thing to remember, the difference between the uirenderer and uibinder is that in uirenderer you can only use html tags. all gwt custom components will not work in here. i hope google will add this feature in a future release.

<ui:uibinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
    <ui:with field='name' type='java.lang.string'/>
    <ui:with field='image' type='java.lang.string'/>

    <ui:style>
        .imagewrapper {
            float: left;
            margin-right: 10px;
        }
        .imagewrapper img {
            width: 64px;
            height: 64px;
        }
        .infowrapper {
            float: left;
        }
        .infowrapper div span {
            display: inline-block;
            marin-right: 5px;
            text-decoration: underline;
            cursor: pointer;
        }
    </ui:style>

    <div>
        <div class="imagewrapper">
            <img alt="{name}" src="{image}" />
        </div>

        <div class="infowrapper">
            <h3><ui:text from="{name}"/></h3>
            <div>
                <span ui:field="remove">remove</span>
                <span ui:field="update">update</span>
            </div>
        </div>

        <div style="clear: both;"/>
    </div>
</ui:uibinder>

custom cellrenderer java file mycellrenderer.java :

this file will manage the ui logic, like for example passing the data to be displayed, formatting data (date conversion, number conversion…), handling events…

in this example, we have two events to handle (the click on remove and update buttons). thanks to uirenderer, we can use ui:fields and the @uihandler annotation. there is some other boilerplate code to add, like the onbrowse event handler to make it work (everything is well described in the snippet of code below).

public class mycellrenderer extends abstractcell {
    // this can be compared to uibinder --> here where all magic is done
    public interface renderer extends uirenderer {
        void render(safehtmlbuilder sb, string name, string image);

        void onbrowserevent(mycellrenderer o, nativeevent e, element p, person n);
    }

    private final renderer uirenderer;

    @inject
    public mycellrenderer(final renderer uirenderer) {
        super(browserevents.click);
        this.uirenderer = uirenderer;
    }

    @override
    public void onbrowserevent(context context, element parent, person value, nativeevent event,
                               valueupdater valueupdater) {
        uirenderer.onbrowserevent(this, event, parent, value);
    }

    @override
    public void render(context context, person value, safehtmlbuilder safehtmlbuilder) {
        // all data extraction, transformation should be done in here
        string name = value.getfirstname() + value.getlastname();
        string image = value.getimage();

        // we directly the uirenderer and we pass the htmlbuilder
        uirenderer.render(safehtmlbuilder, name, image);
    }

    @uihandler({"remove"})
    void onremovepersonclicked(clickevent event, element parent, person value) {
        window.alert("do you want to remove : " + value.getfirstname());
    }

    @uihandler({"update"})
    void onupdatepersonclicked(clickevent event, element parent, person value) {
        //maybe use the actioncell.delegate to process the action elsewhere...
        window.alert("do you want to update : " + value.getfirstname());
    }
}

using the new renderer in a celllist :

now that we are done writing our custom, sophisticated and good looking cellrenderer (:d), we can use it the same way we used the old legacy renderer. i added below a small snippet to show you how in case you forget:

public class myview extends composite {
    public interface binder extends uibinder<widget, webcartview> {
    }

    @uifield(provided = true)
    celllist personlist;

    @inject
    public myview(final binder uibinder, final mycellrenderer mycellrenderer) {
        personlist = new celllist(mycellrenderer); // same way as using old renderers
        ....  // continue what you always do...
    }
}

that’s it for this article, i hope this was useful and will help you build more awesome sophisticated apps without having to write a lot of complicated code. ps: this new uirenderer can be used with any cell based gwt widget.

for more details check the following links : http://goo.gl/2fepf (gwt 2.5 uirenderer official docs ), http://goo.gl/ogr3j (cell widget docs).


Data (computing) Boilerplate code Use case Snippet (programming) Java (programming language) Event

Published at DZone with permission of Mrabti Idriss, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Tech Layoffs [Comic]
  • The 31 Flavors of Data Lineage and Why Vanilla Doesn’t Cut It
  • Deploying Java Serverless Functions as AWS Lambda
  • The 12 Biggest Android App Development Trends in 2023

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: