Neoan3 Frame

Settings for your project

At the heart of Neoan3's ideology is abstraction. Abstraction empowers creators to hone in on an ongoing issue without having to review thousands of lines of code that has nothing to do with it. Frames allow for global control over the project. Whenever routing in a ctrl.php file, you declare the frame that the component uses.

How to create a frame

Much like with anything in Neoan3 it's easier to use the neoan3-cli tool. Using the following command will generate a new frame:

neoan3 new frame [frame-name]

How to use a Frame

The new frame will appear in the "frame" folder in the project. Typically the folder will contain a php file with the name that you gave the frame. The file itself will not contain a lot of code in the beginning. With the exception of a single empty class extending Serve. While this seems anti-climactic, what is important is that your frame has now been set up to serve up information to Neoan3.


As an example, let's set up a component named Test.

        
            namespace Neoan3\Frame;

            use Neoan3\Apps\Ops;
            use Neoan3\Core\Serve;


            class Test extends Serve
            {
                // you can overwrite public methods of \Core\Serve
                function output($params = [])
                {
                    // auto-generate title-tags depending on current route
                    $this->addHead('title',preg_replace('/[A-Z]/',' {{main}}',ucfirst(current_endpoint)));

                    // In most scenarios, you probably want to execute the core's render function
                    parent::output($params);
                }

                function constants()
                {
                    return [
                        'base' => [base],
                        'link' => [
                            [
                                'sizes' => '32x32',
                                'type' => 'image/png',
                                'rel' => 'icon',
                                'href' => 'asset/neoan-favicon.png'
                            ]
                        ],
                        'js' => [
                            ['src' => path .'/frame/test/main.js', 'data' => ['base' => base]]
                        ],
                        'meta'       => [
                            ['name' => 'viewport', 'content' => 'width=device-width, initial-scale=1']
                        ],
                        'stylesheet' => [
                            '' . base . 'frame/test/index.css',
                        ]
                    ];
                }
            }
        
    

As you see from the above we have set up the component so that way it will not only have the title reflect in head tag the name of the component. In addition, we've set up a constants function that allows us to set global configuration as an array.

Global configuration

Instead of using single Core\Serve method calls to set variables, one can define configuration variables on the frame-level using an associative array of arrays. These arrays are always representations of Core\Serve methods (e.g. 'meta' => Serve->addToHead() ):

js-section

Each array should have "src" and can have "data" and "type". Using "data" will provide possibility to use the template engine to substitute key-value pairs. The result will be rendered into the DOM. Omitting this attribute will lead to an inclusion of the file.

stylesheet-section

Accepts an array of stylesheet locations to be included in every execution of a route-component.

meta-section & link section

Generates meta- or link-tags using the provided key-value combination(s) as attributes.

['name' => 'viewport', 'content' => 'width=device-width, initial-scale=1']

=>

<meta name="viewport" content="width=device-width, initial-scale=1">