✎ Creating a custom screen

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
~~Title: Creating a custom screen~~
~~NOTRANS~~
~~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:

## 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:

<file dart>
class ExampleCustomScreenManager extends CustomScreenManager
</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 **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:

<file dart>
@override
void  onMenu(SoMenuManager menuManager) {
    menuManager.addItemToMenu(
        id: 'CustomComponentId',
        group: 'Customscreens',
        text: 'Custom Screen',
        image: 'FontAwesome.map',
    );
}
</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:

<file dart>
@override
getScreen(String componentId, {String templateName}) {
	globals.currentTempalteName = templateName;
	
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
Theres is two kinds of custom screens

 1. A custom screen thats available only on the client side
 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**.

    class  CustomScreen  extends  CustomScreen {
	    CustomScreen(SoComponentCreator componentCreator)
		    : super(componentCreator);

	    @override
	    Widget  getWidget() {
		    return  CustomWidget();
	    }
	    
	    @override
	    void  update(Request request, ResponseData responseData) {}
	    
	    @override
	    bool  withServer() {
		    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.

If you want to create a custom screen that communicates with the server you have to extend the CustomScreen class again:

    class  ContactCustomScreen  extends  CustomScreen {
	    ContactCustomScreen(SoComponentCreator componentCreator)
		    : super(componentCreator);
	        
	    @override
	    Widget  getWidget() {
		    
		    CoCustomComponent contactComp = new  CoCustomComponent(
		    GlobalKey(debugLabel: 'contact'),
		    componentScreen.context,
		    );

			contactComp.widget = Text('This is my replaced widget');
		        
		    CoPanel comp = this.componentScreen.getComponentFromName('contactPanel');
		    this.componentScreen.replaceComponent(comp, contactComp);      
		    
		    IComponent component = this.componentScreen.getRootComponent();
		    if (component != null) {
			    return component.getWidget();
		    } else {
			    return  Container(
			    alignment: Alignment.center,
			    child: Text('No root component defined'),
			    );
		    }
	    }
	     
	    @override
	    void  update(Request request, ResponseData responeData) {
		    componentScreen.updateData(request, responeData);
		    if (responeData.screenGeneric != null) {
			    componentScreen.updateComponents(responeData.screenGeneric.changedComponents);
		    }
	    }
	    
	    @override
	    bool  withServer() {
		    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');`.

To replace this component with out very own widget we 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.

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)