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

From Eclipsepedia

Jump to: navigation, search
Line 3: Line 3:
 
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 use these snippets to become familiar with EGL Rich UI:
+
You can use these snippets to become familiar with EGL Rich UI:  
  
# Create an EGL project for client and services.
+
#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.
+
#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.
  
 
Even if you are an efficiency expert, you can play.  
 
Even if you are an efficiency expert, you can play.  
Line 14: Line 14:
 
= 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 46: Line 46:
 
</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 56: Line 56:
 
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 94: Line 94:
 
   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 147: Line 147:
 
</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 165: Line 165:
 
                     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 172: Line 172:
 
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 208: Line 208:
 
                         text = "a check box",  
 
                         text = "a check box",  
  
                         /*****  reference an event handler for the onChange event *****/  
+
                         /*****  reference an event handler for the check-box onChange event *****/  
                         /***************************************************************/
+
                         /************************************************************************/
 
                         onChange ::= checkBox_response};
 
                         onChange ::= checkBox_response};
  
Line 233: Line 233:
  
 
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 one way to add a new widget to the page:
+
Here is a preview and the related code, which shows one way to add a new widget to the page:  
  
 
[[Image:Gridlayout button event.jpg]]  
 
[[Image:Gridlayout button event.jpg]]  
Line 277: Line 277:
 
                     text="a button",  
 
                     text="a button",  
  
                     /*****  reference an event handler for the onClick event ******/  
+
                     /*****  reference an event handler for the button onClick event ****/  
                     /***************************************************************/
+
                     /*******************************************************************/
 
                     onClick ::= button_Response};
 
                     onClick ::= button_Response};
  
Line 312: Line 312:
 
   };     
 
   };     
 
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 401: Line 400:
 
   };     
 
   };     
 
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]]

Revision as of 18:37, 16 February 2012

The next sections outline a way to develop a Rich UI application.

For background information, see Web technology for EGL Rich UI.

You can use these snippets to become familiar with EGL Rich UI:

  1. Create an EGL project for client and services.
  2. Copy the content 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.

Even if you are an efficiency expert, you can play.

Contents

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.

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

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

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"}
 
    checkedCount int = 0;
 
    ui GridLayout{columns = 3, rows = 4, cellPadding = 4, children =[myLabel,
                    myTextField, myCheckBox]};
 
    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:

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", onChange ::= checkBox_response};
 
   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};
 
   counter int;   
 
   function start()
   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
 
   /**************  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.

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"}
 
   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", onChange ::= checkBox_response};
 
   myButton Button{ layoutData = new GridLayoutData{ row = 4, column = 1,
                    horizontalSpan = 2, 
                    horizontalAlignment = GridLayoutLib.Align_Center }, 
                    text="a button", onClick ::= button_Response};
 
   doThis Job{runFunction = myRunFunction};
 
   function myRunFunction()
      counter = counter + 1;
      myTextField.text = counter;
   end
 
   function start()
      counter = 0;
      myLabel.text = "Count:";
      doThis.repeat(1000);    	
   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)    
      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