Difference between revisions of "EDT:Writing a Rich UI application"

From Eclipsepedia

Jump to: navigation, search
(New page: The next sections outline a way to develop a Rich UI application. The IDE helps you to do the tasks quickly. For background information, see [http://www.eclipse.org/edt/papers/topics/egl...)
 
 
(27 intermediate revisions by one user not shown)
Line 1: Line 1:
The next sections outline a way to develop a Rich UI application. The IDE helps you to do the tasks quickly.  
+
This page contains code snippets for Rich UI applications. For background information, see [http://www.eclipse.org/edt/papers/topics/egl_web_technology.html Web technology for EGL Rich UI].  
  
For background information, see [http://www.eclipse.org/edt/papers/topics/egl_web_technology.html Web technology for EGL Rich UI].  
+
You can run each of the snippets that follow:  
 +
 
 +
#Create an EGL project for '''Web 2.0 client application with services'''.  
 +
#Copy the content of a given snippet to an EGL file named '''MyHandler''' and place that file in the package named '''client'''.
 +
#Run the handler in the Preview tab.
 +
#Change the content as you see fit and re-run the code.
 +
#Save the content elsewhere if you want to keep your changes, and try the next snippet.
 +
 
 +
Even if you're an efficiency expert, you can play.  
  
 
= Create a Handler type of stereotype RUIHandler  =
 
= Create a Handler type of stereotype RUIHandler  =
  
Consider a grid layout on the design surface:
+
Consider a grid layout on the design surface:  
  
 
[[Image:Gridlayout initial design.jpg]]  
 
[[Image:Gridlayout initial design.jpg]]  
  
Here is the related code:
+
Here is the related code:  
  
 
<source lang="java">
 
<source lang="java">
Line 37: Line 45:
 
</source>  
 
</source>  
  
When you request a Rich UI handler in the IDE, the Rich UI editor includes a grid layout of 3 columns and 4 rows.
+
When you request a Rich UI handler in the IDE, the Rich UI editor includes a grid layout of 3 columns and 4 rows.  
  
 
= Declare and display a set of widgets  =
 
= Declare and display a set of widgets  =
Line 47: Line 55:
 
The third column is present, but empty. <br>  
 
The third column is present, but empty. <br>  
  
Here is the preview and related code:
+
Here is the preview and related code:  
  
 
[[Image:Gridlayout without spanning.jpg]]  
 
[[Image:Gridlayout without spanning.jpg]]  
Line 85: Line 93:
 
   end
 
   end
 
end
 
end
</source>
+
</source>  
  
 
= Customize the display  =
 
= Customize the display  =
  
Widgets can span columns or rows:
+
Widgets can span columns or rows:  
  
 
[[Image:Gridlayout spanning design.jpg]]  
 
[[Image:Gridlayout spanning design.jpg]]  
Line 129: Line 137:
 
                     horizontalAlignment = GridLayoutLib.Align_Center },  
 
                     horizontalAlignment = GridLayoutLib.Align_Center },  
 
                     text="a button" };
 
                     text="a button" };
 
 
  
 
   function start()
 
   function start()
 
   end
 
   end
 
end
 
end
 
 
</source>  
 
</source>  
  
= Assign and code event handlers =
+
= Assign and code event handlers =
  
 
To assign an event handler:  
 
To assign an event handler:  
  
* Decide on an event such as OnChange or OnClick.
+
*Decide on an event such as OnChange or OnClick.  
* Add a name to the list of event handlers that respond to the event.
+
*Add a name to the list of event handlers that respond to the event.  
* Code the event handler.
+
*Code the event handler.
  
Here is the preview:
+
Here is the preview:  
  
 
[[Image:Gridlayout checkbox event.jpg]]  
 
[[Image:Gridlayout checkbox event.jpg]]  
Line 156: Line 161:
 
                     text = "a check box",  
 
                     text = "a check box",  
 
                     onChange ::= checkBox_response};
 
                     onChange ::= checkBox_response};
</source>
+
</source>  
  
 
If you use the Rich UI editor to change the myCheckBox declaration, you can press Ctrl-1 to add the following stub:  
 
If you use the Rich UI editor to change the myCheckBox declaration, you can press Ctrl-1 to add the following stub:  
Line 163: Line 168:
 
function checkBox_response(e Event in)  
 
function checkBox_response(e Event in)  
  
end</source>
+
end</source>  
  
Here is the updated application:
+
Here is the updated application:  
  
 
<source lang="java">
 
<source lang="java">
Line 186: Line 191:
 
   title = "MyHandler"}
 
   title = "MyHandler"}
  
    checkedCount int = 0;
+
  ui GridLayout{columns = 3, rows = 4, cellPadding = 4, children =[myLabel,
   
+
                myTextField, myCheckBox, myButton]};
    ui GridLayout{columns = 3, rows = 4, cellPadding = 4, children =[myLabel,
+
                    myTextField, myCheckBox]};
+
  
 
     myLabel TextLabel{layoutData = new GridLayoutData{row = 1, column = 1}, text = "a label: "};
 
     myLabel TextLabel{layoutData = new GridLayoutData{row = 1, column = 1}, text = "a label: "};
Line 197: Line 200:
  
 
     myCheckBox CheckBox{layoutData = new GridLayoutData{row = 2, column = 2},  
 
     myCheckBox CheckBox{layoutData = new GridLayoutData{row = 2, column = 2},  
                         text = "a check box", onChange ::= checkBox_response};
+
                         text = "a check box",  
 +
 
 +
                        /*****  reference an event handler for the check box onChange event *****/
 +
                        /************************************************************************/
 +
                        onChange ::= checkBox_response};
  
 
     myButton Button{ layoutData = new GridLayoutData{ row = 4, column = 1,
 
     myButton Button{ layoutData = new GridLayoutData{ row = 4, column = 1,
Line 207: Line 214:
 
     end
 
     end
 
    
 
    
 +
    /**************  event handler for the check box onChange event **********************/
 +
    /*************************************************************************************/
 
     function checkBox_response(e event)
 
     function checkBox_response(e event)
 
         myMessage string;
 
         myMessage string;
Line 217: Line 226:
 
     end
 
     end
 
end
 
end
</source>
+
</source>  
  
When you are attaching an event handler to a button, you typically use the OnClick event.
+
When you are attaching an event handler to a button, you typically use the OnClick event.  
  
Here is a preview and the related code, which shows how to add a new widget to the display:
+
Here is a preview and the related code, which shows one way to add a new widget to the page, but no longer has the check box onChange event:  
  
 
[[Image:Gridlayout button event.jpg]]  
 
[[Image:Gridlayout button event.jpg]]  
Line 254: Line 263:
  
 
   myCheckBox CheckBox{layoutData = new GridLayoutData{row = 2, column = 2},  
 
   myCheckBox CheckBox{layoutData = new GridLayoutData{row = 2, column = 2},  
                     text = "a check box", onChange ::= checkBox_response};
+
                     text = "a check box"};
 
    
 
    
 
   myButton Button{ layoutData = new GridLayoutData{ row = 4, column = 1,
 
   myButton Button{ layoutData = new GridLayoutData{ row = 4, column = 1,
 
                     horizontalSpan = 2,  
 
                     horizontalSpan = 2,  
 
                     horizontalAlignment = GridLayoutLib.Align_Center },  
 
                     horizontalAlignment = GridLayoutLib.Align_Center },  
                     text="a button", onClick ::= button_Response};
+
                     text="a button",  
  counter int; 
+
 
 +
                    /*****  reference an event handler for the button onClick event ****/
 +
                    /*******************************************************************/
 +
                    onClick ::= button_Response};
  
 
   function start()
 
   function start()
 
   end
 
   end
   
+
 
   function checkBox_response(e event)
+
   /**************  event handler for the button onClick event **************************/
      myMessage string;
+
   /*************************************************************************************/
      if (myCheckBox.selected == true)
+
        myMessage = "You said, \"Yes.\"";
+
      else
+
        myMessage = "You said, \"No.\"";
+
      end
+
      myTextField.text = myMessage;
+
   end
+
   
+
 
   function button_response(e event)     
 
   function button_response(e event)     
 
       ui.appendChildren([myHyperLink]);
 
       ui.appendChildren([myHyperLink]);
 
   end
 
   end
         
+
 
 +
  /************** a new widget definition *********************************************/
 
   myHyperlink HyperLink
 
   myHyperlink HyperLink
 
   {
 
   {
Line 287: Line 292:
 
   };     
 
   };     
 
end
 
end
</source>
+
</source>  
  
The code now includes a variable named <code>counter</code>, for use in the next section.
+
The code now includes a variable named <code>counter</code>, for use in the next section.  
  
 
= Write the on-construction function  =
 
= Write the on-construction function  =
  
The on-construction function is typically named <code>start</code>. The function might update the widgets, initialize variables, invoke a service, or schedule a job.
+
The on-construction function is typically named <code>start</code>. The function might update the widgets, initialize variables, invoke a service, or schedule a job.  
  
The example function changes a label text, initializes a counter, and schedules a job that increments the counter. The job begins when the on-construction ends. The job ends when the user clicks the button.
+
The example function changes a label text, initializes a counter, and schedules a job that increments the counter. The job begins when the on-construction ends. The job ends when the user clicks the button.  
  
Here is the preview and related code:
+
Here is the preview and related code:  
  
 
[[Image:Gridlayout job.jpg]]  
 
[[Image:Gridlayout job.jpg]]  
  
 
+
<br> <source lang="java">
<source lang="java">
+
 
package client;
 
package client;
  
Line 322: Line 326:
 
   title = "MyHandler"}
 
   title = "MyHandler"}
  
   counter int;
+
  /******** variable for use by the new job **********/
   
+
  /***************************************************/
 +
   counter int;  
 +
 
 
   ui GridLayout{columns = 3, rows = 4, cellPadding = 4, children =[myLabel,
 
   ui GridLayout{columns = 3, rows = 4, cellPadding = 4, children =[myLabel,
 
                     myTextField, myCheckBox, myButton]};
 
                     myTextField, myCheckBox, myButton]};
Line 333: Line 339:
  
 
   myCheckBox CheckBox{layoutData = new GridLayoutData{row = 2, column = 2},  
 
   myCheckBox CheckBox{layoutData = new GridLayoutData{row = 2, column = 2},  
                         text = "a check box", onChange ::= checkBox_response};
+
                         text = "a check box"};
 
    
 
    
 
   myButton Button{ layoutData = new GridLayoutData{ row = 4, column = 1,
 
   myButton Button{ layoutData = new GridLayoutData{ row = 4, column = 1,
Line 340: Line 346:
 
                     text="a button", onClick ::= button_Response};
 
                     text="a button", onClick ::= button_Response};
 
    
 
    
 +
 
 +
  /**********  declare the new job ***********************************/
 +
  /*******************************************************************/
 
   doThis Job{runFunction = myRunFunction};
 
   doThis Job{runFunction = myRunFunction};
 
    
 
    
 +
 +
  /********** create the run function for that job *******************/
 +
  /*******************************************************************/
 
   function myRunFunction()
 
   function myRunFunction()
 
       counter = counter + 1;
 
       counter = counter + 1;
Line 347: Line 359:
 
   end
 
   end
 
    
 
    
 +
  /************ expand the on-construction function ******************/
 +
  /*******************************************************************/
 
   function start()
 
   function start()
 
       counter = 0;
 
       counter = 0;
Line 353: Line 367:
 
   end
 
   end
 
      
 
      
  function checkBox_response(e event)
 
      myMessage string;
 
      if (myCheckBox.selected == true)
 
        myMessage = "You said, \"Yes.\"";
 
      else
 
        myMessage = "You said, \"No.\"";
 
      end
 
      myTextField.text = myMessage;
 
  end
 
   
 
 
   function button_response(e event)     
 
   function button_response(e event)     
 +
 +
      /****** cancel the job run when the user clicks the button *******/
 +
      /*****************************************************************/
 
       doThis.cancel();
 
       doThis.cancel();
 +
 
       ui.appendChildren([myHyperLink]);
 
       ui.appendChildren([myHyperLink]);
 
     end
 
     end
Line 376: Line 384:
 
   };     
 
   };     
 
end  
 
end  
</source>
+
</source>  
  
 +
<br>
  
 
+
<br>
+
  
 
<br> <br> <br><br> ♦ [[EDT:Code snippets|Code snippets main page]] <br>  
 
<br> <br> <br><br> ♦ [[EDT:Code snippets|Code snippets main page]] <br>  
  
 
[[Category:EDT]]
 
[[Category:EDT]]

Latest revision as of 14:49, 6 March 2012

This page contains code snippets for Rich UI applications. For background information, see Web technology for EGL Rich UI.

You can run each of the snippets that follow:

  1. Create an EGL project for Web 2.0 client application with services.
  2. Copy the content of a given snippet to an EGL file named MyHandler and place that file in the package named client.
  3. Run the handler in the Preview tab.
  4. Change the content as you see fit and re-run the code.
  5. Save the content elsewhere if you want to keep your changes, and try the next snippet.

Even if you're an efficiency expert, you can play.

Contents

[edit] Create a Handler type of stereotype RUIHandler

Consider a grid layout on the design surface:

Gridlayout initial design.jpg

Here is the related code:

package client;
 
import org.eclipse.edt.rui.widgets.GridLayout;
 
handler MyHandler type RUIhandler{
 
   // sets one or more widgets at the root of the widget tree.
   initialUI =[ui], 
 
   // specifies the function that runs initially and without user interaction.
   onConstructionFunction = start, 
 
   // identifies the CSS file that helps you to design the page.
   cssFile = "css/MyProject.css", 
 
   // sets the title that is displayed at the top of your browser or browser tab.
   title = "MyHandler"}
 
   ui GridLayout{columns = 3, rows = 4, cellPadding = 4, children =[]};
 
   function start()
   end
end

When you request a Rich UI handler in the IDE, the Rich UI editor includes a grid layout of 3 columns and 4 rows.

[edit] Declare and display a set of widgets

The grid layout now has four widgets in the first two columns:

Gridlayout without spanning design.jpg

The third column is present, but empty.

Here is the preview and related code:

Gridlayout without spanning.jpg

package client;
 
import org.eclipse.edt.rui.widgets.Button;
import org.eclipse.edt.rui.widgets.CheckBox;
import org.eclipse.edt.rui.widgets.GridLayout;
import org.eclipse.edt.rui.widgets.GridLayoutData;
import org.eclipse.edt.rui.widgets.GridLayoutLib;
import org.eclipse.edt.rui.widgets.TextField;
import org.eclipse.edt.rui.widgets.TextLabel;
import eglx.ui.rui.RUIHandler;
 
handler MyHandler type RUIhandler{
   initialUI =[ui], onConstructionFunction = start, 
   cssFile = "css/MyProject.css", title = "MyHandler"}
 
   ui GridLayout{columns = 3, rows = 4, cellPadding = 4, 
   children =[myLabel, myTextField, myCheckBox, myButton]};
 
   myLabel TextLabel{ layoutData = new GridLayoutData{ row = 1, column=1},
     text = "a label: " };
 
   myTextField TextField{ layoutData = new GridLayoutData{ row = 1, column = 2}, 
                          text = "a text field"};
 
   myCheckBox CheckBox{ layoutData = new GridLayoutData{ row = 2, column = 2 }, 
                          text="a check box" };
 
   myButton Button{ layoutData = new GridLayoutData{ row = 4, column = 1 }, 
                    text="a button" };
 
   function start()
   end
end

[edit] Customize the display

Widgets can span columns or rows:

Gridlayout spanning design.jpg

Here is the preview and related code:

Gridlayout spanning.jpg

package client;
 
import org.eclipse.edt.rui.widgets.Button;
import org.eclipse.edt.rui.widgets.CheckBox;
import org.eclipse.edt.rui.widgets.GridLayout;
import org.eclipse.edt.rui.widgets.GridLayoutData;
import org.eclipse.edt.rui.widgets.GridLayoutLib;
import org.eclipse.edt.rui.widgets.TextField;
import org.eclipse.edt.rui.widgets.TextLabel;
import eglx.ui.rui.RUIHandler;
 
handler MyHandler type RUIhandler{
   initialUI =[ui], onConstructionFunction = start, 
   cssFile = "css/MyProject.css", title = "MyHandler"}
 
   ui GridLayout{columns = 3, rows = 4, cellPadding = 4, 
   children =[myLabel, myTextField, myCheckBox, myButton]};
 
   myLabel TextLabel{ layoutData = new GridLayoutData{ row = 1, column=1},
     text = "a label: " };
 
   myTextField TextField{ layoutData = new GridLayoutData{ row = 1, column = 2,
      horizontalSpan = 2 }, text = "a text field"};
 
   myCheckBox CheckBox{ layoutData = new GridLayoutData{ row = 2, column = 2, 
      verticalSpan = 2 }, text="a check box" };
 
   myButton Button{ layoutData = new GridLayoutData{ row = 4, column = 1,
                    horizontalSpan = 2, 
                    horizontalAlignment = GridLayoutLib.Align_Center }, 
                    text="a button" };
 
   function start()
   end
end

[edit] Assign and code event handlers

To assign an event handler:

  • Decide on an event such as OnChange or OnClick.
  • Add a name to the list of event handlers that respond to the event.
  • Code the event handler.

Here is the preview:

Gridlayout checkbox event.jpg

Here is the changed declaration of myCheckBox:

myCheckBox CheckBox{layoutData = new GridLayoutData{row = 2, column = 2}, 
                    text = "a check box", 
                    onChange ::= checkBox_response};

If you use the Rich UI editor to change the myCheckBox declaration, you can press Ctrl-1 to add the following stub:

function checkBox_response(e Event in) 
 
end

Here is the updated application:

package client;
 
import org.eclipse.edt.rui.widgets.Button;
import org.eclipse.edt.rui.widgets.CheckBox;
import org.eclipse.edt.rui.widgets.GridLayout;
import org.eclipse.edt.rui.widgets.GridLayoutData;
import org.eclipse.edt.rui.widgets.GridLayoutLib;
import org.eclipse.edt.rui.widgets.TextField;
import org.eclipse.edt.rui.widgets.TextLabel;
import eglx.ui.rui.Event;
import eglx.ui.rui.RUIHandler;
 
handler MyHandler type RUIhandler{
   initialUI =[ui], 
   onConstructionFunction = start, 
   cssFile = "css/MyProject.css", 
   title = "MyHandler"}
 
   ui GridLayout{columns = 3, rows = 4, cellPadding = 4, children =[myLabel,
                 myTextField, myCheckBox, myButton]};
 
    myLabel TextLabel{layoutData = new GridLayoutData{row = 1, column = 1}, text = "a label: "};
 
    myTextField TextField{layoutData = new GridLayoutData{row = 1, column = 2}, 
                          text = "a text field"};
 
    myCheckBox CheckBox{layoutData = new GridLayoutData{row = 2, column = 2}, 
                        text = "a check box", 
 
                        /*****  reference an event handler for the check box onChange event *****/ 
                        /************************************************************************/
                        onChange ::= checkBox_response};
 
    myButton Button{ layoutData = new GridLayoutData{ row = 4, column = 1,
                     horizontalSpan = 2, 
                     horizontalAlignment = GridLayoutLib.Align_Center }, 
                     text="a button" };
 
    function start()
    end
 
    /**************  event handler for the check box onChange event **********************/
    /*************************************************************************************/
    function checkBox_response(e event)
        myMessage string;
        if (myCheckBox.selected == true)
           myMessage = "You said, \"Yes.\"";
        else
       	   myMessage = "You said, \"No.\"";
        end
        myTextField.text = myMessage;
    end
end

When you are attaching an event handler to a button, you typically use the OnClick event.

Here is a preview and the related code, which shows one way to add a new widget to the page, but no longer has the check box onChange event:

Gridlayout button event.jpg

package client;
 
import org.eclipse.edt.rui.widgets.Button;
import org.eclipse.edt.rui.widgets.CheckBox;
import org.eclipse.edt.rui.widgets.GridLayout;
import org.eclipse.edt.rui.widgets.GridLayoutData;
import org.eclipse.edt.rui.widgets.GridLayoutLib;
import org.eclipse.edt.rui.widgets.HyperLink;
import org.eclipse.edt.rui.widgets.TextField;
import org.eclipse.edt.rui.widgets.TextLabel;
import eglx.ui.rui.Event;
import eglx.ui.rui.RUIHandler;
 
handler MyHandler type RUIhandler{
   initialUI =[ui], 
   onConstructionFunction = start, 
   cssFile = "css/MyProject.css", 
   title = "MyHandler"}
 
   ui GridLayout{columns = 3, rows = 4, cellPadding = 4, children =[myLabel,
                    myTextField, myCheckBox, myButton]};
 
   myLabel TextLabel{layoutData = new GridLayoutData{row = 1, column = 1}, text = "a label: "};
 
   myTextField TextField{layoutData = new GridLayoutData{row = 1, column = 2}, 
                    text = "a text field"};
 
   myCheckBox CheckBox{layoutData = new GridLayoutData{row = 2, column = 2}, 
                    text = "a check box"};
 
   myButton Button{ layoutData = new GridLayoutData{ row = 4, column = 1,
                    horizontalSpan = 2, 
                    horizontalAlignment = GridLayoutLib.Align_Center }, 
                    text="a button", 
 
                    /*****  reference an event handler for the button onClick event ****/ 
                    /*******************************************************************/
                    onClick ::= button_Response};
 
   function start()
   end
 
   /**************  event handler for the button onClick event **************************/
   /*************************************************************************************/
   function button_response(e event)    
      ui.appendChildren([myHyperLink]);
   end
 
   /************** a new widget definition *********************************************/
   myHyperlink HyperLink
   {
      layoutData = new GridLayoutData{row = 4, column = 3},
      text = "Do more with EGL",        
      target = "_blank",
      href = "http://www.eclipse.org/edt/#gettingstarted"
   };    
end

The code now includes a variable named counter, for use in the next section.

[edit] Write the on-construction function

The on-construction function is typically named start. The function might update the widgets, initialize variables, invoke a service, or schedule a job.

The example function changes a label text, initializes a counter, and schedules a job that increments the counter. The job begins when the on-construction ends. The job ends when the user clicks the button.

Here is the preview and related code:

Gridlayout job.jpg


package client;
 
import org.eclipse.edt.rui.widgets.Button;
import org.eclipse.edt.rui.widgets.CheckBox;
import org.eclipse.edt.rui.widgets.GridLayout;
import org.eclipse.edt.rui.widgets.GridLayoutData;
import org.eclipse.edt.rui.widgets.GridLayoutLib;
import org.eclipse.edt.rui.widgets.HyperLink;
import org.eclipse.edt.rui.widgets.TextField;
import org.eclipse.edt.rui.widgets.TextLabel;
import eglx.ui.rui.Event;
import eglx.ui.rui.RUIHandler;
 
handler MyHandler type RUIhandler{
   initialUI =[ui], 
   onConstructionFunction = start, 
   cssFile = "css/MyProject.css", 
   title = "MyHandler"}
 
   /******** variable for use by the new job **********/
   /***************************************************/
   counter int;   
 
   ui GridLayout{columns = 3, rows = 4, cellPadding = 4, children =[myLabel,
                    myTextField, myCheckBox, myButton]};
 
   myLabel TextLabel{layoutData = new GridLayoutData{row = 1, column = 1}, text = "a label: "};
 
   myTextField TextField{layoutData = new GridLayoutData{row = 1, column = 2}, 
                          text = "a text field"};
 
   myCheckBox CheckBox{layoutData = new GridLayoutData{row = 2, column = 2}, 
                        text = "a check box"};
 
   myButton Button{ layoutData = new GridLayoutData{ row = 4, column = 1,
                    horizontalSpan = 2, 
                    horizontalAlignment = GridLayoutLib.Align_Center }, 
                    text="a button", onClick ::= button_Response};
 
 
   /**********  declare the new job ***********************************/ 
   /*******************************************************************/
   doThis Job{runFunction = myRunFunction};
 
 
   /********** create the run function for that job *******************/
   /*******************************************************************/
   function myRunFunction()
      counter = counter + 1;
      myTextField.text = counter;
   end
 
   /************ expand the on-construction function ******************/
   /*******************************************************************/
   function start()
      counter = 0;
      myLabel.text = "Count:";
      doThis.repeat(1000);    	
   end
 
   function button_response(e event)    
 
      /****** cancel the job run when the user clicks the button *******/
      /*****************************************************************/
      doThis.cancel();
 
      ui.appendChildren([myHyperLink]);
    end
 
   myHyperlink HyperLink
   {
      layoutData = new GridLayoutData{row = 4, column = 3},
      text = "Do more with EGL",        
      target = "_blank",
      href = "http://www.eclipse.org/edt/#gettingstarted"
   };    
end







Code snippets main page