Ad for feature request #46795 - Support for Web Frameworks

May I advertise this feature request from Victor Manuel Osorio I’ve found recently in XOJO’s Feedback system? And I would extend this for ZURBs Foundation Framework. Maybe if more ppl would place this in their Top Cases Lists? Responsive Websites in XOJO? This would be great! (I know this word is used inflationary)

<https://xojo.com/issue/46795>

Tomas, when you post any link, don’t bother with the link feature. Just paste. In this instance, a colon is missing in the link so it never opens Feedback.

http://feedback//showreport?report_id=46795

ok, just removed the link…

Responsive Xojo apps would require a massive rework of the Web framework, you can’t just add Bootstrap to a web project and expect it to magically make your app responsive. I actually put in a decent amount of debugging to be sure that Bootstrap definitions did not conflict with the Xojo framework in WebStudio

If you’re looking to add the style of the frameworks to your app there are existing solutions for both Bootstrap and Framework. Additionally there are 3rd party controls that offer Date Pickers.

I fixed it

Yes Tim, nobody said that this will be easy :wink: My focus is more on responsiveness and site layout, not on controls and I am aware that this means some fundamental changes in Xojo’s Web Framework. Maybe a new layout editor and concept like in iOS screens?

The feedback case you linked is a mash of many different feature requests. In fact, it doesn’t mention anything at all about responsive design web apps, it asks specifically for a built in responsive dashboard (something like this) but not responsive design apps. Honestly this case reads like, “I don’t want to pay for things created by third party developers, so bundle them into Xojo.”

I did a search and can’t find any cases that specifically ask for responsive capable web apps.
I think if you want focus on responsive design in web apps, then you should make a feature request for that.
That I would add my points to.

Well this was not my intention, not to take over an existing feature request nor to pollute feedback with duplicate feature requests. Shall I really create a new case focusing on site layout and responsive design? @Norman Palardy what do you think?

I’m the wrong guy to ask here
Greg would be better

With RubberViewsWE, which has autoscale and Auto Layout, I have been as far as I could towards responsive design for Xojo Web. I did that not by fighting the framework, but by working around it, and with it.

But intrinsically, Xojo Web is at the moment just set to prevent responsive design. All dimensions and element positions are absolute (pixels), and constrained in such way that there is no simple way to implement classic CSS responsive design.

For instance, say, a control has a width of 500px.

In pure CSS, one could do :

width:500px; max-width:95%; min-width: 200px;

Unfortunately, the framework does :

width:500px; max-width:500px; min-width: 500px;

Positions are absolute, not relative, as well.

In order to implement the simplest CSS responsive design, one would have to butcher the framework beyond recognizable.

I am not even sure implementing the code I posted above would be tenable.

Xojo Web is intended to be WYSIWYG. A responsive design approach would be an entirely different product in my opinion. I don’t think you could switch to it but add an alternate option. Otherwise you completely destroy all existing projects in newer versions.

Yeah, responsive design is built on rules. Xojo layouts are based on a coordinate system. There’s no logical bridge between the two. If you want responsive behavior, code it into your views. Look at the page size and move your controls accordingly, just like you would do with a window on the desktop.

I don’t know if a similar feature request already exists, but…

I would like to be able to create different versions or layouts of the same window, page, or container, in the IDE and without having to duplicate code or wire up a whole bunch of events (with or without AddHandler).

Right now you can create an abstract subclass of WebContainer (for example) and then create concrete children of that subclass, each representing a particular layout. This lets you centralize code, but the code in the parent cannot directly reference any of the controls on the children. And the events for each control of each child have to be set.

It would be amazing to have multiple layouts of a single container, and have those layouts automatically activate under certain conditions (screen/window size and orientation where applicable). Multiple layouts plus the existing resize locks would allow us to easily implement responsive designs while still using the existing coordinate system of layout.

I imagine this would still be a big change, and I have no idea how likely it is that such a change would ever happen. But it would be very cool.

This is the kind of thing that RubberViewsWE Auto Layout handles. The demo shows very well how to have several versions of the layout depending on the aspect ratio of the window, such as what happens in a rotating device.

Problem is, such things can be done in CSS (columns) with much, much less code. But the Xojo Web framework is Wysiwyg, and is not supposed to require CSS knowledge.

I do believe a responsive design product would be possible, but then it would not be Xojo anymore.

Short follow-up : It is in fact possible to modify the style at the control level to use responsive, proportional sizing.

The catch is elements sizes are set by the framework in a separate style sheet.

This works with a rectangle :

<div id="QeejEqEf" style="opacity: 1 !important; visibility: visible; min-width:100px; width: 90%;" class=""></div>

It does resize fine when the browser window is getting narrower. Although somewhat less smoothly than what happens in a pure HTML page.

Now, remains a little issue : after resizing, Xojo still believes its control has the design size. So not only one would have to change the style at the control level, but also add some code in the onresize JavaScript event to send back to Xojo the new dimensions.

So, it is possible, but not as straightforward as in HTML.

Daniel sorted it out. Let me please explain this in a more detailed, illustrated manner:

The state of responsive Websites in XOJO today is quite good. It creates dialogs and perfect forms for databases and for most business apps this is good enough. But when coming down to mobile devices it gets too complicated, error loaded and bloaty. In my software (here hangarbox web front end) I am already checking screen dimensions and orientation, navigating the user through two different sets of views.

This screen shows “the switch”:

Here are the different sets of “views” in the left navigator:

The Desktop “view” of login mask:

and the mobile counterpart:

The problem is these are not just two views. I am forced to build a set of different control sets, a mobile one and desktop one. Basically I am writing two piece of software and this is annoying me. It doubles everything, the needed time, the rate of possible bugs and the time to track down errors and implement new functions. This is very very frustrating, believe me.

Again, I do not bully XOJO Web in general, it’s great for forms and business desktop web front-ends.

Here is a refreshing alternative. Some of you might know Rapidweaver. It’s an HTML Framework with powerful Stacks and Foundation Plugins. I am using it for static websites and simple input forms (based on php). This is a look how my own website looks like in RW:

I’ve written it before, maybe the whole IDE must be switched or let me better say expanded to “views” like on iOS. Again, the current solution for Xojo Webs is great for Desktop like Web Apps - please do not touch this! Maybe this could be solved as new Target named “Mobile Web”?

Just my thoughts…

I already suggested that it is possible to design an HTML site that would have a back end powered by Xojo through HandleURL. Then Xojo would act very much like a Php script. It requires creating a token for each visitor to have the notion of session, but it is far from being unfeasible.

@Michel Bujardet: This is primarily what XWF is designed to do. My goal was to combine the power of the Xojo language with traditional Web development techniques.

With XWF, all requests are handled via HandleURL. The XWF class does a lot of the “heavy lifting” involved in developing apps in this manner. It includes methods for things that we tend to take for granted when developing Xojo Web apps, such as session management, multi-part form support (file uploads), etc.

Tim, I am sorry, but the demo shows no responsive design. Just what appears to be static HTML. And could be done just as easily directly in the Xojo Web IDE…

I would have expected much more spectacular things.

@Michel Bujardet: Agreed, the demo does not show responsive design, and it is not intended to. The goal of the demo is to show how XWF works and how a developer might use it.

That being said, you can certainly implement responsive design using XWF if you choose to. In fact, you can use whatever design, frameworks, Javascript libraries, etc that you want to use. (I try to avoid those types of things as much as possible, but that’s another topic altogether.)