Retired > 2.3-RC Snapshot Feedback and Issues - ARCHIVED

Bootstrap conversion notes

(1/2) > >>

Steve_B:
The attached file contains my notes for converting the pfSense user interface to use Bootstrap. It may be of some help to others, particularly pfSense package maintainers needing to convert their package web pages.

Please feel free to ask for help or clarification.

Steve_B:
New feature

The Form_Section class is used on almost every page:


--- Code: ---$form = new Form();
$section = new Form_Section("Module settings");

--- End code ---

It accepts two arguments, the title and (optionally) an ID.

I have extended the class to take a third argument, and added some defines to make its use more simple.

So this statement:


--- Code: ---$section = new Form_Section("Module settings", "modsettings", COLLAPSIBLE|SEC_CLOSED);
--- End code ---

will make the section collapsible, and will add a plus icon to the title bar (just like a dashboard widget). The initial state will be collapsed. Had I used SEC_OPEN, the initial state would have been open (not collapsed)

There are still a couple of things to work out in the styling so consider it experimental at this point.
You can currently see it in use on the diag_logs_filter.php page

Steve_B:
New feature (2)


* When composing XML files to be interpreted by pkg_edit.php, the textarea type now correctly processes rows and cols tags
* In rowhelpers, select and input elements respect the <width> tag. Note that the width specifies the number of bootstrap grid positions (not columns). Total number of width units must not exceed 10 on any row. The "Delete" button takes up two, so that leaves eight for the other row elements

Steve_B:
New feature 3

A new method has been introduced to the Form_Section class. addPassword() works the same as addInput() except that:


* It automatically adds a second password field for confirmation to the password element you specify
* The confirmation element will be named the same as the field you specify, but with "_confirm" appended
* If not blank, the value of the element is replaced by DMYPWD, which is defined as "********"
In the validation section of each page, the code will now be something like:

--- Code: ---if ($_POST['password'] != $_POST['password_confirm']) {
    $input_errors[] = gettext("The Password and its confirmation must match");
}


--- End code ---

And in the section where we write the new config:


--- Code: ---if (!$input_errors) {
    if ($_POST['password'] != DMYPWD) {
        $config['password'] = $_POST['password']);
    } else {
        // Sometimes it will be necessary to get the current setting and write it back out. Look at the config write
        // section to see how it is handled there.
        $config['password'] = $a_config['password'];
    }
}

--- End code ---
Or something like that. You get the idea.

These are the files that now make use of this scheme:

firewall_virtual_ip_edit.php
interfaces.php
interfaces_ppps_edit.php
services_captiveportal_vouchers.php
services_dyndns_edit.php
services_pppoe_edit.php
system_advanced_misc.php
system_advanced_notifications.php
system_hasync.php
vpn_l2tp.php
vpn_l2tp_users_edit.php
vpn_openvpn_client.php

Testing has been completed on these files. Other files may be converted later.

Steve_B:
setIsRequired()

The method setIsRequired() adds the attribute "required" to any input to facilitate browser validation of that element. It is just a shortcut for setAttribute("required", true) but provides a more consistent/convenient way of doing it.

Navigation

[0] Message Index

[#] Next page

Go to full version