bioroebe 0.12.24 → 0.13.31

data/lib/bioroebe/gui/{gtk3 → universal_widgets}/primer_design_widget/primer_design_widget.rb

@@ -2,48 +2,50 @@
 # Encoding: UTF-8
 # frozen_string_literal: true
 # =========================================================================== #
-# === Bioroebe::GUI::Gtk::PrimerDesignWidget
+# === Bioroebe::GUI::UniversalWidgets::PrimerDesignWidget
+##
+# Usage example:
+#
+#   Bioroebe::GUI::UniversalWidgets::PrimerDesignWidget.new(ARGV)
+#
 # =========================================================================== #
-# require 'bioroebe/gui/gtk3/primer_design_widget/primer_design_widget.rb'
-# Bioroebe::GUI::Gtk::PrimerDesignWidget.run
+# require 'bioroebe/gui/universal_widgets/hamming_distance/hamming_distance.rb'
 # =========================================================================== #
-require 'gtk_paradise/require_gtk3'
+require 'universal_widgets/base/base.rb'
 
 module Bioroebe
 
 module GUI
 
-module Gtk
+module UniversalWidgets
 
-class PrimerDesignWidget < ::Gtk::Box # === Bioroebe::GUI::Gtk::PrimerDesignWidget 
+class PrimerDesignWidget < ::UniversalWidgets::Base # === Bioroebe::GUI::UniversalWidgets::PrimerDesignWidget
 
-  alias e puts
+  require 'bioroebe/base/commandline_application/commandline_arguments.rb'
+  include ::Bioroebe::CommandlineArguments
 
-  require 'bioroebe/toplevel_methods/nucleotides.rb'
-  require 'bioroebe/calculate/calculate_gc_content.rb'
-
-  require 'gtk_paradise/requires/require_the_base_module.rb'
-  include ::Gtk::BaseModule
+  require 'bioroebe/constants/GUIs.rb'
+  include Bioroebe::GUI
 
-  # ========================================================================= #
-  # === NAMESPACE
-  # ========================================================================= #
-  NAMESPACE = inspect
+  require 'bioroebe/toplevel_methods/toplevel_methods.rb'
+  require 'bioroebe/calculate/calculate_gc_content.rb'
 
   # ========================================================================= #
   # === TITLE
+  #
+  # Specify which title to use for this widget.
   # ========================================================================= #
   TITLE = 'Primer Design'
 
   # ========================================================================= #
   # === WIDTH
   # ========================================================================= #
-  WIDTH = '80% or minimum 800px'
+  WIDTH = '75% or 800px minimum'
 
   # ========================================================================= #
   # === HEIGHT
   # ========================================================================= #
-  HEIGHT = '70% or minimum 500px'
+  HEIGHT = '55% or 500px minimum'
 
   # ========================================================================= #
   # === PADDING_OF_THE_WHOLE_WIDGET
@@ -56,14 +58,39 @@ class PrimerDesignWidget < ::Gtk::Box # === Bioroebe::GUI::Gtk::PrimerDesignWidg
   HUGE_FONT = :hack_25
 
   # ========================================================================= #
-  # === USE_THIS_FONT
+  # === FONT_LARGE
   # ========================================================================= #
-  USE_THIS_FONT = :hack_18
+  FONT_LARGE = 'Calibri 32'
+
+  # ========================================================================= #
+  # === MONOSPACED_FONT
+  #
+  # When this font is changed, don't forget to also change the font
+  # at SMALLER_FONT.
+  # ========================================================================= #
+  MONOSPACED_FONT = :hack_22
+    USE_THIS_FONT = MONOSPACED_FONT
+    USE_THIS_MONOFONT = MONOSPACED_FONT
 
   # ========================================================================= #
   # === SMALLER_FONT
   # ========================================================================= #
-  SMALLER_FONT = :hack_17
+  SMALLER_FONT = :hack_16
+
+  # ========================================================================= #
+  # === USE_THIS_SLIGHTLY_SMALLER_FONT
+  # ========================================================================= #
+  USE_THIS_SLIGHTLY_SMALLER_FONT = :hack_16
+
+  # ========================================================================= #
+  # === USE_THIS_HEADER
+  # ========================================================================= #
+  USE_THIS_HEADER = ['one-letter abbreviation', 'n times']
+
+  # ========================================================================= #
+  # === GENERATE_N_AMINOACIDS_BY_DEFAULT
+  # ========================================================================= #
+  GENERATE_N_AMINOACIDS_BY_DEFAULT = 15
 
   # ========================================================================= #
   # === COLOUR_FOR_NON_MATCHES
@@ -76,11 +103,10 @@ class PrimerDesignWidget < ::Gtk::Box # === Bioroebe::GUI::Gtk::PrimerDesignWidg
   # === initialize
   # ========================================================================= #
   def initialize(
-      commandline_arguments = ARGV,
+      commandline_arguments = nil,
       run_already           = true
     )
-    super(:vertical)
-    register_sigint
+    determine_the_GUI_to_be_used(commandline_arguments)
     reset
     set_commandline_arguments(
       commandline_arguments
@@ -92,66 +118,222 @@ class PrimerDesignWidget < ::Gtk::Box # === Bioroebe::GUI::Gtk::PrimerDesignWidg
   # === reset                                                     (reset tag)
   # ========================================================================= #
   def reset
+    super() if respond_to?(:super)
     reset_the_internal_variables
+    reset_the_base_module # This must come after reset_the_internal_variables().
+    infer_the_namespace
     # ======================================================================= #
     # === @configuration
     # ======================================================================= #
-    @configuration = [true, __dir__, NAMESPACE]
+    @configuration = [true, __dir__, namespace?]
+    # ======================================================================= #
+    # === Set the title, width, height and the font in use.
+    # ======================================================================= #
     title_width_height_font(TITLE, WIDTH, HEIGHT, USE_THIS_FONT)
-    use_gtk_paradise_project_css_file
-    append_project_css_file 
-    infer_the_size_automatically
+    handle_CSS if use_gtk3?
     establish_the_forward_and_reverse_sequence
   end
 
   # ========================================================================= #
-  # === add_the_main_label
+  # === establish_the_forward_and_reverse_sequence
+  # ========================================================================= #
+  def establish_the_forward_and_reverse_sequence
+    # ======================================================================= #
+    # === @forward_sequence
+    # ======================================================================= #
+    @forward_sequence = 'ATGAGGTTTGCAGCG'
+    # ======================================================================= #
+    # === @reverse_sequence
+    # ======================================================================= #
+    @reverse_sequence = 'TACTCCAAACGTCGC'
+  end
+
+  # ========================================================================= #
+  # === padding?
+  # ========================================================================= #
+  def padding?
+    PADDING_OF_THE_WHOLE_WIDGET
+  end
+
+  # ========================================================================= #
+  # === border_size?
+  # ========================================================================= #
+  def border_size?
+    2
+  end
+
+  # ========================================================================= #
+  # === main_font?
+  # ========================================================================= #
+  def main_font?
+    USE_THIS_FONT
+  end
+
+  # ========================================================================= #
+  # === slightly_smaller_font?
+  # ========================================================================= #
+  def slightly_smaller_font?
+    USE_THIS_SLIGHTLY_SMALLER_FONT
+  end
+
+  # ========================================================================= #
+  # === handle_CSS_rules                                   (CSS tag, css tag)
+  # ========================================================================= #
+  def handle_CSS_rules
+    use_gtk_paradise_project_css_file
+    append_project_css_file
+    add_these_custom_CSS_rules '
+'
+    apply_the_CSS_rules
+  end; alias handle_CSS handle_CSS_rules # === handle_CSS
+
+  # ========================================================================= #
+  # === create_the_skeleton                        (create tag, skeleton tag)
+  # ========================================================================= #
+  def create_the_skeleton
+    create_the_entries
+    create_the_header_bar
+    create_the_scrolled_window
+    create_the_top_primer
+    create_the_top_strand
+    create_the_bottom_primer
+  end
+
+  # ========================================================================= #
+  # === run                                                         (run tag)
   # ========================================================================= #
-  def add_the_main_label
-    @main_label = gtk_left_aligned_label(TITLE)
+  def run
+    run_super
+  end
+
+  # ========================================================================= #
+  # === return_the_main_label
+  # ========================================================================= #
+  def return_the_main_label
+    @main_label = left_aligned_label(TITLE)
     @main_label.make_bold
     @main_label.use_this_font = HUGE_FONT
-    minimal(@main_label)
+    @main_label.make_selectable
+    return @main_label
   end
 
   # ========================================================================= #
-  # === add_the_header_bar
+  # === return_the_header_bar
   # ========================================================================= #
-  def add_the_header_bar
-    minimal(@header_bar, 4)
+  def return_the_header_bar
+    return @header_bar
   end
 
   # ========================================================================= #
   # === create_the_top_strand
   # ========================================================================= #
   def create_the_top_strand
-    @top_strand = gtk_bold_label("5'-#{@forward_sequence}-3'")
+    @top_strand = bold_label("5'-#{@forward_sequence}-3'")
     @top_strand.darkblue
   end
 
   # ========================================================================= #
-  # === create_scrolled_window                                 (scrolled tag)
+  # === create_the_scrolled_window                             (scrolled tag)
   # ========================================================================= #
-  def create_scrolled_window
-    @text_buffer = gtk_text_buffer
-    @text_view = gtk_text_view(@text_buffer)
+  def create_the_scrolled_window
+    @text_buffer = create_text_buffer
+    @text_view = create_text_view(@text_buffer)
     # ======================================================================= #
     # === @scrolled_window
     # ======================================================================= #
-    @scrolled_window = gtk_scrolled_window(@text_view) { :always }
+    @scrolled_window = create_scrolled_window(@text_view) { :always }
     @scrolled_window.bblack1
     @scrolled_window.pad8px
     @scrolled_window.width_height(500, 400)
   end
 
   # ========================================================================= #
-  # === create_entries                               (entries tag, entry tag)
+  # === return_widget_containing_the_reverse_primer_information
+  #
+  # This is the widget that contains the various smaller widgets necessary
+  # for the "Reverse primer:" info, close to the bottom of this widget.
+  # ========================================================================= #
+  def return_widget_containing_the_reverse_primer_information
+    hbox = create_hbox
+    hbox.minimal(bold_text("Reverse primer: 5'-"),1)
+    hbox.minimal(@reverse_primer,1)
+    hbox.minimal(bold_text("-3'",1))
+    button2 = button('←')
+    button2.hint = 'Remove the last nucleotide from the primer.'
+    button2.bblack1
+    button2.on_clicked {
+      @reverse_primer.try_to_remove_the_last_character
+    }
+    hbox.minimal(button2)
+    text_showing_the_GC_content = left_aligned_text(' GC content:')
+    text_showing_the_GC_content.use_this_font = smaller_font?
+    text_showing_the_GC_content.make_bold
+    hbox.minimal(text_showing_the_GC_content, 5)
+    @text_GC_content_for_the_reverse_primer_as_percentage = left_aligned_text
+    @text_GC_content_for_the_reverse_primer_as_percentage.use_this_font = smaller_font?
+    @text_GC_content_for_the_reverse_primer_as_percentage.make_bold
+    hbox.minimal(@text_GC_content_for_the_reverse_primer_as_percentage, 5)
+    return hbox
+  end
+
   # ========================================================================= #
-  def create_entries
+  # === return_widget_containing_the_forward_primer_information
+  # ========================================================================= #
+  def return_widget_containing_the_forward_primer_information
+    hbox = create_hbox
+    hbox.minimal(bold_text("Forward primer: 5'-"), 1)
+    hbox.minimal(@forward_primer, 1)
+    hbox.minimal(bold_text("-3'",1))
+    button1 = button('←')
+    button1.hint = 'Remove the last nucleotide from the primer.'
+    button1.bblack1
+    button1.on_clicked {
+      @forward_primer.try_to_remove_the_last_character
+    }
+    hbox.minimal(button1)
+    text_showing_the_GC_content = left_aligned_text(' GC content:')
+    text_showing_the_GC_content.use_this_font = smaller_font?
+    text_showing_the_GC_content.make_bold
+    hbox.minimal(text_showing_the_GC_content, 5)
+    @text_GC_content_for_the_forward_primer_as_percentage = left_aligned_text
+    @text_GC_content_for_the_forward_primer_as_percentage.use_this_font = smaller_font?
+    @text_GC_content_for_the_forward_primer_as_percentage.make_bold
+    hbox.minimal(@text_GC_content_for_the_forward_primer_as_percentage, 5)
+    return hbox
+  end
+
+  # ========================================================================= #
+  # === main_label?
+  # ========================================================================= #
+  def main_label?
+    @main_label
+  end
+
+  # ========================================================================= #
+  # === smaller_font?
+  # ========================================================================= #
+  def smaller_font?
+    SMALLER_FONT
+  end
+
+  # ========================================================================= #
+  # === do_startup_related_actions
+  # ========================================================================= #
+  def do_startup_related_actions
+    print ' '
+    @top_primer.deselect
+    do_calculate_the_GC_content_for_the_reverse_primer
+    do_calculate_the_GC_content_for_the_forward_primer
+  end
+
+  # ========================================================================= #
+  # === create_the_entries                           (entries tag, entry tag)
+  # ========================================================================= #
+  def create_the_entries
     # ======================================================================= #
     # === @amplified_area
     # ======================================================================= #
-    @amplified_area = gtk_entry
+    @amplified_area = create_entry
     @amplified_area.set_text('TACGTACG')
     @amplified_area.clear_background
     @amplified_area.lightblue_background
@@ -160,7 +342,7 @@ class PrimerDesignWidget < ::Gtk::Box # === Bioroebe::GUI::Gtk::PrimerDesignWidg
     # ======================================================================= #
     # === @reverse_primer
     # ======================================================================= #
-    @reverse_primer = gtk_entry
+    @reverse_primer = create_entry
     @reverse_primer.yellow_background
     @reverse_primer.bblack1
     @reverse_primer.width_height(250, 50)
@@ -174,7 +356,7 @@ class PrimerDesignWidget < ::Gtk::Box # === Bioroebe::GUI::Gtk::PrimerDesignWidg
     # ======================================================================= #
     # === @forward_primer
     # ======================================================================= #
-    @forward_primer = gtk_entry
+    @forward_primer = create_entry
     @forward_primer.yellow_background
     @forward_primer.bblack1
     @forward_primer.width_height(250, 50)
@@ -206,45 +388,6 @@ class PrimerDesignWidget < ::Gtk::Box # === Bioroebe::GUI::Gtk::PrimerDesignWidg
       COLOUR_FOR_NON_MATCHES.to_s+'-colour.'
   end
 
-  # ========================================================================= #
-  # === connect_skeleton                                        (connect tag)
-  # ========================================================================= #
-  def connect_skeleton
-    abort_on_exception
-    add_the_header_bar
-    add_the_main_label
-    outer_vbox = gtk_vbox
-    outer_vbox.minimal(@top_primer, 8)
-    outer_vbox.minimal(gtk_hspacer)
-    outer_vbox.minimal(@top_strand)
-    @bottom_strand = gtk_bold_label("3'-#{@reverse_sequence}-5'")
-    @bottom_strand.darkgreen
-    outer_vbox.minimal(@bottom_strand)
-    outer_vbox.minimal(gtk_hspacer)
-    outer_vbox.minimal(@bottom_primer, 8)
-    hbox = gtk_hbox
-    hbox.minimal(text('Amplified area:'), 1)
-    hbox.minimal(@amplified_area, 1)
-    outer_vbox.minimal(hbox, 1)
-    # ======================================================================= #
-    # === The reverse primer will be added here
-    # ======================================================================= #
-    hbox = return_widget_containing_the_reverse_primer_information
-    outer_vbox.minimal(hbox, 1)
-    # ======================================================================= #
-    # === The forward primer will be added here
-    # ======================================================================= #
-    hbox = return_widget_containing_the_forward_primer_information
-    outer_vbox.minimal(hbox, 1)
-    maximal(
-      add_an_up_and_down_dragger(
-        outer_vbox,
-        @scrolled_window
-      )
-    )
-    sync_forward_and_reverse_primer
-  end
-
   # ========================================================================= #
   # === sync_forward_and_reverse_primer
   # ========================================================================= #
@@ -253,117 +396,6 @@ class PrimerDesignWidget < ::Gtk::Box # === Bioroebe::GUI::Gtk::PrimerDesignWidg
     sync_reverse_primer
   end
 
-  # ========================================================================= #
-  # === sync_forward_primer
-  # ========================================================================= #
-  def sync_forward_primer
-    _ = @forward_primer.text?
-    longer_nucleotide_sequence = remove_ends(@bottom_strand.text?)
-    array = ["      5'-", :tomato]
-    _.chars.each_with_index {|char, index|
-      if char == Bioroebe.should_match_to?(longer_nucleotide_sequence[index])
-        # This is a match.
-        array << [char, :darkgreen]
-      else
-        # This is NOT a match.
-        array << [char, COLOUR_FOR_NON_MATCHES]
-      end
-      array.flatten!
-    }
-    array << ["-3'→".ljust(@forward_sequence.size+(9-_.size)), :tomato]
-    array.flatten!
-    @bottom_primer.simple_markup(array)
-  end; alias sync_the_forward_primer sync_forward_primer # === sync_the_forward_primer
-
-  # ========================================================================= #
-  # === sync_reverse_primer
-  # ========================================================================= #
-  def sync_reverse_primer
-    _ = @reverse_primer.text?
-    longer_nucleotide_sequence = remove_ends(@top_strand.text?.reverse)
-    @top_primer.set_text(
-      _.rjust(@forward_sequence.size+6)
-    )
-    array = ["←3'-".rjust(33), :tomato]
-    _.chars.reverse.each_with_index {|char, index|
-      if char == Bioroebe.should_match_to?(longer_nucleotide_sequence[index])
-        # This is a match.
-        array << [char, :darkgreen]
-      else
-        # This is NOT a match.
-        array << [char, COLOUR_FOR_NON_MATCHES]
-      end
-      array.flatten!
-    }
-    array << ["-5'".ljust(@forward_sequence.size+6), :tomato]
-    array.flatten!
-    @top_primer.simple_markup(array)
-  end; alias sync_the_reverse_primer sync_reverse_primer # === sync_the_reverse_primer
-
-  # ========================================================================= #
-  # === run                                                         (run tag)
-  # ========================================================================= #
-  def run
-    create_skeleton_then_connect_skeleton
-    Thread.new {
-      sleep 0.001
-      do_startup_related_actions
-    }
-  end
-
-  # ========================================================================= #
-  # === establish_the_forward_and_reverse_sequence
-  # ========================================================================= #
-  def establish_the_forward_and_reverse_sequence
-    # ======================================================================= #
-    # === @forward_sequence
-    # ======================================================================= #
-    @forward_sequence = 'ATGAGGTTTGCAGCG'
-    # ======================================================================= #
-    # === @reverse_sequence
-    # ======================================================================= #
-    @reverse_sequence = 'TACTCCAAACGTCGC'
-  end
-
-  # ========================================================================= #
-  # === padding?
-  # ========================================================================= #
-  def padding?
-    PADDING_OF_THE_WHOLE_WIDGET
-  end
-
-  # ========================================================================= #
-  # === border_size?
-  # ========================================================================= #
-  def border_size?
-    2
-  end
-
-  # ========================================================================= #
-  # === Bioroebe::GUI::Gtk::PrimerDesignWidget.run
-  # ========================================================================= #
-  def self.run(
-      i = ARGV
-    )
-    require 'gtk_paradise/run'
-    _ = ::Bioroebe::GUI::Gtk::PrimerDesignWidget.new(i)
-    r = ::Gtk.run
-    r << _
-    r.automatic_top_left_then_run
-  end
-
-  # ========================================================================= #
-  # === create_skeleton                                          (create tag)
-  # ========================================================================= #
-  def create_skeleton
-    create_entries
-    create_the_header_bar
-    create_scrolled_window
-    create_the_top_primer
-    create_the_top_strand
-    create_the_bottom_primer
-  end
-
   # ========================================================================= #
   # === create_the_bottom_primer
   # ========================================================================= #
@@ -371,7 +403,7 @@ class PrimerDesignWidget < ::Gtk::Box # === Bioroebe::GUI::Gtk::PrimerDesignWidg
     # ======================================================================= #
     # === @bottom_primer
     # ======================================================================= #
-    @bottom_primer = gtk_bold_label
+    @bottom_primer = bold_label
     @bottom_primer.make_selectable
     @bottom_primer.tomato
     @bottom_primer.hint = 'This is the forward primer. A '\
@@ -387,7 +419,7 @@ class PrimerDesignWidget < ::Gtk::Box # === Bioroebe::GUI::Gtk::PrimerDesignWidg
     @header_bar = default_header_bar
     @header_bar.pad8px
     @header_bar.bblack1
-    event_box = gtk_event_box(image_information)
+    event_box = create_event_box(image_information)
     event_box.hint = 'Click on this image to show some information '\
                      'about <b>primer design</b> in a PCR.'
     event_box.on_clicked {
@@ -400,11 +432,11 @@ class PrimerDesignWidget < ::Gtk::Box # === Bioroebe::GUI::Gtk::PrimerDesignWidg
   # === do_pop_up_the_widget_containing_information_about_primer_design_in_a_PCR
   # ========================================================================= #
   def do_pop_up_the_widget_containing_information_about_primer_design_in_a_PCR
-    vbox = gtk_vbox
+    vbox = create_vbox
     # ======================================================================= #
     # Style this vbox a bit:
     # ======================================================================= #
-    outer_vbox = gtk_vbox
+    outer_vbox = create_vbox
     outer_vbox.set_border_width(8)
     outer_vbox.pad8px
     outer_vbox.bblack1
@@ -457,83 +489,125 @@ class PrimerDesignWidget < ::Gtk::Box # === Bioroebe::GUI::Gtk::PrimerDesignWidg
   end
 
   # ========================================================================= #
-  # === main_label?
+  # === sync_forward_primer
   # ========================================================================= #
-  def main_label?
-    @main_label
-  end
+  def sync_forward_primer
+    _ = @forward_primer.text?
+    longer_nucleotide_sequence = remove_ends(@bottom_strand.text?)
+    array = ["      5'-", :tomato]
+    _.chars.each_with_index {|char, index|
+      if char == Bioroebe.should_match_to?(longer_nucleotide_sequence[index])
+        # This is a match.
+        array << [char, :darkgreen]
+      else
+        # This is NOT a match.
+        array << [char, COLOUR_FOR_NON_MATCHES]
+      end
+      array.flatten!
+    }
+    array << ["-3'→".ljust(@forward_sequence.size+(9-_.size)), :tomato]
+    array.flatten!
+    @bottom_primer.simple_markup(array)
+  end; alias sync_the_forward_primer sync_forward_primer # === sync_the_forward_primer
 
   # ========================================================================= #
-  # === smaller_font?
+  # === sync_reverse_primer
   # ========================================================================= #
-  def smaller_font?
-    SMALLER_FONT
-  end
+  def sync_reverse_primer
+    _ = @reverse_primer.text?
+    longer_nucleotide_sequence = remove_ends(@top_strand.text?.reverse)
+    @top_primer.set_text(
+      _.rjust(@forward_sequence.size+6)
+    )
+    array = ["←3'-".rjust(33), :tomato]
+    _.chars.reverse.each_with_index {|char, index|
+      if char == Bioroebe.should_match_to?(longer_nucleotide_sequence[index])
+        # This is a match.
+        array << [char, :darkgreen]
+      else
+        # This is NOT a match.
+        array << [char, COLOUR_FOR_NON_MATCHES]
+      end
+      array.flatten!
+    }
+    array << ["-5'".ljust(@forward_sequence.size+6), :tomato]
+    array.flatten!
+    @top_primer.simple_markup(array)
+  end; alias sync_the_reverse_primer sync_reverse_primer # === sync_the_reverse_primer
 
   # ========================================================================= #
-  # === do_startup_related_actions
+  # === connect_the_skeleton                      (connect tag, skeleton tag)
   # ========================================================================= #
-  def do_startup_related_actions
-    print ' '
-    @top_primer.deselect
-    do_calculate_the_GC_content_for_the_reverse_primer
-    do_calculate_the_GC_content_for_the_forward_primer
+  def connect_the_skeleton
+    abort_on_exception
+    
+    outer_vbox = create_vbox
+    outer_vbox.minimal(return_the_header_bar, 2)
+    outer_vbox.minimal(return_the_main_label, 2)
+    outer_vbox.minimal(@top_primer, 8)
+    outer_vbox.minimal(hspacer)
+    outer_vbox.minimal(@top_strand)
+    @bottom_strand = bold_label("3'-#{@reverse_sequence}-5'")
+    @bottom_strand.darkgreen
+    outer_vbox.minimal(@bottom_strand)
+    outer_vbox.minimal(hspacer)
+    outer_vbox.minimal(@bottom_primer, 8)
+    hbox = create_hbox
+    hbox.minimal(text('Amplified area:'), 1)
+    hbox.minimal(@amplified_area, 1)
+    outer_vbox.minimal(hbox, 1)
+    # ======================================================================= #
+    # === The reverse primer will be added here
+    # ======================================================================= #
+    hbox = return_widget_containing_the_reverse_primer_information
+    outer_vbox.minimal(hbox, 1)
+    # ======================================================================= #
+    # === The forward primer will be added here
+    # ======================================================================= #
+    hbox = return_widget_containing_the_forward_primer_information
+    outer_vbox.minimal(hbox, 1)
+    dragger = add_an_up_and_down_dragger(outer_vbox, @scrolled_window)
+
+    window = runner_widget(nil, width?, height?, title?)
+    window << dragger
+
+    ::UniversalWidgets.set_main_window(window)
+    upon_delete_event_quit_the_application
+    window.use_this_font = font?
+    window.show_all
+    window.set_size_request(width?, height?)
+    window.set_default_size(width?, height?)
+    window.set_padding(padding?)
+    window.set_border_size(border_size?)
+    sync_forward_and_reverse_primer
+    Thread.new {
+      sleep 0.001
+      do_startup_related_actions
+    }
+    window.top_left
+    run_main
   end
 
   # ========================================================================= #
-  # === return_widget_containing_the_reverse_primer_information
-  #
-  # This is the widget that contains the various smaller widgets necessary
-  # for the "Reverse primer:" info, close to the bottom of this widget.
+  # === Bioroebe::GUI::UniversalWidgets::PrimerDesignWidget[]
   # ========================================================================= #
-  def return_widget_containing_the_reverse_primer_information
-    hbox = gtk_hbox
-    hbox.minimal(bold_text("Reverse primer: 5'-"),1)
-    hbox.minimal(@reverse_primer,1)
-    hbox.minimal(bold_text("-3'",1))
-    button2 = gtk_button('←')
-    button2.hint = 'Remove the last nucleotide from the primer.'
-    button2.bblack1
-    button2.on_clicked {
-      @reverse_primer.try_to_remove_the_last_character
-    }
-    hbox.minimal(button2)
-    text_showing_the_GC_content = left_aligned_text(' GC content:')
-    text_showing_the_GC_content.use_this_font = smaller_font?
-    text_showing_the_GC_content.make_bold
-    hbox.minimal(text_showing_the_GC_content, 5)
-    @text_GC_content_for_the_reverse_primer_as_percentage = left_aligned_text
-    @text_GC_content_for_the_reverse_primer_as_percentage.use_this_font = smaller_font?
-    @text_GC_content_for_the_reverse_primer_as_percentage.make_bold
-    hbox.minimal(@text_GC_content_for_the_reverse_primer_as_percentage, 5)
-    return hbox
+  def self.[](i = ARGV)
+    new(i)
   end
 
   # ========================================================================= #
-  # === return_widget_containing_the_forward_primer_information
+  # === Bioroebe::GUI::Gtk::PrimerDesignWidget.run
   # ========================================================================= #
-  def return_widget_containing_the_forward_primer_information
-    hbox = gtk_hbox
-    hbox.minimal(bold_text("Forward primer: 5'-"), 1)
-    hbox.minimal(@forward_primer, 1)
-    hbox.minimal(bold_text("-3'",1))
-    button1 = gtk_button('←')
-    button1.hint = 'Remove the last nucleotide from the primer.'
-    button1.bblack1
-    button1.on_clicked {
-      @forward_primer.try_to_remove_the_last_character
-    }
-    hbox.minimal(button1)
-    text_showing_the_GC_content = left_aligned_text(' GC content:')
-    text_showing_the_GC_content.use_this_font = smaller_font?
-    text_showing_the_GC_content.make_bold
-    hbox.minimal(text_showing_the_GC_content, 5)
-    @text_GC_content_for_the_forward_primer_as_percentage = left_aligned_text
-    @text_GC_content_for_the_forward_primer_as_percentage.use_this_font = smaller_font?
-    @text_GC_content_for_the_forward_primer_as_percentage.make_bold
-    hbox.minimal(@text_GC_content_for_the_forward_primer_as_percentage, 5)
-    return hbox
-  end
+  def self.run(
+      i = ARGV
+    )
+    r = ::Gtk.runner_factory(
+      ::Bioroebe::GUI::Gtk::PrimerDesignWidget.new(i)
+    )
+    r.background_colour(:white)
+    return r
+  end; self.instance_eval { alias run_gtk3_widget       run } # === Bioroebe::GUI::Gtk::PrimerDesignWidget.run_gtk3_widget
+       self.instance_eval { alias start_gui_application run } # === Bioroebe::GUI::Gtk::PrimerDesignWidget.start_gui_application
 
   # ========================================================================= #
   # === do_calculate_the_GC_content_for_the_reverse_primer
@@ -575,5 +649,5 @@ class PrimerDesignWidget < ::Gtk::Box # === Bioroebe::GUI::Gtk::PrimerDesignWidg
 end; end; end; end
 
 if __FILE__ == $PROGRAM_NAME
-  Bioroebe::GUI::Gtk::PrimerDesignWidget.run
+  Bioroebe::GUI::UniversalWidgets::PrimerDesignWidget.new(ARGV)
 end # gtkprimerdesignwidget