Skip to content

View Controllers

Jump to bottom
Arthur Guiot edited this page Sep 16, 2018 · 7 revisions

What are View Controllers?

View Controllers are classes that will control views. Views are like pages for your app, you can see them as individuals <body> tags. They use the display: block property, so if you have a flexbox grid, or something else, make sure you create another container in order to display everything correctly.

Default structure

Here is the default structure of a View Controller:

class MainController extends P.ViewController { // name your controller as you want
	willShow(sender = "Main") {
		// perform action when the controller is showing up
	}
	willDisappear(sender = "Main") {
		// perform action when the controller is disappearing
	}
        preload() {
 		// Do stuff that doesn't require DOM interaction
 	}
        onPipelineChange(pipeline) {
            // Do something when the pipeline changed
        }
        prepareForSegue(nextVC) {
            // Do something with the next view controller before transition occurs
        }
}

All of the method are optional but it's recommended to use them

Methods and Properties

Methods and properties of the class can be accessed using this. Here is a list of the default methods and properties:

  • this.view: It's the element where your view is. You can search within this element using .querySelector().
  • this.viewName: The name of the current view
  • this.views: This is a list of elements that are considered as views.
  • this.viewNames: This is a list of all views' name
  • this.mountGroup(el, ObjectClass): This method will help us mount Groups
  • this.mountGroups(els, ObjectClass): This method will help us mount multiple Groups
  • this.pipeline: It's an object referring to P.pipeline, see Manage Data

Define a view (HTML)

To define the name and the element of view, you have 2 options: HTML or JS, here I'll show you the HTML way.

We'll start by creating <div> element and we'll add the protype attribute to it:

<div protype="myView">
    <!-- View Content -->
</div>

Now, we'll need to associate our Controller to our view:

To do that, we'll use the autoMount() method. It will take all the controllers as input, and will associate them with the correct element:

P.autoMount(MainController, ...) // add as much controllers as you have views

⚠️ Make sure you give your controllers in the order you placed the elements in the DOM

Define a view (JS)

As I said earlier, to define the name and the element of view, you have 2 options: HTML or JS, and in this part, I'll show you the JS option.

We'll start by creating <div> element:

<div class="myView">
    <!-- View Content -->
</div>

Now, we'll need to associate our Controller to our view:

To do that, we'll use the mount() method. Here is how it work:

P.mount([
   "myView", // the name of your view
   document.querySelector(".myView"), // the view element
   MainController // your controller
], ...) // add as much views as you want

Set the original view.

The original will be the view that shows up when your user is opening your app or visiting your website.

To set the original view, you'll need to add this line at the end of your JS file:

P.set("myView") // just put one of your view's name

Next: Transitions

⚠️ Have a question? An issue? Or anything you want to report or ask? Create a new issue or tweet me

Clone this wiki locally