look & feel for web form

Forum|Forum|5 years ago
September 24, 2020
1 reply
0 views

dominiquekocinski
Participating Frequently

Hello

Just begin the web module.(uniface itself 20 years) but no knowlegde at all about web language

displaying data , controls... all ok

but when going to arrange the look...That's when the problems arrive.At the training course, all seems easy, but not anymore when alone in front of my pc

So if somebody has a simple code with bootstrap or w3.css.

The form is simple.

one entity,(automatic retrieve, no user action) one field the user clics on it to go the next form.

the occurrence is displayed horizontally 3 columns and multiple rows

must be responsive, if run on a smartphone, occurrence will be displayed vertically

Dominique

David Akerman
Rocketeer
Forum|Forum|5 years ago
September 24, 2020

Hello

Just begin the web module.(uniface itself 20 years) but no knowlegde at all about web language

displaying data , controls... all ok

but when going to arrange the look...That's when the problems arrive.At the training course, all seems easy, but not anymore when alone in front of my pc

So if somebody has a simple code with bootstrap or w3.css.

The form is simple.

one entity,(automatic retrieve, no user action) one field the user clics on it to go the next form.

the occurrence is displayed horizontally 3 columns and multiple rows

must be responsive, if run on a smartphone, occurrence will be displayed vertically

Dominique

Hi Dominique,

We're working on additional web learning content, but in the mean-time I've created a simple sample for you and attached the export file below:

It's a Uniface 10.3 Dynamic Server Page using a copy of the HTML layout from the sample at https://getbootstrap.com/docs/4.0/examples/starter-template/ with some additional changes.

Here is a screenshot: BootstrapStarter1.png

The resources are loaded from a CDN and the getbootstrap.com site so you don't need to install them locally (assuming you have an internet connection).

I've bound some of the fields from the HTML layout (Home, Search text and Button in the Nav + Button in the list) to Uniface fields by id and added some server code to show messages when they are clicked.

I've also added a table which is populated with some dummy data in code to avoid database dependencies. In a real application you will probably want to use DSPContainers for NAV & Page Content, which isn't covered in this sample, but this will hopefully help with your CSS layout issues. There is also a community sample you can download which covers data paging techniques: Database paging in DSP component and in Form component

Have a look at the CSS classes on the links, buttons & table, and note that the address column is hidden on small screens (try resizing to see the list and navigation change). Screenshot: BootstrapStarter2.png

I highly recommend looking at the documentation and examples at https://getbootstrap.com to understand the CSS classes.

Kind Regards,

David Akerman (Subject Matter Expert, Uniface UK)