Save and cancel component

Back to the Cookbook

Contents 1 Introduction 2 The Component 3 Pros 4 Cons 5 Códigos 6 Utilization

Introduction

In this tutorial we are going to create a very simple component that will show 2 buttons. A Save and a Cancel button, very usefull for pages where the user is allowed to change data or cancel the edited data.

The Component

Basicaly this component uses two other components: TPanel and TImageButton. The TPanel is just a container to show the two buttons side by side. Each button has it's own skin to make it easy a customization.

Pros

• Maintanability - Just edit the component and the changes are reflected in every page that uses it.
• Customization - Each button has it's own skin, making it easy to change the images for each button.
• Efficiency - With a small line of code you insert the component in any page.

Cons

• You must use the same method names for the OnClick events you define in the component buttons.

Códigos

Create a folder with the name you want inside the protected folder. I called mine Custom. Put the .php and the .tpl files that will be created bellow inside this folder. For the skins, create a themes folder in the root of your prado application and inside that folder your create another one with the name of your theme. My only theme is default. All the images, .css and .skin files stays in this folder. So, the structure is:

+ pradoApplication
|- assets
|+ protected
||- Custom
|+ themes
||- default

That's it! Hands on! Component class code:

<?php
/**
 * MySaveCancelPanel class file
 * @package Application.Custom
 * @author João Marques <joao@jjmf.com>
 */
 
 
/**
 * MySaveCancelPanel class
 * @package Application.Custom
 * @author João Marques <joao@jjmf.com>
 */
class MySaveCancelPanel extends TTemplateControl
{
}
?>

Simpler impossible right? There are more docBlock than php code there... :)

Templare (.tpl) code:

<com:TPanel HorizontalAlign="Center">
    <com:TImageButton ID="ButtonSave" SkinID="ButtonSave"
        AlternateText="<%[Salvar]%>"
        OnClick="Page.saveButtonClicked" ValidationGroup="Group1" /><%[Salvar]%> &nbsp;&nbsp;
	<com:TImageButton ID="ButtonCancel" SkinID="ButtonCancel"
        AlternateText="<%[Cancelar]%>"
        OnClick="Page.cancelButtonClicked" /> <%[Cancelar]%>
</com:TPanel>

Like I said, it's a TPanel component that shows 2 centralized TImageButtons side by side. The only difference is that the Save Button will active the verification of every component in the page that uses "Group1" in the "ValidationGroup" attribute.

The buttons OnClick events will fire methods that you must implement in your page classes. Don't forget to use Page. before the command name!

Here is the .skin file:

<com:TImageButton SkinID="ButtonSave" ImageUrl="themes/default/button_ok.png" />
<com:TImageButton SkinID="ButtonCancel" ImageUrl="themes/default/button_cancel.png" />

Utilization

To use the component, insert this line in your pages:

<com:MySaveCancelPanel />

Thats all!