Classic or Bootstrap, your FoxInCloud Web App. IS responsive

FoxInCloud offers you 2 HTML rendering: Classic or Bootstrap:

  • Classic rendering uses absolute positioning like VFP: each element has a fixed .Left, .Top, .Width and .Height, the HTML form looks and feels very close to your VFP application.
  • Bootstrap rendering generates HTML that automatically adjust to the screen’s area by taking advantage of the Bootstrap framework: controls are distributed within columns that flow on large screens, stack on smaller screens.

In Classic mode, if the form members have their .Anchor property set, FoxInCloud automatically implements the form.resize() event on the client side. When the form or the browser is resized, the server 1 recursively calculates the new size and position of each control (based on .Anchor), and sends the corresponding resize and move orders to the browser. Browser animates the changes for user’s comfort.

In Bootstrap mode, the generated HTML and CSS is responsible by design, regardless of the .Anchor property; however some CSS might be needed to enhance the default rendering.

In short, you can get a responsive Web App just by implementing the .Anchor property on your form control, which you can very easily test in desktop mode as it works exactly the same in both modes. The Bootstrap mode provides, on top of responsiveness, a more modern look to your application, that you can easily extend using CSS.

This video shows this feature in action:

  1. we plan to implement the same logic on the client side (in JavaScript); this will avoid the slight response time after resizing the form, especially for users with a slow connection. ↩

tags: usability  user experience  responsive 

Watch FoxInCloud Marketing Videos :: Watch FoxInCloud Technical Videos :: Stay tuned on FoxInCloud Roadmap :: Learn how to use FoxInCloud :: Download FoxInCloud Adaptation Assistant for free :: Download FoxInCloud Web Application Studio for free