WebForms Core for Dart

WebForms Core (WFC) is a server-side UI manipulation technology that allows server-side code to generate commands for manipulating the HTML DOM through the WebFormsJS browser runtime.

WebForms Core (WFC) is owned by Elanat.

This package provides the Dart WebForms Commander for WebForms Core.

Installation

Add webforms to your pubspec.yaml:

dependencies:
  webforms: ^2.1.0

Then run:

dart pub get

Import the WebForms class:

import 'package:webforms/webforms.dart';

How to work with WebForms Core in Dart (Shelf framework)

To use WebForms Core with Dart and the Shelf framework, add the webforms package to your project and import the WebForms class.

The following example demonstrates a complete Shelf application using WebForms Core.

import 'dart:io';
import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart' as io;
import 'package:shelf_router/shelf_router.dart';

import 'package:webforms/webforms.dart';

void main() async {
  var router = Router();

  router.get('/script/web-forms.js', (Request request) {
    final file = File('web/script/web-forms.js');
    if (!file.existsSync()) {
      return Response.notFound('web-forms.js not found');
    }
    return Response.ok(
      file.readAsStringSync(),
      headers: {'Content-Type': 'application/javascript; charset=utf-8'},
    );
  });

  router.post('/', (Request request) async {
    var body = await request.readAsString();
    var formData = Uri.splitQueryString(body);

    if (formData['btn_SetBodyValue'] != null) {
      var name = formData['txt_Name'] ?? '';
      var backgroundColor = formData['txt_BackgroundColor'] ?? '';
      var fontSize = int.tryParse(formData['txt_FontSize'] ?? '16') ?? 16;

      var form = WebForms();

      form.setFontSize(InputPlace.tag('form'), '${fontSize}px');
      form.setBackgroundColor(InputPlace.tag('form'), backgroundColor);
      form.setDisabled(InputPlace.name('btn_SetBodyValue'), true);

      form.addTag(InputPlace.tag('form'), 'h3');
      form.setText(InputPlace.tag('h3'), 'Welcome $name!');

      return Response.ok(
        form.response(),
        headers: {'Content-Type': 'text/plain; charset=utf-8'},
      );
    }

    return Response.ok(
      _htmlForm(),
      headers: {'Content-Type': 'text/html; charset=utf-8'},
    );
  });

  router.get('/', (Request request) {
    return Response.ok(
      _htmlForm(),
      headers: {'Content-Type': 'text/html; charset=utf-8'},
    );
  });

  var server = await io.serve(router, InternetAddress.loopbackIPv4, 8080);
  print('Server running on http://${server.address.host}:${server.port}');
}

String _htmlForm() {
  return '''
<!DOCTYPE html>
<html>
<head>
  <title>Using WebForms Core</title>
  <script type="module" src="/script/web-forms.js"></script>
</head>
<body>
    <form method="post" action="/">
        <label for="txt_Name">Your Name</label>
        <input name="txt_Name" id="txt_Name" type="text" />
        <br>
        <label for="txt_FontSize">Set Font Size</label>
        <input name="txt_FontSize" id="txt_FontSize" type="number" value="16" min="10" max="36" />
        <br>
        <label for="txt_BackgroundColor">Set Background Color</label>
        <input name="txt_BackgroundColor" id="txt_BackgroundColor" type="text" />
        <br>
        <input name="btn_SetBodyValue" type="submit" value="Click to send data" />
    </form>
</body>
</html>
  ''';
}

How it works

When the page receives an initial GET request, the complete HTML view is returned to the requester.

When the submit button is clicked, the application receives a POST request. The submitted form data is read and a WebForms instance is created:

var form = WebForms();

The WebForms methods are then used to create server-side UI commands:

form.setFontSize(InputPlace.tag('form'), '${fontSize}px');
form.setBackgroundColor(InputPlace.tag('form'), backgroundColor);
form.setDisabled(InputPlace.name('btn_SetBodyValue'), true);

form.addTag(InputPlace.tag('form'), 'h3');
form.setText(InputPlace.tag('h3'), 'Welcome $name!');

Finally, the generated WebForms Core response is returned:

return Response.ok(
  form.response(),
  headers: {'Content-Type': 'text/plain; charset=utf-8'},
);

The response is interpreted and executed in the browser by WebFormsJS.

Therefore, the basic architecture is:

Dart
  ↓
WebForms
  ↓
Action Controls
  ↓
WebFormsJS
  ↓
HTML DOM

The initial request returns the complete HTML page. Subsequent WebForms Core requests can return only the server-generated commands required to manipulate the existing DOM.

WebFormsJS

WebForms Core uses WebFormsJS as its browser runtime.

Add the WebFormsJS script to the page:

<script type="module" src="/script/web-forms.js"></script>

The latest version of the WebFormsJS script is available here:

https://github.com/elanatframework/Web_forms/blob/elanat_framework/web-forms.js

WebForms Core

WebForms Core (WFC) is owned by Elanat.

Official website:

https://elanat.net/page_content/web_forms_core

Source repository:

https://github.com/webforms-core/Web_forms_classes

License

WebForms Core is distributed under the MIT License.

Libraries

webforms