You may not be authorized to see this content. Please contact Data Access Europe for more information.

Cancel Data Access Europe

You are not authorized to see this content.

Cancel Data Access Europe

The CSS and HTML Secrets of DataFlex WebApps

1h 48m

Intermediate

DataFlex comes with several themes, which can be enhanced with the DataFlex Styler, an online service to modify the look & feel of your WebApps. But what if you want to fully customize the UI/UX of your applications? In this video course you will learn where exactly in the Web Framework, you can find the CSS and HTML code that make up the eventual look & feel of your application.

Start course

Introduction to the course.

In this first lesson, we'll dive into the world of HTML. HTML stands for Hypertext Markup Language. Essentially, it's an XML-based format used to describe documents. HTML works with building block elements that can be nested, have content, and utilize attributes to configure them.

Cascading Style Sheets

In this lesson, we'll unravel the world of Cascading Style Sheets, or CSS, which plays a pivotal role in determining the visual appearance of your HTML page. CSS allows you to apply styles to different elements on your web page, shaping their look and feel.

CSS Sizing and Positioning

Before we dive into how the concepts, discussed in previous lessons, are applied within the Framework, let's explore some key aspects of CSS related to sizing and positioning. These concepts are essential for understanding how elements are laid out on a web page.

Framework structure

In this lesson, we'll explore the structure of the Web Framework used in DataFlex for building web applications. This Framework is responsible for creating the user interface of your web apps.

In this lesson, we'll explore the Data Access Styler, an online service that enables you to create custom themes for your DataFlex web applications. With the Styler, you can change the color scheme, adjust details like borders, and save and download these themes for use in your workspace.

In this lesson, we will delve deeper into the Column Layout System, which is the standard layout system in the DataFlex Web Framework. This system employs a flow-based layout mechanism where controls are positioned within specific columns. Controls can span multiple columns, and the number of columns is adjustable. The layout flows automatically from left to right and top to bottom.

In this lesson, we will explore the Panel Layout System, which provides an alternative to the Column Layout System in DataFlex. Panel layouts can be used independently or in conjunction with column layouts, offering greater flexibility in arranging controls within your web application.

In this lesson, we'll explore how controls are constructed in DataFlex, including their elements and how to apply styles to them.

In this lesson, we will explore the built-in responsiveness features of the DataFlex Web Framework, allowing your applications to adapt to different device sizes and aspect ratios.

Lists and Grids

In this lesson, we'll take a closer look at how lists and grids are structured within the DataFlex Web Framework and how you can style them to fit your application's design.

Course instructor

Harm Wibier

Software Engineer , Data Access Europe B.V.

Download Code Samples