PLUGIN - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki
<PACKAGE/> : ViewableWidget
The <PACKAGE/> or <PKG/> element renders a widget from a dynamic <PACKAGE/>. To learn more about building dynamic content refer to the FLUTTER_EVAL package on
[Pub.dev](https://pub.dev).
| Name | Type | Default | Description |
|---|---|---|---|
| plugin | <pkg>.<class>(p1,p2, ...pn) |
Where <pkg> is the id of the <PACKAGE/>, <class> is the class constructor and (p1,p2, ... pn) are the passed parameters |
<PKG id="pkg1" url="/plugins/my_plugin_package.evc" name="package:my_plugin_package/main.dart"/>
<FORM>
<!-- Custom Function Example -->
<TEXT id="t1" value="=pkg1.MyFunctions.sayHello('Cruel World')"/>
<BUTTON label="Click Me" onclick="t1.set(pkg1.MyFunctions.sayGoodbye('Cruel World'))"/>
<!-- Custom Widget -->
<TEXT id="text" value="This is what shows in the red box. get('text') is called from within the dynamic widget."/>
<WIDGET id="w1" plugin="pkg1.MyWidget({$id},{$get},{$set})"/>
<!-- Custom Form Field Control -->
<TEXT id="t2" value="{f1.value}"/>
<FIELD id="f1" plugin="pkg1.MyField({$id},{$get},{$set})" value="999"/>
</FORM>// @ the terminal prompt,
// run => dart_eval compile -o my_plugin_package.evc
library my_plugin_package;
export 'main.dart' show MyWidget, MyField, MyEvals;
import 'package:flutter/material.dart';
// ex. <WIDGET id="w1" plugin="pkg1.MyWidget({$id},{$get},{$set})"/>
// where 'pkg1' is <PKG id="pkg1" url="/plugins/my_plugin_package.evc" name="package:my_plugin_package/main.dart"/>,
// {$id} is the id of the encapsulating <WIDGET/>, {$get} is the get function, and {$set} is the set function
class MyWidget extends StatelessWidget {
final String id;
final Function set;
final Function get;
const MyWidget(this.id, this.get, this.set);
@override
Widget build(BuildContext context) {
var text = get("text") ?? "not found";
return Container(color: Colors.red, width: 200, height: 200, child: Text(text));
}
}
// ex. <FIELD id="f1" plugin="pkg1.MyField({$id},{$get},{$set})" value="999"/>
// where 'pkg1' is <PKG id="pkg1" url="/plugins/my_plugin_package.evc" name="package:my_plugin_package/main.dart"/>,
// {$id} is the id of the encapsulating <FIELD/>, {$get} is the get function, and {$set} is the set function
class MyField extends StatelessWidget {
final String id;
final Function set;
final Function get;
const MyField(this.id, this.get, this.set);
@override
Widget build(BuildContext context) {
var value = get('$id.value') ?? "";
var view = TextField(maxLength: 200, onChanged: onChanged, controller: TextEditingController(text: value));
return view;
}
void onChanged(String? value) => set('$id.value', value);
}
class MyFunctions {
// ex. <TEXT id="t1" value="=pkg1.MyFunctions.sayHello('Cruel World')"/>
// where 'pkg1' is <PKG id="pkg1" url="/plugins/my_plugin_package.evc" name="package:my_plugin_package/main.dart"/>
static String sayHello(String? message) {
return 'Hello $message';
}
// ex. <BUTTON label="Click Me" onclick="t1.set(pkg1.MyFunctions.sayGoodbye('Cruel World'))"/>
// where 'pkg1' is <PKG id="pkg1" url="/plugins/my_plugin_package.evc" name="package:my_plugin_package/main.dart"/>
static String sayGoodbye(String? message) {
return 'Goodbye $message';
}
}Compile the above code to .evc byte code from the command line using:
$dart_eval compile -o my_plugin_package.evc
<PKG id="pkg1" name="package:example/main.dart">
<dart>
<![CDATA[
import 'package:flutter/material.dart';
class MyWidget extends StatelessWidget {
MyWidget(this.name);
final String name;
@override
Widget build(BuildContext context) {
return Padding(padding: EdgeInsets.all(5.0),
child: Column(mainAxisSize: MainAxisSize.min,
children: [Container(color: Colors.red,child: Text('The name is ' + name))],
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center));
}
}
]]>
</dart>
</PKG>
<!-- Custom Widget -->
<BOX expand="false" border="all" bordercolor="green" padding="50" radius="5" margin="10" center="true">
<WIDGET id="w1" plugin="pkg1.MyWidget('Name 1')"/>
<WIDGET id="w2" plugin="pkg1.MyWidget('Name 2')"/>
</BOX>
</FML>