SCZF Tutorial - Creating Windows

This tutorial will show how you can create a window with SCZF.

The complete source-code is available at the end of the page.

1) Make sure that you already installed SCZF

If you have not installed SCZF yet, check the Installation page.

2) Create a new action and view

On your controller, create a new action and the respective view for it. We are only going to modify the view, so you can leave the controller's action empty.

3) Include scripts

On your view file, add the following code:

<?php
// Include SmartClient scripts
echo $this->ScGeneral()->includeScripts( 'js/isomorphic/' );

This is a function that automatically include the SmartClient scripts, just make sure to set the correct path.

3) Create the content

Add the following code to the script:

// Add htmlFlow with content
echo $this->ScHtmlFlow()->create( 'elementID' , 'Text text text!' );

A htmlflow is used to hold content. In this part of the script, we basically draw a htmlFlow with the following content:

ID: elementID
Content: Text text text!

4) Create the window

Add the following code to the script:

// Add item and windows
$this->ScWindows()->addItem( 'elementID' );
echo $this->ScWindows()->create( 'windowID' , 'Title of the Window' , 640 , 480  );

Now, as we have the content, we can create the window.

On the first line, we add an item. Note that when you add a item, you use the ID of the element that created on step 3.

And finally, we draw the window with the following attributes:

ID: windowID
Title: Title of the Window
Width: 640
Height: 480

Loading content from an external URL
After the height parameter, you can add a URL to load the content ( instead of creating the content with a htmlFlow or other component ). Example:
echo $this->ScWindows()->create( 'windowID' , 'Title of the Window' , 640 , 480 , '/controller/action/anything' );

5) Full source code

Here it is the full source code of the view used in this tutorial:

<?php
// Include SmartClient scripts
echo $this->ScGeneral()->includeScripts( 'js/isomorphic/' );

// Add htmlFlow with content
echo $this->ScHtmlFlow()->create( 'elementID' , 'Text text text!' );

// Add item and windows
$this->ScWindows()->addItem( 'elementID' );
echo $this->ScWindows()->create( 'windowID' , 'Title of the Window' , 640 , 480  );
	
?>