From f5216f5f354799b81877999f2b3b405cab0cc3f0 Mon Sep 17 00:00:00 2001 From: andycall Date: Sun, 29 Oct 2023 14:57:28 +0800 Subject: [PATCH] doc: add dart js intercommuncation guide. --- webf/example/lib/main.dart | 34 +++- .../dart_js_intercommunication.md | 173 ++++++++++++++++++ .../the_webf_widget.md | 4 + .../performance_optimization/_category_.json | 6 + .../zero_copy_data_transmission.md | 6 + website/static/videos/music_player.mov | Bin 0 -> 1168833 bytes 6 files changed, 217 insertions(+), 6 deletions(-) create mode 100644 website/docs/tutorials/guides-for-flutter-developer/dart_js_intercommunication.md create mode 100644 website/docs/tutorials/guides-for-flutter-developer/the_webf_widget.md create mode 100644 website/docs/tutorials/performance_optimization/_category_.json create mode 100644 website/docs/tutorials/performance_optimization/zero_copy_data_transmission.md create mode 100644 website/static/videos/music_player.mov diff --git a/webf/example/lib/main.dart b/webf/example/lib/main.dart index 3a1d7b854c..a6b32da820 100644 --- a/webf/example/lib/main.dart +++ b/webf/example/lib/main.dart @@ -43,12 +43,32 @@ class MyBrowser extends StatefulWidget { } class _MyHomePageState extends State { - OutlineInputBorder outlineBorder = OutlineInputBorder( - borderSide: BorderSide(color: Colors.transparent, width: 0.0), - borderRadius: const BorderRadius.all( - Radius.circular(20.0), - ), - ); + final WebFJavaScriptChannel javaScriptChannel = WebFJavaScriptChannel(); + + Future handleJSCall(String method, args) async { + switch(method) { + case 'count': + return 1; + case 'name': + return 'Andy'; + case 'data': + return { + 'count': 1, + 'name': 'Andy' + }; + case 'dataList': + return [ + 1, 2, '3', 4 + ]; + } + return null; + } + + @override + void initState() { + super.initState(); + javaScriptChannel.onMethodCall = handleJSCall; + } @override Widget build(BuildContext context) { @@ -85,6 +105,7 @@ class _MyHomePageState extends State { ); final Size viewportSize = queryData.size; + return Scaffold( appBar: appBar, body: Center( @@ -94,6 +115,7 @@ class _MyHomePageState extends State { children: [ _kraken = WebF( devToolsService: ChromeDevToolsService(), + javaScriptChannel: javaScriptChannel, viewportWidth: viewportSize.width - queryData.padding.horizontal, viewportHeight: viewportSize.height - appBar.preferredSize.height - queryData.padding.vertical, bundle: WebFBundle.fromUrl('assets:assets/bundle.html'), diff --git a/website/docs/tutorials/guides-for-flutter-developer/dart_js_intercommunication.md b/website/docs/tutorials/guides-for-flutter-developer/dart_js_intercommunication.md new file mode 100644 index 0000000000..9f6caae931 --- /dev/null +++ b/website/docs/tutorials/guides-for-flutter-developer/dart_js_intercommunication.md @@ -0,0 +1,173 @@ +--- +sidebar_position: 3 +title: Dart and JavaScript Intercommunication +--- + +WebF offers a streamlined and optimized method for facilitating communication between Dart and JavaScript. + +## Explore the Demo + +[Check out this demo](https://github.com/openwebf/samples/tree/main/demos/js_dart_communicate) that illustrates how to +construct a music player using the `audio_player` Flutter plugin, while employing HTML/CSS and JavaScript for the user +interface. + +