UE4 Slate Widget Grammar

1 Overview

For editor slate widget, UE4 customized the specific grammar for programming.

For example:

TSharedRef<SWidget> TitleBarWidget =
	SNew(SBorder)
	.BorderImage(FEditorStyle::GetBrush(TEXT("Graph.TitleBackground")))
	.HAlign(HAlign_Fill)
	[
		SNew(SHorizontalBox)
		+ SHorizontalBox::Slot()
	.HAlign(HAlign_Center)
	.FillWidth(1.f)
	[
		SNew(STextBlock)
		.Text(LOCTEXT("TestGraphLabel", "Test"))
	    .TextStyle(FEditorStyle::Get(), TEXT("GraphBreadcrumbButtonText"))
	]
	];

It is quite easy to create the different widgets if you follow the specific programming format.

2 SNew and SAssignNew

In UE4, slate widgets are constructed through SNew and SAssignNew.

#define SNew( WidgetType, ... ) \
	MakeTDecl<WidgetType>( #WidgetType, __FILE__, __LINE__, RequiredArgs::MakeRequiredArgs(__VA_ARGS__) ) <<= TYPENAME_OUTSIDE_TEMPLATE WidgetType::FArguments()


#define SAssignNew( ExposeAs, WidgetType, ... ) \
	MakeTDecl<WidgetType>( #WidgetType, __FILE__, __LINE__, RequiredArgs::MakeRequiredArgs(__VA_ARGS__) ) . Expose( ExposeAs ) <<= TYPENAME_OUTSIDE_TEMPLATE WidgetType::FArguments()

Using SAssignNew, you can get the pointer after creating the slate widget at the same time.

Any sub class of widget class of SWidget needs to use SLATE_BEGIN_ARGS and SLATE_END_ARS to add support for SNew and SAssignNew.

For example:

class SMyWidget : public SWidget
{
public:
     SLATE_BEGIN_ARGS( SMyWidget )
          , _PreferredWidth( 150.0f )
          , _ForegroundColor( FLinearColor::White )
        {}
 
          SLATE_ATTRIBUTE(float, PreferredWidth)
          SLATE_ATTRIBUTE(FSlateColor, ForegroundColor)
     SLATE_END_ARGS()

	 ...
}

The statement is given below.

#define SLATE_BEGIN_ARGS( WidgetType ) \
	public: \
	struct FArguments : public TSlateBaseNamedArgs<WidgetType> \
	{ \
		typedef FArguments WidgetArgsType; \
		FORCENOINLINE FArguments()


#define SLATE_END_ARGS() \
	};

3 Programming Rule

To create your own slate widget for UI, you can follow the rule given below.

	SNew(SBorder) //create a top slate widget
	.BorderImage(FEditorStyle::GetBrush(TEXT("Graph.TitleBackground"))) // slate property
	.HAlign(HAlign_Fill) // Alignment
	[                    // brackets[] to create sub content
		SNew(SHorizontalBox) // create horizontal layout
		+ SHorizontalBox::Slot()
		.HAlign(HAlign_Center)
		.FillWidth(1.f)
		[                    
			SNew(STextBlock)
			.Text(LOCTEXT("TestGraphLabel", "Test"))
			.TextStyle(FEditorStyle::Get(), TEXT("GraphBreadcrumbButtonText"))
		]
	];

TitleBar

1 Overview

2 SNew and SAssignNew

3 Programming Rule

Links