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

From Eclipsepedia

Jump to: navigation, search
(Customize the display)
 
(11 intermediate revisions by one user not shown)
Line 1: Line 1:
The next sections outline a way to develop a Rich UI application.  
+
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:  
  
You can use these snippets to become familiar with EGL Rich UI:
+
#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'''.  
#Create an EGL project for client and services.  
+
#Copy the content to an EGL file named MyHandler and place that file in the package named '''client'''.  
+
 
#Run the handler in the Preview tab.  
 
#Run the handler in the Preview tab.  
#Change the content as you see fit and re-run the code.
+
#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 are an efficiency expert, you can play.  
+
Even if you're an efficiency expert, you can play.  
  
 
= Create a Handler type of stereotype RUIHandler  =
 
= Create a Handler type of stereotype RUIHandler  =
Line 142: Line 141:
 
   end
 
   end
 
end
 
end
</source>
+
</source>  
  
 
= Assign and code event handlers  =
 
= Assign and code event handlers  =
Line 274: Line 273:
 
                     /*******************************************************************/
 
                     /*******************************************************************/
 
                     onClick ::= button_Response};
 
                     onClick ::= button_Response};
 
 
  /*** added a variable for use in a later example ***/
 
  /***************************************************/
 
  counter int; 
 
  
 
   function start()
 
   function start()
Line 300: Line 294:
 
</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  =
Line 332: 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 343: 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 351: Line 347:
 
    
 
    
 
    
 
    
   /**********  declare a new job *************************************/  
+
   /**********  declare the new job ***********************************/  
 
   /*******************************************************************/
 
   /*******************************************************************/
 
   doThis Job{runFunction = myRunFunction};
 
   doThis Job{runFunction = myRunFunction};
Line 363: Line 359:
 
   end
 
   end
 
    
 
    
 
 
   /************ expand the on-construction function ******************/
 
   /************ expand the on-construction function ******************/
 
   /*******************************************************************/
 
   /*******************************************************************/
Line 372: 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)     
  

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