Components Communication

This is an archived post from the ExtJS era — the code may be obsolete, but the principles often still apply.

Code in this post can be obsolete, however, principles and theory may still apply.

Preface

I have some ideas running in my head for a couple of days about communication of components, what it consists of, what could be a valuable viewpoint to assume before we sit down and write any code, so I have decided to write an article on that. Because you could be maybe interested and also because I want to sort out my own ideas, arrange them in a system and put them on paper. (Well, "blog paper"...) First of all, I am not going to talk about communication of human beings; that is entirely different subject although the software communication of (Ext) components resembles human communication to a great degree.

Communication

If communication is (for human beings) exchange of ideas across space, for software components it is exchange of data between objects. For a communication to occur we have to have at least:

  • 2 terminals - source terminal and destination terminal
  • a communication line - a path along which the data travel
  • a communication particle - communicated data, content of the communication

Communication Terminal

Communication terminal is a point, a variable, a function that is able to send or receive a communication particle.

Source Terminal

Source Terminal is able to send, or give upon a request, data. Examples of source terminals of an (Ext) object are:

  • All public class variables, except configuration options, are communication terminals. Read-only variables are source-only terminals, read-write variables are both source terminals and destination terminals
  • Functions returning data or state information like getValue(), isCollapsed(), record.get() or similar.
  • fireEvent function. This is the only source terminal that can truly send the communication out. Variables and functions are able to give you data if you ask for but fireEvent really sends data out to its listener.

Source terminals must be aware of data they are about to send or give out but they are not aware of the communication line they are sending data to. getValue() does not know anything about who is calling it or about what happens with the data it returns. fireEvent knows nothing about the listener; it just sends data out.

Destination Terminal

Destination terminal is able to receive or accept data when it is asked for or when data arrives. Examples of destination terminals of an (Ext) object are:

  • Writable public class variables are simplest examples. Panel.collapsible = true; is receipt of data by the collapsible terminal. No data processing is done in this case.
  • Functions accepting data, such as setValue(), setDisabled() or similar.
  • Event listeners. There is nothing special about event listeners as they are just Functions accepting data.

Destination terminals do not necessarily know how to process the received data but they have to know how to receive the data, where to store it or how to call data processors if due. They are not aware of communication lines.

Communication Line

Communication line is a path along which communication particles (data) travel. In software, it is usually a function or an event listener or special cases we will talk about later. Communication line has to be aware of both terminals; sourc and destination. Simplest example of a communication line (comm-line in short) could be:

Translation Along Comm-line

It is very common that communication particle (data) is not only take from the source and passed to the destination terminal but it is processed, translated so that the destination terminal understands passed data. For example, we cannot directly take a TreeNode and pass it to the grid store but we have to create an array of records, based on the TreeNode attributes, because store.add() understands only array of records.

Establishing A Comm-line

There are several ways:

  • Writing a simple assignment statement, for example:

  • Writing a comm-line function, for example:

  • Installing an event handler, for example:

  • There is also one another way that, though loosely, falls into component communication and that is data binding.

Data Binding

Note: I wrote this article up to here a couple of months ago but due to not being very sure about data binding I had not finished and published it at that time. I have researched data binding recently, making some trials and errors, I have gained enough experience and confidence to continue writing and finish the article now.

What is Data Binding?

Data binding is letting two or more components to work with same data.

0 comments

No comments yet — be the first.

    Comments are closed on archived posts.