We have talked about how to use Editor Design to design your screen and the Editor Code to implement its logic, but we haven't talked about how those two can be connected. The communicate tunnel between Editor Code and the views added to Editor Design is the Visible in Code attribute property, that was also mentioned in Introducing: Attribute Inspector Properties. Let's see how Visible In Code can be used with an example.
- For our example, we will create a cell, and add to it a label. We will set the label's display name to "nameLabel." In EditorCode we will add a variable named "name," that is a string, and its value should fill the label's text.
What we want is that as soon as the cell is provided with the value of the name variable, for the nameLabel to fill its text with that name. For that, we will use the "didSet name" function that can be found in Protocols > didSet functions. If you are unaware of what didSet functions are, or how to use the visit the Introducing: Editor Code article.
- When entering the didSet name function, we press the Function tab and observe that we cannot find the nameLabel to use it. That is because when we added the nameLabel view at Editor Design, we forgot to enable the Visible in Code switch. Let's go back there and do it!
- When going back to the didSet name function, we can see the nameLabel. So let's set its text to the given name.
- To test our cell, we will create a view controller, with a table view that has three rows. The first cell will be given the name "Anna," the second "Emily" and the third "Helen." Let's press "Test app" and see if it works!
Works exactly as expected! We hope you have understood the usage of the Visible in Code attribute property!