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.

/GUI/GUIComponents.png

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");
$button->SetIcon(SMImageProvider::GetImage(SMImageType::$Search));
$button->SetTitle("Search");

// 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..
}