Documentation

Trace:

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
flutterui:custom_screen [2020/08/06 22:48]
admin
flutterui:custom_screen [2020/08/13 16:26] (current)
admin
Line 13: Line 13:
 </​file>​ </​file>​
  
-The **CustomScreenManager** has all the functions you'll need to provide your users with customized screens. For this example we'll 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 29: 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'​) { +    ​super.registerScreen('​CustomComponentId'​CustomScreen(componentCreator)); 
- return ​CustomScreen(SoComponentCreator()); +    ​super.registerScreen('​com.sibvisions.example.ContactScreen:​L1_MI_DOOPENWORKSCREEN_COM-SIB-EXA-CONWORSCR'​ContactCustomScreen(componentCreator));
-    ​} else if (componentId == '​com.sibvisions.example.ContactScreen:​L1_MI_DOOPENWORKSCREEN_COM-SIB-EXA-CONWORSCR'​) { +
- return ​ContactCustomScreen(SoComponentCreator()); +
-    } +
-     +
-    return super.getScreen(componentId);+
 } }
 </​file>​ </​file>​
  
-In this case the getScreen ​function ​returns our own CustomScreen class when the componentId matches and defaults to the superclass if not.+In this case the init function ​registers custom screen implementations for specific identifiers.
  
 === Creating a custom screen === === Creating a custom screen ===
  
-Theres are two kinds of custom screens+Theres are two use-cases ​of custom screens
  
-  - A custom ​screen ​thats available only on the client side +  - A screen ​which is available only on the client side 
-  - A custom ​screen ​thats available on the server+  - A screen ​which is 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**.+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> <file dart>
Line 76: Line 71:
 </​file>​ </​file>​
  
-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.+In this class you can return any widget you want in the **getWidget** function. The **withServer** function tells the clientnot to communicate with the server for this screen. The **update** function is not necessary for this example.
  
-If you want to create a custom screen that communicates with the server, you have to `return true;in the **withServer** function:+If you want to create a custom screen that communicates with the server, you have to ''​%%return true;%%'' ​in the **withServer** function:
  
 <file dart> <file dart>
Line 123: Line 118:
 </​file>​ </​file>​
  
-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'​);​`.+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'​);​%%''​.
  
-To replace this component with out very own widget we just have to call `this.componentScreen.replaceComponent(comp,​ contactComp);​`.+To replace this component with our own widgetwe just have to call ''​%%this.componentScreen.replaceComponent(comp,​ contactComp);​%%''​.
  
 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. 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 ​CustomScreenManager ​[[https://​github.com/​sibvisions/​flutterclient.example/​blob/​master/​lib/​example_custom_screen_manager.dart|here]].+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]].
This website uses cookies for visitor traffic analysis. By using the website, you agree with storing the cookies on your computer.More information