REFERENCE LIBRARY
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.
When you build web applications with DataFlex, you utilize the Web App Framework. This Framework is essentially a user interface (UI) framework controlled by DataFlex on the server.
The Web Framework revolves around controls, which are the building blocks of web applications in DataFlex. Controls include elements like web forms, web buttons, web lists, and web grids. These controls are implemented in JavaScript and generate HTML elements dynamically.
Let's take a look at an example. Suppose you define a DataFlex object as a web form, set its properties, and run the application.
The web form control will generate HTML code during runtime. This code includes various <div> elements that encapsulate the control's structure.
The Web Framework features two layout systems:
The Web Framework's CSS structure has multiple layers:
When styling the Framework, you primarily work with CSS and themes to control the look and feel of your web application. The Framework manages the HTML structure and layout, while CSS and themes influence the appearance.
To get a hands-on understanding, you can create a new workspace and project within DataFlex. This workspace will provide you with the necessary structure for web application development.
After creating the workspace and project, you'll notice a folder structure with an AppHTML folder, index.html, and other files. This structure is essential for web app development.
Create a Mobile Web Project and when you run the default application generated by DataFlex, you'll observe that it includes controls like a login screen, dashboard, toolbar, and menu. These are created by the Web Framework.
In the AppHtml folder we now have:
Opening the AppHtml with Visual Studio Code, you see that the by default the page includes quite some elements and settings already.
When compiling and running the application the application comes with a login screen by default.
Now we see the default dashboard, toolbar and the menu system.
With the inspector you can inspect elements created by the Framework. For example, you'll find that controls like breadcrumbs are implemented as <div> elements with specific CSS classes generated by the Framework.
The Web Framework in DataFlex dynamically generates HTML elements and controls their layout. It relies on CSS and themes for styling. As a developer, you work within this Framework to build the UI and customize its appearance.
In the next lesson, we'll explore the DataFlex Styler, which allows you to create custom fields and further customize your web application. Stay tuned!
