Creating the sidebar logic

Create some logic behind the debug hub sidebar in order to show the correct contents.

Advertisements

 

Now that we’ve got a fancy sidebar going on the debug hub, I’ll have to create some code to see the matching controls on the right hand side pane whenever I click one of the options in the sidebar.

In order to do that, I will have to adjust the “index.html” file using some code to handle the click on the sidebar item, and the loading of the controls into the content pane.

But before doing so I’m going to do some practical stuff.  First of all, I find the size of the window that is being created too small.  I’ll enlarge it a bit for some more screen real-estate.  Primarily to be able to debug.  By default, there is no console visible, nor can I inspect the different elements inside the electron application.  To activate all this I need to call the openDevTools() function on the main window.  This takes up a lot of space of the main window, and that’s the main reason why I’m making it bigger right now.  The adjusted code in index.js can be found below.

Schermafbeelding 2017-01-19 om 20.00.25.png

In order to create the sidebar logic we’ll be using jQuery.  What is it?  Here I’m quoting their website :

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Sounds cool doesn’t it?  It is!

Let’s look at the essence of what I did to make this happen.

To keep things tidy, I decided to create separate HTML files for the content of the pane.  That way, the “index.html” file won’t get too big.  jQuery will be responsible for getting the contents of the other html files and displaying the in the content pane at the right hand side of the application.

I’ve created a new folder called “html” in my project.  In it I will create 2 new html files for now :

  • messaging.html
  • home.html

I’ll come back to the contents in a minute.

Below, you can see the code of what I added just below the body tag in index.html.

Schermafbeelding 2017-01-20 om 18.48.01.png

First, it starts by obtaining a .js file from an internet address.  This file contains all of the jQuery code, and we’re importing it into our html file just by adding this 1 line of code.

http://code.jquery.com/jquery-1.4.min.js

You might have noticed in my HTML code earlier that I added some Id’s to some tags.  In the first place to some nav group items & secondly, the content pane:

Schermafbeelding 2017-01-19 om 20.07.38.png

Schermafbeelding 2017-01-19 om 20.07.45.png

The reason I did this, is because I want to be identifying them in my code in order to manipulate them at runtime.

The code between the script tags does all the magic.  Let’s start with the code at the bottom.  jQuery can search for objects in your DOM (document object model) by using the $ sign prefix.  That’s what it does here : it selects the entire document by executing using $document  and implements the ready event handler.  This anonymous function essentially does 2 things

  • Selects the “Home” navigator item by default by calling the switchPane method of the ManagementFunctions object.
  • Assigns a Click event handler to the #Messaging and #Home navigator items.  All they do is switch the panes, by also calling the switchPane method.

The management function object variable is something I created myself.  It’s just a container for some methods I defined.  The most important method is called switchPane.  It does 4 things :

  • It gets the URL for a html file which is to be used as the content of the content pane.
  • It effectively sets the content pane content.
  • It switches the class of the current nav item to reflect a non-selected item.
  • It switches the class of the new nav item to reflect a selected item.

Lastly it sets the “currentPane” variable to be able to keep track of the pane that’s currently selected.

The getContentURL method is a helper function that only returns a URL depending on the pane identifier I give it.

As discussed before, I added 2 extra HTML files to the project : home.html & messaging.html.  They are the content of the different sections of the application.  For now, the contents is really simple.

For the home.html file I just added a logo and 2 extra buttons . Just like the sidebar they are configured using Photonkit with the btn-large and btn-primary classes.

 

Schermafbeelding 2017-01-19 om 20.11.09.png

The messaging.html file contains a group of a label and a text area that belong together and a submit button, with btn-form and btn-primary classes.

Schermafbeelding 2017-01-19 om 20.11.26.png

The code of these files will be added in a later phase.The screenshots below show what the end result looks like.

Schermafbeelding 2017-01-17 om 23.17.17.pngSchermafbeelding 2017-01-17 om 23.17.31.png

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s