[TIMOB-18479] TiAPI: Layout Engine V3
| GitHub Issue | n/a |
|---|---|
| Type | Epic |
| Priority | High |
| Status | Open |
| Resolution | Unresolved |
| Affected Version/s | n/a |
| Fix Version/s | n/a |
| Components | Android, iOS, Windows |
| Labels | n/a |
| Reporter | Ingo Muschenetz |
| Assignee | Pedro Enrique |
| Created | 2015-01-30T13:56:56.000+0000 |
| Updated | 2020-04-13T17:28:12.000+0000 |
Description
In Titanium SDK version 2.0.0, we rewrote layout according to https://wiki.appcelerator.org/pages/viewpage.action?pageId=31523938, referred to as the "Composite Layout Spec". This is written in Objective-C for iOS and Java for Android.
Mobile Web implemented a version of layout referred to as the "Polynomial Layout Algorithm": https://wiki.appcelerator.org/display/spe/UI+Polynomial+Layout+Algorithm
BlackBerry and Windows Mobile utilize a C-based version of the polynomial algorithm.
Changes in mobile form factors and an increasing variety of display sizes require us to make our layout system more flexible and responsive.
Overal goals:
One possible implementation would be based on the Flexbox engine, as demonstrated here, available in C, Java and JS: https://github.com/FokkeZB/css-layout-ti
Funny I was looking at Facebook's css layout engine yesterday. This looks really awesome from a dev user's POV. Very familiar conventions. I'm for investigating this further. When you say "responsive design", I'm hoping that means for mobile web as well...would help some of our users that want to make desktop apps out of the SDK. Can we include thoughts around how this would work in Alloy as well? Or should that be in another Jira?
One small aside note is that currently the layout is not able to update itself correctly on rotation. At least on iOS we’re used to see nice transitions while the overall viewport canvas resizes, with our current layout options we see the native parts of the layout animating correctly and pieces shifting immediately between portrait and landscape size.
Note that [~fokke] provided some Alloy-based thoughts on his repo. [~tlukasavage] and [~skypanther] may have additional thoughts.
Adding orientation support to Alloy would be huge. Jason Kneen made a module that does this nicely where you can define landscape and portrait inline in the tss. I know [~cbarber] has mentioned using Flexbox for better layout in MobileWeb. If we are going to investigate a new layout approach, I would like to see it better address MobileWeb, responsive design, and provide greater control in Alloy for orientation.
Alloy is not the only one with limited orientation support. Remember that if we’re going to adopt the flex-box specification, there’s no portrait/landscape or breakpoints at all. You get dimension relationship only. Personally I’d prefer a constraint-based layout, GSS-like (see http://gridstylesheets.org/)
I think something like flex box would solve the "orientation" issues. They don't really consider them "orientation modes" anymore anyway. The old landscape / portrait orientations are more treated like different screens sizes now a days anyway....so seems like flex box is a good fit for that.
I love the idea of using Flexbox. It feels like the right solution for layouts. All current generation browsers support it, but previous generation (IE <=10, Android <=4.3) do not. Frankly, I don't care about old browsers. Browsers are moving fast enough and people are upgrading often. I have not heard of GSS, but it sounds interesting. I know a few of the names behind it, so I'll be checking it out. Regardless, Flexbox alone does not solve the problem of responsible design. We need an analog to "media queries". Something that can trigger visual AND behavior changes based on the window size, orientation, and device pixel ratio. We need something to quickly toggle styles as well as emit events. With these building blocks, we can easily build a nice set of built-in UI layout components that people can use to quickly throw together apps.
Because we’re in *our* walled garden, could we please implement _component-level media queries_ instead (or alongside) of viewport ones? I do RWD on a daily basis and it’s the biggest stopper for responsive reusable widgets.