Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    #16
    This looks to be an issue with refresh-timing - the order in which data and lanes are being set, versus a call to refreshEvents().

    It's likely that just calling refreshEvents() once everything is in place will address the redraw issue.

    To look at the styling issue, we'll need to see a runnable example, with source and css styles

    Comment


      #17
      Example for the timeline event rendering problem (invalid size of font)

      Smart GWT 4.0d (SmartClient Version: v9.0d_2013-06-14/PowerEdition Deployment (built 2013-06-14))

      Thanks.

      3) Do you have an estimation when it will be available?

      8) It seems the key is not to show the event descriptions.
      Code:
      timeline.setShowEventDescriptions(false);
      Below are sources, but also attached as files.

      It opens fine (Timeline-event-font-is-OK.PNG) but very easy to
      recreate the problem (Timeline-event-font-is-wrong.PNG): use timeline scrollbar or click the SetData button.

      Let me know if you need anything else. Thank you.

      Main class.
      Code:
      package com.amkai.web.test.client;
      
      import java.util.Date;
      
      import com.google.gwt.core.client.EntryPoint;
      import com.smartgwt.client.data.RelativeDate;
      import com.smartgwt.client.types.TimeUnit;
      import com.smartgwt.client.util.DateUtil;
      import com.smartgwt.client.widgets.Button;
      import com.smartgwt.client.widgets.calendar.CalendarEvent;
      import com.smartgwt.client.widgets.calendar.HeaderLevel;
      import com.smartgwt.client.widgets.calendar.Lane;
      import com.smartgwt.client.widgets.calendar.Timeline;
      import com.smartgwt.client.widgets.events.ClickEvent;
      import com.smartgwt.client.widgets.events.ClickHandler;
      import com.smartgwt.client.widgets.layout.VLayout;
      
      /**
       * @author miskolcp
       *
       */
      public class TimelineTest implements EntryPoint {
      	
      	private static String EVENT_STYLE = "tl_appointmentStyle";
      	private static boolean CAN_EDIT = true;
      	private static Date today = new Date();   
          private static int year = today.getYear();   
          private static int month = today.getMonth();   
          private static int start = today.getDate();
          
          private static CalendarEvent[] events = new CalendarEvent[] {
          			new CalendarEvent(1, "Meeting", "Shareholders meeting: monthly forecast report", new Date(year, month, start, 9, 0, 0), new Date(year, month, start, 14, 0, 0), CAN_EDIT, EVENT_STYLE, "l1"),   
          			new CalendarEvent(2, "Realtor", "Breakfast with realtor to discuss moving plans", new Date(year, month, start, 8, 0, 0), new Date(year, month, start, 10, 0, 0), CAN_EDIT, EVENT_STYLE, "l2"),   
          			new CalendarEvent(3, "Soccer", "Little league soccer finals", new Date(year, month, start, 13, 0, 0), new Date(year, month, start, 16, 0, 0), CAN_EDIT, EVENT_STYLE, "l3"),   
          			new CalendarEvent(4, "Sleep", "Catch up on sleep", new Date(year, month, start, 5, 0, 0), new Date(year, month, start, 9, 0, 0), CAN_EDIT, EVENT_STYLE, "l4"),   
          			new CalendarEvent(5, "Inspection", "Home inspector coming", new Date(year, month, start, 10, 0, 0), new Date(year, month, start , 12, 0, 0), CAN_EDIT, EVENT_STYLE, "l5"),   
          			new CalendarEvent(6, "Airport run", "Pick James up from the airport", new Date(year, month, start, 1, 0, 0), new Date(year, month, start, 3, 0, 0), CAN_EDIT, EVENT_STYLE, "l1"),   
          			new CalendarEvent(7, "Dinner Party", "Prepare elaborate meal for friends", new Date(year, month, start, 17, 0, 0), new Date(year, month, start, 20, 0, 0), CAN_EDIT, EVENT_STYLE, "l2"),   
          			new CalendarEvent(8, "Poker", "Poker at Steve's house", new Date(year, month, start, 21, 0, 0), new Date(year, month, start , 23, 0, 0), CAN_EDIT, EVENT_STYLE, "l3"),   
          			new CalendarEvent(9, "Meeting", "Board of directors meeting: discussion of next months strategy", new Date(year, month, start, 11, 0, 0), new Date(year, month, start, 15, 0, 0), CAN_EDIT, EVENT_STYLE, "l4") 
          		};   
          
          private static Lane[] lanes = new Lane[] {
      	    	new Lane("l1","Lane 1"),
      	    	new Lane("l2","Lane 2"),
      	    	new Lane("l3","Lane 3"),
      	    	new Lane("l4","Lane 4"),
      	    	new Lane("l5","Lane 5")
          	};
          
          private Timeline timeline;
          
          private void setData() {
      		timeline.setData(events);
          }
          
      	@Override
      	public void onModuleLoad() {
      		VLayout vl = new VLayout();
      			timeline = new Timeline();
      				timeline.setShowEventDescriptions(false); 
      				timeline.setHeaderLevels(new HeaderLevel(TimeUnit.DAY), new HeaderLevel(TimeUnit.HOUR));
      				timeline.setLanes(lanes);
      				setData();
      				timeline.setTimelineRange(DateUtil.getAbsoluteDate(RelativeDate.TODAY), DateUtil.getAbsoluteDate(RelativeDate.TOMORROW));
      			Button bSetData = new Button("SetData");
      				bSetData.addClickHandler(new ClickHandler() {
      					
      					@Override
      					public void onClick(ClickEvent event) {
      						setData();
      					}
      				});
      				
      		vl.setMembers(timeline, bSetData);
      		vl.setWidth100();
      		vl.setHeight100();
      		vl.draw();
      	}
      	
      }

      CSS

      Code:
      .tl_appointmentStyle,
      .tl_appointmentStyleHeader
       {
         font-size:9px;
         background-color: #BCEDAC; 
         border: 1px solid #035F03; 
      }
      GWT module
      Code:
      <?xml version="1.0" encoding="UTF-8"?>
      <module rename-to="testweb">
      
        <inherits name='com.google.gwt.user.User'/>
        <inherits name="com.google.gwt.core.Core"/>
        <inherits name="com.google.gwt.user.History"/>
      
        <inherits name="com.smartgwt.tools.SmartGwtTools"/>
        
        <inherits name="com.smartgwtee.SmartGwtEENoTheme"/>
        <inherits name="com.smartgwtpower.tools.Tools"/>
        
        <inherits name="com.smartclient.theme.treefrog.TreeFrogResources"/>  
        
        <source path="client"/>
         
        <entry-point class="com.amkai.web.test.client.TimelineTest"/>
      </module>
      Attached Files

      Comment


        #18
        You need to provide a Body style as well as Header - using Firebug or similar, you can see that the style being set in your example is tl_appointmentStyleBody.

        Recent builds have this correct behaviour - now, with showEventDescriptions: false, the Body style, which by default has borders etc, is applied to the eventWindow as a whole - before, it was applying the Header style incorrectly (so that events would look completely different according to the value of showEventDescriptions)

        Comment


          #19
          Much easier to manage only one Style for Calendar and Timeline - thank you.

          Only one thing is left the point 3) (wrapping HeaderLevel.titleFormatter). Actually we can resolve it with giving the titles for the header level (we display pre-defined hours for a day), but it would be better to be able customizing it. Thanks.

          Comment

          Working...
          X