Web Framework Overview

Developing Web Applications
The Mobile/Touch Application Style

The DataFlex Web Framework allows you to build complete, professional web applications entirely in DataFlex code. DataFlex applications have always been focused on data entry and reporting and represent our core strength for over 30 years.

The DataFlex Web Framework:

Makes it easy to build sophisticated web applications.
Allows you to create desktop and mobile/touch style applications.
Enables you to focus more on creating professional-looking data entry web applications and less on web technologies such as JavaScript, CSS, and HTML.
Supports visual modeling of each component of your web application.
Enables you to write solid web applications entirely within the Studio using just the DataFlex server-side programming language.
Supports direct use of JavaScript, CSS, HTML, and other web technologies within your web application when needed.

The Basics

The DataFlex Web Framework includes:

Client and server components using AJAX and JSON technologies under the hood.
A built-in security system.
Full data dictionary object support.
A library of controls/widgets that are fully data-aware.
Full Studio integration with visual modeling.
Full application modeling via powerful structures of server-side objects.
Wizards that will get you started, build prototypes of each component of your application, and assemble the components into a proper application backbone.

The Web Framework expresses the entire application in DataFlex server-side code instead of spreading it across various technology layers (DataFlex, ASP, JavaScript, HTML, CSS, etc.).

The Class Library

Everything from the user interface to the business rules is modeled in DataFlex objects based on a robust set of DataFlex classes. Each DataFlex class has a corresponding JavaScript class that, in conjunction with CSS, controls how the user interface will eventually be rendered in the browser.

Your DataFlex objects operate automatically and seamlessly with the corresponding JavaScript objects in the browser, allowing you to model your entire application by only writing DataFlex server-side code.

Desktop and Mobile/Touch Application Styles

The DataFlex Web Framework supports two styles of web applications: Desktop and Mobile/Touch. The desktop style lets you build browser-based applications that look and behave similarly to a traditional DataFlex Windows application. The mobile/touch style extends the web framework to allow a single web application to work well on a range of browser devices, from mobile phones to tablets and up to desktop browsers. The same classes, both DataFlex and JavaScript, are used to build either style application.

Studio Modeling

Since the entire application is written using DataFlex code, all the Studio modeling tools work just as you would expect:

All component types are expressed in Workspace Explorer (Web Views, Web Modal Dialogs, Web Service Objects, Web Browser Objects, Data Dictionaries, and Other).
All public properties and events are accessible in the Object Properties panel.
The full component structure is present in the Code Explorer.
CodeSense and CodeComplete work as expected.

The Studio includes a WebApp Designer for web components (accessible from the View menu or via F7). The Designer allows drag-and-drop visual modeling of each web component.

Positioning and Layout

The underlying positioning system for web applications is referred to as "flow," which positions controls from left to right and top to bottom. This is significantly different from the coordinate positioning used in Windows application development.

There are two additional mechanisms that help you manage the flow: panels and columns.

Read more about Positioning and Layout of Controls.

Look and Feel

The look and feel of web applications are controlled with themes, custom CSS classes, and styling properties. We provide a set of themes "in the box." These themes can also be used by web designers as models for custom themes. Note that we do not recommend editing the default themes; it is better to make complete copies and then make changes.

Read more about Styling Web Applications.

Communication

The key to how the Web Framework works is to understand the communication between the compiled application running on the server and the JavaScript engine running on the client.

Events

User interface events can be handled both on the client and on the server.

Web Properties

Accessing a published property using WebSet or WebGet makes it a web property. Web properties are sent with each AJAX call, and changes are reflected back to the client.

Read more about Web Properties, Methods, and Events.

Action Methods

The DataFlex classes have methods that trigger actions on the client. These calls are queued and added to the response. The JavaScript engine will call the corresponding method.

Read more about JavaScript and DataFlex Classes.

JSON

Communication between the server and client is done using JSON in both directions.

Read more about the JSON support in DataFlex.

Compatibility

Legacy ASP Web Applications

Legacy web applications built using the original ASP technology will still compile and execute. None of the classes have been removed or have behavior changes (though they will be documented as obsolete). All examples of legacy ASP web applications will be removed before release. Wizards and templates will also be removed.

AJAX Library Web Applications

The legacy AJAX Library will no longer be included in DataFlex.

Previous Topic: Developing Web Applications
Next Topic: The Mobile/Touch Application Style