{"id":209,"date":"2024-02-08T14:29:31","date_gmt":"2024-02-08T14:29:31","guid":{"rendered":"https:\/\/xojo.itbib4you.be\/?page_id=209"},"modified":"2024-11-27T07:25:34","modified_gmt":"2024-11-27T07:25:34","slug":"classes-and-objects","status":"publish","type":"page","link":"https:\/\/xojo.itbib4you.be\/index.php\/classes-and-objects\/","title":{"rendered":"Classes and Objects"},"content":{"rendered":"\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-25 has-custom-font-size has-small-font-size\"><a class=\"wp-block-button__link has-light-green-cyan-to-vivid-green-cyan-gradient-background has-background wp-element-button\" href=\"https:\/\/xojo.itbib4you.be\/\">Overview<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>Xojo is an <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Object-Oriented Programming <\/mark>(<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">OOP<\/mark>) language. OOP languages are based on <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Classes<\/mark> and <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Objects<\/mark>.  In this lesson, we&#8217;ll cover some of the basics of how classes and objects are built in and used in Xojo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Problem Description<\/h2>\n\n\n\n<p>A bank manages multiple types of accounts: they offer checking accounts, saving accounts and individual retirement accounts to their customers. For all these accounts the IT division has to create programs to deposit money, to withdraw money and to query the account balance. For this simple example a&nbsp; programmer has to develop three separate programs each with three <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">methods<\/mark> (<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">DepositMoney<\/mark>,&nbsp;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">WithdrawMoney<\/mark> and <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">GetBalance<\/mark>). It is easy to understand that these methods are identical for the three account types. Only the&nbsp;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">data item<\/mark>&nbsp;&nbsp;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">AccountBalance<\/mark><em>&nbsp;<\/em>will differ for the three accounts. A&nbsp;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">class<\/mark>&nbsp;with its corresponding&nbsp;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">objects<\/mark>&nbsp;will make it possible to re-use these methods.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is a Class?<\/h2>\n\n\n\n<p>A <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">class<\/mark> is a collection of <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">code<\/mark> (methods) and <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">data<\/mark> (properties) used as a <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">template<\/mark> (a blueprint) for creating <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">objects<\/mark>. The methods and data are called&nbsp;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">members<\/mark><strong>&nbsp;<\/strong>(member methods, member data) of the class. Referring to our example, the variable&nbsp;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">AccountBalance<\/mark>&nbsp;is an example of a member data item and&nbsp;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">DepositMoney<\/mark>,&nbsp;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">WithdrawMoney<\/mark>&nbsp;and&nbsp;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">GetBalance<\/mark>&nbsp;are member methods of the class. We need these member methods and the corresponding member data item for all types of accounts. We can give our class (template) the name&nbsp;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Account<\/mark>. It is good practice to start the name of a class with a capital letter.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted has-yellow-background-color has-background\" style=\"line-height:1.4\">Use <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">title case<\/mark> (all words in the name start with a capital letter) to name a <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">class<\/mark>.<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted has-yellow-background-color has-background\">Use <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">title case<\/mark> (all words in the name start with a capital letter) to name a <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">method<\/mark>.<\/pre>\n\n\n\n<p>The&nbsp;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">class definition<\/mark>&nbsp;for our example will have the following structure:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted has-light-gray-background-color has-background has-small-font-size\" style=\"line-height:1.4\">Class Account\n   Private AccountBalance As Currency\n\n   Public DepositMoney(amount As Currency)\n      ...\n   Public WithdrawMoney(amount As Currency)\n      ...\n   Public GetBalance As Currency\n      ...\nEnd Class Account<\/pre>\n\n\n\n<p>In the next lesson you will learn how to define this class in Xojo. The following image shows how the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Account<\/mark> class will be displayed in the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Navigator<\/mark> pane:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"502\" height=\"430\" src=\"https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2024\/02\/Xojo_16b.png\" alt=\"Account class\" class=\"wp-image-309\" style=\"width:276px;height:auto\" srcset=\"https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2024\/02\/Xojo_16b.png 502w, https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2024\/02\/Xojo_16b-300x257.png 300w\" sizes=\"auto, (max-width: 502px) 85vw, 502px\" \/><\/figure>\n<\/div>\n\n\n<p> In Xojo a member data item (for instance <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">AccountBalance<\/mark>) is called a <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Property<\/mark>.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted has-yellow-background-color has-background\">A data item belonging to a class is called a <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">property<\/mark>.<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted has-yellow-background-color has-background\" style=\"line-height:1.4\">Use <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">title case<\/mark> (all words in the name start with a capital letter) to name a <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">property<\/mark>.<\/pre>\n\n\n\n<p>The scope of the property <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">AccountBalance <\/mark>has been defined as <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Private<\/mark>. A private  property can only be accessed from the current class. The methods <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">DepositMoney<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">WitdrawMoney<\/mark> and <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">GetBalance<\/mark> are declared <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Public<\/mark>. These methods can be accessed (called) from outside the class.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is an Object?<\/h2>\n\n\n\n<p>An\u00a0<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Object<\/mark>\u00a0is an\u00a0<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">instance<\/mark>\u00a0of a class. An object will store and manipulate real data. An object will contain the properties and the methods defined in the class. For our problem, a programmer will have to create three objects: \u00a0<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">CheckingAccount<\/mark>,\u00a0<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">SavingsAccount<\/mark>\u00a0and\u00a0<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">RetirementAccount<\/mark>\u00a0based on the class\u00a0<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Account<\/mark>. The three objects will all use the same methods (<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">DepositMoney<\/mark>,\u00a0<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">WithdrawMoney<\/mark>\u00a0and\u00a0<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">GetBalance<\/mark>). All objects will have a property called\u00a0<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">AccountBalance<\/mark>. The value of\u00a0<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">AccountBalance<\/mark>\u00a0varies between the three objects. One object (for instance\u00a0checkingAccount) cannot access the value of\u00a0<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">AccountBalance<\/mark>\u00a0of another object (for instance\u00a0savingsAccount).<\/p>\n\n\n\n<p>In Xojo an instance of a class can be created with the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">New<\/mark> keyword. The syntax is as follows:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted has-yellow-background-color has-background\">Var reference_variable As <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">New<\/mark> class_name<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted has-light-gray-background-color has-background has-small-font-size\" style=\"line-height:1.4\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Examples:<\/mark>\n\nVar CheckingAccount As New Account\n\nVar SavingsAccount As New Account\n\nVar RetirementAccount As New Account<\/pre>\n\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">CheckingAccount<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">SavingsAccount<\/mark> and <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">RetirementAccount<\/mark> are called <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">reference variables<\/mark>. Reference variables will refer to an particular instance (object) of a class. A reference variable is used to access methods and properties defined in the class. To call the method <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">DepositMoney<\/mark> for the object <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">CheckingAccount<\/mark> you write the reference variable followed by a dot (.) and the name of the method or property you want to access. This is called the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">dot notation<\/mark>.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted has-light-gray-background-color has-background has-small-font-size\" style=\"line-height:1.4\">CheckingAccount.DepositMoney(200.50)\n\nSavingsAccount.AccountBalance = 123.37<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Xojo Predefined Classes<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"485\" height=\"1024\" src=\"https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2024\/02\/xojo_15-485x1024.png\" alt=\"Super\" class=\"wp-image-232\" style=\"width:195px\" srcset=\"https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2024\/02\/xojo_15-485x1024.png 485w, https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2024\/02\/xojo_15-142x300.png 142w, https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2024\/02\/xojo_15.png 600w\" sizes=\"auto, (max-width: 485px) 85vw, 485px\" \/><\/figure>\n<\/div>\n\n\n<p>There are many predefined classes in Xojo. <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">DesktopLabel<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">DesktopButton<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">DesktopTextField<\/mark>&#8230; are examples of Xojo predefined classes. By dragging a Label, Button, TextField&#8230; on a <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">DesktopWindow<\/mark> you create a new instance (object) of the class. The class on which the newly created object is based, is listed next to the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Super<\/mark> property in the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Inspector<\/mark> (see <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">red<\/mark> arrow on the screenshot). The object named <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">WelcomeButton<\/mark> is thus an instance of the class <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">DesktopButton<\/mark>. The other elements shown in the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Inspector<\/mark> (for instance <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Name<\/mark>,  <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Left<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Top<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Height<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Width<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Caption<\/mark>&#8230;)  are other properties of this class.<\/p>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Inheritance<\/h3>\n\n\n\n<p>A class that is derived from another class is called a <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">subclass<\/mark>. A user-defined or even a predefined class can be used to create a new <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">subclass<\/mark>. The class from which the subclass is derived is called a <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">superclass<\/mark> . A subclass inherits all public and <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">protected<\/mark> properties and methods from the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">superclass<\/mark>. <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Protected<\/mark> properties and methods can be accessed by the  superclass and all its subclasses. A subclass can define its own properties, methods and events. <\/p>\n\n\n\n<p>The <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">scope<\/mark> of member properties and member methods in a class can be summarised as follows:<\/p>\n\n\n\n<figure class=\"wp-block-table has-small-font-size\"><table><thead><tr><th>Scope<\/th><th>Description<\/th><\/tr><\/thead><tbody><tr><td>Private<\/td><td>A private property or method can only be accessed from within the class<\/td><\/tr><tr><td>Public<\/td><td>A public property or method can be accessed from outside the class<\/td><\/tr><tr><td>Protected<\/td><td>A protected property or method can be accessed from within the superclass and from all its subclasses<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">Scope definitions<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Xojo is an Object-Oriented Programming (OOP) language. OOP languages are based on Classes and Objects. In this lesson, we&#8217;ll cover some of the basics of how classes and objects are built in and used in Xojo. Problem Description A bank manages multiple types of accounts: they offer checking accounts, saving accounts and individual retirement &hellip; <a href=\"https:\/\/xojo.itbib4you.be\/index.php\/classes-and-objects\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Classes and Objects&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-209","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/xojo.itbib4you.be\/index.php\/wp-json\/wp\/v2\/pages\/209","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xojo.itbib4you.be\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/xojo.itbib4you.be\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/xojo.itbib4you.be\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xojo.itbib4you.be\/index.php\/wp-json\/wp\/v2\/comments?post=209"}],"version-history":[{"count":34,"href":"https:\/\/xojo.itbib4you.be\/index.php\/wp-json\/wp\/v2\/pages\/209\/revisions"}],"predecessor-version":[{"id":414,"href":"https:\/\/xojo.itbib4you.be\/index.php\/wp-json\/wp\/v2\/pages\/209\/revisions\/414"}],"wp:attachment":[{"href":"https:\/\/xojo.itbib4you.be\/index.php\/wp-json\/wp\/v2\/media?parent=209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}