[OpenAjaxIDE] date formatting

Jon Ferraiolo jferrai at us.ibm.com
Wed Aug 19 12:25:00 PDT 2009



I want to make sure I understand the use case for date formatting.

One of the target scenarios mentioned during yesterday's phone call was the
YUI calendar widget:

* http://developer.yahoo.com/yui/calendar/

which takes a few parameters (pagedate, selected, mindate, maxdate) which
are expected to look like:

MM/YYYY
MM/DD/YYYY
MM/DD

Am I understanding the YUI documentation correctly?

I believe the target workflow is that an IDE (e.g., Dreamweaver) recognizes
that a particular property is a date (e.g., due to format="date") and posts
a date picker widget, and after the user picks a date, then the IDE needs
to format the date value into a format that is compatible with what the
widget's constructor expects. Correct?

Kin or Scott: do you have an OAM file for the YUI date picker widget? I
would like to see how the OAM file is set up, particularly how the data
parameters are set up, and what aspects of the OAM file are a mismatch with
YUI.

Below I have copied an OAM file that I found on the Dreamweaver extensions
site for a YUI tooltip widget. If the OAM file for the YUI calendar widget
uses similar approaches (e.g., <javascript location="afterContent">), then
it seems to me that the transformation of the date value into MM/DD/YYYY
format would be easy to do via JavaScript that is included with the logic
in the <javascript> element.

Thanks.
Jon

-----------------

<?xml version="1.0" encoding="utf-8"?>

<widget xmlns:dw="http://ns.adobe.com/dreamweaver"
        xmlns="http://openajax.org/metadata"
        name="YUI Tooltip"
        version="2.6.0"
        aboutUri="http://developer.yahoo.com/yui/tooltip/"
        id="http://developer.yahoo.com/yui/tooltip/">

  <author name="Yahoo! Inc." />

  <javascript location="afterContent">
<![CDATA[
  (function() {
    var cn = document.body.className.toString();
    if (cn.indexOf('yui-skin-sam') == -1) {
      document.body.className += " yui-skin-sam";
    }
  })();

  var @@yuitooltip@@ = new YAHOO.widget.Tooltip("@@yuitooltip@@",
                                            {
                                              context:"@@contextid@@",
                                              text:"You are hovering over
the Lorem Ipsum paragraph."
                                            });
]]>
  </javascript>

  <content>
    <![CDATA[
        <p><em>Hover over the Lorem Ipsum paragraph to see the
tooltip.</em></p>
        <p id="@@contextid@@">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce
egestas fringilla mi. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Maecenas ac felis. Cras ligula
odio, tincidunt ac, suscipit et, vehicula a, neque. Nullam id nunc.
Suspendisse tristique augue tempus elit. Fusce hendrerit viverra nibh.
Fusce a diam non lectus tempus euismod. Duis sed purus at metus molestie
adipiscing. Aenean orci odio, rutrum sed, gravida a, pellentesque vel,
augue. Ut est purus, ullamcorper eu, facilisis ac, adipiscing at, lectus.
Integer erat. Nunc eleifend consequat sem. Donec orci dolor, adipiscing
vitae, ultrices a, venenatis et, mi. Proin semper accumsan metus. Integer
sollicitudin, tortor eu egestas pulvinar, augue dui elementum lectus, ac
pretium tortor lacus vel tortor. Morbi placerat. Nulla facilisi.
        </p>
    ]]>
  </content>

  <requires>
    <require type="css" src="../YUI/2.6.0/build/fonts/fonts-min.css"
includeRef="true" dw:shared="true"/>
    <require type="css"
src="../YUI/2.6.0/build/container/assets/skins/sam/container.css"
includeRef="true" dw:shared="true"/>
    <require type="javascript"
src="../YUI/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"
includeRef="true" dw:shared="true"/>
    <require type="javascript"
src="../YUI/2.6.0/build/container/container-min.js" includeRef="true"
dw:shared="true"/>
  </requires>

  <category name="YUI"/>

  <properties>
    <property name="yuitooltip" default="yuitooltip" datatype="string"
format="id"/>
    <property name="contextid" default="contextid" datatype="string"
format="id"/>
  </properties>

  <description>
    <![CDATA[
      <p>The Tooltip Control is analogous to popup tooltips within common
operating systems. The standard tooltip interaction pattern involves a
small overlay that is displayed when the mouse hovers over a context
element for a specified amount of time. Tooltip is designed to be simple to
implement with easily-accessed configuration options and visual styling
handled entirely via CSS.</p>
      <p>The Yahoo! User Interface (YUI) Library is a set of components,
written in JavaScript, for building richly interactive web applications
using techniques such as DOM scripting, DHTML and AJAX. The YUI Library
also includes several core CSS resources. All components in the YUI Library
are available under the BSD license and are free for all uses.  More
information is available at: http://developer.yahoo.com/yui/ .</p>
    ]]>
  </description>

  <dw:extension>
    <dw:translator>
      <dw:widgetRegExp><![CDATA[var\s*[^=]+\s*=\s*new\s*YAHOO\.widget
\.Tooltip\s*\(\s*[^{]+{[^"']+["']([^"']+)["'][^}]+}\s*\);]]>
</dw:widgetRegExp>
      <dw:widgetConstructor>YAHOO.widget.Tooltip</dw:widgetConstructor>
      <dw:help dw:src="http://developer.yahoo.com/yui/container/">Yahoo
Widget Tooltip Help</dw:help>]
    </dw:translator>
  </dw:extension>

</widget>




-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://openajax.org/pipermail/ide/attachments/20090819/6cf68a21/attachment.html 


More information about the IDE mailing list