[Slate] Tab Docking and Toolbar question

Development Programming & Scripting UI
, , , ,
1

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:

105123-layout.png
105123-layout.png800×600 2.36 KB

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();
}
2

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.

3

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.

4

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.

5

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