Timeline"

From Documentation
m ((via JWB))
(10 intermediate revisions by 5 users not shown)
Line 2: Line 2:
  
 
= Timeline =
 
= Timeline =
 
+
  Deprecated, please use [http://blog.zkoss.org/index.php/2015/01/13/introducing-new-zk-addon-zk-timeline/ new Timeline instead]
*Demonstration: [http://www.zkoss.org/zkdemo/userguide/#m9 SIMILE Timeline]
 
*Java API: N/A
 
*JavaScript API:  N/A
 
  
 
= Employment/Purpose =
 
= Employment/Purpose =
Line 11: Line 8:
 
[http://www.simile-widgets.org/timeline/ Timeline]is a DHTML-based Ajax widget for visualizing time-based events developed by SIMILE project of MIT. It is like Google Maps for time-based information.
 
[http://www.simile-widgets.org/timeline/ Timeline]is a DHTML-based Ajax widget for visualizing time-based events developed by SIMILE project of MIT. It is like Google Maps for time-based information.
  
 +
A timeline contains one or more Bands, which can be panned infinitely by dragging with the mouse pointer, using the mouse scroll-wheel or the keyboard's arrow buttons.
 +
 +
A band can be configured to synchronize with another band such that panning one band also scrolls the other.
  
 
= Example =
 
= Example =
Line 28: Line 28:
  
  
 +
timeline_ex1.xml
 +
<source lang="xml" >
 +
<data>
 +
    <event start="Oct 1 2010 00:00:00 GMT" end="Oct 1 2010 00:00:00 GMT"
 +
        title="Friend's wedding">
 +
        I'm not sure precisely when my friend's wedding is.
 +
        </event>
 +
    <event start="Oct 15 2010 11:00:00 GMT" end="Nov 1 2010 09:00:00 GMT"
 +
        isDuration="true" title="Writing Style Guide" image="http://simile.mit.edu/images/csail-logo.gif">
 +
        A few days to write some documentation for
 +
        <a href="http://www.zkoss.org/doc/styleguide">Timeline</a>
 +
        .
 +
    </event>
 +
    <event start="Oct 23 2010 06:12:33 GMT" title="Trip to New York"
 +
        link="http://www.priceline.com/">
 +
        Happy New Year !
 +
    </event>
 +
</data>
 +
</source>
  
=Supported events=
+
=Supported Events=
  
{| border="1" | width="100%"
+
{| class='wikitable' | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Event Type</center>
 
! <center>Event Type</center>
Line 38: Line 57:
 
| None
 
| None
 
|}
 
|}
 +
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]]
  
 
=Supported Children=
 
=Supported Children=
Line 44: Line 64:
  
  
=Use cases=
+
=Use Cases=
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
 
| 3.6
 
| 3.6
 
| Smalltalk: Using Timeline Component, Part I
 
| Smalltalk: Using Timeline Component, Part I
| [http://docs.zkoss.org/wiki/Using_Timeline_Component%2C_Part_I http://docs.zkoss.org/wiki/Using_Timeline_Component%2C_Part_I]
+
| [[Small_Talks/2007/February/Using_Timeline_Component,_Part_I |Using Timeline Component, Part I]]
 
|-
 
|-
 
| 3.6
 
| 3.6
 
| Smalltalk: Using Timeline Component, Part II
 
| Smalltalk: Using Timeline Component, Part II
| [http://docs.zkoss.org/wiki/Using_Timeline_Component%2C_Part_II http://docs.zkoss.org/wiki/Using_Timeline_Component%2C_Part_II]
+
| [[Small_Talks/2007/February/Using_Timeline_Component,_Part_II |Using Timeline Component, Part II]]
 
|-
 
|-
 
| 3.6
 
| 3.6
 
| How to use ListModel in Timeline component
 
| How to use ListModel in Timeline component
| [http://docs.zkoss.org/wiki/How_to_use_ListModel_in_Timeline_component http://docs.zkoss.org/wiki/How_to_use_ListModel_in_Timeline_component]
+
| [[Small_Talks/2007/May/How_to_use_ListModel_in_Timeline_component |How to use ListModel in Timeline component]]
 
|-
 
|-
 
| 3.6
 
| 3.6
 
| Using the New Feature Of The Timeline Component
 
| Using the New Feature Of The Timeline Component
| [http://docs.zkoss.org/wiki/Using_the_New_Feature_Of_The_Timeline_Component http://docs.zkoss.org/wiki/Using_the_New_Feature_Of_The_Timeline_Component]
+
| [[Small_Talks/2008/September/Using_the_New_Feature_Of_The_Timeline_Component |Using the New Feature Of The Timeline Component]]
 
|-
 
|-
 
| 3.6
 
| 3.6
 
| Integrating Google Calendar with ZK Timeline Component
 
| Integrating Google Calendar with ZK Timeline Component
| [http://docs.zkoss.org/wiki/Integrating_Google_Calendar_with_ZK_Timeline_Component http://docs.zkoss.org/wiki/Integrating_Google_Calendar_with_ZK_Timeline_Component]
+
| [[Small_Talks/2007/July/Integrating_Google_Calendar_with_ZK_Timeline_Component | Integrating Google Calendar with ZK Timeline Component]]
 
|}
 
|}
  
 
=Version History=
 
=Version History=
 
+
{{LastUpdated}}
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
| 5.0.2
+
| &nbsp;
| 5/18/2010
+
| &nbsp;
| Initialization
+
| &nbsp;
 
|}
 
|}
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Revision as of 11:05, 7 January 2022

Timeline

Deprecated, please use new Timeline instead

Employment/Purpose

Timelineis a DHTML-based Ajax widget for visualizing time-based events developed by SIMILE project of MIT. It is like Google Maps for time-based information.

A timeline contains one or more Bands, which can be panned infinitely by dragging with the mouse pointer, using the mouse scroll-wheel or the keyboard's arrow buttons.

A band can be configured to synchronize with another band such that panning one band also scrolls the other.

Example

ZKCompRef Timeline.png

<timeline height="300px" width="100%">
	<bandinfo width="70%" id="b1" intervalUnit="month"
		intervalPixels="100" eventSourceUrl="misc/timeline_ex1.xml">
	</bandinfo>
	<bandinfo width="30%" intervalUnit="year" intervalPixels="200"
		syncWith="b1" eventSourceUrl="misc/timeline_ex1.xml">
	</bandinfo>
</timeline>


timeline_ex1.xml

<data>
    <event start="Oct 1 2010 00:00:00 GMT" end="Oct 1 2010 00:00:00 GMT"
        title="Friend's wedding">
        I'm not sure precisely when my friend's wedding is.
        </event>
    <event start="Oct 15 2010 11:00:00 GMT" end="Nov 1 2010 09:00:00 GMT"
        isDuration="true" title="Writing Style Guide" image="http://simile.mit.edu/images/csail-logo.gif">
        A few days to write some documentation for
        <a href="http://www.zkoss.org/doc/styleguide">Timeline</a>
        .
    </event>
    <event start="Oct 23 2010 06:12:33 GMT" title="Trip to New York"
        link="http://www.priceline.com/">
        Happy New Year !
    </event>
</data>

Supported Events

Name
Event Type
None None

Supported Children

* Bandinfo


Use Cases

Version Description Example Location
3.6 Smalltalk: Using Timeline Component, Part I Using Timeline Component, Part I
3.6 Smalltalk: Using Timeline Component, Part II Using Timeline Component, Part II
3.6 How to use ListModel in Timeline component How to use ListModel in Timeline component
3.6 Using the New Feature Of The Timeline Component Using the New Feature Of The Timeline Component
3.6 Integrating Google Calendar with ZK Timeline Component Integrating Google Calendar with ZK Timeline Component

Version History

Last Update : 2022/01/07


Version Date Content
     



Last Update : 2022/01/07

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.