Tag: Model-View-Controller

Long break, status update & demo

So, another long break in blogging. This, of course, is due to having too much work and spending the remaining energy somewhere else (like running).

So I thought I’d write a couple of posts on what I have been doing in between the previous post in January:

  • Evaluating the Data Structures and Algorithms course programming assignments. This has been faster this year, since my automated tool that both unit tests all the submissions and now also checks the source code that it doesn’t use things students are not supposed to use, and does use things they are supposed to use. Later I’ll make a post about the latest and future improvements to this tool. I still use too much time on this, due to lacking teaching resources, so the only ways to improve the situation are to add more automation and forget about giving detailed feedback to students.
  • Launching and supervising six BSc student projects. This started in January and will continue to end of April or May, depending on individual project schedules. Groups of 4-6 students show the skills and knowledge they (hopefully) acquired during their BSc studies and design and/or implement a software for an external (or “external”) customer. Sometimes they continue development of already existing software. I have weekly status meetings with them and guide them through the project, and participate in official steering group meetings.
  • Preparing and conducting our MSc program applicant interviews. This took most of the February, almost full day.
  • In March, the Programming 4 course started. The course focuses on GUI design, usability and user experience. I am assisting my colleague in this course. Students design and implement a GUI app, often the first time in their lives. Up to this point, they have usually implemented only small command line apps with relatively small number of functions or classes. This week is the last week of the course.
  • Supervising some BSc and MSc thesis students and
  • Preparing courses for teaching in Fall.

So, lots of work and thus no time for blogging, considering my priorities.

Anyways, I thought that in addition to listing the jobs above, I could also show some demonstrations I prepared for the Programming 4 course. The one described below in this post is a very simple and small demonstration showing how to use a Publish/Subscribe pattern to update GUI views when a data object (a model) in software changes state.

The old school way to do this is the Observer design pattern, which has it’s pros and cons — easy to use but has its negative consequences too. Classes related to that in Java have been deprecated though still usable.

Instead of Observer, Java recommends using other techniques, like the Publish/Subscribe pattern, using Java Flow Publisher and Subscriber interfaces and classes.

So, I implemented a simple demo app in Java and Swing, WallClockApp (GitHub link to source). The app uses the Publish/Subsctibe pattern and looks like this:

You can add several timezones using the plus button, and see the time in these different timezones. The red circle and cross button in each timezone can be used to remove a timezone. Obviously, the times advance with each clock, as seconds tick forward.

The app follows the also common Model-View-Controller architecture in GUI apps. In the app the Model (class ClockTickSource) is an object that provides the time signal, once a second. The View objects (class WallClock) are the different time zone views (three visible in the screenshot above). The app object (class WallClockApp) acts as the Controller, creating the model, and adding clock Views for user selected timezones. The Views basically just show the time in their corresponding time zones.

Where does the Publish/Subscribe then fits into this? Well, the Model needs a way to tell the views when a second has passed. So it has to know about the views that need the time tick signal. When the Model’s timer ticks, once a second, it then needs to notify the views so that they can update the time visible in their timezones.

This has been implemented here using the Java Publish/Subscribe pattern. The model is the publisher, that publishes the current time in one second intervals. The current time is published as the Unix time, milliseconds since Jan 1st, 1970, in UTC time.

Views, the Subscribers, subscribe to the Publisher as they are created:

public WallClock(final ClockTickSource clock, final TimeZone timeZone) {
   super();
   setLayout( new BorderLayout());
   this.clock = clock;
   this.timeZone = timeZone;
   this.clock.subscribe(this);

On the last line above, you can see the View object subscribing to the clock ticks, calling the clock.subscribe. The Publisher (clock, the Model) then will notify the Subscriber about successful subscription and the View can then request for the clock ticks (Long values; the milliseconds from Jan 1st, 1970 UTC):

public void onSubscribe(final Subscription subscription) {
   this.subscription = subscription;
   subscription.request(Long.MAX_VALUE);
}

The Publisher then (code below) starts the clock ticking using a Timer, but only once, for the first subscriber (since only one timer is needed to run the show; see the start() method on details on how to launch the timer):

public void subscribe(final Subscriber<Long> subscriber) {
  if (publisher == null) {
    publisher = new SubmissionPublisher<Long>(ForkJoinPool.commonPool(), 10);
  }
  publisher.subscribe(subscriber);
  if (publisher.getNumberOfSubscribers() == 1) {
    start();
  }
}

A concrete Java class SubmissionPublisher does the actual work here in the Publisher side.

Then the subscribers (views) handle the published data (Unix timestamps) as they get the notification from the Publisher when onNext is called by the Java Flow framework. The views will then convert the UTC time in milliseconds in the parameter item to their respective timezones and show that to the user:

public void onNext(final Long item) {
   final long currentTime = item;
   Date time = new Date(currentTime);
   ZonedDateTime zonedTime = time.toInstant().atZone(timeZone.toZoneId());		
   timeLabel.setText(DateTimeFormatter.ofPattern("HH:mm:ss", Locale.getDefault()).format(zonedTime));
}

When the view closes (from the red circle/cross button), it needs to unsubscribe from the publisher, using the subscription.cancel():

public void close() {
   subscription.cancel();
   Container parent = getParent();
   parent.remove(this);
   parent.revalidate();
   parent.repaint();
}

You can get the rest of the details from the linked GitHub repository. This was a very small demo, just to show how the pub-sub works with the Java interfaces and classes. If you are interested in the details, head to the GitHub demo, clone it and check it out in action!

In the following posts I’ll show some other demonstrations and also write about the updates to the automatic DSA course testing/checking tool. Have a nice day!