架构师01:架构设计的 UML 图形思考(Graphic Thinking)

目录

目录

一、建模与图形思考

在项目正式 Coding 之前,架构师(Architect)的工作主要有两个方面:创意设计人际沟通。如何去完成这两部分内容呢?答案就是:UML 图。

图片来源于维基百科

借助 UML 图形,架构师可以对整个项目的架构或者框架进行创意设计。通过图形建模将内含的基本概念和关系表达出来。在沟通的时候也可以通过 UML 图形,让不懂代码的人也能够理解整体的设计,减少沟通的成本。

所以,对于架构师来说,其图形绘制能力和思考能力越好,其创意设计与人际沟通能力就越好。

二、UML建模工具

Astah Professional:Astah Professional(原名JUDE)是UML建模工具中,最具有简洁设计、轻便简单、易学好用的。Astah 功能强大,支持UML2.x中的图表(Diagram),包括:

  • Class Diagram(类别图)
  • Use Case Diagram(用例图)
  • Statemachine Diagram(状态机图)
  • Sequence Diagram(顺序图)
  • Activity Diagram(活动图)
  • Communication Diagram(通信图)
  • Component Diagram(模块图)
  • Deployment Diagram(布署图)
  • Composite Structure Diagram(组合结构图)

官方网站:http://astah.net/

可以下载一个免费小区型(Community)版本来使用。

三、绘制UML类别图:表达<基类/子类>

下载安装好 Astah 后,我们来尝试画一下类别图,看看在类别图中,如何表达基类、子类的关系。

  • step1:启动 Astah ,在菜单栏中选择,在出现的下拉框中选择Class Diagram
创建类别图

选择后,界面会出现一个空白的类别图,我们将在上面绘制我们需要的 Class。

新建的类别图

在空白的类别图上方,有一排类别图的元素(Element),简称「图素」,如下:

Element
  • step2:在元素列表中,我们选中第二个图素,然后移动鼠标到图表里面,按下鼠标左键,就会在图标中出现一个类别元素;
选中类别元素
点击鼠标左键,生成一个类别元素

假设这个类别元素是 Android 里面的 Activity 。

基类:Activity

tips:如果想要修改类别元素的背景颜色。可以右键,选中Set Color,然后选择自己喜欢的颜色就行。

Set Color

让我们再画一个类别元素,名叫MyActivity

2019-08-08_111738.jpg
  • step3:建立 Activity 和 MyActivity 之间的继承关系。在元素列表中,选中Generalization,然后将鼠标移动到 MyActivity 上,点击左键,再将鼠标移动到 Activity上,点击左键,即可完成;
选中Generalization
建立继承关系

四、绘制UML类别图:表达接口(Interface)

对于架构师而言,接口(Interface)的角色比类(Class)来得重要多了。在上一小节中,我们学些了继承(extends)关系的表达,在这一小节,我们来学习一下实现(implements)关系如何表示。

我们以 Activity 实现 OnClickListener 接口为例:

public class MyActivity extends Activity implements OnClickListener {
  ......
}
  • step1:在元素列表中选中接口图素,然后移动鼠标到类别图的空白位置,点击鼠标左键创建一个接口元素,取名叫OnClickListener
选中图素
创建一个接口元素
  • step2:为 OnClickListener 接口创建一个注释
选中

里面声明一下接口中的抽象方法:

声明onclick方法
  • step3:选中 图素将注释和接口连接起来;
选中
将注释和接口连接起来
  • step4:表达 Class 与接口之间的关系。选中 图素,将 MyActivity 和 OnClickListener 连接起来;
选中图素
连接 MyActivity 和 OnClickListener

在 MyActivity 中声明一下实现的 onClick 方法:

2019-08-08_145315.jpg
2019-08-08_145722.jpg

当 MyActivity 实现了 OnClickListener 接口以后,其它类就能通过此接口来调用 MyActivity 里的 onClick() 函数:

public class MyActivity extends Activity {
@Override public void onCreate(Bundle icicle) {
  super.onCreate(icicle);
  setContentView(R.layout.main);
  Button btn = new Button(this);
  btn.setText("OK");
  btn.setBackgroundResource(R.drawable.heart);
  btn.setOnClickListener(this);
  setContentView(button);
}

上述代码表示了页面中有一个 Button,该 Button 调用了 onClick 方法:

2019-08-08_165235.jpg

那么 onClick 方法调用的顺序是怎样的呢?下面,我们来画一画。

首先,选中图素,将 Button 和 OnClickListener 接口连接起来,注意连线的时候,是从 Button 到 OnClickListener :

2019-08-08_171558.jpg

然后在连接线处点击右键,选择Navigation -> Navigable。然后我们就可以看到,原来的直线已经带上了箭头,箭头的方向指向被调用方。

2019-08-08_171957.jpg
2019-08-08_172259.jpg

我们可以给线改成其他颜色,这样更加清晰:

2019-08-08_172800.jpg

OnClickListener 则会去调用 MyActivity 中的 onClick() 方法:

2019-08-08_172721.jpg

我们可以在线上标记出方法名:右键,选项 Set Name,填入 onClick():

Set Name
2019-08-08_173139.jpg

这样,我们就把实现关系,以及方法调用的顺序给描述清楚了。

你可能感兴趣的:(架构师01:架构设计的 UML 图形思考(Graphic Thinking))