面向对象的编程-Application 60

Previously on OOP:

In the last article, we have implemented adding groups and data query functionality. Thus, the major functionality, except for user interface, of a social network has been implemented.

在本段需求中，Graphic User Interface (GUI)的代码被要求全部编写在在SocialGuiclass中。然后，SocialGui的构造函数会接收an object ofSocialclass作为参数，其他GUI需要的控件，已经作为attributes被定义好了。

GUI的编写一般都按照MVC pattern，所谓MVC指的是Model, View and Controller三个部分。其中，Model相当于是后台程序，用的就是GUI这一章节以外的程序。那么，在本项大作业中，前面4个requirements编写的程序可以视为Model；也就是说，把Socialclass的实例作为参数传给SocialGui的构造函数，就是在把Model传进来；再换一个说法，SocialGuiclass中要编写View and Controller两部分的代码。

View部分负责控件的个数、排列，还有显示。我们先来看看SocialGui的attributes中已经定义好了哪些控件：

l1“ID:”字符串，id输入框，login按钮，user name字符串，friends列表。再对比一下需求中的窗口layout效果图，嗯，所有的控件都齐全了。

接下来是本段需求最重要的部分，把控件按照窗口layout效果图排好。窗口分有上下两个部分。我们先看上半部分，这部分占的位置比较少，包含了l1“ID:”字符串，id输入框和login按钮这三个控件，从左到右排列，居中放置，适合用flow layout来实现。而下半部分占的位置比较多，包含了user name字符串和friends列表两个控件，user name字符串在上面，friends列表在左边，适合使用border layout来实现。

那么，上半部分和下半部分要怎样组合在一起呢？

答案是nesting components/ layout，即应用了某种layout之后，再给其中的一个pane指定一个新的layout。那么本黄鸭就把整个窗口先用border layout分割成5个panes，把NORTH区域的pane划给上半部分，把CENTER区域的pane划给下半部分。然后，把NORTH区域的pane用flow layout划分给三个控件，把CENTER区域的pane用border layout划分给两个控件。

最后，分配控件位置的代码应该写在哪里呢？答案是constructor中，因为View类的constructor身负6-7项艰巨的任务，其中一项就是确定layout。

Constructor中还涉及到了一些其他的基本配置，比如窗口的大小、标题、关闭窗口的动作，等等。

不过，本段需求没有指出“点击XX触发XXX剧情”，也就是对Controller没有描述，所以要知道GUI有什么交互性，还要继续看下面的需求。

从用户的角度来看，他们可以在GUI上进行登录操作，只要先在id输入框中输入用户名，再点击login按钮就行了。

从微信/微博专业用户的角度来看，这种登录操作基本没有安全性可言。至少也应该再输入一个密码，判断一下用户名和密码是否匹配；更不要说安全级别比较高的微信公众号了，知道用户名、密码还不够，还要用手机扫一扫确认身份。这就说明了本项大作业和各大上市公司开发的社交网站之间的距离是十万光年。

从开发者的角度来看，在点击login按钮的时候，会把View端的id输入框中的用户名用Controller端取回来，发送到Model端/ Social class，在mapPeople里面查找对应用户名的用户。如果输入的用户名“查无此人”，那么就弹出一个如上图所示的error message box；如果“查有此人”，那么就把当前Person类的实例的object reference找出来，调取当前用户的attributes，并且把user name字符串改写成当前用户的姓名，friends列表改写成当前用户的好友列表。

由此可见，Controller端需要在两个控件上安装监听器：

（1）login按钮：监听用户是不是点击了这个按钮。

（2）id输入框：获取用户输入的数据。

在用户点击login按钮之后，会调用SocialGui类中的pressLogin()函数。

pressLogin()函数先从id输入框中取得用户输入的用户名，然后向Model端查询有没有对应的用户，最后调整View端的显示。

以上就是第七项，也就是最后一项大作业的全部内容。接下来，本黄鸭还要更新某一次考试题目的详细解答，争取在在下周飞（抱）往（住）三（椰）亚（子）之前，完结撒花~

欢迎使用本黄鸭编写的小程序~

微信公众号二维码：

你的每一个“好看”，都是对我的鼓励