Responsive

[itg-assistant]

Birol asked 2016-08-24 16:04:02 UTC

Have you any  responsive sample project on wisej ?

[itg-assistant]

Luca answered 2016-08-24 17:02:03 UTC

A simple example could be the ChartJS example:https://wisej.com/examples/

It shows the FlowLayout panel with the new FillWeight property. Child controls or panels automatically resize, wrap and also fill the row according to the FillWeight.

You should also look at the Application.ResponsiveProfileChanged and the Form.ResponsiveProfileChanged. You get the event when a responsive break is detected. The breaks are defined in the ClientzProfile.json file. There is a built-in version that you can override in your app simply by placing a file named ClientProfile.json at the root of the project. I have attached the built-in one.

In short, with Wisej responsive support you can

• Use DockStyle to have controls dock to the sides and resize automatically.

• Use AnchorStyle to have controls adapt their size and position proportionally.

• Use the FlowLayouPanel and TableLayoutPanel to have automatic wrapping, resizing of rows and columns.

• Handle the ResponsiveProfileChanged event to hide/show/ resize/move/etc. controls, panels, rows and columns.

• Determine the responsive breaks that you want to detect and react to.

• Handle the Application.ResponsiveProfileChange or simply query the Application.ActiveProfile property to determine which window, form, page to show for which device.

The Application.ActiveProfile property and the event args e.CurrentProfile and e.PreviousProfile return an instance of Wisej.Core.ClientProfile. see https://docs.wisej.com/api/wisej.core/general/wisej.core.clientprofile with a lot information about the responsive break and the device.

You can also use Application.Browser property to get this object: https://docs.wisej.com/api/wisej.web/general/application#browser

HTH

We didn't have the time yet to build a more complex example and document all this. It will be done, I promise.

Best,

Luca

[itg-assistant]

Tiago Freitas Leal answered 2016-08-24 22:47:04 UTC

Hi Luca,

Can you add this info to the documentation?

[itg-assistant]

Luca answered 2016-08-24 22:50:24 UTC

Of course. There is a concept section for Responsive Layouts. We are also working on a Tutorials section.

Best,

Luca