BSP / HowTo: Exploring BSP Development and the MiniWAS 6.20 Part 3b

[craigcmehil]

• [Part 1 | BSP / HowTo: Exploring BSP Development and the MiniWAS 6.20] - Introduction and beginning elements, sample data.
  
• [Part 2 | BSP / HowTo: Exploring BSP Development and the MiniWAS 6.20 Part 2] - Building the CLASSES and ITERATORS.
  
• Part 3 - Putting your pages in place.
  
  1. 
     

BSP / HowTo: Exploring BSP Development and the MiniWAS 6.20 Part 3a

BSP / HowTo: Exploring BSP Development and the MiniWAS 6.20 Part 3b

1. Part 4 - Extended Features
   

1. 
   

BSP / HowTo: Exploring BSP Development and the MiniWAS 6.20 Part 4a

BSP / HowTo: Exploring BSP Development and the MiniWAS 6.20 Part 4b

1. [Part 5 | BSP / HowTo: Exploring BSP Development and the MiniWAS 6.20 Part 5] - Conclusions
   

As you've seen BSP / HowTo: Exploring BSP Development and the MiniWAS 6.20 gave us the foundation for holding all of our data and then in BSP / HowTo: Exploring BSP Development and the MiniWAS 6.20 Part 2 we put our background data handling and rendering classes into place.  Part 3a gave us the beginnings of our pages and actually working with data. Part 3b will finish up those pages and give us a workable solution and allow us to move into Part 4 where we'll add some more advanced functions into the BSP to give us even more control over the data.



First things first, let's get our Category and Subject pages into place. These two pages will allow us to edit our category list and subject list.



CAT.HTM



Page Layout</b><br>
<textarea cols="79" rows="10">
<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
<%
  DATA: iterator TYPE REF TO ZCSC_CL_FAQ_CAT_ITERATOR.
  CREATE OBJECT iterator TYPE ZCSC_CL_FAQ_CAT_ITERATOR.
%>
<htmlb:content design="design2003" >
  <htmlb:page title="FAQ, Remember it! " >
    <htmlb:form id="frm" >
      <htmlb:group width  = "100%"
                   height = "100%" >
        <htmlb:groupHeader>
          <%@include file="header.htm" %>
        </htmlb:groupHeader>
        <htmlb:groupBody>
          <htmlb:gridLayout columnSize  = "3"
                            rowSize     = "1"
                            cellPadding = "2"
                            cellSpacing = "2" >
            <htmlb:gridLayoutCell columnIndex         = "1"
                                  rowIndex            = "1"
                                  width               = "30px"
                                  verticalAlignment   = "top"
                                  horizontalAlignment = "center" >
              <htmlb:image id      = "FAQRIT"
                           src     = "@BO@"
                           onClick = "MySDNImage"
                           tooltip = "<%= otr(zcsc_faq/HOME) %>" />
              <htmlb:image id      = "DEL"
                           src     = "@18@"
                           onClick = "MySDNImage"
                           tooltip = "<%= otr(zcsc_faq/DELETE) %>" />
              <htmlb:image id      = "EDIT"
                           src     = "@0Z@"
                           onClick = "MySDNImage"
                           tooltip = "<%= otr(zcsc_faq/CHANGE) %>" />
            </htmlb:gridLayoutCell>
            <htmlb:gridLayoutCell columnIndex = "2"
                                  rowIndex    = "1" >
              <htmlb:tableView id              = "cattable"
                               table           = "<%= cattab %>"
                               iterator        = "<%= iterator %>"
                               footerVisible   = "false"
                               fillUpEmptyRows = "false"
                               headerVisible   = "true"
                               headerText      = "my Categories"
                               design          = "ALTERNATING"
                               sort            = "SERVER"
                               filter          = "server"
                               selectionMode   = "SINGLESELECT"
                               onRowSelection  = "MyCatSelect" />
            </htmlb:gridLayoutCell>
            <htmlb:gridLayoutCell columnIndex       = "3"
                                  rowIndex          = "1"
                                  verticalAlignment = "top" >
              <%
  IF editFlag EQ 'X'.
              %>
              <htmlb:inputField id      = "id"
                                visible = "false"
                                value   = "<%= witab-ID %>" />
              <htmlb:label for  = "name"
                           text = "Name:" />
              <htmlb:inputField id    = "name"
                                value = "<%= witab-name %>" />
              <br>
              <htmlb:label for  = "src"
                           text = "SAP Image Src (e.g. @17@):" />
              <htmlb:inputField id    = "src"
                                value = "<%= witab-src %>" />
              <br>
              <htmlb:label for  = "desc"
                           text = "Description:" />
              <htmlb:textEdit id       = "desc"
                              text     = "<%= witab-cat_desc %>"
                              wrapping = "SOFT"
                              cols     = "50" />
              <%
  ELSE.
              %>
              <htmlb:inputField id      = "id"
                                visible = "false" />
              <htmlb:label for  = "name"
                           text = "Name:" />
              <htmlb:inputField id="name" />
              <br>
              <htmlb:label for  = "src"
                           text = "SAP Image Src (e.g. @17@):" />
              <htmlb:inputField id="src" />
              <br>
              <htmlb:label for  = "desc"
                           text = "Description:" />
              <htmlb:textEdit id       = "desc"
                              wrapping = "SOFT"
                              cols     = "50" />
              <%
  ENDIF.
              %>
              <br>
              <br>
              <htmlb:image id      = "ADD"
                           src     = "@2L@"
                           onClick = "MySDNImage"
                           tooltip = "<%= otr(zcsc_faq/INSERT) %>" />
            </htmlb:gridLayoutCell>
          </htmlb:gridLayout>
        </htmlb:groupBody>
      </htmlb:group>
    </htmlb:form>
  </htmlb:page>
</htmlb:content>
</textarea>
<br>
<b>On Create

• this handler is called once the page is first created (stateful mode)
• it performs a once-off data initialization or object creation

CREATE OBJECT obj.
cattab = obj->GET_FAQ_CAT( ).



OnInputProcessing

• event handler for checking and processing user input and
• for defining navigation

• BSP Elements and Events

DATA: tabStrip TYPE REF TO CL_XHTMLB_TABSTRIP.
DATA: table TYPE REF TO CL_HTMLB_TABLEVIEW.
DATA: table_event TYPE REF TO cl_htmlb_event_tableview.
DATA: event TYPE REF TO IF_HTMLB_DATA.

• Data definitions

DATA: selectedRowIndex TYPE i.

• Table Types

DATA: wa TYPE ZFAQ_CAT.

• Get HTML Manager

event = CL_HTMLB_MANAGER=>get_event_ex( request ).
table ?= CL_HTMLB_MANAGER=>GET_DATA( request = request
                                  name    = 'tableView'
                                  id      = 'cattable' ).
IF table IS NOT INITIAL.
  table_event = table->data.
  selectedRowIndex = table_event->SELECTEDROWINDEX.
ENDIF.

• Check if one of the image buttons was clicked.

IF event IS NOT INITIAL
   AND event->event_name = htmlb_events=>image.
  CASE event->event_id.
    WHEN 'FAQRIT'.
      navigation->goto_page( 'faq.htm' ).
    WHEN 'DEL'.
      IF selectedRowIndex NE 0.
        READ TABLE cattab INTO witab index selectedRowIndex.
        DELETE FROM ZFAQ_CAT WHERE ID = witab-id.
        selectedRowIndex = 0.
        cattab = obj->GET_FAQ_CAT( ).
        editFlag = ''.
      ENDIF.
    WHEN 'EDIT'.
      IF selectedRowIndex NE 0.
        READ TABLE cattab INTO witab index selectedRowIndex.
        editFlag = 'X'.
      ENDIF.
    WHEN 'ADD'.
      CLEAR wa.
      IF request->GET_FORM_FIELD( name = 'id' ) IS NOT INITIAL.
        wa-ID = request->GET_FORM_FIELD( name = 'id' ).
        wa-NAME = request->GET_FORM_FIELD( name = 'name' ).
        wa-SRC = request->GET_FORM_FIELD( name = 'src' ).
        wa-CAT_DESC = request->GET_FORM_FIELD( name = 'desc' ).
        UPDATE ZFAQ_CAT FROM wa.
        cattab = obj->GET_FAQ_CAT( ).
      ELSE.
        "* Assign automatic ID for the next DATA entry
        wa-ID = obj->GET_NEXT_DATA_ID( table = 'ZFAQ_CAT' ).
        wa-NAME = request->GET_FORM_FIELD( name = 'name' ).
        wa-SRC = request->GET_FORM_FIELD( name = 'src' ).
        wa-CAT_DESC = request->GET_FORM_FIELD( name = 'desc' ).
        INSERT INTO ZFAQ_CAT VALUES wa.
        cattab = obj->GET_FAQ_CAT( ).
      ENDIF.
      editFlag = ''.
  ENDCASE.
ENDIF.





SUBJECT.HTM



Page Layout</b><br>
<textarea cols="79" rows="10">
<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
<%

• HEre we use Column Definitions and not an Iterator

%>
On Create

• this handler is called once the page is first created (stateful mode)
• it performs a once-off data initialization or object creation

CREATE OBJECT obj.
subjecttab = obj->GET_FAQ_SUBJECT( ).



OnInputProcessing

• event handler for checking and processing user input and
• for defining navigation

• BSP Elements and Events

DATA: tabStrip TYPE REF TO CL_XHTMLB_TABSTRIP.
DATA: table TYPE REF TO CL_HTMLB_TABLEVIEW.
DATA: table_event TYPE REF TO cl_htmlb_event_tableview.
DATA: event TYPE REF TO IF_HTMLB_DATA.

• Data definitions

DATA: selectedRowIndex TYPE i.

• Table Types

DATA: wa TYPE ZFAQ_SUBJECT.

• Get HTML Manager

event = CL_HTMLB_MANAGER=>get_event_ex( request ).
table ?= CL_HTMLB_MANAGER=>GET_DATA( request = request
                                  name    = 'tableView'
                                  id      = 'subjecttable' ).
IF table IS NOT INITIAL.
  table_event = table->data.
  selectedRowIndex = table_event->SELECTEDROWINDEX.
ENDIF.

• Check if one of the image buttons was clicked.

IF event IS NOT INITIAL
   AND event->event_name = htmlb_events=>image.
  CASE event->event_id.
    WHEN 'FAQRIT'.
      navigation->goto_page( 'faq.htm' ).
    WHEN 'DEL'.
      IF selectedRowIndex NE 0.
        READ TABLE subjecttab INTO witab index selectedRowIndex.
        DELETE FROM ZFAQ_SUBJECT WHERE ID = witab-id.
        selectedRowIndex = 0.
        subjecttab = obj->GET_FAQ_SUBJECT( ).
        editFlag = ''.
      ENDIF.
    WHEN 'EDIT'.
      IF selectedRowIndex NE 0.
        READ TABLE subjecttab INTO witab index selectedRowIndex.
        editFlag = 'X'.
      ENDIF.
    WHEN 'ADD'.
      CLEAR wa.
      IF request->GET_FORM_FIELD( name = 'id' ) IS NOT INITIAL.
        wa-ID = request->GET_FORM_FIELD( name = 'id' ).
        wa-NAME = request->GET_FORM_FIELD( name = 'name' ).
        wa-SUBJECT_DESC = request->GET_FORM_FIELD( name = 'desc' ).
        UPDATE ZFAQ_SUBJECT FROM wa.
        subjecttab = obj->GET_FAQ_SUBJECT( ).
      ELSE.
        "* Assign automatic ID for the next DATA entry
        wa-ID = obj->GET_NEXT_DATA_ID( table = 'ZFAQ_SUBJECT' ).
        wa-NAME = request->GET_FORM_FIELD( name = 'name' ).
        wa-SUBJECT_DESC = request->GET_FORM_FIELD( name = 'desc' ).
        INSERT INTO ZFAQ_SUBJECT VALUES wa.
        subjecttab = obj->GET_FAQ_SUBJECT( ).
      ENDIF.
      editFlag = ''.
  ENDCASE.
ENDIF.



As you can see the two pages are basically identical, is this the only way to do it - ABSOLUTLEY NOT! there are plenty of ways to go about this including inline editing of the tableView itself.



One more thing we need to do for each page is assign the Page Attributes. So for the CAT.HTM the page attributes are:



style="width:300px;border:thin none;background:lightgrey;background-color:lightgrey">
cattab TYPE ZFAQCATTAB FAQ Category Type

editFlag TYPE CHAR1 Single-character flag

obj TYPE REF TO ZCSC_CL_FAQ Method Object

witab TYPE ZFAQ_CAT FAQ Category List






and for the SUBJECT.HTM the page attributes are:



style="width:300px;border:thin none;background:lightgrey;background-color:lightgrey">
editFlag TYPE CHAR1 Single-character flag

obj TYPE REF TO ZCSC_CL_FAQ Method Object

subjecttab TYPE ZFAQSUBJECTTAB FAQ Subject Type

witab TYPE ZFAQ_SUBJECT FAQ Subject List




So those pages are in place and if you did the code changed I posted in the updated in BSP / HowTo: Exploring BSP Development and the MiniWAS 6.20 Part 3a then you can now select these two pages from your faq.htm page and actually use them now.



OK, we've got to make some changes and additions to make so let's get that out of the way first OK. Yep you got it, FAQ.HTM it is.



Our new page attributes



style="width:300px;border:thin none;background:lightgrey;background-color:lightgrey">
editFlag TYPE CHAR1 Single-character flag
witab TYPE ZFAQ_DATA FAQ Data Type



As you can see we are building the edit function up here just like we did for the Categories and the Subjects.



Now let's add this new case statement in our OnInputProcessing

<span>   WHEN 'EDITFAQ'.      IF selectedRowIndex NE 0.        READ TABLE subjecttab INTO witab index selectedRowIndex.        editFlag = 'X'.        visibleForm = 'addfaq'.      ENDIF.</span>


The Case statement name should match the Edit icon image name we have in the Page Layout



So now let's jump over to our Page Layout</b> and modify our code there. What you want to do is look for the part where we output the visible EQ 'addfaq'. Then modify that IF statement with this code.OnInputProcessingas we now have to modify how we save the data. just like for Categories and Subjects.




         CLEAR wa.

• In this case we will gather the values from the different
• HTMLB form elements. Notice the various ways to do this.

      ddlb ?= CL_HTMLB_MANAGER=>GET_DATA(
                        request = request
                        id = 'faq_category'
                        name = 'dropdownListBox' ).
      myCategory = ddlb->selection.
      rbg ?= CL_HTMLB_MANAGER=>GET_DATA(
                        request = request
                        id = 'faq_rating'
                        name = 'radioButtonGroup' ).
      myRating = rbg->selection->value.
      IF request->GET_FORM_FIELD( name = 'id' ) IS NOT INITIAL.
        wa-ID = request->GET_FORM_FIELD( name = 'id' ).
        wa-CAT_ID = myCategory.
        wa-SUBJECT = request->GET_FORM_FIELD( name = 'faq_subject' ).
        "* Get from radio group
        wa-RATING =  myRating.
        "* Get from form data
        wa-AUTHOR = request->GET_FORM_FIELD( name = 'faq_author' ).
        wa-TITLE =  request->GET_FORM_FIELD( name = 'faq_title' ).
        wa-URL =  request->GET_FORM_FIELD( name = 'faq_url' ).
        wa-SHORT_DESC =  request->GET_FORM_FIELD(
                                  name = 'faq_short_desc' ).
        wa-LONG_DESC =  request->GET_FORM_FIELD(
                                    name = 'faq_long_desc' ).
        UPDATE ZFAQ_DATA FROM wa.
      ELSE.
        listbox ?= CL_HTMLB_MANAGER=>GET_DATA(
                          request = request
                          id = 'faq_subject'
                          name = 'listBox' ).
        CLEAR mySubjects.
        LOOP AT listbox->selections INTO mySubject.
          tmpSubject = mySubject.
          mySubject = obj->GET_SUBJECT_NAME( id = tmpSubject ).
          CONCATENATE
            mySubject
            mySubjects
          INTO mySubjects SEPARATED BY ','.
        ENDLOOP.
        wa-ID = obj->GET_NEXT_DATA_ID( table = 'ZFAQ_DATA' ).
        wa-CDATE =  SY-DATUM.
        "* Get from select list
        wa-CAT_ID = myCategory.
        wa-SUBJECT = mySubjects.
        "* Get from radio group
        wa-RATING =  myRating.
        "* Get from form data
        wa-AUTHOR = request->GET_FORM_FIELD( name = 'faq_author' ).
        wa-TITLE =  request->GET_FORM_FIELD( name = 'faq_title' ).
        wa-URL =  request->GET_FORM_FIELD( name = 'faq_url' ).
        wa-SHORT_DESC =  request->GET_FORM_FIELD(
                                  name = 'faq_short_desc' ).
        wa-LONG_DESC =  request->GET_FORM_FIELD(
                                    name = 'faq_long_desc' ).
        INSERT INTO ZFAQ_DATA VALUES wa.
      ENDIF.
      faqtab = obj->GET_FAQ_DATA( ).
      editFlag = ''.



That should be our content for the WHEN 'ADDFAQ'.



Now we're just about done aren't we? Is it working for you? Anything happening?



So now that it's! There it is, working, hopefully! We'll start preparing for some of the advanced features and then we'll wrap it all up. I should have Part 4 to you tonight or tomorrow and The Conclusion shortly there after.