|
| 1 | +## How to work with WebForms Core in Dart (Shelf framework) |
| 2 | + |
| 3 | +To use WebForms Core, first copy the WebForms class file in this directory to your project. Then create a new View file similar to the one below. |
| 4 | + |
| 5 | +```dart |
| 6 | +import 'dart:io'; |
| 7 | +import 'package:shelf/shelf.dart'; |
| 8 | +import 'package:shelf/shelf_io.dart' as io; |
| 9 | +import 'package:shelf_router/shelf_router.dart'; |
| 10 | +
|
| 11 | +import 'WebForms.dart'; |
| 12 | +
|
| 13 | +void main() async { |
| 14 | + // Create a Shelf router |
| 15 | + var router = Router(); |
| 16 | +
|
| 17 | + // Handle POST requests to the root path |
| 18 | + router.post('/', (Request request) async { |
| 19 | + var body = await request.readAsString(); |
| 20 | + var formData = Uri.splitQueryString(body); |
| 21 | +
|
| 22 | + // Check if the button was clicked |
| 23 | + if (formData['btn_SetBodyValue'] != null) { |
| 24 | + var name = formData['txt_Name'] ?? ''; |
| 25 | + var backgroundColor = formData['txt_BackgroundColor'] ?? ''; |
| 26 | + var fontSize = int.tryParse(formData['txt_FontSize'] ?? '16') ?? 16; |
| 27 | +
|
| 28 | + var form = WebForms(); |
| 29 | +
|
| 30 | + form.setFontSize(InputPlace.tag('form'), '${fontSize}px'); |
| 31 | + form.setBackgroundColor(InputPlace.tag('form'), backgroundColor); |
| 32 | + form.setDisabled(InputPlace.name('btn_SetBodyValue'), true); |
| 33 | +
|
| 34 | + form.addTag(InputPlace.tag('form'), 'h3'); |
| 35 | + form.setText(InputPlace.tag('h3'), 'Welcome $name!'); |
| 36 | +
|
| 37 | + return Response.ok(form.response(), headers: {'Content-Type': 'text/plain'}); |
| 38 | + } |
| 39 | +
|
| 40 | + return Response.ok(_htmlForm(), headers: {'Content-Type': 'text/html'}); |
| 41 | + }); |
| 42 | +
|
| 43 | + var server = await io.serve(router, 'localhost', 8080); |
| 44 | + print('Server running on http://${server.address.host}:${server.port}'); |
| 45 | +} |
| 46 | +
|
| 47 | +String _htmlForm() { |
| 48 | + return ''' |
| 49 | +<!DOCTYPE html> |
| 50 | +<html> |
| 51 | +<head> |
| 52 | + <title>Using WebForms Core</title> |
| 53 | + <script type="text/javascript" src="/script/web-forms.js"></script> |
| 54 | +</head> |
| 55 | +<body> |
| 56 | + <form method="post" action="/" > |
| 57 | +
|
| 58 | + <label for="txt_Name">Your Name</label> |
| 59 | + <input name="txt_Name" id="txt_Name" type="text" /> |
| 60 | + <br> |
| 61 | + <label for="txt_FontSize">Set Font Size</label> |
| 62 | + <input name="txt_FontSize" id="txt_FontSize" type="number" value="16" min="10" max="36" /> |
| 63 | + <br> |
| 64 | + <label for="txt_BackgroundColor">Set Background Color</label> |
| 65 | + <input name="txt_BackgroundColor" id="txt_BackgroundColor" type="text" /> |
| 66 | + <br> |
| 67 | + <input name="btn_SetBodyValue" type="submit" value="Click to send data" /> |
| 68 | +
|
| 69 | + </form> |
| 70 | +</body> |
| 71 | +</html> |
| 72 | + '''; |
| 73 | +} |
| 74 | +``` |
| 75 | + |
| 76 | +In the upper part of the View file, it is first checked whether the submit button has been clicked or not, if it has been clicked, an instance of the WebForms class is created, then the WebForms methods are called, and then the response method is printed on the screen, and other parts Views are not displayed. |
| 77 | +Please note that if the submit button is not clicked (initial request), the view page will be displayed completely for the requester. |
| 78 | + |
| 79 | +As you can see, the WebFormsJS script has been added in the header section of the View file above. |
| 80 | + |
| 81 | +The latest version of the WebFormsJS script is available through the link below. |
| 82 | + |
| 83 | +https://github.com/elanatframework/Web_forms/blob/elanat_framework/web-forms.js |
0 commit comments