Skip to content

TweetListView

Steve Hannah edited this page Jun 25, 2021 · 3 revisions

TweetListView

tweetlistview diagram

Synopsis

TweetListView is a view that can render an EntityList of Tweet-compatible entities as a news feed with layout and style similar to the Twitter news feed.

Usage

Either add import com.codename1.twitterui.views.TweetListView; to <imports> tag, or use the tag library:

<use-taglib class="com.codename1.twitterui.TagLibrary"/>

Add <tweetListView> tag to your view where you want it to appear:

<tweetListView
    provider="com.example.MyTweetProvider.class"
/>

The provider attribute should refer to an EntityListProvider implementation for that handles refresh and load more requests from the view.

Attributes

TweetListView extends EntityListView, and supports all of its attributes. The most important attribute is provider which specifies an EntityListProvider class that should handle "refresh" and "load more" actions on the list.

View Model

See TweetRowView for view model requirements.

Actions

For row actions, see TweetRowView’s actions.

As a subclass of EntityListView, this class also supports all EntityListView actions.

Example: NASA RSS Feed

The following example displays the NASA news feed.

The NewsFeedProvider

The NewsFeedProvider class is implemented to handle "refresh" and "load more" requests from the TweetListView. It loads the NASA RSS feed and parses it into a list of Tweet entities, which it provides to the request. The TweetListView then uses this EntityList to populate its rows.

src/main/java/com/example/tweetapp/providers/NewsFeedProvider.java
package com.example.tweetapp.providers;

import com.codename1.io.Log;
import com.codename1.io.rest.Rest;
import com.codename1.l10n.SimpleDateFormat;
import com.codename1.rad.io.ParsingService;
import com.codename1.rad.models.AbstractEntityListProvider;
import com.codename1.rad.models.EntityList;
import com.codename1.rad.processing.Result;
import com.codename1.twitterui.models.TWTAuthor;
import com.codename1.twitterui.models.TWTAuthorImpl;
import com.codename1.twitterui.models.Tweet;
import com.codename1.twitterui.models.TweetImpl;
import com.codename1.util.StringUtil;
import com.codename1.xml.Element;

import java.io.ByteArrayInputStream;
import java.io.InputStreamReader;
import java.util.List;

/**
 * A "provider" class that provides rows to EntityListViews that want to display a news feed.
 * This uses {@link Tweet} objects as the row models.
 *
 * This is used for the news feed in the HomePage.
 */
public class NewsFeedProvider extends AbstractEntityListProvider {
    @Override
    public Request getEntities(Request request) {

        // Fetch NASA RSS Feed
        Rest.get("https://www.nasa.gov/rss/dyn/breaking_news.rss")
                .onError(evt->{
                    // Propagate error back to the request
                    request.error(evt.getError());
                })
                .fetchAsBytes(v -> {
                    // The ParsingService will parse XML asynchronously on a background thread
                    // so that it doesn't impede the EDT
                    ParsingService parser = new ParsingService();

                    parser.parseXML(new InputStreamReader(new ByteArrayInputStream(v.getResponseData())))
                        .onResult((res, err) -> {
                            if (err != null) {
                                // Error parsing XML.  Propagate up to request.
                                request.error(err);
                                return;
                            }

                            // Create EntityList which will be returned to the request.
                            EntityList out = new EntityList();

                            // A date formatter to format dates in the RSS feed.
                            // (Determined format string based on the format in the Feed)
                            SimpleDateFormat dateFormatter = new SimpleDateFormat("EEE, dd MMM yyyy HH:mm z");

                            // News items are all in <item> tags of the feed.  Get them all as a list
                            List<Element> items = (List<Element>)res.getDescendantsByTagName("item");
                            for (Element item : items) {
                                try {
                                    // Wrapping item in Result object makes it easier
                                    // to extract values in correct format and navigate around
                                    // nulls.
                                    Result ritem = Result.fromContent(item);

                                    // Tweet is an Entity defined in the tweet-app-ui-kit cn1lib
                                    // to encapsulate a "Tweet", which is basically a news item.
                                    // We will use these for the row models of the list.
                                    Tweet tweet = new TweetImpl();
                                    tweet.setText(ritem.getAsString("description"));
                                    String dateString = ritem.getAsString("pubDate");
                                    dateString = StringUtil.replaceAll(dateString, "EDT", "GMT-4:00");
                                    dateString = StringUtil.replaceAll(dateString, "EST", "GMT-5:00");
                                    tweet.setDatePosted(dateFormatter.parse(dateString));
                                    tweet.setImage(item.getFirstChildByTagName("enclosure").getAttribute("url"));
                                    tweet.setLink(ritem.getAsString("link"));

                                    // TWTAuthor is an Entity defined in the tweet-app-ui-kit cn1li
                                    // to encapsulate Tweet author details.
                                    TWTAuthor author = new TWTAuthorImpl();
                                    author.setName("NASA");
                                    author.setThumbnailUrl("https://pluspng.com/img-png/nasa-logo-png-file-nasa-logo-svg-1237.png");
                                    tweet.setAuthor(author);

                                    // Add tweet to the list.
                                    out.add(tweet);


                                } catch (Exception ex) {
                                    // Hopefully no exceptions here, but log them anyways
                                    Log.e(ex);
                                }
                            }

                            // Pass the EntityList to the request so that
                            // it can be used by the requesting EntityListView.
                            request.complete(out);
                        });


                });
        return request;
    }
}

We need to add a lookup to this provider in the Application Delegate class:

Application delegate class
@Override
    protected void onStartController() {
        super.onStartController();

        // ...

        // Add lookup to news feed provider for the TweetListView
        addLookup(new NewsFeedProvider());
    }
Note
We could also add this lookup in a more specific ViewController for a View containing the TweetListView. Placing it in the Application delegate class makes it available throughout the entire app.

The View

The following is a Sample view containing the TweetListView.

src/main/rad/views/com/example/tweetapp/views/HomePage.xml
<?xml version="1.0"?>
<border xsi:noNamespaceSchemaLocation="HomePage.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <title><label iconUIID="TwitterIcon" fontIcon="(char)0xe902" ></label></title>

    <use-taglib class="com.codename1.twitterui.TagLibrary"/>
    <import>
        import com.example.tweetapp.providers.NewsFeedProvider;
    </import>

    <tweetListView
            layout-constraint="center"
            provider="NewsFeedProvider.class"
    />
</border>
Note
The "TwitterIcon" used in the title of this view is defined in the stylesheet for project that this exmample was taken from, and won’t render correctly if you simply copy and paste it into your own app from here. It is included here for the sample so that it is consistent with the screenshots provided here.

Screenshot

tweetlistview screenshot
Clone this wiki locally