[Slate] Tab Docking and Toolbar question

Hi all,

I have a custom editor and I’m at the point where I’m iterating on the layout. I’ve been using Persona (and specifically the AnimBlueprintEditMode) as my guide post, but I’m having trouble with a few issues:

  1. My tabs aren’t docked to the editor window by default (they just spawn as floating tabs).
  2. My Toolbar is completely missing.

Before I show you the layout code, here’s an example of what I’m trying to achieve:

And this editor does modify a blueprint class, so it inherits from FBlueprintEditor and the (currently only) mode inherits from FBlueprintEditorApplicationMode.

Here’s the layout code in the mode constructor:

FAppMyEditorBlueprintMode::FAppMyEditorBlueprintMode(TSharedPtr<class FMyEditor> AbilityEditor)
	: FBlueprintEditorApplicationMode(MyEditor, FAppMyEditorModes::BlueprintMode, FMyEditorModes::GetLocalizedMode)
{
	m_MyEditor = MyEditor;

	TabLayout = FTabManager::NewLayout("MyEditor_BlueprintEditMode_Layout_v1")
		->AddArea
		(
			FTabManager::NewPrimaryArea()
			->SetOrientation(Orient_Vertical)
			->Split
			(
				// Top toolbar
				FTabManager::NewStack()->SetSizeCoefficient(0.186721f)
				->SetHideTabWell(false)
				->AddTab(MyEditor->GetToolbarTabId(), ETabState::OpenedTab)
			)
			->Split
			(
				// Main application area
					FTabManager::NewSplitter()
					->SetOrientation(Orient_Vertical)
					->SetSizeCoefficient(0.75f)
					->Split
					(
						// Right top - document edit area
						FTabManager::NewStack()
						->SetSizeCoefficient(0.70f)
						->AddTab("Document", ETabState::ClosedTab)
					)
					->Split
					(
						// Right bottom
						FTabManager::NewSplitter()
						->SetSizeCoefficient(0.30f)
						->SetOrientation(Orient_Horizontal)
						->Split
						(
							// Right bottom, left area - various tabs
							FTabManager::NewStack()
							->AddTab(FBlueprintEditorTabs::MyBlueprintID, ETabState::OpenedTab)
						)
						->Split
						(
							// Right bottom, right area - selection details panel
							FTabManager::NewStack()
							->SetHideTabWell(true)
							->AddTab(FBlueprintEditorTabs::DetailsID, ETabState::OpenedTab)
						)
					)
					->Split
					(
						FTabManager::NewStack()
						->SetSizeCoefficient(0.20f)
						->AddTab(FBlueprintEditorTabs::CompilerResultsID, ETabState::ClosedTab)
						->AddTab(FBlueprintEditorTabs::FindResultsID, ETabState::ClosedTab)
					)
				)
			
		);

	ToolbarExtender = MakeShareable(new FExtender);
	MyEditor->GetToolbarBuilder()->AddCompileToolbar(ToolbarExtender);
	MyEditor->GetToolbarBuilder()->AddScriptingToolbar(ToolbarExtender);
	MyEditor->GetToolbarBuilder()->AddBlueprintGlobalOptionsToolbar(ToolbarExtender);
	MyEditor->GetToolbarBuilder()->AddDebuggingToolbar(ToolbarExtender);
}

and here’s where the editor is initialized (which sets everything up and changes the mode):

void FMyEditor::InitEditor(const EToolkitMode::Type Mode, const TSharedPtr< IToolkitHost >& InitToolkitHost, const TArray<UBlueprint*>& InBlueprints, bool ShouldUseDataOnlyEditor)
{
	check(InBlueprints.Num() > 0);

	// Init stuff.
	TSharedPtr<FMyEditor> Editor(SharedThis(this));

	if (!Toolbar.IsValid())
	{
		Toolbar = MakeShareable(new FBlueprintEditorToolbar(SharedThis(this)));
	}

	// Modes
	TSharedRef<FApplicationMode> BlueprintMode = MakeShareable(new FAppMyEditorBlueprintMode(Editor));

	AddApplicationMode(BlueprintMode->GetModeName(), BlueprintMode);

	// Initialize the asset editor and spawn tabs
	const TSharedRef<FTabManager::FLayout> DummyLayout = FTabManager::NewLayout("NullLayout")->AddArea(FTabManager::NewPrimaryArea());
	const bool bCreateDefaultStandaloneMenu = true;
	const bool bCreateDefaultToolbar = true;

	FAssetEditorToolkit::InitAssetEditor(Mode, InitToolkitHost, FMyEditorModes::MyEditorName, DummyLayout, bCreateDefaultStandaloneMenu, bCreateDefaultToolbar, InBlueprints[0]);

	CommonInitialization(InBlueprints);

	// Custom Menu/Toolbar
	ExtendMenu();
	ExtendToolbar();

	// Regenerate everything.
	RegenerateMenusAndToolbars();

	// This does the actual layout generation.
	SetCurrentMode(BlueprintMode->GetModeName());

	PostLayoutBlueprintEditorInitialization();
}

Also, if any Epic Staff would like the code (it’s all in a plugin, so you could just compile and enable it) to see things for themselves, I’m more than happy to provide that.

I figured it out.

It looks like if the widgets are “too big” to fit in a stack (e.g. you don’t have the proper size coefficients setup), they are automatically spawned as floating tabs. I tweaked my size coefficients and everything worked properly.

Hi,

I was wondering how did you add things to the tab themselves? Unreal has close to no documentation on how to use the Tabs.

Thanks.

There are TabSummoners which allocate the tab contents. Take a look through the BlueprintEditor and you’ll see the paradigm.