[OpenAjaxIDE] date formatting

Jon Ferraiolo jferrai at us.ibm.com
Wed Aug 19 21:55:11 PDT 2009


After thinking about things, I don't like either of the following:

format="d/m/Y"

or

format="date(d/m/Y)"

The 'format' attribute tells the tool what type of special editor to
display within the property editor in order for the user to enter a value.
For example, a tool might provide a calendar widget to edit a property that
has format="date", a clock dial widget to edit a property that has
format="time", and a color picker widget to edit a property that has
format="color". I don't think we want to try to co-mingle the formatting
instructions into the same attribute that provides a hint about which
editor widget to use within the property editor UI.

If we are going to offer date formatting, I think an additional attribute
such as what Scott has proposed is the way to go.

Regarding whether we should include this feature or not, I won't object if
the majority think this is a necessary feature for version 1.0, but at the
moment I'm not sold that this is an appropriate feature for the spec. Two
things worry me:

(1) So far, I haven't seen any JavaScript-free OAM files for OAM files that
wrap widgets from Ajax toolkits. If OAM authors need to resort to
JavaScript anyway, then for the YUI calendar widget (and similar calendar
widgets), the widget developer working on the calendar widget can figure
out how to format the date values (perhaps by including Steve's 40 lines of
JavaScript within that particular widget)

(2)  I'm not sure that it is compelling easier for a widget developer to
discover and learn how to use the 'formatString' attribute versus writing a
little JavaScript to create the appropriate string before calling the
constructor.

But nevertheless, if the majority want this feature, I'm OK with adding it
as Scott proposes below.

Jon



                                                                                                  
  From:       Kin Blas <jblas at adobe.com>                                                          
                                                                                                  
  To:         "ide at openajax.org" <ide at openajax.org>                                               
                                                                                                  
  Date:       08/19/2009 03:21 PM                                                                 
                                                                                                  
  Subject:    Re: [OpenAjaxIDE] date formatting                                                   
                                                                                                  
  Sent by:    ide-bounces at openajax.org                                                            
                                                                                                  





For the datatype=”Date” there are 2 supported format values, “date” and
“time”:

<property name=”myDate” datatype=”Date” format=”date” />
<property name=”myTime” datatype=”Date” format=”time” />

Rather than introducing another attribute, as proposed in Scott’s example.
Why not just leverage the existing @format attribute in conjunction with
the variables used by PHP:

http://us.php.net/manual/en/function.date.php.

The current proposed values for the Date @format aren’t that useful in my
opinion. So I envision something like:

<property name=”myDate” datatype=”Date” format=”d/m/Y” />
<property name=”myTime” datatype=”Date” format=”g:i:s” />

Regarding Jon’s comment about being able to work around this problem with
additional code added to the <javascript> or <content> sections … I really
feel that if we want this OAM format to be adopted by the various
frameworks and the industry, that we need to make it drop-dead simple for
them to support their formats/patterns so they don’t have to resort to
writing extra-glue code to make up for our in-flexibility.

--== Kin ==--’

From: ide-bounces at openajax.org [mailto:ide-bounces at openajax.org] On Behalf
Of Scott Richards
Sent: Wednesday, August 19, 2009 3:00 PM
To: Steve Repetti; 'Jon Ferraiolo'; ide at openajax.org
Subject: Re: [OpenAjaxIDE] date formatting

I think a lightweight solution that supports a very small set of legacy
formats would be all we need.  Sounds like Steve’s 40+ lines of DateFormat
code could handle this.

I like a simple approach of adding an additional formatString=”” attribute
or maybe call it formatPattern that enables you to format in the value that
is replaced using the @@variableName@@ notation in either the <javascript>
or <content> sections.  Here is an example.

<property datatype=”date” format=”date” formatString=”YYYY-MM-DD” />



where:
     YYYY = four-digit year
     MM   = two-digit month (01=January, etc.)
     DD   = two-digit day of month (01 through 31)
     hh   = two digits of hour (00 through 23) (am/pm NOT allowed)
     mm   = two digits of minute (00 through 59)
     ss   = two digits of second (00 through 59)



The formats from YUI Calendar takes Javascript Date Object or a string
formatted as “mm/yyyy” and “mm/dd/yyyy”.  The selected property can only be
specified with a string not a Javascript date object and it does not
support ISO 8601 format.  See this link

http://developer.yahoo.com/yui/calendar/#config

Here is an example of how we could support YUI Calendar date strings using
formatString.


var cal1 = new YAHOO.widget.Calendar("cal1",
                                    "cal1Container",
                                       { pagedate:"5/2007",
                                         selected:"5/5/2007-5/27/2007" });

This would look like the following in the oam.xml file:

      <javascript>
var cal1 = new YAHOO.widget.Calendar("cal1",
                                    "cal1Container",
                                       { pagedate:"@@pageDate@@",

selected:"@@selectDateStart@@-@@selectDateEnd@@" });
      </javascript>

      <property name=”pageDate” datatype=”date” format=”date”
      formatString=”MM/YYYY” />
      <property name=” selectDateStart” datatype=”date” format=”date”
      formatString=”MM/DD/YYYY” />
      <property name=” selectDateEnd” datatype=”date” format=”date”
      formatString=”MM/DD/YYYY” />


Not sure if we should support dropping out leading 0’s, do we need to
support this?  We could do with just M or D. But the YUI calendar works
specifying dates with or without leading 0’s. So this may be unnecessary.



Here is the link for jQuery Date formats.  They support multiple formats
including iso 8601.  So with  could support it as follows:

http://docs.jquery.com/UI/Datepicker/formatDate

Here are some examples from jQuery

$('.selector').datepicker({ appendText: '(YYYY-MM-DD)' });


Here is what this would like in the oam.xml file:

      <javascript>
      $('.selector').datepicker({ appendText: '(@@appendText@@)' });
      </javascript>).

      <property name=”appendText” datatype=”date” format=”date”
      formatString=” YYYY-MM-DD” />



From: ide-bounces at openajax.org [mailto:ide-bounces at openajax.org] On Behalf
Of Steve Repetti
Sent: Wednesday, August 19, 2009 12:39 PM
To: 'Jon Ferraiolo'; ide at openajax.org
Subject: Re: [OpenAjaxIDE] date formatting

Jon,

Just wanted to remind you that the 40+/- lines of code from my dateFormat()
function would handle your example as follows:

dateFormat( “MM/YYYY” )
dateFormat( “MM/DD/YYYY” )
dateFormat( “MM/DD” )
the above renders the current date in the desired formats. Alternatively,
you could specify have specified a specific date as the first parameter.

Please note, that dateFormat( ) has very little internationalization other
than inherited from JS, but again if you are interested I would be happy to
dinate the code base.

Steve Repetti
www.radwebtech.com



From: ide-bounces at openajax.org [mailto:ide-bounces at openajax.org] On Behalf
Of Jon Ferraiolo
Sent: Wednesday, August 19, 2009 3:25 PM
To: ide at openajax.org
Subject: [OpenAjaxIDE] date formatting



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>

_______________________________________________
IDE mailing list
IDE at openajax.org
http://openajax.org/mailman/listinfo/ide





-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://openajax.org/pipermail/ide/attachments/20090819/938833bb/attachment-0001.html 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: graycol.gif
Type: image/gif
Size: 105 bytes
Desc: not available
Url : http://openajax.org/pipermail/ide/attachments/20090819/938833bb/attachment-0002.gif 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: ecblank.gif
Type: image/gif
Size: 45 bytes
Desc: not available
Url : http://openajax.org/pipermail/ide/attachments/20090819/938833bb/attachment-0003.gif 


More information about the IDE mailing list