Comments (4)
Hello @TakasurAtWork
It would be very nice to have sticky headers (section headers) in the ListView component. Unfortunately, this is not so simple. The ListView is one of the most complex parts of Beagle and extending it with this feature would take a considerable amount of work on both iOS and Android libs.
Because of other priorities, the team can't implement this feature right now. This is not to say we'll never implement it, but we can't put in our backlog or give it a due date. Here are some alternatives:
- Non sticky titles: you can have titles in your data source with the support for multiple templates. They won't be sticky, but that's all you would miss. (Docs).
- Custom component: this may not be ideal, but you could implement your whole list as a custom component. This has the disadvantage that this list's template wouldn't be server driven, but you'd be able to implement your sticky headers natively.
from beagle.
Custom component: this may not be ideal, but you could implement your whole list as a custom component. This has the disadvantage that this list's template wouldn't be server driven, but you'd be able to implement your sticky headers natively.
Can you please briefly explain why the list's template in a custom component cannot be server driven?
from beagle.
Let me try to better explain what I mean.
Example with the ListView (alternative 1 in my previous comment):
https://playground.usebeagle.io/#/cloud/S3-f5874f69-dae9-4a54-b527-c022b0489a10
The problem with this approach is that you have no way of making the section titles stick to the screen.
The idea of the second approach is to not use the ListView at all, but instead create a new custom component, like below:
{
"_beagleComponent_":"custom:myList",
"sections":[
{
"title":"T",
"items":[
{
"name":"Telsin",
"race":"Terris",
"planet":"Scadrial",
"isMistborn":false,
"age":38,
"sex":"female"
},
{
"name":"TenSoon",
"race":"Kandra",
"planet":"Scadrial",
"isMistborn":false,
"age":40,
"sex":"male"
}
]
},
{
"title":"K",
"items":[
{
"name":"Kaladin",
"race":"Alethi",
"planet":"Roshar",
"isMistborn":false,
"age":24,
"sex":"male"
},
{
"name":"Kelsier",
"race":"Half-skaa",
"planet":"Scadrial",
"isMistborn":true,
"age":38,
"sex":"male"
}
]
},
{
"title":"V",
"items":[
{
"name":"Vin",
"race":"Half-skaa",
"planet":"Scadrial",
"isMistborn":true,
"age":20,
"sex":"female"
}
]
}
]
}
Notice that we can't pass "template" to this new custom component, unless we implement how to interpret this property in the frontend.
It's easy to see that sections
is a List of Section
and Section
is just an object with a title and a list of items. It would be straight forward to implement this property. But what type would template
be if we decided to implement it? It is a structure very particular to Beagle and Beagle doesn't provide you a simple method to transform this structure into a view. Even if it id, this template must be rendered within a context (the current item). Beagle doesn't have a simple way for transforming the server driven data (_beagleComponent_
, _beagleAction_
, etc) into an actual view given a "current context".
This would be a neat feature. But for now, to support templates on your own custom components, you'd have to basically reimplement the ListView, which would be too much work.
from beagle.
@TakasurAtWork I hope this example helped you. I'm closing this issue due to inactivity. Feel free to reopen it if you still have a problem.
from beagle.
Related Issues (20)
- "PositionType": "Absolute" doesn't work HOT 2
- JSON key can have special character HOT 2
- make beagle:container fit to content width HOT 1
- iOS: How can i convert ServerDrivenComponent to UIView with style
- feat: iOS: make BeagleScreenViewController -> convenience init(_ component: ServerDrivenComponent..) public HOT 8
- Height of a ServerDrivenComponent in Swift(UI) HOT 19
- Can't access ListView initializer for iOS SDK HOT 2
- How to tell when other component scroll into view? HOT 13
- How to animate Component? HOT 3
- Reusable custom component in JSON level HOT 3
- All Platforms: Modally presented popover server driven components. HOT 4
- Custom component using multiple built-in components doesn't nested HOT 3
- Support for GZIP compression for smaller payload JSON HOT 5
- Testing auto-reply
- Creating listview programmatically will result in crash with "java.lang.IllegalArgumentException: RecyclerView Id can't be -1" HOT 7
- ListView and GridView padding doesn't work in Android platform HOT 1
- Context data not getting passed HOT 3
- BeagleScreenViewController Lifecycle Analytics HOT 4
- Broken link in CONTRIBUTING.md documentation
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from beagle.