Displaying uBrowser

There are several ways to display uBrowser in a page. They include displaying the browser in a div when the page loads, creating an empty div on the page with a button that loads the browser when clicked, and displaying the builder form that lets people choose their own display settings.

Displaying uBrowser on Page Load

To display a pre-built browser when the page loads, you need print the output of the function ubrowser() to the screen. The function prototype is:

<?php
function ubrowser($settings, $id = 'ubrowser') {
 
// Adds CSS and JS files.
  // Validates $settings.
  // Returns the HTML output that displays the uBrowser.
}
?>

When you call ubrowser(), you may pass it two arguments. The first, $settings, is an associative array of settings whose keys and appropriate values are listed on the page uBrowser Settings. The second, $id, is the ID of the div the function creates and fills with the uBrowser display. It defaults to ubrowser, and you should make sure it matches with the CSS selector you have set in $settings.

Displaying uBrowser on a Button Click

To display uBrowser in a div after the user clicks a button, you can use the two functions ubrowser_div() and ubrowser_button(). This technique is used in Ubercart's order edit screen where a button pops up a uBrowser div so the store admin can add products to an order. The functions are very basic:

<?php
function ubrowser_div($id = 'ubrowser', $message = 'uBrowser', $class = 'ubrowser-div') {
 
// Validates arguments.
  // Adds CSS and JS files.
  // Returns the HTML output that displays the div.
}
?>

When you call ubrowser_div(), you can specify the div's ID, a default message to put in it, and a CSS class to add to it. If you're happy with the defaults, a simple print ubrowser_div(); will do the trick!

<?php
function ubrowser_button($value, $settings, $name = NULL, $id = NULL) {
 
// Validates arguments.
  // Adds CSS and JS files.
  // Returns the HTML output that displays a button to load the browser.
}
?>

When you call ubrowser_button(), you can pass up to four arguments with only the first two being requred. You must pass $value as a string for the text of the button. You also must pass $settings, the same type of associative array described above for the ubrowser() function. You can optionally specify $name and $id if you want those attributes set on the button. The output here is actually an input element of type button whose onclick calls the Javascript loading function for the uBrowser.

Displaying uBrowser Through a Builder Form

The final way to display uBrowser is actually through displaying a form that lets the user build and display their own browser. This is the method used on the uBrowser administration page at admin/content/browser. This method requires you to print the form ubrowser_builder() to the screen along with a div for it to fill (which you can do easily with ubrowser_div()). To display the form, you have to use Drupal's function drupal_get_form():

<?php
 
print drupal_get_form('ubrowser_builder', $settings);
?>

Behold, you must pass this function two arguments, the first being the name of the form builder function (in our case, ubrowser_builder()), and the second being a settings array that differs from the previous two arrays. In the case of ubrowser_builder(), $settings is an associative array that contains either default values for the settings mentioned before or the boolean TRUE. If set to TRUE, the form function knows to display an input field so the user can choose the settings. A full view of display options may be seen in the screenshot on the page uBrowser Administration.

The administration page uses the following lines to build its output for display

<?php
  $output
.= drupal_get_form('ubrowser_builder', $settings) .'<br />'
          
. ubrowser_div('ubrowser', t('Make your choices and click display.'));
?>

Two additional settings are available in the ubrowser_builder() settings array. These are optionally the keys code whose value should be the CSS selector for an element to put PHP code into that will build a browser with the users choices and display which will change the value of the button the user clicks to display the browser.