webforms 2.1.0 
webforms: ^2.1.0 copied to clipboard
WebForms Core Commander library for Dart.
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.
Metadata
Documentation
Publisher
unverified uploader
Metadata
WebForms Core Commander library for Dart.
Homepage
Repository (GitHub)
View/report issues
Topics
#webforms #webforms-core #server-driven-ui #server-side-ui
License
MIT (license)