Introduction to GUI Library for Sitemagic CMS

Sitemagic CMS comes with a GUI library with some of the most common GUI controls, and some more specialized controls. The image below demonstrates some of the different GUI controls.


The following GUI controls are currently available in the GUI library:
  • Tree structure (used to display folders in the image above)
  • Grid (used to display files in the image above)
  • Link button (used for all buttons in the image above)
  • Fieldset (used to frame folders and files in the image above)
    The Fieldset is more than a GUI control - it is used to create sub forms.
  • Input elements
     - input field and textarea
     - file field (for uploading files)
     - password field
     - checkboxes
     - radio buttons
     - buttons
  • Drop down menu (option menu for both single and multi selections)

Working with the GUI library in code is really easy - see the following example:
// Create an input field with a unique ID (MyExtensionSearchBox)
$input = new SMInput("MyExtensionSearchBox", SMInputType::$Text);
$input->SetAttribute(SMInputAttribute::$Style, "width: 150px");
$input->SetAttribute(SMInputAttribute::$MaxLength, "30");

// Create a link button with a unique ID (MyExtensionSearchButton)
$button = new SMLinkButton("MyExtensionSearchButton");

// Render (generate) the HTML for the input field and link button
$output = "";
$output .= $input->Render();
$output .= $button->Render();

// Add search result to output if search button was clicked
if ($button->PerformedPostBack() === true)
    // Search and add result to output here..