Understanding sunflower Gantt (7. Interface System of sunflower Gantt chart)

After we have introduced the data system of sunflower Gantt Chart in detail, we have understood the structure of the Subject + component in the data system. This is indeed a good way to break down complicated problems, therefore, during the design of the new Gantt Chart interface, we also used the same subject + control mode for development. After using the heart mode, the Gantt chart structure is clearer and each control performs its own duties, however, to implement complex functions of Gantt charts, the functional interface system of Gantt charts is as follows: with such a system, we can not only simplify development, but also implement flexible configuration of Gantt charts, you can implement Gantt charts of different styles by controlling the loading or not loading some controls. Next we will give a brief introduction to these controls. It should be noted that the subject of Gantt chart is actually a very small class and its functions are extremely simple, so that it cannot complete any functions, all functions are completed by controls. The subject only organizes these controls to ensure the normal operation of all controls.

1. SFGanttTooltipControl: controls all the tooltip display controls on the Gantt chart. If this control is not loaded, all the tooltip displayed on the Gantt chart will not be displayed. Set gtConfig. setConfig ("SFGantt/disableTooltip", true); you can disable the control from being loaded. 2. SFGanttContextMenuControl: this control is supported by the right-click menu on the Gantt chart. If this control is not loaded, all the right-click menus on the Gantt chart become invalid, and you cannot add custom menus to the Gantt chart, by setting gtConfig. setConfig ("SFGantt/disableContextMenu", true); this control cannot be loaded. 3. SFGanttLayoutControl is a very important control, because it controls the layout of the entire Gantt chart. Many controls depend on this control to run, so this control must be loaded, no method is provided to disable this control. 4. SFGanttBodyHeightControl intelligently records the total height of all current tasks to control the length of the scroll bar on the right. It directly shows that if the control is not loaded, after the scroll bar is dragged up to the top, the length of the scroll bar is gradually restored to the original size. Because the current time series and other functions depend on the secondary control, the method of prohibiting the secondary control is not provided for the time being. It may be provided after the dependency is removed. 5. SFGanttFieldList: controls used to display the list header. If listWidth = 0 (left-side list not displayed) or headHeight = 0 (no header displayed) is set for the layout control ), the control does not have the position where the list header can be displayed. The control is automatically disabled.

6. SFGanttCursorControl is used to display controls supported by custom mouse styles. Disabling this control will enable all custom mouse style functions (. the cur file) is disabled, but the system-integrated mouse styles such as move and pointer can continue to work, by setting gtConfig. setConfig ("SFGantt/disableCursor", true); this control cannot be loaded.

7. SFGanttViewItemsControl is an important control that manages the list of tasks within the display range of the current view. When the scrolling or data changes, this control will respond and notify other controls through events. Currently, there is no way to disable this control. 8. SFGanttElementSelectControl: This control processes the physical selection function on the interface. If this control is not loaded, all selection methods cannot be used, such as getFocusElement, getSelectedElements, setSelectedElement, and clearSelectedElement, operations performed on the selected object cannot be used. Of course, the menu and other functions will be affected. Although this control is not recommended, the method of prohibiting is also provided by setting gtConfig. setConfig ("SFGantt/disableCursor", true); this control cannot be loaded. 9. SFGanttSelectTaskOperateControl is designed for the task Gantt chart. It provides a series of methods for the selected task, such as upgrading, downgrading, deleting, and adding the current task, of course, this control depends on SFGanttElementSelectControl. After this control is disabled, the methods of Gantt charts cannot be used: addTask, deleteTask, upgradeSelectedTasks, degradeSelectedTasks, upgradeTask, degradeTask, addTasksLinks and, it is not recommended that you disable the SFGanttElementSelectControl control directly for focusshortview. 10. SFGanttScrollControl, which is used to scroll the main part of a Gantt chart, that is, scroll through the scroll wheel, this function becomes optional in the new version of Gantt Chart (because the new version can be directly dragged to drag the chart), it must be noted that, if this control is disabled, the scroll bar on the right is not displayed. You can set gtConfig. setConfig ("SFGantt/disableScroll", true); this control cannot be loaded. 11. SFGanttChangeEventControl is used to implement the taskchange event of a task. Many events are triggered in the Gantt chart operation. If you use the aftertaskchange event to adjust the interface or some aspects, this event delays and merges the aftertaskchange of the task to reduce the number of re-painted interfaces. This control does not depend on any other controls, however, many controls depend on this control because of the taskchange event. Therefore, we do not recommend that you disable the control from being loaded. SFGanttElementList: this control is used to implement the list on the left side of the Gantt chart. The list of subjects on the left side and the ID column on the left side are actually instances of the SFGanttElementList control. This control is an interface control and can only be run using the sfganttla, you can use SFGanttLayoutControl to change the layout of a control to disable the operation of one or more instances of the control. Method of parts; 13. SFGanttCollapseControl is used to implement the separation bar area in the middle of the Gantt chart, and to fold the buttons on both sides of the left and right, and drag and drop the function to change the size. If this control is disabled, in the middle of the Gantt chart, there is a single unfunctional separation bar. This space is an interface control and can only be run using the SFGanttLayoutControl control, you can use SFGanttLayoutControl to set the width of the split bar to less than 4. This control does not run. You can also set gtConfig. setConfig ("SFGantt/disableCollapse", true); this control cannot be loaded.

14. SFGanttDragResizeControl: This control displays a triangle in the lower-right corner of the Gantt chart. You can drag a triangle to change the size of the Gantt chart. This control does not depend on any control, nor does it depend on this control, by setting gtConfig. setConfig ("SFGantt/disableDragResize", true); this control cannot be loaded. 15. SFGanttHelpLinkControl: displays the help link question mark in the upper-right corner of the Gantt chart. This control is an interface control that depends on the SFGanttLayoutControl control to run. You can use SFGanttLayoutControl to change the control layout, you can also set gtConfig. setConfig ("SFGantt/disableHelpLink", true); this control cannot be loaded. 16. SFGanttLogoControl: Of course, the Logo displayed in the upper left corner is also a Gantt chart control. This control is an interface control that can be run only after being dependent on the SFGanttLayoutControl control. You can use SFGanttLayoutControl to change the control layout, however, based on our rights and interests, we have not provided a separate method to prohibit this control. That is to say, unless the layout you have defined does not display the logo, the control should be loaded. 17. SFGanttSizeLimitControl, which supports the setMaxSize and setMinSize methods for Gantt charts. By default, the size of a Gantt chart is limited to 200*200 and 1000*1000. That is to say, you cannot drag the icon in the lower-right corner or change the map size beyond this range. This control protects the performance and performance of the Gantt chart. Therefore, we do not recommend that you disable this control, however, you can use the setMaxSize and setMinSize methods to increase the size limit. 18. SFGanttTimeControl, which provides time-and timeline-related support for Gantt charts (this support is optional, because if you do not need a chart on the right, in fact, Gantt chart does not have to provide time-related support, but it is not a Gantt chart). However, considering that this is usually required and has no impact on performance, no method is provided to disable this control;

19. SFGanttMapPanel, which is used to implement the chart layer on the right of a Gantt chart. This layer moves along the timeline and changes along with the change of the vertical scroll bar, for example, the Gantt chart task bar and arrow are all contained in the layer of this control. This control relies on the layout control SFGanttLayoutControl and the time control SFGanttTimeControl. 20. SFGanttTimePanel is similar to SFGanttMapPanel. The difference is that this layer does not change with the scroll bar. Therefore, it is used only for time-related content, for example, timeline and working time shadow. This control depends on the layout control SFGanttLayoutControl and the time control SFGanttTimeControl. 21. SFGanttZoomControl defines a set of predefined scaling levels, so that when you use the "zoom in Chart" and "zoom out Chart" commands, the scaling level can be changed according to this group. Currently, 9 levels are defined in the 0-8 system, use 1 pixel for representation (30 seconds, 5 minutes, 10 minutes, 40 minutes, 2 hours, 4 hours, 16 hours, 32 hours, 4 days, 12 days ), after the control is loaded, the Gantt chart supports zoomIn, zoomOut, and zoomTo methods, although the Gantt chart itself supports stepless scaling of 22. SFGanttAutoResizeControl: This control implements the adaptive size of a Gantt chart. Because a Gantt chart is displayed on a webpage, the layer that loads a Gantt chart may also change when the page size or element changes, in this case, the Gantt chart is used to adapt to the size change. Although the command parameter of this control is not disabled, as long as the container layer used to display the Gantt chart is fixed in pixels instead of percentages, this control will feel that it has no value to load and refuse to load. 23. SFGanttTimeScroller: This control implements the horizontal timeline scroll bar of the Gantt Chart (horizontal scroll bar on the right). dragging this scroll bar will change the start time of the Gantt Chart display. For the sake of appearance, either the Left or Right two scroll bars are displayed, the method of disabling the scroll bar is not provided. However, if the bottom content of the Gantt chart is not displayed in the SFGanttLayoutControl of the layout control, this control is also disabled for running because it is not displayed. SFGanttDivScroller: This control implements the scroll bar of the Gantt chart list (horizontal scroll bar on the left). You can drag the scroll bar to scroll the content of the list. For the sake of appearance, either the Left or Right two scroll bars are displayed, the method of disabling the scroll bar is not provided. However, if the bottom content of the Gantt chart is not displayed in the SFGanttLayoutControl of the layout control, this control will be disabled for running because it is not displayed. 25. SFGanttTasksMap, which is used to draw a Gantt chart task chart. Task Bar. This control is an interface control that depends on the SFGanttLayoutControl control to run. You can use SFGanttLayoutControl to change the layout of the control to prohibit the control from running. There is no single method to prohibit this control. 26. SFGanttLinksMap: this control is used to draw the task relationship arrow of a Gantt chart. This control is an interface control that relies on the SFGanttLayoutControl Control to run. You can use SFGanttLayoutControl to change the layout of the control to prohibit the control from running, you can also set gtConfig. setConfig ("SFGantt/disableLinksMap", true); you can disable the control from being loaded (disabling the control can indeed improve the Gantt chart performance ). 27. SFGanttTimeScrollNotice: displays the prompt box for displaying the current start time of a Gantt chart in real time when you drag a Gantt chart or the scroll bar below, only the SFGanttLayoutControl control is required. You can also set gtConfig. setConfig ("SFGantt/disableTimeScrollNotice", true); you can disable this control from loading 28. SFGanttListScrollNotice: displays a Gantt chart scroll prompt box when you drag a Gantt chart or a scroll bar on the right, only the SFGanttLayoutControl control is required. You can also set gtConfig. setConfig ("SFGantt/disableListScrollNotice", true); this control cannot be loaded. 29. SFGanttCalendarControl: supports the calendar control of the Gantt chart. It controls the display of the calendar when any scaling factor is selected. For example, when you drag the calendar layer to scale, the calendar displayed on the Gantt chart also changes. We should know that this is the credit of SFGanttCalendarControl. Although this control does not display any content on the interface, multiple controls depend on this control, this control does not affect the performance, so there is no way to disable the control. 30. SFGanttCalDiv, which is first supported by SFGanttCalendarControl, displays a calendar list that varies with the scaling level and timeline on the Gantt chart to ensure that the Gantt chart is scaled and dragged, the correct calendar content is always displayed on the top. This control is an interface control that relies on the SFGanttLayoutControl control to run. If the position of the display calendar is not defined in SFGanttLayoutControl, the control will not run, there is no single method to disable this control 31. SFGanttDragZoomControl: This control depends on the SFGanttCalDiv above. In fact, it provides drag-and-drop support for the SFGanttCalDiv layer. After all, SFGanttCalDiv only implements the calendar display function, while SFGanttDragZoomControl is loaded, the original calendar layer can be dragged to support stepless scaling. You can set gtConfig. setConfig ("SFGantt/disab LeDragZoom ", true); this control cannot be loaded. 32. SFGanttTimeSegmentation, which displays the calendar line on the Gantt chart, that is, a dotted line on the chart. These dotted lines are always consistent with the calendar line on the top, therefore, this control depends on the SFGanttTimePanel and SFGanttCalendarControl controls. If you do not want to display this dotted line, you can set gtConfig. setConfig ("SFGantt/disableTimeSegmentation", true); this control cannot be loaded. 33. SFGanttWorkingMask: This control displays the working time shadow on the Gantt chart, that is, the shadow area of the worker segment on the chart. Each shadow area represents a non-working period such as a weekend or evening. In addition, the shadow area is the unit of the lower-end calendar segment. This control depends on the SFGanttTimePanel and SFGanttCalendarControl controls. If you do not want to display the working time shadow, you can set the gtConfig. setConfig ("SFGantt/disableWorkingMask", true); this control cannot be loaded. 34. SFGanttTimeLine: This control adds timeline support for Gantt charts. After loading this control, you can add custom timelines to Gantt charts using the addTimeLine method, if you do not use this method, this control has no impact on the Gantt chart performance. Therefore, no method is provided to disable this control. 35. sfganttdefamenmenucontrol: The SFGanttContextMenuControl in the front only adds support for the menu of the Gantt chart, but does not add any menu to the system. This control adds a series of defined menus to the system, for example, you can add, delete, or scale a chart. Disabling this control disables support for all system integration menus. This is not recommended, you can use the function provided by the specified method to selectively disable the display of menus. Therefore, we do not define a method to prohibit the control from running. In general, the above are all 35 controls that implement the Gantt chart function at the present stage. Each space implements independent functions. Only when necessary can other controls be relied on, this ensures that the Gantt chart system runs under a flexible, efficient, and clear architecture. I will explain the usage of Some Important controls, especially the layout controls.