{"id":7529,"date":"2024-09-13T16:09:15","date_gmt":"2024-09-13T14:09:15","guid":{"rendered":"https:\/\/oopm.org\/?page_id=7529"},"modified":"2024-12-30T10:34:46","modified_gmt":"2024-12-30T09:34:46","slug":"17-3-subject-and-observer-aspects-new","status":"publish","type":"page","link":"https:\/\/oopm.org\/?page_id=7529","title":{"rendered":"18.3 Subject and Observer Aspects"},"content":{"rendered":"<div class=\"pdfprnt-buttons pdfprnt-buttons-page pdfprnt-top-right\"><a href=\"https:\/\/oopm.org\/index.php?rest_route=wpv2pages7529&print=pdf\" class=\"pdfprnt-button pdfprnt-button-pdf\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/oopm.org\/wp-content\/plugins\/pdf-print\/images\/pdf.png\" alt=\"image_pdf\" title=\"View PDF\" \/><\/a><a href=\"https:\/\/oopm.org\/index.php?rest_route=wpv2pages7529&print=print\" class=\"pdfprnt-button pdfprnt-button-print\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/oopm.org\/wp-content\/plugins\/pdf-print\/images\/print.png\" alt=\"image_print\" title=\"Print Content\" \/><\/a><\/div>\n<p class=\"wp-block-paragraph\">In this section, we introduce<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-custom-color-3-color\"> <\/mark>two related aspects,&nbsp;<em>subject<\/em>&nbsp;and&nbsp;<em>observer<\/em>, which have to be used in tandem. Objects of classes with a subject aspect may be observed by a set of objects with an observer aspect. An observer object subscribes to certain events in the subject object, events that typically change the state of the subject object. In a case of such an event, the observer will be notified. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As a first example, we use a a fire alarm in a shopping center with a number of shops. The fire alarm may be considered a subject to be observed by a number of stakeholders that include the nearest fire station, the owner of the shopping center and the shops in the center. As a second example, we show how to add subject and observer aspects to the bank system to monitor suspicious transactions on the accounts of the bank.<\/p>\n\n\n\n<style>\n#XXX17_3 {\n  font-size: 0.875em;\n  width: 30%;\n  padding-left: 15px; \n  margin-left: 15px;\n   float: right;\n  background-color: lightgray;\n}\n<\/style>\n<div id=\"XXX17_3\">In programming a <em>design pattern<\/em> describes a well-defined functionality of a program in terms of how to structure a program fragment implementing the functionality. Observer is an example of a design pattern.<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Before we show how to represent the examples, we introduce some general classes for representing subjects and observers represented by <code>Subject<\/code> and <code>Observer<\/code>. Objects being subject to observation shall have the properties of <code>Subject<\/code>, and observer objects shall have the properties of <code>Observer<\/code>. The structure and behaviour of class <code>Observer<\/code> and class <code>Subject<\/code> is known as the <em>Observer Design Pattern<\/em> &#8211; we thus place the two classes in a module called <code>ObserverPattern<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ObserverPattern: <strong>obj<\/strong>  \n   <strong>class<\/strong> Subject:\n      observers: <strong>obj<\/strong> Set(#Observer)\n      subscribe(obs: <strong>ref<\/strong> Observer):\n         observers.insert(obs)\n      notifyObservers: \n         observers.scan\n            current.notify(this(Subject))\n      inner(Subject)\n   <strong>class<\/strong> Observer:\n      <strong>class<\/strong> ObservedSubject:&lt; Subject\n      notify(theSubject: <strong>ref<\/strong> ObservedSubject):&lt;\n         inner(notify)<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A <code>Subject<\/code> have a <code>Set<\/code>&nbsp;<code>observers<\/code>&nbsp;containing&nbsp;<code>Observer<\/code>&nbsp;objects.<\/li>\n\n\n\n<li>It has a method&nbsp;<code>subscribe<\/code> that makes an&nbsp;<code>Observer<\/code>&nbsp;object an element of <code>observers<\/code>;&nbsp;<\/li>\n\n\n\n<li>It has a method <code>notifyObservers<\/code>&nbsp;that is called in case the observeres should be notified about changes, so it will for each <code>observer<\/code> in <code>observers<\/code> invoke its&nbsp;<code>notify<\/code>.<\/li>\n\n\n\n<li>An <code>Observer<\/code> has a local virtual class <code>ObservedSubject<\/code> that can be extended with further attributes in subclasses of the observed <code>Subject<\/code>. <\/li>\n\n\n\n<li>It has a method <code>notify<\/code>, which has a parameter, <code>theSubject<\/code> of type <code>ObservedSubject<\/code>, which is a reference to the <code>Subject<\/code> that invokes <code>notify<\/code>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The figure below illustrates that a <code>Subject<\/code> has a set (<code>observers<\/code>) of references to a number of <code>Observer<\/code> objects; this is illustrated with the &#8216;*&#8217; in rightmost top of the <code>Observer<\/code> object. The figure also illustrate that when <code>notify<\/code> is invoked on these <code>Observer<\/code> objects, the parameter <code>theSubject<\/code> of each <code>notify<\/code> method object is set to<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-custom-color-3-color\"> <\/mark>denote the <code>Subject<\/code> object that invoked <code>notify<\/code>:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img fetchpriority=\"high\" decoding=\"async\" width=\"518\" height=\"359\" src=\"https:\/\/oopm.org\/wp-content\/uploads\/2024\/12\/SubjectObserverAlarm-2.jpg\" alt=\"\" class=\"wp-image-10586\" style=\"width:406px;height:auto\" srcset=\"https:\/\/oopm.org\/wp-content\/uploads\/2024\/12\/SubjectObserverAlarm-2.jpg 518w, https:\/\/oopm.org\/wp-content\/uploads\/2024\/12\/SubjectObserverAlarm-2-300x208.jpg 300w\" sizes=\"(max-width: 518px) 100vw, 518px\" \/><figcaption class=\"wp-element-caption\">SubjectObserver<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The dashed line indicates that each notify method object is an instance of the method notify of a given Observer object. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The following two OSDs show what happens between objects of classes <code>Observer<\/code> and <code>Subject<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-media-text has-media-on-the-right is-stacked-on-mobile\" style=\"grid-template-columns:auto 38%\"><div class=\"wp-block-media-text__content\">\n<p class=\"wp-block-paragraph\"><code>Observer<\/code> objects subscribes to events in a given <code>Subject<\/code> object, by invoking  the method <code>subscribe<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For a given <code>Subject<\/code> object there may be a number of <code>Observer<\/code> objects; here we have just illustrated the case with two <code>Observer<\/code> objects.<\/p>\n<\/div><figure class=\"wp-block-media-text__media\"><img decoding=\"async\" width=\"377\" height=\"234\" src=\"https:\/\/oopm.org\/wp-content\/uploads\/2024\/12\/ObserverSubjectOSD-1.jpg\" alt=\"\" class=\"wp-image-10081 size-full\" srcset=\"https:\/\/oopm.org\/wp-content\/uploads\/2024\/12\/ObserverSubjectOSD-1.jpg 377w, https:\/\/oopm.org\/wp-content\/uploads\/2024\/12\/ObserverSubjectOSD-1-300x186.jpg 300w\" sizes=\"(max-width: 377px) 100vw, 377px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-media-text has-media-on-the-right is-stacked-on-mobile\" style=\"grid-template-columns:auto 42%\"><div class=\"wp-block-media-text__content\">\n<p class=\"wp-block-paragraph\">In case of an event in the <code>Subject<\/code> object, either caused by a state change in the <code>Subject<\/code> object, or by an external <code>alert<\/code> event (e.g. from a sensor), the <code>Subject<\/code> object invokes its <code>notifyObserver<\/code> method leading to invocations of <code>notify<\/code> of all <code>Observers<\/code>.<\/p>\n<\/div><figure class=\"wp-block-media-text__media\"><img decoding=\"async\" width=\"495\" height=\"319\" src=\"https:\/\/oopm.org\/wp-content\/uploads\/2024\/12\/ObserverSubjectOSD-2-1.jpg\" alt=\"\" class=\"wp-image-10083 size-full\" srcset=\"https:\/\/oopm.org\/wp-content\/uploads\/2024\/12\/ObserverSubjectOSD-2-1.jpg 495w, https:\/\/oopm.org\/wp-content\/uploads\/2024\/12\/ObserverSubjectOSD-2-1-300x193.jpg 300w\" sizes=\"(max-width: 495px) 100vw, 495px\" \/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">The classes&nbsp;<code>Subject<\/code>&nbsp;and&nbsp;<code>Observer<\/code>&nbsp;are rather abstract so in the next section we will show how the above example of a fire alarm in a shopping center may be modeled<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-custom-color-3-color\"> <\/mark>using the&nbsp;<code>ObserverPattern<\/code>. We show how to add subject and observer aspects to the bank system in the section following the next section.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<div style=\"display:flex; gap:10px;justify-content:center\" class=\"wps-pgfw-pdf-generate-icon__wrapper-frontend\">\n\t\t<a  href=\"https:\/\/oopm.org?action=genpdf&amp;id=7529\" class=\"pgfw-single-pdf-download-button\" ><img src=\"https:\/\/oopm.org\/wp-content\/plugins\/pdf-generator-for-wp\/admin\/src\/images\/PDF_Tray.svg\" title=\"Generate PDF\" style=\"width:auto; height:45px;\"><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>In this section, we introduce two related aspects,&nbsp;subject&nbsp;and&nbsp;observer, which have to be used in tandem. Objects of classes with a subject aspect may be observed by a set of objects with an observer aspect. An observer object subscribes to certain events in the subject object, events that typically change the state of the subject object. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3511,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7529","page","type-page","status-publish","hentry"],"mb":[],"mfb_rest_fields":["title","gutenberg_elementor_mode"],"_links":{"self":[{"href":"https:\/\/oopm.org\/index.php?rest_route=\/wp\/v2\/pages\/7529","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oopm.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oopm.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oopm.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oopm.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7529"}],"version-history":[{"count":104,"href":"https:\/\/oopm.org\/index.php?rest_route=\/wp\/v2\/pages\/7529\/revisions"}],"predecessor-version":[{"id":10855,"href":"https:\/\/oopm.org\/index.php?rest_route=\/wp\/v2\/pages\/7529\/revisions\/10855"}],"up":[{"embeddable":true,"href":"https:\/\/oopm.org\/index.php?rest_route=\/wp\/v2\/pages\/3511"}],"wp:attachment":[{"href":"https:\/\/oopm.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}