XeoPrimerWebComponentsAPI < WebXEO

WebXEO Web>XeoPrimer>XeoPrimerWebComponentsAPI (2011-05-25, NicolauGrosskopf) (raw view)
-- Main.PedroRio - 18 Feb 2011
---+ XEO Web Components - Samples.

This section has snippets of code to perform a certain operation (and explanation of the snippet)
---+++ Index
   * [[#openNewViewer][Opening a viewer ]]
   * [[#openNewViewerWindow][ Opening a viewer (in a window)]]
   * [[#findComponent][ Finding a component in the component tree ]]
   * [[#findComponentGridPanel][ Finding the selected line in a gridpanel ]]
   * [[#setActiveTab][ Setting the active tab ]]
   * [[#refreshList][ Refreshing a list after the creation of a new instance in an edit viewer ]]
   * [[#executeSql][ Executing a SQL statement against the database ]]
   * [[#passingParameter][ Passing a parameter from a main menu entry to the list viewer ]]
---++++++ Opening a new viewer <a name="#openNewViewer"></a>

A fairly common operation will be opening a viewer in response to a user clicking a button. To do so, in the bean method where you want to open the viewer use the following code:

*XML Definition*
<pre><verbatim><xvw:menu text='Open Tab' target='tab' serverAction='#{viewBean.openTab}'></verbatim>
</pre>

*Java Code*
<verbatim>public void openTab(){
  //Create a XUIViewRoot representing the viewer (viewer can be located in the source code, or in the webapp of the application)
  XUIViewRoot viewRoot = getSessionContext().createChildView("viewers/path/to/viewer/Viewer.xvw");
  //Set the newly created viewroot as the view root of the request  
  getRequestContext().setViewRoot(viewRoot);  
  //Render the response
  getRequestContext().renderResponse();  
}</verbatim>

_
---++++++ Opening a new viewer (in a window) <a name="openNewViewerWindow"></a>

Sometimes you'll want to open a viewer inside a small window (and not in a new tab). To do that you must add the _xvw:window_ component to your viewer and execute the same code as the previous example.

*Viewer Definition*
<verbatim><xvw:viewer beanClass="org.xeoframework.examples.MyBean" beanId="viewBean">
        <xeo:formEdit>
             <xvw:window width='500' height='300'>
                          <!-- Remaining components -->
                      </xvw:window>
        </xeo:formEdit>
    </xvw:viewer></verbatim>

*Menu (important, notice the absence of the "target" property, which defaults to "self")*
<pre><verbatim><xvw:menu text='Open Window' serverAction='#{viewBean.openWindow}'> </verbatim>
</pre>

<strong>Java Code (same code as above, only change needed to be done for this example is adding the _xvw:window_ component and removing the target property)<br /></strong>
<verbatim>XUIViewRoot viewRoot = getSessionContext().createChildView("viewers/Objecto/MyViewer.xvw");
getRequestContext().setViewRoot(viewRoot);
getRequestContext().renderResponse();</verbatim>

_
---++++++ Finding a component in the component tree<a name="findComponent"></a>

One regular task when implementing a method using the Java API in a bean is to find a given component and retrieve a certain property value, or changing a set of properties (as well as adding a new child to the component). In order to do that you must be able to find the component in the component tree of a viewer. There are two ways of finding a component: By type and by identifier.

*Find a component by type*

In this situation, if you only have one instance of a given type/class you can find the component by its class. If you were looking for a TreePanel component you could use the following code:
<verbatim>XUIComponentBase myComp = getViewRoot().findComponent(TreePanel.class);
TreePanel panel = (TreePanel) myComp;
if (panel != null){
    // Do normal processing
}</verbatim>

You could also just use:
<verbatim>TreePanel panel = (TreePanel) getViewRoot().findComponent(TreePanel.class);</verbatim>

Beware that you should only use the _findComponent_ method with the class as parameter if you're certain there's only one instance of the component in the current viewer. If there are more than one, it's undefined which one will be returned by the method. If you have more than one instance of a given type/class of components you should see the following section.

*Find a component by identifier*

If have multiple instances of a given component type/class in your viewer the only reliable way of finding them is to given them an identifier and search for that identifier. To find a component by its identifier you actually need to know the identifier of the parent form component and the component itself, because component identifiers are created like the following:
<verbatim>formIdentifier:componentIdentifier</verbatim>

So, if your form has an identifier like "myForm" and your component an identifier like "comp", the full identifier for the component will be:
<verbatim>myForm:comp</verbatim>

To find the component using its identifier, you should declare the form of the viewer with an _id_ attribute as well as your component and then use the following code:

*Form*
<verbatim><xvw:form id='myForm'></verbatim>

*Component*
<verbatim><xvw:treePanel id='comp'></verbatim>

*Bean*
<verbatim>TreePanel panel = (TreePanel) getViewRoot().findComponent("myForm:comp");</verbatim>

In case you don't know the (or don't want to add) the identifier of the form component you can also use the following code, to search for the form component and retrieve its identifier:
<pre><verbatim>XUIForm form = (XUIForm) getViewRoot().findComponent(XUIForm.class)
String formID = form.getClientId();
TreePanel panel = (TreePanel) getViewRoot.findComponent(formID+":"+"myComp");</verbatim>
</pre>

The _getClientId_ method retrieves the identifier of the form that it's autogenerated by the framework (if one was not declared in the xml definition).

---++++++ Finding the selected line in a panel (gridpanel, list, bridge) <a name="findComponentGridPanel"></a>

A common programming task with XEO Web Components is to have a gridPanel component (or list/bridge) and have toolbar with a button that will trigger some action on a selected line from the panel. To do that you need the following code in the method invoked by the button.
<verbatim>//import netgest.bo.xwc.components.connectors.*;
//import netgest.bo.xwc.components.classic.GridPanel;

public void processLine(){
        
        //Find the WebXEO.GridPanel that has the selected line
        GridPanel panel = (GridPanel) getViewRoot().findComponent(GridPanel.class);
        //Retrieve the current active row (a DataRecordConnecor)
        DataRecordConnector currentLine = panel.getActiveRow();
        //Find the column that has a meaningful value (i.e. and id, for example)
        DataFieldConnector currentColumn = currentLine.getAttribute("BOUI");
        //Retrieve the value for that column
        String value = currentColumn.getValue().toString();
        
        //Use the value of the BOUI to load and process the instance
        try {
            XEOApplication app = XEOApplication.getDefaultApplication();
            boObject b = app.getSecureObjectManager().
                loadObject(getEboContext(), Long.valueOf(value));
            
            //Process the instance
            
            b.update();
        } catch (boRuntimeException e) { /* Log or deal with the exception*/}
    }</verbatim>

You may need a few modifications if:
   1 You have more than one instance of a gridPanel/list/bridge component in your viewer
   1 If you allow multiple lines to be selected and want to process them all

If you fall in situation 1, you'll need to see the previous section, titled "Finding a component in the component tree".

If you fall in situation 2, you'll need the following code:
<verbatim>public void processLines(){
            
      //Find the WebXEO.GridPanel that has the selected line
      WebXEO.GridPanel panel = (WebXEO.GridPanel) getViewRoot().findComponent(WebXEO.GridPanel.class);
      //Retrieve the selected lines (a DataRecordConnector[])
      DataRecordConnector[] currentLines = panel.getSelectedRows();
      //Iterate through all the lines
      for (DataRecordConnector currentLine : currentLines){
          //Find the column that has a meaningful value (i.e. and id, for example)
          DataFieldConnector currentColumn = currentLine.getAttribute("BOUI");
          //Retrieve the value for that column
          String value = currentColumn.getValue().toString();
          //Use the value of the BOUI to load and process the instance
          try {
              XEOApplication app = XEOApplication.getDefaultApplication();
              boObject b = app.getSecureObjectManager().
              loadObject(getEboContext(), Long.valueOf(value));
              //Process the instance
              b.update();
          } catch (boRuntimeException e) { /* Log or deal with the exception*/}
       }
 }</verbatim>

The main difference from the previous situation is the _getSelectedRows_ method that returns a _DataRecordConnector_ array with all the lines that are selected in the panel.
---++++++ Changing the current active tab <a name="setActiveTab"></a>

If a user is interacting with a given viewer that has several tabs, you may want to set a given tab as active in response to a given action (for example a button click). In order to do that you can use the following code (you'll need to add an identifier to the tab you want to set as active, for this example let's assume it's "t1"):
<pre><verbatim>Tabs tabs = (Tabs) getViewRoot().findComponent(Tabs.class);
tabs.setActiveTab("t1");</verbatim>
</pre>

If you have more than one instance of the _Tabs_ component you'll need to find the component by its identifier ( [[#findComponent][see finding a component above]]).
---++++++ Refreshing a list after creating a new instance in an edit viewer <a name="refreshList"></a>

When you create a new instance in a edit viewer (and you have the list viewer in a open tab) you'll notice that the instance is not imediately added to the list (you need to refresh the list). This is made for performance reasons, but there are times when you may want to refresh the list after closing the tab. To do that, you have to override the _canCloseTab_ method in the <em>WebXEO.XEOEditBean </em>with the following code:
<pre><verbatim>@Override
public void canCloseTab(){
    super.canCloseTab();
    //Retrieve the parent view for the current edit bean 
    //(which will be the list viewer) and trigger the synching (essentially re-rendering) of that viewer.
    getParentView().syncClientView();
}</verbatim>
</pre>

You can actually use this trick to refresh currenty viewer (by using _getViewRoot().syncClientView()_) or you can refresh any viewer that was created by its parent using the _createChildView_ method (because it sets that viewer has a parent of the created one, so when you invoke _getParentView()_ on the child, the parent will be returned.

---++++++ Making a direct database connection (to execute a SQL statement) <a name="executeSql"></a>

Most of the time in a XEO Application you'll only need to execute BOQL statements, but there may be times where you need to execute SQL statements directly against the database, to do that you'll need the following:
<verbatim>        Statement stmt = null;
        Connection connection = getEboContext().getConnectionData();
        try {
            stmt = connection.prepareCall("select * from TABLE");
            ResultSet rs = stmt.executeQuery();
            
            while (rs.next()) {
                // Process the lines
            }
            
            
        } catch (SQLException e) { /* Log or treat the exception */
        }finally{
            //Close the connections
            try {
                stmt.close();
                connection.close()
            } catch (SQLException e) {/* Log or treat the exeception */    }
        }</verbatim>

_
---++++++ Passing a parameter from the menu entry in a main viewer to the list viewer(or from any menu to another viewer) <a name="passingParameter"></a>

When you create a menu entry in a Main viewer, to open a list viewer you usually do the following:
<verbatim><xvw:menu text='Menu Name' value="{viewerName:'Object/list.xvw', boql:select Object}"
target='Tab' serverAction="#{viewBean.listObject}" /></verbatim>

Which will open the list viewer for "Object" in a new tab. You may want, however, to pass aditional parameters to the bean of the list viewer that will be open. In order to that, you can add the new parameters to the "value" property of the menu component (it must be a valid JSON string), in the following example to add a "type" parameter.
<verbatim><xvw:menu text='Menu Name' value="{viewerName:'Object/list.xvw', boql:select Object, type: 'sunny'}"
target='Tab' serverAction="#{viewBean.listObject}"  /></verbatim>

All you have to do in the list viewer's bean is to add a constructor that will catch the parameter, like the following:
<verbatim>private String type = null;

public ObjectListBean(){
        try {
            //Retrieve the current context 
            XUIRequestContext oRequestContext = XUIRequestContext.getCurrentContext();
            //Create a JSON Object from the string passed in the "value" property of the Menu component
            JSONObject jsonObject = new JSONObject( 
                (String)((XUICommand)oRequestContext.getEvent().getSource()).getValue() 
            );
            type = jsonObject.getString( "type" );
        } catch ( Exception ex ) {
            //Log exception
        }
    }


public String getType(){
   return type;
}</verbatim>

*Beware of the following:*

When creating a constructor for a bean, if the code that it's executed in the constructor generates an exception. The viewer will not load and the message you'll see is only "<em>Error loading class [path.to.your.bean] for the viewer [Path/toYour/viewer.xvw]</em>".
Topic revision: r9 - 2011-05-25 - NicolauGrosskopf
No permission to view TWiki.WebTopBar
No permission to view TWiki.WebBottomBar