events.xml

<?xml version="1.0" encoding="utf-8" ?>
<vbox>
<tabview width="100%" height="100%" styleName="panel">

</tabview>
</vbox>

main.css

.button-row {
    text-align: right;
    color: #FFFFFF;
    height: 40px;
    width: 228px;
}

.button-row.purchased {
    color: #CCCCCC;
}
.dialog .dialog-contents {
    width: 100%;
    background-color: #81887f;
}

.tabview, .tabview-contents {
    width: 100px;
    background-color: #91887f;
}

.scrollview  {
    width: 260px;
    height: 100%;
    background-color: #a1887f;
}

.scrollview-contents {
    width: 240px;
    background-color: #b1887f;
}


image {
    width: 32px;
    height: 32px;
}

UIService.hx

// Triggered on click
public function showNotifications() {
    var options = new DialogOptions();
		options.title = "Notifications";

		var dialog = ComponentMacros.buildComponent("assets/ui/events.xml");
		dialog.height = 400;

    var tabView = dialog.findComponent("tabview", null, null, "css");
    var eventTab:ScrollView = new ScrollView();
    eventTab.text = "Events";
		
		// Populate eventTab
    tabView.addComponent(eventTab);
		// Same procedure for second tab
		
		Screen.instance.showDialog(dialog, options);
}