前面我们详细的介绍了向日葵甘特图的数据体系之后,对数据体系之中的主体+组件的结构已经有所了解,这确实是将复杂的问题进行分解的好的方法,因此,我们在新的甘特图界面设计的时候,也采用了同样的主体+控件的模式进行开发,采用了心模式之后的甘特图结构更加清晰,每个控件各司其职,而实现甘特图复杂的功能,甘特图的功能界面体系如下图:

 
    因为采用了这样的体系,我们不仅可以简化开发,更可以实现甘特图灵活的配置,住需要控制加载或者不加载某些控件即可实现不同样式的甘特图。

    下面我们将逐步的简单介绍这些控件,需要说明的是,甘特图的主体实际上是一个很小的类,功能极其简单以至于无法完成任何功能,而所有的功能都是由控件完成的,主体只是对这些控件进行组织以保证所有的控件正常运行。

    1.SFGanttTooltipControl,这个控件是控制甘特图上所有tooltip显示的控件,如果不加载此控件,甘特图上所有鼠标划过的tooltip都不会显示;通过设置gtConfig.setConfig("SFGantt/disableTooltip",true);可以禁止此控件的加载。

    2.SFGanttContextMenuControl,这个控件是甘特图上右键菜单支持的控件,如果不加载此控件,甘特图上所有的右键菜单都失效,而且用户也不能向甘特图添加自定义的菜单,通过设置gtConfig.setConfig("SFGantt/disableContextMenu",true);可以禁止此控件的加载。

    3.SFGanttLayoutControl,这个控件是个非常重要的控件,因为他控制着整个甘特图的布局,很多控件都依赖此控件来运行,因此此控件必须加载,没有提供禁止此控件的方法。

    4.SFGanttBodyHeightControl,这个控件智能的记录当前所有任务的总行高来控制右侧滚动条的长度,其直接的表现是,如果不加载该控件,在滚动条向上拖回到顶端之后,滚动条长度将逐渐恢复到原有大小,因为目前时间线等功能依赖次控件,因此暂时不提供禁止次控件的方法,在后面解除依赖之后,可能会提供。

    5.SFGanttFieldList,这个控件是用来显示列表头的控件,如果为布局控件设置了listWidth=0(不显示左侧列表)或者headHeight=0(不显示头),那这个控件就没有可显示列表头的位置,这个控件就会自动被禁止运行。

    6.SFGanttCursorControl,这个控件是用来显示自定义的鼠标样式支持的控件,禁止此控件,将会使所有的自定义鼠标样式功能(.cur文件)被禁止,不过系统集成的鼠标样式例如move,pointer等还能继续起作用,通过设置gtConfig.setConfig("SFGantt/disableCursor",true);可以禁止此控件的加载。

    7.SFGanttViewItemsControl,这个控件是一个重要的控件,这个控件管理着在当前视图显示范围内的任务列表,在滚动或数据发生变化的时候,这个控件会作出反应并通过事件通知其他的控件,目前没有提供禁止此控件的方法。

    8.SFGanttElementSelectControl,这个控件处理界面上实体选择的功能,如果不加载该控件,所有关于选择的方法都不能使用,例如getFocusElement,getSelectedElements,setSelectedElement,clearSelectedElement这些功能,同样,关于当前选中的实体执行的操作也不能使用,当然也就会影响到菜单等功能,虽然并不建议禁止这个控件,但是也提供了禁止的方法,通过设置gtConfig.setConfig("SFGantt/disableCursor",true);可以禁止此控件的加载。

    9.SFGanttSelectTaskOperateControl,这个控件是专为任务甘特图设计,为任务甘特图提供一些针对当前选中的任务的一系列方法,例如对当前的任务进行升级、降级、删除、添加等方法,这个控件当然依赖SFGanttElementSelectControl,禁止此控件之后,甘特图的这些方法就不能使用:addTask,deleteTask,upgradeSelectedTasks,degradeSelectedTasks,upgradeTask,degradeTask,addTasksLinks,removeTasksLinks,focusIntoView不建议直接禁止此控件(因为对性能没有影响),如果需要禁止,只需要禁止SFGanttElementSelectControl控件即可,因此没有提供专门的禁止此控件的方法。

    10.SFGanttScrollControl,这个控件用来实现甘特图的主体部分的滚动,也就是通过滚轮实现的滚动,这个功能在新版本的甘特图之中变成可选的了(因为新版本可以直接拖动图表来进行拖动),需要说明的是,如果此控件被禁用,也不会显示右侧的滚动条,通过设置gtConfig.setConfig("SFGantt/disableScroll",true);可以禁止此控件的加载。

    11.SFGanttChangeEventControl,这个控件用来实现任务的taskchange事件,在甘特图操作之中,很多事件会一并触发,如果通过aftertaskchange事件来进行进行界面或一些方面的调整,会造成很多冗余的操作,这个事件将任务的aftertaskchange进行延时和合并,减少对界面重绘的个数,这个控件不依赖任何其他的控件,不过有很多控件因为使用taskchange事件而依赖此控件,因此,不建议禁止此控件的加载

    12.SFGanttElementList,这个控件用来实现甘特图左侧的列表,左侧的主体列表和左侧的ID列实际上都是SFGanttElementList控件的实例,这个控件是界面控件,依赖SFGanttLayoutControl控件才能运行,通过SFGanttLayoutControl更改控件的布局可以禁止该控件的一个或多个实例的运行,没有单一的禁止此控件的方法;

    13.SFGanttCollapseControl,这个控件用来实现甘特图中间的分隔条区域,并实现左右两侧的折叠按钮和拖拽改变大小的功能,如果禁止此控件,甘特图两侧的中间就变成单一的没有功能的分隔条,这个空间是界面控件,依赖SFGanttLayoutControl控件才能运行,通过SFGanttLayoutControl之中将分割条的宽度设置为4以下该控件就不会运行,也可以通过设置gtConfig.setConfig("SFGantt/disableCollapse",true);可以禁止此控件的加载。

    14.SFGanttDragResizeControl,这个控件将在甘特图的右下角显示一个三角形,拖动三角形可以更改甘特图的大小,该控件不依赖任何控件,也没有任何控件依赖此控件,通过设置gtConfig.setConfig("SFGantt/disableDragResize",true);可以禁止此控件的加载。

    15.SFGanttHelpLinkControl,这个控件是甘特图右上角显示帮助链接问号,这个控件是界面控件,依赖SFGanttLayoutControl控件才能运行,通过SFGanttLayoutControl更改控件的布局可以禁止该控件的运行,也可以通过设置gtConfig.setConfig("SFGantt/disableHelpLink",true);可以禁止此控件的加载。

    16.SFGanttLogoControl,当然,显示在左上角的Logo也是一个甘特图的控件,这个控件是界面控件,依赖SFGanttLayoutControl控件才能运行,通过SFGanttLayoutControl更改控件的布局可以禁止该控件的运行,但是基于保护我们的权益,没有提供单独的禁止此控件的方法,也就是说除非你定义的布局没有显示logo的位置,否则该控件应该会被加载。

    17.SFGanttSizeLimitControl,该控件为甘特图提供setMaxSize和setMinSize两个方法的支持,并默认将甘特图的大小限制在200*200和1000*1000之间,也就是说,通过拖动右下角的图标或者其他方式更改地图的大小不能超出这个范围,因为这个控件对甘特图的性能和表现进行保护,因此不建议禁止此控件,不过可以使用setMaxSize和setMinSize两个方法将大小限制放宽。

    18.SFGanttTimeControl,该控件为甘特图提供时间和时间轴相关的功能支持(这个支持实际上是可选的,因为假如你不需要右侧的图表,实际上甘特图就没有必要提供时间相关的支持,不过那样就不是甘特图了),不过考虑到这是通常都需要的,而且对性能没有什么影响,因此,没有提供关闭此控件的方法;

    19.SFGanttMapPanel,该控件实现甘特图的右侧图表层,该层会随着时间轴的移动而移动,并且也会随着纵向滚动条的变化而跟随变化,例如甘特图的任务条和箭头都是在这个控件包含的层之中,这个控件依赖布局控件SFGanttLayoutControl和时间控件SFGanttTimeControl。

    20.SFGanttTimePanel,该控件和SFGanttMapPanel类似,不同的是,该层不会随滚动条变化而变化,因此,使用于仅仅和时间相关的内容,例如时间线、工作时间阴影等内容,这个控件依赖布局控件SFGanttLayoutControl和时间控件SFGanttTimeControl。

    21.SFGanttZoomControl,该控件定义了一组预定义的缩放级别,这样,在用户使用“放大图表”、“缩小图表”的命令的时候,就可以根据这一组缩放级别来进行变化,目前的系统之中,定义了0-8一共9个级别,分别使用1个像素代表(30秒、5分钟、10分钟、40分钟、2小时、4小时、16小时、32小时、4天、12天),在加载此控件之后,甘特图就支持了zoomIn,zoomOut,zoomTo这几个方法,虽然甘特图本身是支持无级缩放的

    22.SFGanttAutoResizeControl,该控件实现甘特图的自适应大小,因为甘特图是在网页之中显示的,有时候在网页大小或元素发生变化的时候,装载甘特图的层也可能发生变化,这个时候就需要甘特图来自适应大小的变化,此控件用来完成此功能。虽然没有禁止此控件的命令参数,不过只要将用来显示甘特图的container层直接用像素将大小固定而不是百分比,此控件就会觉得自己没有加载的价值而拒绝加载。

    23.SFGanttTimeScroller,该控件实现甘特图的横向时间轴滚动条(右侧横向滚动条),拖动该滚动条会更改甘特图显示的起始时间,考虑到美观的原因(左右两个滚动条要么都显示,要么都不显示),没有提供单独关闭此滚动条的方法,不过假如在布局控件SFGanttLayoutControl之中禁止显示甘特图的底部内容,该控件也就会因为没有显示的位置而被禁止运行

    24.SFGanttDivScroller,该控件实现甘特图列表滚动条(左侧横向滚动条),拖动该滚动条可以滚动列表的内容,考虑到美观的原因(左右两个滚动条要么都显示,要么都不显示),没有提供单独关闭此滚动条的方法,不过假如在布局控件SFGanttLayoutControl之中禁止显示甘特图的底部内容,该控件也就会因为没有显示的位置而被禁止运行

    25.SFGanttTasksMap,该控件实现甘特图的任务图表的绘制,实际上就是图表上的任务条,这个控件是界面控件,依赖SFGanttLayoutControl控件才能运行,通过SFGanttLayoutControl更改控件的布局可以禁止该控件的运行,没有单一的禁止此控件的方法

    26.SFGanttLinksMap,该控件实现甘特图的任务关系箭头的绘制,这个控件是界面控件,依赖SFGanttLayoutControl控件才能运行,通过SFGanttLayoutControl更改控件的布局可以禁止该控件的运行,也可以通过设置gtConfig.setConfig("SFGantt/disableLinksMap",true);可以禁止此控件的加载(禁止此控件的加载确实可以提升甘特图的性能)。

    27.SFGanttTimeScrollNotice,该控件实现甘特图时间变化提示,例如在拖动甘特图图表或者下方的滚动条的时候,出现的实时显示甘特图当前起始时间的提示框,这个控件是界面控件,依赖SFGanttLayoutControl控件才能运行,也可以通过设置gtConfig.setConfig("SFGantt/disableTimeScrollNotice",true);可以禁止此控件的加载

   28.SFGanttListScrollNotice,该控件实现甘特图滚动提示,例如在拖动甘特图图表或者右侧的滚动条的时候,出现的实时显示甘特图当前最上端任务的提示框,这个控件是界面控件,依赖SFGanttLayoutControl控件才能运行,也可以通过设置gtConfig.setConfig("SFGantt/disableListScrollNotice",true);可以禁止此控件的加载

   29.SFGanttCalendarControl,甘特图的日历支持控件,由这个控件控制在任意的缩放倍数的情况下选择对应的日历来显示,例如在拖动日历层缩放的时候,甘特图上显示的日历也在随之变化,我们应该知道这是SFGanttCalendarControl得功劳,虽然此控件并不在界面上显示任何内容,因为有多个控件依赖此控件,此控件本身并不对性能产生影响,因此没有禁止此控件运行的方法。

   30.SFGanttCalDiv,此控件是首先受到SFGanttCalendarControl支持的控件,在甘特图上显示一个随缩放等级和时间轴变化的的日历列表,保证甘特图在缩放和拖动的时候,上方总是显示正确的日历内容,此控件是一个界面控件,依赖SFGanttLayoutControl控件才能运行,如果SFGanttLayoutControl之中没有定义显示日历的位置,该控件就不会运行,没有单一的禁止此控件的方法

   31.SFGanttDragZoomControl,此控件依赖上边的SFGanttCalDiv,实际上是为SFGanttCalDiv层提供拖拽功能支持,毕竟SFGanttCalDiv仅仅实现了显示日历的功能,而SFGanttDragZoomControl加载之后,原有的日历层就可以通过拖拽来支持无级缩放,可以通过设置gtConfig.setConfig("SFGantt/disableDragZoom",true);可以禁止此控件的加载。

   32.SFGanttTimeSegmentation,此控件在甘特图上显示日历对准线,也就是图表上的一条条虚线,这些虚线总是和顶层的日历分隔线保持一致的,因此此控件依赖于SFGanttTimePanel和SFGanttCalendarControl控件,当你不希望显示此虚线的时候,可以通过设置gtConfig.setConfig("SFGantt/disableTimeSegmentation",true);可以禁止此控件的加载。

   33.SFGanttWorkingMask,此控件在甘特图上显示工作时间阴影,也就是图表上的一段段的阴影区,每个阴影区代表一段例如周末或晚上的非工作时间,另外,该阴影区是下端日历分段为单位的,此控件依赖于SFGanttTimePanel和SFGanttCalendarControl控件,当你不希望显示工作时间阴影的时候,可以通过设置gtConfig.setConfig("SFGantt/disableWorkingMask",true);可以禁止此控件的加载。

   34.SFGanttTimeLine,此控件为甘特图添加时间线的支持,加载此控件之后,就可以通过addTimeLine方法向甘特图上添加自定义的时间线,因为在用户不使用这个方法的情况下此控件对甘特图的性能没有影响,因此,没有提供禁止此控件的方法。

   35.SFGanttDefaultMenuControl,前面的SFGanttContextMenuControl仅仅为甘特图添加了右键菜单的支持,却没有向系统之中添加任何菜单,此控件向系统之中添加了一系列定义好的菜单,例如添加任务、删除任务、缩放图表等,禁用此控件就禁止了所有的系统集成菜单的支持,而这是不推荐的,你可以通过指定的方法提供的功能来选择性的禁止哪些菜单的显示,因此,我们没有定义禁止此控件运行的方法。


    以上大体上就是现阶段实现甘特图功能的全部35个控件,每个空间实现独立的功能,只有在确实需要的时候,才会去依赖其他的控件,这样保证甘特图系统运行在一个灵活、高效、清晰的架构之下,后面我会针对一些特定的重要的控件,进行专门的用法讲解,尤其是其中重要的布局控件。

posted on 2009-11-02 23:51  运筹帷幄  阅读(2905)  评论(0编辑  收藏  举报