Second page overlaps first page

1

Hi,
I have two pages and when I go from the front page to the second page. The first page does not disappear and the second overlaps it.
Do you know what can cause this behavior?

2

Hi @catalin.floroiu,

What APIs are you using? Is it TransitionContainer [1]? What kind of animation are you using? if it is indeed a TransitionContainer, which subclass is it?

Gaëtan

[1] https://developer.microej.com/javadoc/microej_4.1/addons/ej/widget/container/transition/TransitionContainer.html

3

Hi Gaëtan,

Actually I am not using the TransitionContainer, anyway thanks for the idea, I will use it in the future.

Now I need to update the content of the page using revalidate() on the main page container (Grid), so when the new content is update it, it overlaps the initial content.

Sorry I wasn’t clear enough from the beginning.

Here is my page code.

indent preformatted text by 4 spaces 
package com.microej.pages;

import com.microej.ClassSelectors;
import com.microej.Images;
import com.microej.Main;

import ej.widget.basic.Image;
import ej.widget.basic.Label;
import ej.widget.composed.Button;
import ej.widget.composed.ButtonWrapper;
import ej.widget.container.Grid;
import ej.widget.container.List;
import ej.widget.listener.OnClickListener;
import ej.widget.navigation.page.Page;

public class MainPage extends Page{


private Grid grid;

public MainPage() {	
	firstPage();
}


public void secondPage(){
	grid.removeAllWidgets();
	ButtonWrapper button = new ButtonWrapper();
	button.setWidget(new Label("Back"));
	ButtonWrapper hey = new ButtonWrapper();
	hey.setWidget(new Label("Hey"));
	hey.addClassSelector(ClassSelectors.LARGE_TEXT);
	button.addClassSelector(ClassSelectors.LARGE_TEXT);		
	button.addOnClickListener(new OnClickListener() {
		
		@Override
		public void onClick() {
			firstPage();		
		}
	});
	grid.add(button);
	
	Image image = new Image(Images.LOGO);
	image.addClassSelector(ClassSelectors.LARGE_TEXT);
	grid.add(image);
	grid.add(hey);
	grid.addClassSelector(ClassSelectors.MAIN_CONTAINER);
	grid.setHorizontal(false);
	grid.revalidate();
}

public void firstPage(){
	ButtonWrapper button = new ButtonWrapper();
	
	ButtonWrapper hey = new ButtonWrapper();
	button.setWidget(new Label("Click-Me"));
	hey.addClassSelector(ClassSelectors.LARGE_TEXT);
	button.addClassSelector(ClassSelectors.LARGE_TEXT);		
	button.addOnClickListener(new OnClickListener() {
		
		@Override
		public void onClick() {
			secondPage();
			}
	});
	Image image = new Image(Images.LOGO);
	image.addClassSelector(ClassSelectors.LARGE_TEXT);
	
	grid = new Grid();
	grid.add(button);
	grid.add(image);
	grid.add(hey);
	grid.addClassSelector(ClassSelectors.CONTENT_CONTAINER);
	setWidget(grid);
    	}
}

and my style code:

  private static void initializeStyleSheet(){
	Stylesheet stylesheet = StyleHelper.getStylesheet();
	EditableStyle style = new EditableStyle();		
	style.setBackground(NoBackground.NO_BACKGROUND);
	stylesheet.setDefaultStyle(style);
	
	style.clear();
	style.setFontProfile(new FontProfile("roboto", FontSize.MEDIUM, Font.STYLE_PLAIN));
	style.setForegroundColor(Colors.WHITE);
	style.setMargin(new SimpleOutline(10));
	int radius = 20;
	style.setBackground(new SimpleRoundedPlainBackground(radius));
	style.setBackgroundColor(Colors.PURPLE);
	style.setBorder(new SimpleRoundedBorder(radius, 2));
	style.setBorderColor(Colors.WHITE);
	style.setAlignment(GraphicsContext.HCENTER | GraphicsContext.VCENTER);
	stylesheet.addRule(new ClassSelector(ClassSelectors.LARGE_TEXT), style);
	
	style.clear();
	stylesheet.addRule(new AndCombinator(new ClassSelector(ClassSelectors.LARGE_TEXT), new StateSelector(State.Active)) , style);
	
}

here is a pic with the behaivor:

Overlaps
Overlaps1289×449 271 KB

Thank you,
Catalin

4

Hi @catalin.floroiu,

Your issue is that you don’t have any background, so you see the previous frame where nothing has been redrawn (on the black sides).

The easiest way to fix this is to use a StyledDesktop and add a style:

style.clear();
style.setBackground(new PlainBackground());
style.setBackgroundColor(Colors.BLACK);
stylesheet.addRule(new TypeSelector(StyledDesktop.class), style);

Also one advice, you use
EditableStyle style = new EditableStyle();
style.setBackground(NoBackground.NO_BACKGROUND);
stylesheet.setDefaultStyle(style);

By default the style background is set to be plan for performance optimization (when a widget is repainted, when the background is set as transparent, the hierarchy is also repainted). You shall only use the NO_BACKGROUND on the required elements.
As you are only using label in your ButtonWrapper, you could use a standard ej.widget.basic.Button, that won’t have a hierarchy with the Label.

Pierre

5

Hi @pierre.rivron,

Thank you for your prompt response.

Now it’s working as expected.

I will keep in mind your advice.

Catalin