1# Create your own view for the WYSIWYG editor in VSTGUI
2
3## Introduction
4
5When you want to edit your own VST3 plugin. You can find the need to create your own View.
6
7You can edit your plugin by doing "Right click > Open UIDescription Editor"
8
9![Edit VST3 plugin](screenshots/editVST3.png)
10
11You can find more information about this interface in the documentation : "VSTGUI 4 > VSTGUI > New Inline UI Editor for VST3 (WYSIWYG) > The Editor".
12
13During this tutorial we will make a new view that will appear in the "Views Tab" at the bottom right of the editor and it allow us to drag and drop it inside our VST3 plugin.
14
15## Create the new view class
16
17To create a new graphical view you need to create a class that inherites from *CView* or *CControl*. We recommend that you start with the *CControl* class when you plan to have an interactive view, otherwise if it only should display data use *CView*.
18
19Your header file should look like this :
20
21```c++
22#pragma once
23
24#include "vstgui/vstgui.h"
25
26namespace VSTGUI {
27
28class MyControl : public CControl
29{
30public:
31	MyControl (const CRect& size );
32
33	void draw (CDrawContext *pContext) override;
34
35	CLASS_METHODS (MyControl, CControl)
36};
37
38} // namespace VSTGUI
39```
40
41And your cpp file :
42
43```c++
44#include "MyControl.h"
45
46namespace VSTGUI {
47
48MyControl::MyControl (const CRect& size) : CControl (size) {}
49
50void MyControl::draw (CDrawContext* pContext)
51{
52	// --- setup the background rectangle
53	pContext->setLineWidth (1);
54	pContext->setFillColor (CColor (255, 255, 255, 255)); // white background
55	pContext->setFrameColor (CColor (0, 0, 0, 255)); // black borders
56
57	// --- draw the rect filled (with white) and stroked (line around rectangle)
58	pContext->drawRect (getViewSize (), kDrawFilledAndStroked);
59
60	setDirty (false);
61}
62
63} // namespace VSTGUI
64```
65
66We have two functions, the constructor which only calls the parent constructor and the *draw* function which will define the design of the view. In this example we draw a white rectangle with black borders.
67
68## Register your view
69
70So now you have a basic graphical view. But it will not appear in the list when you edit your plugin.
71
72You need to create a new class, a "factory", that will register your view and create it. This class only needs a cpp file (if you strip dead code in your linker settings, then you need to make sure that this class is not stripped).
73
74Let us begin by creating an empty class that inherites from  *'ViewCreatorAdapter'* :
75
76```c++
77#pragma once
78
79#include "vstgui/vstgui.h"
80#include "vstgui/vstgui_uidescription.h"
81#include "vstgui/uidescription/detail/uiviewcreatorattributes.h"
82
83// Replace this include by the header file of your new view.
84#include "MyControl.h"
85
86namespace VSTGUI {
87
88class MyControlFactory : public ViewCreatorAdapter
89{
90public:
91
92};
93
94} // namespace VSTGUI
95```
96
97In the constructor we need to register our view to the UIViewFactory. If we don't do that it will not appear in the list that will allow us to add the view to our VST3 plugin.
98
99```c++
100MyControlFactory () { UIViewFactory::registerViewCreator (*this); }
101```
102
103The main factory needs 3 others functions :
104
105* The name of the view (as shown in the WYSIWYS editor)
106
107```c++
108IdStringPtr getViewName () const { return "Name of my UI component"; }
109```
110
111* The parent class of the view (In this tutorial we're using *CControl*)
112
113```c++
114IdStringPtr getBaseViewName () const { return UIViewCreator::kCControl; }
115```
116
117* and a creator method which returns a new view with a default size
118
119```c++
120CView* create (const UIAttributes& attributes, const IUIDescription* description) const
121{
122	return new MyControl (CRect (0, 0, 100, 100));
123}
124```
125
126You also need to create a static variable having the same type as our factory. This variable will call the constructor of your factory. Thus, your view will be registered automatically.
127
128```c++
129MyControlFactory __gMyControlFactory;
130```
131
132So at the end you should have something like this :
133
134```c++
135#pragma once
136#include "vstgui/vstgui.h"
137#include "vstgui/vstgui_uidescription.h"
138#include "vstgui/uidescription/detail/uiviewcreatorattributes.h"
139#include "MyControl.h"
140
141namespace VSTGUI {
142
143class MyControlFactory : public ViewCreatorAdapter
144{
145public:
146	// register this class with the view factory
147	MyControlFactory () { UIViewFactory::registerViewCreator (*this); }
148
149	// return an unique name here
150	IdStringPtr getViewName () const override { return "Name of my UI component"; }
151
152	// return the name here from where your custom view inherites.
153	// Your view automatically supports the attributes from it.
154	IdStringPtr getBaseViewName () const override { return UIViewCreator::kCControl; }
155
156	// create your view here.
157	// Note you don't need to apply attributes here as
158	// the apply method will be called with this new view
159	CView* create (const UIAttributes& attributes, const IUIDescription* description) const override
160	{
161		CRect size (CPoint (45, 45), CPoint (400, 150) );
162		return new MyControl (size);
163	}
164};
165// create a static instance so that it registers itself with the view factory
166MyControlFactory __gMyControlFactory;
167
168} // namespace VSTGUI
169```
170
171## Result
172
173Now if you come back to the VST 3 plugin Editor you can find your new view in the list.
174
175![Edit VST3 plugin](screenshots/newuicompname.png)
176