XOJO Web - Auto Layout

Hi Guys,

Im sure im not the only one and it will be great to have this feature as well on Web apps , it really saves a lot of time and it will help a lot.

Feature Request #49208 added and it will be great if you could support this.

By the way how you rate those feature requests ? as i don`t see any option in feedback to vote for it ?
As well how do you add the url for the Feedback ? as it does not show here on the options.

Thank you .

RubberViewsWE brings Auto Layout to Xojo Web already.

see http://rubberviews.com/rubberviewswe.html

[quote=346006:@Michel Bujardet]RubberViewsWE brings Auto Layout to Xojo Web already.

see http://rubberviews.com/rubberviewswe.html[/quote]
Well indeed , it is there, but as well the 200$ for it which it is not much but not for now i guess, if i charge the customer for it i don`t mind but when i have to pay from my pocket for it no .

On the other side XOJO team already has the functionality for the IOS Interface so i guess it can be adapted for Web as well which is more essential actually considering custom screens and layouts.

Thank, i`ll keep in mind for future projects.

In iOS, auto layout is largely built into the framework. So I would suppose Xojo took advantage of the framework building blocks.

In Web, there is pretty much nothing, it has to be created from scratch. So it is not as easy as adapting the iOS Auto Layout to Web.

If you are not willing to invest in a third party tool, the best you can do until if ever Xojo implements Auto Layout in Web, is learn how to devise a responsive UI yourself in Xojo. The principles are known. The implementation demands some efforts.

https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/
http://osfp.de/ios/auto/ios_auto_layout_demystified_mobile_programming.pdf
http://allhitradio.org.uk/ios/auto/ios_auto_layout_demystified_2nd_edition_mobile_programming.pdf

Not entirely true. There is a JavaScript implementation of cassowary (what Apple called AutoLayout) and several updated versions out there now.

[quote=346011:@Michel Bujardet]In iOS, auto layout is largely built into the framework.
[/quote]
Autolayout IS entirely built in to iOS (and OS X as well)

Which is what the solver in the IDE is based on - but not the one in iOS - thats entirely built into iOS

http://overconstrained.io
there’s several based on the original javascript

Well i did find something interesting here so i don`t think it will be easy to adapt .

http://ijzerenhein.github.io/autolayout.js/

Good news. Yet, and not discounting your talent or supposing anything about the time you could devote to such a project, implementing that in Xojo Web may not be that easy.

Xojo web is different in so many ways to regular HTML…

It can certainly be done, though, as RubberViewsWE demonstrates it.

[quote=346254:@Aurelian Negrea]Well i did find something interesting here so i don`t think it will be easy to adapt .

http://ijzerenhein.github.io/autolayout.js/[/quote]

Welcome to the enchanted world of Auto Layout when it has not been abstracted by Xojo :wink:

Having been working on a ton a webprojects in recent years - many not with XOJO. I still think AutoLayout is an awful idea for web. There’s a reason why ResponsiveDesign with a column based approach is now the standard on just about every major Web UI Framework.

Also to be fair even Apple is moving to the breakpoint/column approach

https://alistapart.com/blog/post/apple-and-responsive-design

For regular web, I agree wholeheartedly.

Problem is, the current Xojo Web is not at all the same paradigm as regular web. With it’s bunch of controls, it would probably not work at all with a column oriented layout.

In fact, I tried to work on Xojo web to bring in some responsiveness as it is done for HTML sites, and never got very far.

[quote=346340:@Brock Nash]Also to be fair even Apple is moving to the breakpoint/column approach

https://alistapart.com/blog/post/apple-and-responsive-design[/quote]
According to Apple’s docs, you use Adaptive Layouts with AutoLayout, not instead of it.

Definitely, that’s the route apple went. And if you watched the video they have on it you see all the “fun” of trying to learn it.
On Safari Its Viewable Here: https://developer.apple.com/videos/play/wwdc2014/216/

Now image sets don’t just get a 1x and 2x. They also can get a 1x Compact and 2x Compact. (Not to mention there now exists a 3x)
Explaining SizeClasses, TraitCollections, Horizontal/Vertical - Regular/Compact Interfacing, etc… is both complicated and Apple-centric.

Explaining a column based layout with breakpoints can be done in under 2 minutes. Each container gets its column count for each screensize (i.e. breakpoint). Pick adequate margins and nest containers however you want and everything just looks and works great. And this concept is very cross-platform relatable.

I would much rather tell a control: “6 columns on medium and down, 3 columns on large and up” (i.e. 6md, 3lu)
rather than the complicated relational pins and struts and formulas for each of Horizontal/Vertical - Regular/Compact.

I definitely think the AutoLayout way of being able to tell a control all the rules of its positioning is powerful and helpful, but it should not be the regular case. Dragging and dropping a control and then toggling a few column counts would serve 90% of people’s cases as well be easy to learn and do.

I could see something like for each View/Container, allowing a dropdown list of “LayoutTypes” that could be customized. Let the user pick Autolayout or a ColumnBased configuration with breakpoints.

One of the first controls I make in any WebProject is a subclass of webContainer called ContainerList that allows you to just keep adding/removing containers to it. The control autopositions the containers based on a few settings: Horizontal/Vertical, MarginSize, Wrap/Scroll, AutoResize
It would be nice to see Xojo add something into the base offering such a common and necessary feature.

If you are interested in trying a responsive column based approach here is a library and sample project I put together to check it out.

https://www.dropbox.com/s/6xe7oa7o0pbbx0a/ResponsiveGrid2017-08-23.zip