View.onEffectiveVisibilityChanged

pom.xml

@@ -98,6 +98,11 @@
                 <artifactId>teamapps-common</artifactId>
                 <version>${project.version}</version>
             </dependency>
+            <dependency>
+                <groupId>org.teamapps</groupId>
+                <artifactId>teamapps-commons</artifactId>
+                <version>0.1.2</version>
+            </dependency>
 
             <dependency>
                 <groupId>org.teamapps</groupId>

teamapps-client/less/components/UiTabPanel.less

@@ -311,6 +311,7 @@
 
     .tools-container {
       .tab-button;
+      display: flex;
       border-top: 1px solid;
       border-left: 1px solid;
       border-top-left-radius: 4px;

teamapps-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "teamapps-client",
-  "version": "0.9.186-SNAPSHOT",
+  "version": "0.9.189-SNAPSHOT",
   "description": "teamapps",
   "author": "TeamApps.org",
   "main": "dist/js/main.js",

teamapps-client/ts/modules/workspace-layout/LocalViewContainer.ts

@@ -44,9 +44,7 @@ import {WindowLayoutDescriptor} from "./WindowLayoutDescriptor";
 import {LayoutDescriptorApplyer} from "./LayoutDescriptorApplyer";
 import {UiViewGroupPanelState} from "../../generated/UiViewGroupPanelState";
 import {UiComponent} from "../UiComponent";
-import {UiMultiProgressDisplayConfig} from "../../generated/UiMultiProgressDisplayConfig";
 import {UiMultiProgressDisplay} from "../UiDefaultMultiProgressDisplay";
-import {UiProgressDisplay} from "../UiProgressDisplay";
 
 export class LocalViewContainer implements ViewContainer {
 
@@ -266,31 +264,36 @@ export class LocalViewContainer implements ViewContainer {
 			if (dropPosition && dataTransferString != null) {
 				let dataTransfer = JSON.parse(dataTransferString) as UiWorkspaceLayoutDndDataTransfer;
 				if (this.context.sessionId === dataTransfer.sourceUiSessionId && dataTransfer.sourceWorkspaceLayoutId === this.workSpaceLayoutId) {
-					if (dataTransfer.sourceWindowId === this.windowId) {
-						if (dropPosition.tabPanel) {
-							if (dropPosition.relativeDropPosition === RelativeDropPosition.TAB) {
-								this.moveViewToTab(dataTransfer.viewName, dropPosition.tabPanel.tabs[0].viewName);
+					this.viewEventsSuppressed = true;
+					try {
+						if (dataTransfer.sourceWindowId === this.windowId) {
+							if (dropPosition.tabPanel) {
+								if (dropPosition.relativeDropPosition === RelativeDropPosition.TAB) {
+									this.moveViewToTab(dataTransfer.viewName, dropPosition.tabPanel.tabs[0].viewName);
+								} else {
+									let uiRelativeWorkSpaceViewPosition = UiRelativeWorkSpaceViewPosition[RelativeDropPosition[dropPosition.relativeDropPosition] as keyof typeof UiRelativeWorkSpaceViewPosition];
+									this.moveViewRelativeToOtherView(dataTransfer.viewName, dropPosition.tabPanel.tabs[0].viewName, uiRelativeWorkSpaceViewPosition, UiSplitSizePolicy.RELATIVE, .5);
+								}
 							} else {
 								let uiRelativeWorkSpaceViewPosition = UiRelativeWorkSpaceViewPosition[RelativeDropPosition[dropPosition.relativeDropPosition] as keyof typeof UiRelativeWorkSpaceViewPosition];
-								this.moveViewRelativeToOtherView(dataTransfer.viewName, dropPosition.tabPanel.tabs[0].viewName, uiRelativeWorkSpaceViewPosition, UiSplitSizePolicy.RELATIVE, .5);
+								let isFirst = dropPosition.relativeDropPosition === RelativeDropPosition.LEFT || dropPosition.relativeDropPosition === RelativeDropPosition.TOP;
+								this.moveViewToTopLevel(dataTransfer.viewName, this.windowId, uiRelativeWorkSpaceViewPosition, UiSplitSizePolicy.RELATIVE, isFirst ? .3 : .7);
 							}
 						} else {
-							let uiRelativeWorkSpaceViewPosition = UiRelativeWorkSpaceViewPosition[RelativeDropPosition[dropPosition.relativeDropPosition] as keyof typeof UiRelativeWorkSpaceViewPosition];
-							let isFirst = dropPosition.relativeDropPosition === RelativeDropPosition.LEFT || dropPosition.relativeDropPosition === RelativeDropPosition.TOP;
-							this.moveViewToTopLevel(dataTransfer.viewName, this.windowId, uiRelativeWorkSpaceViewPosition, UiSplitSizePolicy.RELATIVE, isFirst ? .3 : .7);
-						}
-						this.listener.handleLocalLayoutChangedByUser(this.windowId);
-					} else {
-						if (this.workSpaceLayoutId === dataTransfer.sourceWorkspaceLayoutId) {
-							this.listener.handleViewDroppedFromOtherWindow(dataTransfer.sourceWindowId, this.windowId, {
-								viewName: dataTransfer.viewName,
-								tabIcon: dataTransfer.tabIcon,
-								tabCaption: dataTransfer.tabCaption,
-								tabCloseable: dataTransfer.tabCloseable,
-								lazyLoading: dataTransfer.lazyLoading,
-								visible: dataTransfer.visible
-							}, dropPosition.tabPanel && dropPosition.tabPanel.tabs[0].viewName, dropPosition.relativeDropPosition);
+							if (this.workSpaceLayoutId === dataTransfer.sourceWorkspaceLayoutId) {
+								this.listener.handleViewDroppedFromOtherWindow(dataTransfer.sourceWindowId, this.windowId, {
+									viewName: dataTransfer.viewName,
+									tabIcon: dataTransfer.tabIcon,
+									tabCaption: dataTransfer.tabCaption,
+									tabCloseable: dataTransfer.tabCloseable,
+									lazyLoading: dataTransfer.lazyLoading,
+									visible: dataTransfer.visible
+								}, dropPosition.tabPanel && dropPosition.tabPanel.tabs[0].viewName, dropPosition.relativeDropPosition);
+							}
 						}
+					} finally {
+						this.viewEventsSuppressed = false;
+						this.listener.handleLocalLayoutChangedByUser(this.windowId)
 					}
 				} else {
 					LocalViewContainer.logger.warn("The user dropped a view from another UiWorkSpaceLayout. Not accepting this.");
@@ -669,7 +672,7 @@ export class LocalViewContainer implements ViewContainer {
 			(viewGroupItem, panelState) => this.setViewGroupPanelState(viewGroupItem.id, panelState),
 			this.context
 		).apply(this.itemTree.rootItem, newLayout, addedViewConfigs);
-		this.setRootItem(newRootItem)
+		this.setRootItem(newRootItem);
 	}
 
 	selectViewTab(viewName: string) {

teamapps-client/ts/modules/workspace-layout/UiWorkSpaceLayout.ts

@@ -304,8 +304,13 @@ export class UiWorkSpaceLayout extends AbstractUiComponent<UiWorkSpaceLayoutConf
 	}
 
 	private async fireLayoutChanged() {
+		let layout = await this.getCurrentLayout();
+		if (layout[UiWorkSpaceLayout.ROOT_WINDOW_ID] == null) {
+			return; // event during initialization. Not worth it.
+		}
+
 		this.onLayoutChanged.fire({
-			layoutsByWindowId: await this.getCurrentLayout()
+			layoutsByWindowId: layout
 		});
 	}
 

teamapps-server-jetty-embedded/src/test/java/org/teamapps/server/jetty/embedded/TeamAppsJettyEmbeddedServerTest.java

@@ -20,43 +20,100 @@
 package org.teamapps.server.jetty.embedded;
 
 import org.teamapps.icon.material.MaterialIcon;
-import org.teamapps.ux.component.panel.Panel;
+import org.teamapps.ux.application.ResponsiveApplication;
+import org.teamapps.ux.application.layout.StandardLayout;
+import org.teamapps.ux.application.perspective.Perspective;
+import org.teamapps.ux.application.view.View;
 import org.teamapps.ux.component.rootpanel.RootPanel;
-import org.teamapps.ux.component.toolbar.Toolbar;
 import org.teamapps.ux.component.toolbar.ToolbarButton;
 import org.teamapps.ux.component.toolbar.ToolbarButtonGroup;
 import org.teamapps.ux.session.SessionContext;
 
 import java.util.List;
-import java.util.Locale;
+import java.util.stream.Stream;
 
 public class TeamAppsJettyEmbeddedServerTest {
 
 	public static final List<MaterialIcon> ALL_ICONS = List.copyOf(MaterialIcon.getAllIcons());
 
 	public static void main(String[] args) throws Exception {
 		TeamAppsJettyEmbeddedServer.builder((SessionContext sessionContext) -> {
-					sessionContext.setLocale(Locale.US);
+					RootPanel rootPanel = new RootPanel();
+					sessionContext.addRootPanel(null, rootPanel);
 
+					//create a responsive application that will run on desktops as well as on smart phones
+					ResponsiveApplication application = ResponsiveApplication.createApplication();
 
-					RootPanel rootPanel = sessionContext.addRootPanel();
+					Perspective perspectiveA = createPerspective("A");
+					application.addPerspective(perspectiveA);
+					application.showPerspective(perspectiveA);
 
-					Panel panel = new Panel();
-					Toolbar toolbar = new Toolbar();
-					ToolbarButtonGroup buttonGroup = new ToolbarButtonGroup();
-					buttonGroup.addButton(ToolbarButton.create(MaterialIcon.MENU, "One", "One"));
-					buttonGroup.addButton(ToolbarButton.create(MaterialIcon.MENU, "Two Words", "Two Words"));
-					buttonGroup.addButton(ToolbarButton.create(MaterialIcon.MENU, "Three short words", "three short words"));
-					buttonGroup.addButton(ToolbarButton.create(MaterialIcon.MENU, "Four words for you", "Four words for you"));
-					toolbar.addButtonGroup(buttonGroup);
-					panel.setToolbar(toolbar);
+					Perspective perspectiveB = createPerspective("B");
+					application.addPerspective(perspectiveB);
+					application.showPerspective(perspectiveB);
 
-					rootPanel.setContent(panel);
+					ToolbarButtonGroup buttonGroup = new ToolbarButtonGroup();
+					buttonGroup.addButton(ToolbarButton.create(MaterialIcon.SAVE, "Switch Perspective", "")).onClick.addListener(toolbarButtonClickEvent -> {
+						if (application.getActivePerspective() == perspectiveA) {
+							application.showPerspective(perspectiveB);
+						} else {
+							application.showPerspective(perspectiveA);
+						}
+					});
+					application.addApplicationButtonGroup(buttonGroup);
 
+					rootPanel.setContent(application.getUi());
 				})
 				.setPort(8082)
 				.build()
 				.start();
 	}
 
+	private static Perspective createPerspective(String prefix) {
+		//create perspective with default layout
+		Perspective perspective = Perspective.createPerspective();
+
+		View leftPanel = View.createView(StandardLayout.LEFT, MaterialIcon.MESSAGE, prefix + " - Left panel", null);
+		View centerPanel = View.createView(StandardLayout.CENTER, MaterialIcon.SEARCH, prefix + " - Center panel", null, true);
+		View centerPanel2 = View.createView(StandardLayout.CENTER, MaterialIcon.PEOPLE, prefix + " - Center panel 2", null);
+		View rightPanel = View.createView(StandardLayout.RIGHT, MaterialIcon.FOLDER, prefix + " - Right panel", null);
+		View rightBottomPanel = View.createView(StandardLayout.RIGHT_BOTTOM, MaterialIcon.VIEW_CAROUSEL, prefix + " - Right bottom panel", null);
+
+		Stream.of(leftPanel,
+				centerPanel,
+				centerPanel2,
+				rightPanel,
+				rightBottomPanel).forEach(view -> view.onEffectiveVisibilityChanged().addListener(aBoolean -> {
+			System.out.println(view.getTitle() + " -> " + aBoolean);
+		}));
+
+		//create an empty left panel
+		perspective.addView(leftPanel);
+
+		//create a tabbed center panel
+		perspective.addView(centerPanel);
+		perspective.addView(centerPanel2);
+
+		//create a right panel
+		perspective.addView(rightPanel);
+
+		//create a right bottom panel
+		perspective.addView(rightBottomPanel);
+
+		//create toolbar buttons
+		ToolbarButtonGroup buttonGroup = new ToolbarButtonGroup();
+		buttonGroup.addButton(ToolbarButton.create(MaterialIcon.SAVE, "Save", "Save changes")).onClick.addListener(toolbarButtonClickEvent -> {
+			boolean visible = !centerPanel.isVisible();
+			centerPanel.setVisible(visible);
+			if (visible) {
+				centerPanel.select();
+			}
+		});
+
+		//display these buttons only when this perspective is visible
+		perspective.addWorkspaceButtonGroup(buttonGroup);
+
+		return perspective;
+	}
+
 }

teamapps-ux/pom.xml

@@ -42,6 +42,10 @@
             <groupId>org.teamapps</groupId>
             <artifactId>teamapps-common</artifactId>
         </dependency>
+        <dependency>
+            <groupId>org.teamapps</groupId>
+            <artifactId>teamapps-commons</artifactId>
+        </dependency>
 
 <!--        <dependency>-->
 <!--            <groupId>org.teamapps</groupId>-->

teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationChangeHandler.java

@@ -63,4 +63,5 @@ public interface ApplicationChangeHandler {
 
     void handleViewWorkspaceToolbarButtonGroupRemoved(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view, ToolbarButtonGroup buttonGroup);
 
+    void handleViewSelect(View view);
 }

teamapps-ux/src/main/java/org/teamapps/ux/application/ResponsiveApplicationImpl.java

@@ -175,6 +175,11 @@ public void handleViewWorkspaceToolbarButtonGroupRemoved(Perspective perspective
 				changeHandlers.forEach(changeHandler -> changeHandler.handleViewWorkspaceToolbarButtonGroupRemoved(application, isActivePerspective(perspective), perspective, view, buttonGroup));
 			}
 
+			@Override
+			public void handleViewSelect(View view) {
+				changeHandlers.forEach(ch -> ch.handleViewSelect(view));
+			}
+
 		});
 		return perspective;
 	}

teamapps-ux/src/main/java/org/teamapps/ux/application/ResponsiveApplicationToolbar.java

@@ -168,4 +168,8 @@ public void handleViewWorkspaceToolbarButtonGroupRemoved(ResponsiveApplication a
         }
     }
 
+    @Override
+    public void handleViewSelect(View view) {
+
+    }
 }

teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/ApplicationAssembler.java

@@ -63,4 +63,9 @@ default void handleViewWorkspaceToolbarButtonGroupAdded(ResponsiveApplication ap
     default void handleViewWorkspaceToolbarButtonGroupRemoved(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view, ToolbarButtonGroup buttonGroup) {
 
     }
+
+	@Override
+	default void handleViewSelect(View view) {
+
+	}
 }

teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/DesktopApplicationAssembler.java

@@ -40,8 +40,7 @@ public class DesktopApplicationAssembler implements ApplicationAssembler {
 
     private static Logger LOGGER = LoggerFactory.getLogger(DesktopApplicationAssembler.class);
 
-    private ResponsiveApplicationToolbar responsiveApplicationToolbar;
-    private WorkSpaceLayout workSpaceLayout;
+	private final WorkSpaceLayout workSpaceLayout;
     private LayoutItemDefinition currentLayout;
 
     public DesktopApplicationAssembler() {
@@ -58,6 +57,7 @@ public void addView(View view) {
 
         String tabTitle = view.getTabTitle() != null ? view.getTabTitle() : view.getPanel().getTitle();
         WorkSpaceLayoutView layoutView = new WorkSpaceLayoutView(workSpaceLayout, view.getPanel(), tabTitle, view.isClosable(), false);
+        layoutView.onEffectiveVisibilityChanged.addListener(effectivelyVisible -> view.onEffectiveVisibilityChanged().fire(effectivelyVisible));
         viewGroup.addView(layoutView);
 
         if (view.getCustomViewSize() != null) {
@@ -99,8 +99,7 @@ public void setWorkspaceViewVisible(View view, boolean visible) {
 
     @Override
     public void setWorkSpaceToolbar(ResponsiveApplicationToolbar responsiveApplicationToolbar) {
-        this.responsiveApplicationToolbar = responsiveApplicationToolbar;
-        workSpaceLayout.setToolbar((Toolbar) responsiveApplicationToolbar.getToolbar());
+		workSpaceLayout.setToolbar((Toolbar) responsiveApplicationToolbar.getToolbar());
     }
 
     @Override
@@ -228,6 +227,11 @@ public void handleViewLayoutPositionChange(ResponsiveApplication application, bo
         }
     }
 
+    @Override
+    public void handleViewSelect(View view) {
+        WorkSpaceLayoutView layoutView = workSpaceLayout.getViewByPanel(view.getPanel());
+        layoutView.select();
+    }
 
 
 }

teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/MobileApplicationAssembler.java

@@ -111,7 +111,7 @@ public MobileApplicationAssembler(Icon launcherIcon, Icon treeIcon, Icon viewsIc
 		applicationLauncherButton.onClick.addListener(aVoid -> {
 			navigationBar.hideFanOutComponent();
 			mobileLayout.setContent(applicationLauncher.getPanel(), PageTransition.MOVE_TO_RIGHT_VS_MOVE_FROM_LEFT, PAGE_TRANSITION_ANIMATION_DURATION);
-			activeView = applicationLauncher;
+			updateActiveView(applicationLauncher);
 		});
 
 		applicationTreeButton.onClick.addListener(aVoid -> {
@@ -121,7 +121,7 @@ public MobileApplicationAssembler(Icon launcherIcon, Icon treeIcon, Icon viewsIc
 				animation = PageTransition.MOVE_TO_LEFT_VS_MOVE_FROM_RIGHT;
 			}
 			mobileLayout.setContent(appTree.getPanel(), animation, PAGE_TRANSITION_ANIMATION_DURATION);
-			activeView = appTree;
+			updateActiveView(appTree);
 		});
 
 		applicationViewsButton.onClick.addListener(aVoid -> {
@@ -142,6 +142,14 @@ public MobileApplicationAssembler(Icon launcherIcon, Icon treeIcon, Icon viewsIc
 		});
 	}
 
+	private void updateActiveView(View newActiveView) {
+		if (activeView != null && activeView != newActiveView) {
+			activeView.onEffectiveVisibilityChanged().fire(false);
+		}
+		activeView = newActiveView;
+		newActiveView.onEffectiveVisibilityChanged().fire(true);
+	}
+
 	public void setApplicationLauncher(View applicationLauncher) {
 		if (applicationLauncher == null) {
 			applicationLauncherButton.setVisible(false);
@@ -163,7 +171,7 @@ public void showView(View view) {
 			//todo check when to add to history
 			//viewHistory.add(view);
 		}
-		activeView = view;
+		updateActiveView(view);
 		mobileLayout.setContent(view.getPanel(), PageTransition.MOVE_TO_LEFT_VS_MOVE_FROM_RIGHT, PAGE_TRANSITION_ANIMATION_DURATION);
 	}
 
@@ -176,7 +184,7 @@ public void showInitialView() {
 		}
 		if (view != null) {
 			mobileLayout.setContent(view.getPanel(), PageTransition.MOVE_TO_LEFT_VS_MOVE_FROM_RIGHT, PAGE_TRANSITION_ANIMATION_DURATION);
-			activeView = view;
+			updateActiveView(view);
 		}
 	}
 
@@ -208,7 +216,7 @@ public void goBack() {
 		}
 
 		if (view != null) {
-			activeView = view;
+			updateActiveView(view);
 			mobileLayout.setContent(activeView.getPanel(), PageTransition.MOVE_TO_RIGHT_VS_MOVE_FROM_LEFT, PAGE_TRANSITION_ANIMATION_DURATION);
 		}
 	}
@@ -277,7 +285,7 @@ public void handlePerspectiveChange(ResponsiveApplication application, Perspecti
 
 		if (!perspectiveViews.isEmpty()) {
 			View view = perspective.getFocusedView() != null ? perspective.getFocusedView() : perspectiveViews.get(0);
-			activeView = view;
+			updateActiveView(view);
 			mobileLayout.setContent(view.getPanel(), PageTransition.MOVE_TO_LEFT_VS_MOVE_FROM_RIGHT, PAGE_TRANSITION_ANIMATION_DURATION);
 		}
 	}