Topic
IC4NOTICE: developerWorks Community will be offline May 29-30, 2015 while we upgrade to the latest version of IBM Connections. For more information, read our upgrade FAQ.
7 replies Latest Post - ‏2013-02-20T09:57:44Z by Shikharani
Shikharani
Shikharani
29 Posts
ACCEPTED ANSWER

Pinned topic Label for Calender picker builder

‏2012-11-21T11:43:57Z |
Hi,

I am using Calender picker for dates in my pages. The websphere portlet factory version I am using is 7.0. I need the information on How can I add a Label for the calender picker. As the builder is creating the Calender Id on run time.
I have attached the model file also.


<label id="enddateForlabel" class="label" for="enddate">End date:</label>


<script name="Before_enddate" type="text/javascript">var input_Calendar_prm_ui_UsageReportUI5e405e42_dc = CalendarPicker('input_Calendar_prm_ui_UsageReportUI5e405e42', 'January|February|March|April|May|June|July|August|September|October|November|December', 'Sun|Mon|Tue|Wed|Thu|Fri|Sat', '0|6', 'MM/dd/yyyy', true, '/Partnerworkplace/factory/clientjavascript/wclCalendar/images', 'Close', 'Previous Month', 'Next Month', 'Ok', 'Cancel', '/Partnerworkplace/factory/clientjavascript/wclCalendar/css/WclBaseSkinCSS.css');
</script>

<input name="enddate" id='input_Calendar_prm_ui_UsageReportUI5e405e42' onfocus='input_Calendar_prm_ui_UsageReportUI5e405e42_dc.setVisible(false);' type="text" value=''>

End date

Updated on 2013-02-20T09:57:44Z at 2013-02-20T09:57:44Z by Shikharani
  • mburati
    mburati
    425 Posts
    ACCEPTED ANSWER

    Re: Label for Calender picker builder

    ‏2012-11-26T02:49:18Z  in response to Shikharani
    Typically it's best to use WEF's Page Automation to generate input forms for you, to automate placement/association of labels with input fields, validation with error messages etc. The sample does not do that. Take a look at the out of the box Orders Service Consumer sample for use of page automation (based on a service operation's inputs) generating input fields with labels etc.

    Also, the Calendar Picker builder is fairly old and not used often anymore. In recent WEF releases, it's more typical to use the Dojo Rich Data Definitions to get Dojo based input field behavior (including Dojo Date Picker).

    I hope that info helps,
    ..Mike Burati
    http://www-10.lotus.com/ldd/pfwiki.nsf/
    The postings on this site are my own and do not necessarily represent the positions, strategies, or opinions of IBM.
    • Shikharani
      Shikharani
      29 Posts
      ACCEPTED ANSWER

      Re: Label for Calender picker builder

      ‏2012-11-26T06:09:36Z  in response to mburati
      Hi,

      Thanks for replying. can you please specify the example link which you are talking about. I have searched the following link but coudn't find it.
      http://www-10.lotus.com/ldd/pfwiki.nsf/

      I will follow the instruction given in that example or change calender picker with Dojo Date Picker in my next release. But for the current scneriao with calender builder can we add label for calender ?because our release is next week so we can't do UI Changes as of now. We need confirmation for documentation purpose.

      Thanks a lot
      • Shikharani
        Shikharani
        29 Posts
        ACCEPTED ANSWER

        Re: Label for Calender picker builder

        ‏2012-11-26T06:52:35Z  in response to Shikharani
        Hi,

        I have checked Dojo Builder also But I don't think It will resolve my issue because In that also. The id of the control is generated at run time. I have added the label to my calender picker but the issue is When we are running Rational Policy tester( for HTML Accessibility testing) on the page it is giving error as

        Each form control must have associated text

        This is the help document which they provide
        https://rptbp1.austin.ibm.com/ase/services/spscan/help/wcag20-tech-h36-h44-h65-h91-inputExplicitLabel.htm

        It clearly indicates that in the label itself we need to give the builder's Id. but we can't do it in WEF as it is generated at Run time we can just specify the control name not the id.

        Please correct me if i am not correct.

        Thanks
        Shikha
        • kevintap
          kevintap
          111 Posts
          ACCEPTED ANSWER

          Re: Label for Calender picker builder

          ‏2012-11-26T15:19:14Z  in response to Shikharani
          I would suggest that you take a look at the Source view of your model in the WEF Designer. In the source view, you can examine the Java/JSP code that is used to dynamically generate the id of the element. For example, from a calendar picker control:

          
          <input name=
          "cjsButton" id=
          '<%= com.bowstreet.builders.webapp.CalendarPickerBuilder.getButtonID(webAppAccess) %>' value=
          "..." onclick=
          '<%= com.bowstreet.builders.webapp.CalendarPickerBuilder.getInputID(webAppAccess) + "_dc" %>.setVisible(true);' type=
          "button" class=
          "wpfBlueButton">
          


          Here, you can see that the id of the button is created by a call to the API com.bowstreet.builders.webapp.CalendarPickerBuilder.getButtonID. You can then use this to populate an Attribute Setter (or other similar builder) so that it will reference the same id in the generated markup. For example, you might populate an Attribute Setter builder with the expression ${Java/com.bowstreet.builders.webapp.CalendarPickerBuilder.getButtonID(webAppAccess)}.
          • Shikharani
            Shikharani
            29 Posts
            ACCEPTED ANSWER

            Re: Label for Calender picker builder

            ‏2012-11-27T07:32:17Z  in response to kevintap
            Hi
            Thanks for replying on this.
            I tried this with both the expressions
            '<%= com.bowstreet.builders.webapp.CalendarPickerBuilder.getInputID(webAppAccess) %> and
            '<%= com.bowstreet.builders.webapp.CalendarPickerBuilder.getButtonID(webAppAccess) %>
            The code which is coming in java/Jsp source is :
            <LABEL id="startdateForlabel" class="label" for='<%= com.bowstreet.builders.webapp.CalendarPickerBuilder.getInputID(webAppAccess) %>'>Start date: </LABEL>

            <input name="startdate" id='<%= com.bowstreet.builders.webapp.CalendarPickerBuilder.getInputID(webAppAccess) %>' onfocus='<%= com.bowstreet.builders.webapp.CalendarPickerBuilder.getInputID(webAppAccess) + "_dc" %>.setVisible(false);' type="text" value='<%= JSPSupport.stringValue(DataConverter.toString(webAppAccess.getVariables().getObject("selectedstartdate")), false) %>
            But still it is creating the label as
            <label id="startdateForlabel" class="label" for='input_Calendar_prm_ui_UsageReportUI0'>Start date: </label>
            Where as the number generated at the end of the id for input is different.

            <script name="Before_startdate" type="text/javascript">var input_Calendar_prm_ui_UsageReportUI40f040f1_dc = CalendarPicker('input_Calendar_prm_ui_UsageReportUI40f040f1', 'January|February|March|April|May|June|July|August|September|October|November|December', 'Sun|Mon|Tue|Wed|Thu|Fri|Sat', '0|6', 'MM/dd/yyyy', true, '/Partnerworkplace/factory/clientjavascript/wclCalendar/images', 'Close', 'Previous Month', 'Next Month', 'Ok', 'Cancel', '/Partnerworkplace/factory/clientjavascript/wclCalendar/css/WclBaseSkinCSS.css');</script>
            <input name="startdate" id='input_Calendar_prm_ui_UsageReportUI40f040f1' onfocus='input_Calendar_prm_ui_UsageReportUI40f040f1_dc.setVisible(false);' type="text" value=''>

            I think it is taking the input number string dynamically!!
            • kevintap
              kevintap
              111 Posts
              ACCEPTED ANSWER

              Re: Label for Calender picker builder

              ‏2012-11-27T14:18:06Z  in response to Shikharani
              The issue you're seeing here is an ordering issue. In the JSP for the page, the <script> tag which calls com.bowstreet.builders.webapp.CalendarPickerBuilder.generateCalendarScript must come before you try to reference the com.bowstreet.builders.webapp.CalendarPickerBuilder.getInputID or getButtonID APIs. The generateCalendarScript method sets unique IDs for this instance of the calendar picker control, so in order to properly link your label element with the input/button elements, you will need to place the label after the call to generateCalendarScript.

              The postings on this site are my own and do not necessarily represent the positions, strategies, or opinions of IBM.
  • Shikharani
    Shikharani
    29 Posts
    ACCEPTED ANSWER

    Re: Label for Calender picker builder

    ‏2013-02-20T09:57:44Z  in response to Shikharani
    Thanks