Difference between revisions of "PHP WinBinder: Text input"

From The Uniform Server Wiki
Jump to navigation Jump to search
(New page: {{Nav PHP WinBinder}} '''''Text and numeric input''''' Previous page covered very basic I/O this page looks at obtaining data (numeric and text) from a user. In addition I have thrown in ...)
 
m (Fixed box in Control Creation)
 
(One intermediate revision by the same user not shown)
Line 2: Line 2:
 
'''''Text and numeric input'''''
 
'''''Text and numeric input'''''
  
Previous page covered very basic I/O this page looks at obtaining data (numeric and text) from a user. In addition I have thrown in a little extra user output feedback.
+
The previous page covered very basic I/O. This page looks at obtaining data (numeric and text) from a user. In addition, I have thrown in a little extra user feedback.
  
Example 3 uses Example 2 as a template in reality there are only small changes.
+
Example 3 uses Example 2 as a template. In reality there are only small changes.
  
== Cotrol Creation ==
+
== Control Creation ==
 
Again we use this this function to create controls:
 
Again we use this this function to create controls:
 
{|
 
{|
|-
 
 
|<pre>
 
|<pre>
 
int wb_create_control (int parent, int ctlclass [, mixed caption [, int xpos [, int ypos [, int width
 
int wb_create_control (int parent, int ctlclass [, mixed caption [, int xpos [, int ypos [, int width
Line 15: Line 14:
 
</pre>
 
</pre>
 
|}
 
|}
I have have reduced it however there is an extra parameter '''style''' that we will be using :
+
I have reduced it, however there is an extra parameter, '''style''', that we will be using:
 
{|
 
{|
|-
 
 
|<pre>
 
|<pre>
 
handle = wb_create_control(parent,ctlclass,caption,xpos,ypos,width,height,id,style)
 
handle = wb_create_control(parent,ctlclass,caption,xpos,ypos,width,height,id,style)
 
</pre>
 
</pre>
 
|}
 
|}
 +
'''Style''' changes the look of a control. For example, WBC_BORDER will produce a 3-D look on a label.
  
Style changes either the look of a control for example WBC_BORDER will produce a sunken looks on a label.
+
Changes to label3 are as follows:
 
+
{|
Changes label3 as follows:
+
|<pre>
<pre>
 
 
$text  = " This is test 3 on two lines\n Sunken Label";
 
$text  = " This is test 3 on two lines\n Sunken Label";
$label3 = wb_create_control($mainwin, Label, $text,   5, 60, 140, 40, 103, WBC_BORDER);
+
$label3 = wb_create_control($mainwin, Label, $text, 5, 60, 140, 40, 103, WBC_BORDER);
 
</pre>
 
</pre>
 +
|}
  
or it can change a controls functionality see edit box below..
+
or it can change a control's functionality as in the edit box below.
  
 
'''''[[#top | Top]]'''''
 
'''''[[#top | Top]]'''''
Line 52: Line 51:
 
* Each EditBox has a unique ID 301,302
 
* Each EditBox has a unique ID 301,302
 
* handles are captured in variables $editbox1 and $editbox2 these are optional
 
* handles are captured in variables $editbox1 and $editbox2 these are optional
* You can find a components handle using it's ID for example '''wb_get_control($window, 301)'''
+
* You can find a component's handle using its ID. For example, '''wb_get_control($window, 301)'''
 
|}
 
|}
  
Line 66: Line 65:
 
|'''xpos,'''|| '''ypos''', '''width''' and '''height''' Tweak the values to position and size EditBox.  
 
|'''xpos,'''|| '''ypos''', '''width''' and '''height''' Tweak the values to position and size EditBox.  
 
|-
 
|-
|'''id'''|| A unique integer identifies a control. Start from 100 to avoid clashes. Say labels will be 100 push buttons 200 and edit boxes start at 300 etc
+
|'''id'''|| A unique integer identifies a control. Start from 100 to avoid clashes. Say labels will be 100, push buttons 200, and edit boxes start at 300, etc.
 
|-
 
|-
 
|'''style'''|| Optional if not provided the window will accept all characters. Setting style to WBC_NUMBER only characters 0 to 9 are excepted.
 
|'''style'''|| Optional if not provided the window will accept all characters. Setting style to WBC_NUMBER only characters 0 to 9 are excepted.
 
|}
 
|}
  
Place the above in section two of the template. Once the main window is created the two controls are created
+
Place the above in section two of the template. Once the main window is created the two controls are created.
  
 
'''''[[#top | Top]]'''''
 
'''''[[#top | Top]]'''''
Line 99: Line 98:
 
|-valign="top"
 
|-valign="top"
 
|
 
|
At this stage running the script will produce a window as shown on the right.
+
At this stage, running the script will produce a window as shown on the right.
  
 
The pushbuttons will perform what was specified for Example 2.
 
The pushbuttons will perform what was specified for Example 2.
  
Lets specify new functionality for the buttons.  
+
Let's specify new functionality for the buttons.  
 
   
 
   
 
'''''Button Specification'''''
 
'''''Button Specification'''''
* '''Apache''' When clicked changes label1 to display “Apache Port = 80” and display a grren square to right of edit box 1.  
+
* '''Apache''' When clicked changes label1 to display “Apache Port = 80” and displays a green square to right of edit box 1.  
 
* '''MySQL''' When clicked changes label2 to display “MySQL Port = 3306”
 
* '''MySQL''' When clicked changes label2 to display “MySQL Port = 3306”
 
* '''Alert''' When clicked changes both labels to what was entered in the text boxes. Adds or replaces green square with a red one.
 
* '''Alert''' When clicked changes both labels to what was entered in the text boxes. Adds or replaces green square with a red one.
Line 154: Line 153:
 
|}
 
|}
  
'''''[[#top | Top]]'''''
 
 
==== MySQL Button ====
 
==== MySQL Button ====
 
Handler code for MySQL button:
 
Handler code for MySQL button:
Line 172: Line 170:
 
* break exits switch
 
* break exits switch
 
|}
 
|}
 
'''''[[#top | Top]]'''''
 
  
 
==== Alert Button ====
 
==== Alert Button ====

Latest revision as of 14:21, 29 January 2010

 

UniServer 5-Nano
PHP WinBinder.

Text and numeric input

The previous page covered very basic I/O. This page looks at obtaining data (numeric and text) from a user. In addition, I have thrown in a little extra user feedback.

Example 3 uses Example 2 as a template. In reality there are only small changes.

Control Creation

Again we use this this function to create controls:

int wb_create_control (int parent, int ctlclass [, mixed caption [, int xpos [, int ypos [, int width
[, int height [, int id [, int style [, int param [, int ntab]]]]]]]]])

I have reduced it, however there is an extra parameter, style, that we will be using:

handle = wb_create_control(parent,ctlclass,caption,xpos,ypos,width,height,id,style)

Style changes the look of a control. For example, WBC_BORDER will produce a 3-D look on a label.

Changes to label3 are as follows:

$text   = " This is test 3 on two lines\n Sunken Label";
$label3 = wb_create_control($mainwin, Label, $text,  5, 60, 140, 40, 103, WBC_BORDER);

or it can change a control's functionality as in the edit box below.

Top

EditBox

EditBox is a small window where a user can enter text or numeric data.

Example 3 defines the following edit boxes:


$editbox1= wb_create_control($mainwin, EditBox, "80", 150, 20, 112, 20, 301, WBC_NUMBER);
$editbox2= wb_create_control($mainwin, EditBox, "Me", 150, 40, 112, 20, 302);


  • Each EditBox has a unique ID 301,302
  • handles are captured in variables $editbox1 and $editbox2 these are optional
  • You can find a component's handle using its ID. For example, wb_get_control($window, 301)

Parameters

parent handle to the WinBinder object $mainwin
ctlclass is the class of the control or object to be created EditBox
caption  A string (80,Me) sets the initial value. Use "" to display no value
xpos, ypos, width and height Tweak the values to position and size EditBox.
id A unique integer identifies a control. Start from 100 to avoid clashes. Say labels will be 100, push buttons 200, and edit boxes start at 300, etc.
style Optional if not provided the window will accept all characters. Setting style to WBC_NUMBER only characters 0 to 9 are excepted.

Place the above in section two of the template. Once the main window is created the two controls are created.

Top

Read whats entered

Data entered into an edit box is obtained using one of these two functions:

wb_get_value(handle)
wb_get_text(handle)

The value returned may be assigned to a variable for example:

 $text1 = wb_get_value($editbox1);
 $text2 = wb_get_text($editbox2);

Top

Interaction

At this stage, running the script will produce a window as shown on the right.

The pushbuttons will perform what was specified for Example 2.

Let's specify new functionality for the buttons.

Button Specification

  • Apache When clicked changes label1 to display “Apache Port = 80” and displays a green square to right of edit box 1.
  • MySQL When clicked changes label2 to display “MySQL Port = 3306”
  • Alert When clicked changes both labels to what was entered in the text boxes. Adds or replaces green square with a red one.

WinBinder 3.gif

Draw Rectangle

The following was taken from the manual:

bool wb_draw_rect (int target, int xpos, int ypos, int width, int height, int color [, bool filled [, int linewidth]])

Draws a filled or hollow rectangle. xpos and ypos are the coordinates of the upper-left corner, in pixels. width and height are the dimensions of the rectangle. color is a RGB color value. Set filled to FALSE to draw a border. In this case, linewidth sets the width of the border, in pixels. A linewidth of zero sets the width to 1 pixel. The first parameter, target, may be a WinBinder object, a window handle, a drawing surface or a bitmap.

Example 3 uses the following code:

wb_draw_rect($window,270,20,20,20,0x00FF00,TRUE);
color is defined as RGB 0x00FF00 is green
 
wb_draw_rect($window,270,20,20,20,RED,TRUE);
color is defined using a pre-defined constant RED

Top

Handler function - code

The handler function changes are as follows:

Apache button

Handler code for Apache button:

case 201:        // Apache button
 wb_set_text(wb_get_control($window, 101),"Apache Port = 80");
 wb_draw_rect($window,270,20,20,20,0x00FF00,TRUE);
 break;
  • When Apache Button is clicked case 201 (Button ID=201)is true.
  • The label text is updated with function wb_set_text(). The label handle is obtained using its ID (101)
  • A green rectangle is drawn using function wb_draw_rect()
  • break exits switch

MySQL Button

Handler code for MySQL button:

case 202:         // MySQL button
  global $label2; 
  wb_set_text($label2,"MySQL Port  = 3306");
  break;
  • When MySQL Button is clicked case 202 (Button ID=202)is true.
  • global $label2; Gives access to label 2 handle
  • The label text is updated with function wb_set_text(). The label handle is directly used
  • break exits switch

Alert Button

Handler code for Alert button:

case 203:        // Alert button
 global $label1;
 global $label2;

 global $editbox1;
 global $editbox2;

 $text1 = wb_get_value($editbox1);
 $text2 = wb_get_text($editbox2);
 
 wb_set_text($label1,"Apache Port = $text1");
 wb_set_text($label2,"MySQL Port  = $text2");
 wb_draw_rect($window,270,20,20,20,RED,TRUE);
 break;
  • When Alert Button is clicked case 203 (Button ID=203)is true.
  • global $label1; Gives access to label 1 handle
  • global $label2; Gives access to label 2 handle
  • global $editbox1; Gives access to edit box 1 handle
  • global $editbox2; Gives access to edit box 2 handle
  • Read content of exit box 1 into variable 1
  • Read content of exit box 2 into variable 2
  • Label text 1 is updated with content of edit box 1
  • Label text 2 is updated with content of edit box 2
  • A red rectangle is drawn using function wb_draw_rect()
  • break exits switch

Top

Test 3 Script

<?php
Include "../php/include/winbinder.php";        // Location Of Winbinder Library

//=== 1) Create main window ---------------------------------------------------
$mainwin = wb_create_window(NULL, AppWindow, "Test 3", 320, 240);

//=== 2) Create controls for the main window ----------------------------------

$editbox1= wb_create_control($mainwin, EditBox, "80", 150, 20, 112, 20, 301, WBC_NUMBER);
$editbox2= wb_create_control($mainwin, EditBox, "Me", 150, 40, 112, 20, 302);


$label1 = wb_create_control($mainwin, Label, "Apache Port = ", 5, 20, 112, 20, 101);
$label2 = wb_create_control($mainwin, Label, "MySQL Port  = ", 5, 40, 112, 20, 102);
$text   = " This is test 3 on two lines\n Sunken Label";
$label3 = wb_create_control($mainwin, Label, $text,    5, 60, 140, 40, 103, WBC_BORDER);

$button1 = wb_create_control($mainwin, PushButton, "Apache",   20, 120, 80, 22, 201);
$button2 = wb_create_control($mainwin, PushButton, "MySQL",   110, 120, 80, 22, 202);
$button3 = wb_create_control($mainwin, PushButton, "Alert",   200, 120, 80, 22, 203);

//=== 3) Assign handler function to the main window  --------------------------
wb_set_handler($mainwin, "process_main");       

//=== 5) Enter application loop -----------------------------------------------
wb_main_loop();                                  


//=== 4) Handler Function -----------------------------------------------------
function process_main($window, $id)             
{
  global $label1; 

  switch($id) { 

    case 201:        // Apache button
     wb_set_text(wb_get_control($window, 101),"Apache Port = 80");
     wb_draw_rect($window,270,20,20,20,0x00FF00,TRUE);
     break;

   case 202:         // MySQL button
     global $label2; 
     wb_set_text($label2,"MySQL Port  = 3306");
     break;

    case 203:        // Alert button
     global $label1;
     global $label2;

     global $editbox1;
     global $editbox2;

     $text1 = wb_get_value($editbox1);
     $text2 = wb_get_text($editbox2);
 
     wb_set_text($label1,"Apache Port = $text1");
     wb_set_text($label2,"MySQL Port  = $text2");
     wb_draw_rect($window,270,20,20,20,RED,TRUE);
     break;

   case IDCLOSE:                        // Constant IDCLOSE (8) predefined 
    wb_destroy_window($window);         // Destroy the window
    break; 
  }
}
?>

 


Script:

test_3.phpw

Run:

Navigate to folder

UniServer\plugins\winbinder\examples

Double click on test_3.bat

Top

Summary

This page and the previous one have covered basic controls for user input and output. I use the term basic loosely because with these controls alone you can produce powerful applications.

Depending on the complexity of your application you probably will want to divide it into logical sections.

The tab control is an excellent choice covered on the next page.

Top