Page Elements

In the last lesson we looked at triggering the onload of our Page Object with the use of some Core Functions and some settings within our Config Object. Many of you will be able to expand from this and go your own way, but there is a little more to the puzzle than just laying out a Page Object, we will see this as we begin to Initialise Element Objects within our Page Environment.

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';
}

We already investigated setting the Styles of the Core document body, these were the HTML Tags that we left empty previously that we have used Javascript to manipulate by using the Browser DOM. Before we expand on this, we discussed how the load of the CSS had an impact on the layout of the site in the onload phase. With the slight delay, the link to the CSS was put in the index.html file.

<link id="mindmap" type="text/css" rel="stylesheet" href="styles/mindmap.css">

Lets have a look another reason why we get a blink type lag on our display of elements.

* {
	padding: 	0;
	margin: 	0;
}

The CSS we are creating is going to be as minimal as possible, leaving most of the object creation to the Javascript and the objects creation at run time. Our goal is to develop a font end that will get its data by making API calls that can be bundled up into a pure Javascript Front End that will work on Desktops as well as Mobile and Tablet Devices. We have started with a strict element boundary because we are going to manage the placement of our elements within our screen space.

By setting the default padding and margin to zero, we can be assured the top left placement of an object is where it is expected to be. Later we will discuss how we use a container and inner container to manage the correct display of objects within our screen space on an x/y axis.

We are going to create the first of these elements within the Page Objects structure. This will create a body for all the child elements to attach to. We are also going to be using AJAX or some Fetch calls to an API to get content to fill our display, some elements will need to be created to provide an area to give a response to the user.

setElements: function() {
	this._elements.mindmapinner = document.createElement("div");
	this._elements.mindmapinner.id = "mindmapinner";
	this._elements.mindmapinner.style.border = '1px solid transparent';
	this._elements.mindmapinner.style.position = 'relative';
	this._elements.mindmapinner.style.overflow = "hidden";

	this._elements.mindmap = document.createElement("div");
	this._elements.mindmap.id = "mindmap";
	this._elements.mindmap.style.padding = "10px";
	this._elements.mindmap.appendChild(this._elements.mindmapinner);

	document.body.appendChild(this._elements.mindmap);
}

Doubling up on your output may seem like a strange concept to many, but lets investigate a little. Above we have created two elements, by attaching the main element to the document.body we have attached the second element to the first.

Setting the default margin and padding to zero allowed us to control the output of our main elements display. Without going into this too much, the is a parent/child relationship of a single container and its inner. they are always displayed together and somewhat reliant on each other for the correct display of your objects.

Above you can see the parent container is mindmap and has an ID set at mindmap.id. This is appended to the document.body element. The only style we have set here is a padding of ten pixels that will directly impact the inner container keeping a ten pixel border between the parent element and the inner child element.

With our inner child element we set a solid lined border of one pixel wide with no color at all, We do this in case we want to view the borders of our objects when they are created. To remove a border of 1px puts your objects display co-ordinates out by two pixels, one for either side of the object, this can cause your objects to misalign slightly in final display output. We account for this by always having a border, whether we can see it or not. A positive to this is using styles to change the colors to indicate necessary actions required by a user.

Lastly we set our Overflow to hidden. Everything that pushes outside of the inner display of the Page will be hidden from the dislay. We now have a full boundary that all our child elements can fill in. If you were to display This now, the window would have no width and height.

What we need now is some parent elements to display our functional web site. We have pre planned a little and thought about what we wanted to do, and that was a Mind Map of some sort that was clickable/tap-able and usable by changing the orientation of a phone or within a desktop browser.

So, we need a Panel to display a User Manageable Input and Space to Explain Display Objects, and we need a Display Panel in which to display our User Interactive Output of data that will be fed to the Front End Script by API Calls.

setElements: function() {
	this._elements.mindmappanelinner = document.createElement("div");
	this._elements.mindmappanelinner.id = "mindmappanelinner";
	this._elements.mindmappanelinner.style.border = '1px solid #888';
        this._elements.mindmapdisplayinner.style.borderRadius = '20px';
	this._elements.mindmappanelinner.style.position = 'relative';
		
	this._elements.mindmappanel = document.createElement("div");
	this._elements.mindmappanel.id = "mindmappanel";
	this._elements.mindmappanel.style.width = "27.6%";
	this._elements.mindmappanel.style.cssFloat = "left";
	this._elements.mindmappanel.appendChild(this._elements.mindmappanelinner);

	this._elements.mindmapinner = document.createElement("div");
	this._elements.mindmapinner.id = "mindmapinner";
	this._elements.mindmapinner.style.border = '1px solid transparent';
	this._elements.mindmapinner.style.position = 'relative';
	this._elements.mindmapinner.style.overflow = "hidden";
	this._elements.mindmapinner.appendChild(this._elements.mindmappanel);
	this._elements.mindmapinner.appendChild(this._elements.mindmapdisplay);

	this._elements.mindmap = document.createElement("div");
	this._elements.mindmap.id = "mindmap";
	this._elements.mindmap.style.padding = "10px";
	this._elements.mindmap.appendChild(this._elements.mindmapinner);

	document.body.appendChild(this._elements.mindmap);
}

The same principles apply, we have created an outer and inner container. Using the outer container we define our position, width, minimum height and so on, to keep our elements size and placement defined within our main parent element. This will become more apparent as we place elements on an x/y display window. Again a border is set and position set relative to the parent element except this time we have defined the inner to have a colored border.

setElements: function() {

	this._elements.mindmapdisplayinner = document.createElement("div");
	this._elements.mindmapdisplayinner.id = "mindmapdisplayinner";
	this._elements.mindmapdisplayinner.style.border = '1px solid #888';
	this._elements.mindmapdisplayinner.style.borderRadius = '20px';
	this._elements.mindmapdisplayinner.style.position = 'relative';
	this._elements.mindmapdisplayinner.style.overflow = 'hidden';
	this._elements.mindmapdisplayinner.style.margin = "0 auto";

	this._elements.mindmapdisplay = document.createElement("div");
	this._elements.mindmapdisplay.id = "mindmapdisplay";

	this._elements.mindmapdisplay.style.width = "71.6%";

	this._elements.mindmapdisplay.style.cssFloat = "right";


	this._elements.mindmapdisplay.appendChild(this._elements.mindmapdisplayinner);

	this._elements.mindmapinner = document.createElement("div");
	this._elements.mindmapinner.id = "mindmapinner";
	this._elements.mindmapinner.style.border = '1px solid transparent';
	this._elements.mindmapinner.style.position = 'relative';
	this._elements.mindmapinner.style.overflow = "hidden";
	this._elements.mindmapinner.appendChild(this._elements.mindmappanel);
	this._elements.mindmapinner.appendChild(this._elements.mindmapdisplay);

	this._elements.mindmap = document.createElement("div");
	this._elements.mindmap.id = "mindmap";
	this._elements.mindmap.style.padding = "10px";
	this._elements.mindmap.appendChild(this._elements.mindmapinner);

	document.body.appendChild(this._elements.mindmap);
}

Repeating this for a right hand display window we set an outer and inner boundary and again set the inner to have a colored border. The output of the display will look flat as we have no child elements to fill our Panel or Display, although as you can see below we have two border in dark grey color #888 on a background color we set to the document body #111.

This is our basic Page Object, from here we will initialise and prepare other objects that we will create to use within our Panel and Display Elements and demonstrate how we can manipulate them through the Page._elements Object Stack that we have created in the Page Object.

« »

Leave a comment

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