Trace:
Differences
This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
flutterui:custom_screen [2020/08/06 20:33] admin created |
flutterui:custom_screen [2020/08/13 16:26] (current) admin |
||
---|---|---|---|
Line 3: | Line 3: | ||
~~NOPDF~~ | ~~NOPDF~~ | ||
- | If you want to customize your screen with flutter widgets on the client itself we offer a simple api to change a screen to whatever you need. In the following segment you will learn how to achieve something like that: | + | If you want to customize your screen, with flutter widgets on the client, we offer a simple API to change a screen to whatever you need. In the following sections you'll learn how to achieve that. |
- | ## Creating a custom screen manager ## | + | === Creating a custom screen manager === |
- | To be able to customize your screens you have to create a custom screen manager for your application. You can achieve this by extending your dart class from CustomScreenManager like so: | + | |
+ | To be able to customize your screens, you have to create a custom screen manager for your application. You can achieve this by extending your dart class from **CustomScreenManager** like so: | ||
<file dart> | <file dart> | ||
Line 12: | Line 13: | ||
</file> | </file> | ||
- | The CustomScreenManager has all the functions you will need to provide your users with customized screens. For this example we will override both the **getScreen** and the **onMenu** function. | + | The **CustomScreenManager** has all the functions you'll need to provide your users with customized screens. For this example we'll override both the **init** and the **onMenu** function. |
The **onMenu** function is used to provide the menu with screens that aren't provided by the server. To add our own entry to the Menu we just have to override the function like this: | The **onMenu** function is used to provide the menu with screens that aren't provided by the server. To add our own entry to the Menu we just have to override the function like this: | ||
Line 18: | Line 19: | ||
<file dart> | <file dart> | ||
@override | @override | ||
- | void onMenu(SoMenuManager menuManager) { | + | void onMenu(SoMenuManager menuManager) { |
menuManager.addItemToMenu( | menuManager.addItemToMenu( | ||
id: 'CustomComponentId', | id: 'CustomComponentId', | ||
Line 28: | Line 29: | ||
</file> | </file> | ||
- | This adds an entry to our menu. For us to be able to react to a click on this menu item we have to override the getScreen function: | + | This adds an entry to our menu. For us to be able to react to a click on this menu item we have to override the init function: |
<file dart> | <file dart> | ||
@override | @override | ||
- | getScreen(String componentId, {String templateName}) { | + | init() { |
- | globals.currentTempalteName = templateName; | + | SoComponentCreator componentCreator = SoComponentCreator(); |
- | + | ||
- | if (componentId == 'CustomComponentId') { | + | |
- | return CustomScreen(SoComponentCreator()); | + | |
- | }else if (componentId == 'com.sibvisions.example.ContactScreen:L1_MI_DOOPENWORKSCREEN_COM-SIB-EXA-CONWORSCR') { | + | |
- | return ContactCustomScreen(SoComponentCreator()); | + | |
- | } | + | |
- | return super.getScreen(componentId); | + | |
- | } | + | |
- | In this case the getScreen function returns our own CustomScreen class when the componentId matches and defaults to the superclass if not. | + | |
- | ## Creating a custom screen | + | super.registerScreen('CustomComponentId', CustomScreen(componentCreator)); |
- | Theres is two kinds of custom screens | + | super.registerScreen('com.sibvisions.example.ContactScreen:L1_MI_DOOPENWORKSCREEN_COM-SIB-EXA-CONWORSCR', ContactCustomScreen(componentCreator)); |
+ | } | ||
+ | </file> | ||
- | 1. A custom screen thats available only on the client side | + | In this case the init function registers custom screen implementations for specific identifiers. |
- | 2. A custom screen thats available on the server | + | |
- | In this tutorial we will cover both of these. Let's start with a custom screen thats not available on the server. For this we have to once again extend an already existing class: **CustomScreen**. | + | === Creating a custom screen === |
- | class CustomScreen extends CustomScreen { | + | Theres are two use-cases of custom screens |
- | CustomScreen(SoComponentCreator componentCreator) | + | |
- | : super(componentCreator); | + | |
- | @override | + | - A screen which is available only on the client side |
- | Widget getWidget() { | + | - A screen which is available on the server |
- | return CustomWidget(); | + | |
- | } | + | In this tutorial we'll cover both use-cases. Let's start with a custom screen thats not available on the server. For this we have to extend an already existing class: **CustomScreen**. |
+ | |||
+ | <file dart> | ||
+ | class CustomScreen extends CustomScreen { | ||
+ | CustomScreen(SoComponentCreator componentCreator) : super(componentCreator); | ||
+ | |||
+ | @override | ||
+ | Widget getWidget() { | ||
+ | return CustomWidget(); | ||
+ | } | ||
| | ||
- | @override | + | @override |
- | void update(Request request, ResponseData responseData) {} | + | void update(Request request, ResponseData responseData) {} |
| | ||
- | @override | + | @override |
- | bool withServer() { | + | bool withServer() { |
- | return false; | + | return false; |
- | } | + | |
} | } | ||
- | In this class you can return any widget you want in the **getWidget** function. The **withServer** function tells the client not to communicate with the server for this screen. The **update** function is not necessary for this example. | + | } |
+ | </file> | ||
- | If you want to create a custom screen that communicates with the server you have to extend the CustomScreen class again: | + | In this class you can return any widget you want in the **getWidget** function. The **withServer** function tells the client, not to communicate with the server for this screen. The **update** function is not necessary for this example. |
- | class ContactCustomScreen extends CustomScreen { | + | If you want to create a custom screen that communicates with the server, you have to ''%%return true;%%'' in the **withServer** function: |
- | ContactCustomScreen(SoComponentCreator componentCreator) | + | |
- | : super(componentCreator); | + | <file dart> |
+ | class ContactCustomScreen extends CustomScreen { | ||
+ | ContactCustomScreen(SoComponentCreator componentCreator) : super(componentCreator); | ||
| | ||
- | @override | + | @override |
- | Widget getWidget() { | + | Widget getWidget() { |
- | + | CoCustomComponent contactComp = new CoCustomComponent( | |
- | CoCustomComponent contactComp = new CoCustomComponent( | + | GlobalKey(debugLabel: 'contact'), |
- | GlobalKey(debugLabel: 'contact'), | + | componentScreen.context, |
- | componentScreen.context, | + | ); |
- | ); | + | |
- | contactComp.widget = Text('This is my replaced widget'); | + | contactComp.widget = Text('This is my replaced widget'); |
| | ||
- | CoPanel comp = this.componentScreen.getComponentFromName('contactPanel'); | + | CoPanel comp = this.componentScreen.getComponentFromName('contactPanel'); |
- | this.componentScreen.replaceComponent(comp, contactComp); | + | this.componentScreen.replaceComponent(comp, contactComp); |
| | ||
- | IComponent component = this.componentScreen.getRootComponent(); | + | IComponent component = this.componentScreen.getRootComponent(); |
- | if (component != null) { | + | |
- | return component.getWidget(); | + | if (component != null) { |
- | } else { | + | return component.getWidget(); |
- | return Container( | + | } else { |
- | alignment: Alignment.center, | + | return Container( |
- | child: Text('No root component defined'), | + | alignment: Alignment.center, |
- | ); | + | child: Text('No root component defined'), |
- | } | + | ); |
- | } | + | } |
+ | } | ||
- | @override | + | @override |
- | void update(Request request, ResponseData responeData) { | + | void update(Request request, ResponseData responeData) { |
- | componentScreen.updateData(request, responeData); | + | componentScreen.updateData(request, responeData); |
- | if (responeData.screenGeneric != null) { | + | if (responeData.screenGeneric != null) { |
- | componentScreen.updateComponents(responeData.screenGeneric.changedComponents); | + | componentScreen.updateComponents(responeData.screenGeneric.changedComponents); |
- | } | + | } |
- | } | + | } |
| | ||
- | @override | + | @override |
- | bool withServer() { | + | bool withServer() { |
- | return true; | + | return true; |
- | } | + | |
} | } | ||
- | In the **getWidget** function we once again return our desired widget. In this case we create a CoCustomComponent which can hold any widget we want. Afterwards we get the component that we want to replace from the widget tree via `this.componentScreen.getComponentFromName('contactPanel');`. | + | } |
+ | </file> | ||
- | To replace this component with out very own widget we just have to call `this.componentScreen.replaceComponent(comp, contactComp);`. | + | In the **getWidget** function we return our custom widget. In this case we create a CoCustomComponent which can hold any widget we want. Afterwards we get the component that we want to replace from the widget tree via ''%%this.componentScreen.getComponentFromName('contactPanel');%%''. |
- | We also override the **update** function to update our components when we get new data from the server. The **withServer** function now tells our screen to communicate with the server. | + | To replace this component with our own widget, we just have to call ''%%this.componentScreen.replaceComponent(comp, contactComp);%%''. |
- | + | ||
- | An example screen can be found [here](https://github.com/sibvisions/flutterclient.example/blob/master/lib/screens/contact_custom_screen.dart). And an example CustomScreenManager [here](https://github.com/sibvisions/flutterclient.example/blob/master/lib/example_custom_screen_manager.dart) | + | |
+ | We also override the **update** function to update our components when we get new data from the server. The **withServer** function now tells our screen to communicate with the server. | ||
+ | An example screen can be found [[https://github.com/sibvisions/flutterclient.example/blob/master/lib/screens/contact_custom_screen.dart|here]] and an example custom screen manager [[https://github.com/sibvisions/flutterclient.example/blob/master/lib/example_custom_screen_manager.dart|here]]. |