News Feed

Making a game news feed in Gameface is simple by using features such as XMLHttpRequest and data binding. You can check the ready sample that demonstrates a working news feed in Gameface and is located inside Samples/uiresources/NewsFeed.

These Gameface features are used to create the sample:

• XMLHttpRequest - For demonstration purposes it is used to fetch random text from random-data-api.com. In production XMLHttpRequest should be used to fetch real news from a real server.
• Data binding - Used for rendering collection with the news.
• Gameface scrollable container component - Used for making news container scrollable (by default Gameface does not have support for scrollbar but this component handles that issue).

The sample will fetch a random text and a random image every 2 seconds and display them into the scrollable container as a new news item.

Run the sample #

1. Do npm i in Samples/uiresources/NewsFeed to install the scrollable container.
2. Launch the player and run Samples/uiresources/NewsFeed/index.html.

Additional information #

Request response validation is made inside index.js because sometimes the response is invalid.

When a new item is added to the news collection a fade-in animation is applied to the new DOM element.

The default scroll handle has been redesigned to fit the sample UI. This is done with styles after the comment /* gameface-scrollbar custom styles */ inside the Samples/uiresources/NewsFeed/style.css.