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