Seeking input... [UI Toolkit]

[NanoSector]

So I'm writing a UI toolkit for SMF. It will be widget-based.
https://github.com/Yoshi2889/smf-ui

It's fully written in OOP and will have to be used like that. It might look out of style but it ensures maximum portability and generally makes it really easy to extend it.

Structure:
Sources/
- SMFUI/
- - Interfaces/: Contains all interfaces upon which the base classes are based.
- - Widgets/: Contains all source-part widget files.
- - autoload.php: An autoloader for automatically loading the appropriate widget files.
- - Base.php: Some start up for the framework.

Themes/
- (theme name)/
- - SMFUI/: Contains all template-side widget files, which contain the actual HTML the widget will use.

Starting it all up:
Load the Base.php file, and call the init method in the Base class. It's static so you don't have to initialise the object first:

Code Select Expand

<?php

use SMFUI\Widgets;

require_once("SSI.php");
require_once("Sources/SMFUI/Base.php");
SMFUI\Base::init();

template_header();
I run "use SMFUI\Widgets;" here so I don't have to type SMFUI all the time. Using SSI in this sample file.

So, set up our first widget...

Code Select Expand

$cb = new Widgets\Catbar();
That's it. Boom. New widget created. The framework will do nothing with it by default.

So, lets do something with it.

Code Select Expand

// Order is important!
$cb->insertChild(new Widgets\Icon('help'));
$cb->insertChild(new Widgets\TextWidget('A new catbar!'));
echo $cb;
It will now insert a new Icon widget (with icon type "help"), then insert a TextWidget (with text "A new catbar!").
By running 'echo $cb;', we output the cat bar to the screen, with all child widgets.

The same, but with a roundframe...

Code Select Expand

// A roundframe.
$rf = new Widgets\Roundframe();
$rf->insertChild(new Widgets\TextWidget('Testing!'));
echo $rf;

We also have restricted widgets. Those are widgets that will only take certain other widgets. For example, a ButtonList will only take a ButtonListButton, as other widgets are simply not compatible. (I have yet to push this)

Code Select Expand

$bl = new Widgets\ButtonList();

// We create a new ButtonListButton with text "Test button!" and URL "http://simplemachines.org".
$b1 = new Widgets\ButtonListButton('Test button!', 'http://simplemachines.org/');

// This sets the CSS class "active" on the button, on top of the base classes it always has.
$b1->setAdditionalClasses("active");

// And we insert it.
$bl->insertChild($b1);

// We now insert the roundframe we created before. This will simply do nothing (as of yet).
$bl->insertChild($rf);

echo $bl;

Close off with a template_footer() call...

Code Select Expand

template_footer();

And here you go.

Full file:

Code Select Expand

<?php

use SMFUI\Widgets;

require_once("SSI.php");
require_once("Sources/SMFUI/Base.php");
SMFUI\Base::init();

template_header();

$cb = new Widgets\Catbar();

// Order is important!
$cb->insertChild(new Widgets\Icon('help'));
$cb->insertChild(new Widgets\TextWidget('A new catbar!'));
echo $cb;

// A roundframe.
$rf = new Widgets\Roundframe();
$rf->insertChild(new Widgets\TextWidget('Testing!'));
echo $rf;

$bl = new Widgets\ButtonList();

$b1 = new Widgets\ButtonListButton('Test button!', 'http://simplemachines.org/');
$b1->setAdditionalClasses("active");
$bl->insertChild($b1);

// We now insert the roundframe we created before. This will simply do nothing (as of yet).
$bl->insertChild($rf);
echo $bl;

template_footer();

Output is attached.

Thoughts? Suggestions?

[margarett]

The concept looks good That's a heck of a project you have in front of you, hope it works out well in the end

[NanoSector]

Thanks
Most work needs to be done in creating the actual widgets (which pretty much means porting other SMF's UI elements to widgets). Now that I have an idea of how it should be working, development can go much faster.