Page Object

So far we have investigated a Page HTML Head leaving the documents body empty. In this we loaded some Javascript in the script headers. The mere loading of these into the open document triggers the associated scripts to attach their eventHandlers to the initial onload and onresize events. From this starting point we are able to load a web site.

We have introduced two objects that were loaded in the two scripts we added in the HTML file. The Page Object and a so far empty Config Object with a few functions attached to end that deal with our load and resize events. Within our Page Object we have looked at a few base functions that we will use to manage the child objects to this now Parent Object we are defining, the Page.

We can see below that we introduced a Page.start function and attached it to our window.onload Event Handler, this begins the Script Process and the functionality of our web site structure. We can also see below within this Start Function we trigger a series of Page functions, the Page.init and Page.setTitle were hinted at in the last post.

What we are doing here is setting out the Pages parameters, and defining its Meta Tags and Initial Elements. This is design process needs to be thought out before you start programming your Page Object as this will set out the elements that will be used by other loaded Objects like our Display Objects.

As we go through the Page Object we will see it grow and increase in functionality. With this start function we set up the framework for the Page and initialize everything that is loaded into it followed by a preparation stage. Some objects cannot be fully configured until after they are completely drawn. We take a second step to after our initial draw function to allow for any preparation of those objects before the end of the page load.

var Page = {
  _timer: {},

  start: function() {
    Page.setMeta();
    Page.setElements();

    Page.init();
    Page.prepare();
    Page.setTitle("by Steven Spiers");
  },

  init: function() {	
  },

  prepare: function() {	
  },

  onresizer: function(){		
    clearTimeout(Page._timer);
    Page._timer = setTimeout(function() {
        Page.onresize();	
      }, 350);
    },

  onresize: function(){
  }
}

We can now start to layout the functions that will configure the page after the start function has been triggered. Setting out some Meta Tags that are produced to reflect the Script that we are creating, we output the Author, and a Description made up of the Page and Version. This is followed by setting up the Pages Elements, here we have modified our Page at the document.body that we left empty previously. This is the first time we start to change the visual output viewable by the user within the Browser Window.

Lastly we create our first small function that does something by taking an input variable “string”. Essentially we should check if this is a string and if not return false, but for now we will just append a known string to our document.title.

var Page ={
  _VERSION: 	"0.3",
  _CLASS:	"Page",
  _AUTHOR:	"Steven Spiers",

  _elements:{},

  setMeta: function(){
    this._elements.author = document.createElement("meta");
    this._elements.author.name = "Author";
    this._elements.author.content = this._author;
 
    this._elements.description = document.createElement("meta");
    this._elements.description.name = "Description";
    this._elements.description.content = Config._title 
                                         + ': ' + this._CLASS 
                                         + ": " + this._VERSION;
		
    document.getElementsByTagName("head")[0].appendChild(this._elements.author);
    document.getElementsByTagName("head")[0].appendChild(this._elements.description);		
  },

  setElements: function(){
    document.body.style.background = '#e0e0e0';
    document.body.style.color = '#111';
    document.body.style.margin = '0';
    document.body.style.padding = '0';
    document.body.style.fontFamily = 'helvetica neue, helvetica, arial, sans-serif';
    document.body.style.fontSize = '13px';
    document.body.style.fontStyle = 'normal';
  },

  setTitle: function(string){
    document.title = Config._title + ': ' + string;
  }
}

Within our Page Object we have now started the display of the Page through its start, initilisation and prepare functions. Our start function progresses through a build of the Page object by setting Meta Tags, Changing the Document Space and Changing the Document Title.

With this initial configuration we added an Page._elements object as a container for all our Page Elements. This will become more apparent as we move forward. Here we created some meta tags that we added as Children of this Page Parent holding them in Pages scope using the Page._elements placeholder. We will also see how we can manipulate the DOM directly through our placeholder.

We also added some constants within our Config File, these were called by our setMeta function and our setTitle function. I have added a rainbow of pastelle colors that we will use throughout this project as constants as well. This will give us the ability to change the entire color pallete by editing the Config Files base color set.

var Config = {
  _VERSION:     0.1,
  _CLASS:	"Config",

  _title:       "MindMap",
  _description: "MindMap JS Framework - Copyright 2021",

  _purple:	"#B29DD9",
  _blue:	"#779ECB",
  _green:	"#77DD77",
  _yellow:	"#FDFD98",
  _orange:	"#FFAF68",
  _red:		"#FE6B64",
  _pink:	"#F7CEE2",
  _brown:	"#FFFAE6"
}

function onloader(){
  Page.start(); 
}
function onresizer(){
  Page.onresize(); 
}
if(window.addEventListener){ 
  window.addEventListener("load", onloader, false);
  window.addEventListener("resize", onresizer, false);
  window.addEventListener("orientationchange", onresizer, false);
}
else if (window.attachEvent){ 
  window.attachEvent("onload", onloader);
  window.attachEvent("onresize", onresizer);
  window.attachEvent("orientationchange", onresizer);
} 
else if (window.onload){
  window.onload = onloader;
  window.onresize = onresizer;
  window.onorientationchange = onresizer;
}

We can see that our Page Object is starting to show some functionality, and how the Browser Window has been manipulated using the DOM. We have changed the background color of the document as well as set some starting points for our elements that we have yet to create.

After the end of the Config Object are the onload and onresize functions, these could be contained in a seperate file as they are standalone functions, they are contained after the Config Object for ease of Code Management. As a programmer, everyone has their flavour of managing their code, there are some standards that we all follow, but when it comes to managing a large amount of files, keeping track of everything becomes a naming scheme and logistics nightmare if not thought of from the start.

You can see that we have a low level file with our configuration settings and a high level file defining our Page Object, this higher level file has used the files in the levels lower than it, but will not use files that are the same level as it if possible. With our Javascript being loaded by an index.html file, the DOM has taken care of the initial load of our Javascript where we have configured a Page Object to manage the Browsers DOM.

From this foundation we have a Configuration File to hold what will become Global Settings as well as a Page File that has become the Parent Placeholder of every Child Element we will create. In the next Lesson we will look at creating some visual output that the user can see by adding some Child DIV Elements to our Page.

From this start point we are now able to create everything else within our Javascript Files. We will load them via the HTML Script Tags as we did with our Config and Page Files, outside of that, everything becomes a Javascript only environment where we will eventually make AJAX calls to an API to deliver content to our Javascript Front End.

« »

Leave a comment

Your email address will not be published. Required fields are marked *