0

Best component to display a list of news story headlines?

asked 2019-03-03 21:31:46 +0800

davout gravatar image davout
1429 3 18

I'm building a web app that has a need to show a list of news story headlines. Ideally i'd like a list of entries where each entry shows: A logo for the news story source (like the newspaper logo) The headline A brief description that includes a "Read more..." link that when clicked opens up another browser tab showing the story in full.

What would be the best ZK component to use for this?

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted
0

answered 2019-03-05 13:20:50 +0800

MDuchemin gravatar image MDuchemin
1346 1 4
ZK Team

Depends on a number of factors (project pattern, page structure, presentation, etc...) but that sounds like a good case for templating.

I'd make a simple vlayout containing a collection of "newscard", and pass variables such as "imageSrc (if you want different logo for each news), titleTxt, mainTxt, readMoreUrl,..."

newscard can be many things, but I'd go for simple components (div, image, label, [a href="${url}"] for the "read more" link, possibly hlayout/vlayout for relative positioning).

With the newscard template ready, most basic case would be collection binding with anything that lets you instantiate a template with variables (fragment, template, include, executions.createComponents(), ...).

I wouldn't recommend a composite (such as macro-component, or custom component) unless each newscard is behavior-heavy with a bunch of events for each card. Would work, but that's more work that you don't need, unless you have a control-heavy or event-heavy newscard :)

With MVC, I'd just make a newscard.zul snippet as a separate zul file, with variables for the relevant stuff, then iterate through my news model doing Executions.createComponents or createComponentsDirectly while passing the data for each newscard.

With ZK8/MVVM, that's a good use-case for shadow elements (forEach / template is a perfect for that situation. If news are updated in real-time, using a ListModel<newscarddata> as source for the <foreach> makes it really easy to render / update). Of course, good old children="@load(vm.model)" binding with template is still an option.

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2019-03-03 21:31:46 +0800

Seen: 7 times

Last updated: Mar 05

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More