Create a directory in your widgets directory named after your widget. It must be lower case and no spaces.
In our example, let’s call the directory something like “mywidget”. You will need a Controller class in the directory that extends the WidgetController and you should name it’s file “Controller.php”. The code should look like this: -
class MyWidgetController extends WidgetController
{
function Home()
{
$this->LoadWidget("mywidget", "Home");
}
}
Every widget controller should have a Home() function in it, as this is looked for and called by Orqi when it tries to run or call a widget.
The LoadWidget() function in the code is the equivalent of the LoadComponent() function in the Controller superclass and you use it to return HTML to the user. It takes in the current widget name and the component name you are calling.
The HTML templates for the widgets should be put in the widget directory with the controller and they should be prefixed with an underscore, much the same as components.
<h3>My Widget</h3> <p>Example HTML stuff.</p> <p>You can even say hi to <?=$this->session->user->GetUsername()?>, if they are logged in</p>
If you copy the above code, create a file called “_Home.php” in your widget directory and put the code in it that’s pretty much all you need to do to have a functioning widget working.
Running the Widget
If you go back to the main project, in any template add the following HTML/PHP
<? $this->LoadComponent("WidgetContainer", "mywidget"); ?>
Linking to screens in widgets
The WidgetController actually provides support for constructing your links in your widget html. If you use MakeWidgetLink() you can provide links for users that will keep them within the bounds of the widget and you can still access MakeLink() if you want to send users to brand new pages altogether.
<p><a href="#" onclick="<?=$this->MakeWidgetLink('mywidget', 'anotherpage')?>">Go to another screen!</a></p>
OK in typical Orqi fashion, for every action we expect to run in a controller there needs to be a function. “mywidget” tells Orqi to look for the “mywidget” directory in the “_widgets” directory and look for “Controller.php”.
“Anotherpage” tells Orqi to have a look in the controller for a function called “Anotherpage” and in that function we can execute our commands and display view, etc.
function Anotherpage()
{
$this->LoadWidget("mywidget", "Anotherpagetemplate");
}
As you can see the LoadWidget() function is going to look for a template called “_Anotherpagetemplate.php”. If you create that file and paste the following code into it then you will have a working copy of a widget with links.
Notice that the new screen has a link back to the Home screen.
<h3>My Widget</h3>
<p>Another page</p>
<p><a href="#" onclick="<?=$this->MakeWidgetLink('mywidget', 'home')?>">back home</a></p>
If you try the widget again you will notice that you can now link between the screens.
Quick Word On Forms
Just a quick word on posting forms in widgets. The supporting javascript that is loaded with the widget divs in the “WidgetContainer” component comes with a PostForm function that will submit the request for you without loading an entirely new page.
All you have to remember is the following (see the code below)
- set the onsubmit attribute to “return false;”
- the action should be set to where you would normally post the form to (at the moment you should set it yourself)
- the submit button needs to call the PostForm() function in its onclick attribute
<form
method="post"
action="/widget/mywidget/somefunction.html"
id='mywidget_form'
onsubmit="return false;">
<button onclick="javascript: rh_mywidget.PostForm('mywidget_form');">Submit</button>
</form>
