Scripts And Components
In Week 2, we took a HTML page and split it up into several smaller .bxm pages in order to make the individual pieces smaller and easier to manage. However, all of these smaller files were still part of we call the "View". The view is the part which the user sees and with which they interact. There is more code, however, that drives a website than just the view and we want to separate that into its own files. This is called Separation of Concerns ( https://en.wikipedia.org/wiki/Separation_of_concerns ).

In BoxLang, the view layer is typically found in .bxm files. BXM stands for BoxLang Markup. Other formats include .bxs files which are scripts which generally process data, are meant to be run all at once, and don't have a large visual component. The last are BoxLang classes. These end in .bx and are typically a collection of functions which are called by other files to do a job. The tag / component syntax at which we've been looking is primarily used in templates. The other formats use almost exclusively a different syntax called script.

What does a BoxLang class look like? At its simplest, a CFC looks like this:


class {
// Place your content here
}
There are no <> in sight. The class keyword is the first thing in the file followed by {. The very end of the file is } which indicates the end of the class.

Inside the component {}, there are functions which would look like this.

class {
    function myFunction(){
    }

    function anotherFunction(){
    }
}
There can technically be any number of functions in your class but convention and "best practices" typically say to have no more than 10. That's a guideline, not a "law".

The first thing we need to do is "connect" the cfm and the cfc. This way, the cfm can access functions in the cfc and display the results. To do that, we assign the component to a variable in the bxm. This example assumes that the class is in the same folder as the bxm which is not always (actually, not usually) the case but it is a good place to start.

        <bx:set myComponent = createObject("myComponent") />
		The product of my two numbers is <bx:output>#mycomponent.multiplyTwoNumbers(5,7)#</bx:output>
Back in our component, we would then create a function called "multiplyTwoNumbers" that accepted 2 arguments and returned the product. It might look like this:

class {
    function multiplyTwoNumbers(required numeric firstNum, required numeric secondNum){
			return firstNum * secondNum
    }
}
In the above component, the function multipleTwoNumbers accepts two arguments.

firstNum is required meaning that the function HAS to receive it or it will throw an error. It also has to be a number, or be able to be converted to a number, or it will throw an error. This means that the string "5" will still be accepted but the string "fish" will throw an error.

secondNum is the same as first num - required and numeric.

return firstNum * secondNum <--- this means to multiply the two numbers together and return the product to the place that called it. In this case, this is the cfm page from where it was called.


Exercise: In the exercises folder, edit the file called "component.bxm" which is a template page and myComponent.bx which is a class. In component.bxm, make a form that accepts 3 numbers. When the form is submitted, send the three numbers to a function in myComponent and display the product of the three numbers on the page.