wbfeng01_0515

[ |../../index.htm#lansa/wbfeng01_0515.htm]
You are here:

Step 2. Add Logic to Reusable Part

In this step you will create an OnAdd method which will be invoked when the web page uses ADD_ENTRY to add employee details from the list returned by the xEmployeeDataServer server module.
1.  Switch to the Source tab.  
     Extend the Role keyword on the Begin_Com statement to include the following highlighted code:
Begin_Com Role(*EXTENDS #PRIM_PANL *implements #prim_tree.iTreeDesign *listfields #ListFields) Displayposition(1) Height(270) Left(0) Tabposition(1) Top(0) Width(500) Layoutmanager(#TableLayout1) Themedrawstyle('listitem')
  
     *implements #Prim_Tree.iTreeDesign means this reusable part implements a User Defined Control which will be implemented as the row of a tree control in the web page.
     *listfields #ListFields defines a Group_By defining the fields to be mapped into this component when a row is added to the Tree list. That is, when an instance of this component is created.
2.  Define a Group_by, named ListFields as shown:

• Fields mapped in when the entry is added to the Tree
  Group_By Name(#ListFields) Fields(#xEmployeeIdentification #xEmployeeSurname #xEmployeeGivenNames #xEmployeeStreet #xEmployeeCity #xEmployeeState #xEmployeePostalCode #xEmployeeStartDate #xEmployeeTerminationDate #xDepartmentCode #xDepartmentDescription #xEmployeeImageThumbnail)
   
  3.  Define a method routine, named OnAdd which redefines the method in Prim_Tree.iTreeItem, based on the following:
  Set up the initial Height for the reusable part, so that initially the height is down to the bottom of the MoreLess label.
  For example: #Com_owner.Height := #MoreLess.Top + #MoreLess.height
   
  Set up the iiiFullName field from the related fields for the employee.
  For example: #iiiFullName := #xEmployeeGivenNames + ', ' + #xEmployeeSurname + ' (' + #xEmployeeIdentification + ')'
   
  Set up the Department label from the department fields.
  For example: #Department := #xDepartmemtDescription + ' (' + #DepartmentCode + ')'
   
  Set up Street, City and State labels from their field value
  e.g. #Street := #xEmployeeStreet /label Caption is default property /
   
  If field xEmployeeTerminationDate is not SQLNULL:
  Set the StartDate label's ThemeDrawStyle property to 'poor':
  Set the StartDate label's Caption property to contain the terminate date:
          #StartDate.caption := 'No longer employed - ' + #xEmployeeTerminationDate.asdisplayString
  else
   
  Set StartDate's ThemeDrawStyle property to 'good'.
  Set StartDate Caption to 'Employed - ' + #xEmployeeSTartDate.asdisplaystring
  Endif
  Set up the EmployeeImage by setting FileName property to the field xEmployeeImageThumbnail
       Your completed code should look like the following:
  Mthroutine Name(OnAdd) Options(*REDEFINE)
   
  #COM_OWNER.Height := #MoreLess.top + #MoreLess.height
  #iiiFullName := #xEmployeeGivenNames + ', ' + #xEmployeeSurname + '(' + #xEmployeeIdentification + ')'
  #Department := #xDepartmentDescription + ' (' + #xDepartmentCode + ')'
  #Street := #xEmployeeStreet
  #City := #xEmployeeCity
  #State := #xEmployeeState
  #PostalCode := #xEmployeePostalCode
  If (#xEmployeeTerminationDate *IsNot *sqlnull)
  #StartDate.ThemeDrawStyle := POOR
  #StartDate.Caption := 'Left company: ' + #xEmployeeTerminationDate.AsDisplayString
  Else
  #StartDate.ThemeDrawStyle := GOOD
  #StartDate.Caption := 'Employed - ' + #xEmployeeStartDate.asdisplaystring
  Endif
  #EmployeeImage.filename := #xEmployeeImageThumbnail
  Endroutine 
  Note: The above code uses ThemeDrawStyles which are defined by the Theme xDemoTheme which will be applied to the web page. With a Theme applied to a web page, the Theme ribbon shows the DrawStyle's available:
  
       This xDemoTheme is part of the shipped demonstration applications.
  4.  Create an event handling routine for a Click event on the label MoreLess.
  If the reusable part height is greater than the value of Top plus Height of the MoreLess label
    Set the reusable part Height to the value Top + Height of the MoreLess label
  change its Caption to "Show Details".
  Otherwise
    Set the reusable part's Height to Top plus Height of the PostalCode field
    change the MoreLess Caption to "Hide Details".
  End if.
       Your code should look like the following
  Evtroutine Handling(#MoreLess.Click)
  If (#COM_OWNER.height > (#MoreLess.top + #MoreLess.height))
  #COM_OWNER.Height := #MoreLess.top + #MoreLess.Height
  #MoreLess.Caption := 'Show details'
  Else
  #COM_OWNER.Height := #PostalCode.top + #PostalCode.Height
  #MoreLess.Caption := 'Hide Details'
  Endif
  Endroutine 
  5.  Compile the reusable part.
  [ |../../index.htm#lansa/wbfeng01_0515.htm]