自己写代码 HelloHi开发日记 六 掰开Ui和逻辑

我一直以为，WPF是把Ui和逻辑分开了，现在GWT的UiBinder几乎也在往这个方向走。xml里面是.ui，.java里面是逻辑。但是其实这所
谓的逻辑也还有层次之分。

很多东西都是如此，就好像原子，之所以取这个名字是以为他不能再分，而后来又发现了质子，中子。细看HiChatUi里
面的代码，基本上有两种，一种是在更新Ui，一种是在调用异步通信。这应该是一个承上启下的类。

WPF为了实现Ui和逻辑的分离必须引入数据绑定
这么个东西。他们想让Ui和逻辑分离，因此就很讨厌看到inputText=“”类似的代码。因为他身在逻辑的地盘，干的却是Ui的活。但是现在Ui不是
一成不变的，不是一个静态的xaml能表示的了的。想想Ui怎么变呢，一般来讲Ui是数据的外衣，因此把Ui绑定到数据，让Ui随着数据变化，也就不需要
在非标记语言的地盘调用代码来修改控件的属性。这一部分被藏起来，被绑定机制做了。那万一这个Ui比较疯癫，他的变化不是那么随着数据的意愿呢？啊，这要
看你怎样定义数据了。在非标记语言的地盘上，数据和Ui数据还是可以划江而治的。有些代码，虽然不是用标记语言写的，但是它完全为Ui而存，其中每一个字
段都可以在Ui上找到相应的位置。由他再和真正的数据，逻辑交互，就显得比较，呃，有弹性。

所以现在看到HiChatUi这么长，我就心
里痒。其实从一开始我就觉得我会需要一个表示客户端的类，一切逻辑在这里面进行，而且里面还会保存有所有聊天记录。只不过本着一切从简的想法先苟且让程序
跑起来再说。不过该做的总归是要做的，看看现在的程序，所有的聊天记录甚至在本地都没有留底的，update得到的新的信息，然后直接加到Ui上面去。看
着没问题，跑着也没问题，多少让人不放心，以后很可能需要在本地维持消息的记录，到时候这份记录放到哪里呢，总不能还放到这个姓Ui的HiChatUi里
吧。再说，我也很不满与现在的状态机，呃，其实现在根本没有状态机，打开页面，就开始了，连没连上人，都可以说话。至少要有三个状态，等人，聊天，散。这
些都要放到HiChatUi里我就要疯了。因此我需要一个client类。

那么client应该是Ui的一部分呢，还是Ui是
client的一部分呢？client这个名字可能让他看起来更像ui的宿主，但是我们往往都说灵魂是装在躯壳里面。因此我还是比较倾向于把client
作为Ui的一个字段。这样Ui处理用户触发的事件就可以调用client的相应方法。但是异步更新自然是client类里面的事，与Ui无关，更新完了如
何修改Ui呢。我脑子里突然冒出了好多种想法。一认为灵魂和肉体是平等的，Ui和client类同在EntryPoint里面被创建，互相包含一个引用。
这样Ui响应到用户事件可以调用到client进行通信，Ui作为一个纯粹的肉体，可以为所有的字段提供get方法，而异步通信的结果也可以调用Ui提供
的get方法得到ui对象进行更新。二呢承认灵魂和肉体的平等，觉得互相包含的结构是可以接受的，但是互相之间完全的透明是不可以的。ui可以提供必要地
接口来更新ui，但是为所有ui元素提供get方法是不可以的。三认为Ui应该完全包含client，然而client里面进行的一切Ui都无从知
道，Ui只能一次一次的update，查看client的现状，而决定要不要修改Ui，要怎样修改。换言之冷漠的Ui丝毫不关心发生过什么，只关心现在怎
么样了。

首先从结构上看Ui和client平等论2：1击败了三，然后我想别人都说我二，我就选二吧。老实说我觉得三也有可取之处，也许更适合那
种变化多是更改而不是增加的一类应用，或者那种每一帧不问历史把屏幕清空重画的那种应用。

更进一步的，二认为提供哪些接口取决于有哪些更新需要修
改Ui，而不取决于Ui有哪些元素。也就是说Ui提供哪些接口不应该由他自己决定。嗯~，如果你想套住一个类，让他实现一个接口。后来发现，一个
EventHandler接口比较好。因为在异步调用的结果里调用一个复杂的同步调用我想着觉得不妥。万一这个调用花了特别长的时间不知道会不会使得两个
Ui的修改同时在两个线程被执行。而event这个东西据我所知一般是添加到一个序列里，然后一个一个拿出来分配。跟进去看了看看到了queue这个词，
应该不会是玩我的吧。

添加HiChangedEventHandler

public interface
HiChangedEventHandler extends EventHandler{

void onMessageSent();

void onMessageUpdated();

void onStateChanged();

}

添
加HiChangedEvent

public class HiChangedEvent extends
GwtEvent<HiChangedEventHandler> {

public static
Type<HiChangedEventHandler> TYPE = new
Type<HiChangedEventHandler>();

public enum
EChangeType {

MessageSent,

MessageUpdated,

}

private EChangeType changeType;

public
HiChangedEvent(EChangeType changeType) {

this.changeType =
changeType;

}

@Override

protected void
dispatch(HiChangedEventHandler handler) {

switch (changeType)
{

case MessageSent:

handler.onMessageSent();

break;

case MessageUpdated:

handler.onMessageUpdated();

break;

}

}

@Override

public
com.google.gwt.event.shared.GwtEvent.Type<HiChangedEventHandler>
getAssociatedType() {

return TYPE;

}

}
然后修改
HiChatUi，使之实现HiChangedEventHandler接口，再新建HiChatClient，把原来的逻辑事务都转移到里面

public
class HiChatClient {

private HandlerManager handlerManager;

private int clientId = -1;

public int getClientId() {

return clientId;

}

private HelloServiceAsync
service = GWT.create(HelloService.class);

private int lastIndex =
0;

private static final int UPDATE_PERIOD = 500;

private Timer timer = new Timer() {

@Override

public void run() {

update();

}

};

private HiMessage[] newMessages;

public HiMessage[]
getNewMessages() {

return newMessages;

}

public HiChatClient() {

timer.scheduleRepeating(UPDATE_PERIOD);//ms

}

public void setEventHandler(HiChangedEventHandler handler) {

handlerManager = new HandlerManager(this);

handlerManager.addHandler(HiChangedEvent.TYPE, handler);

}

private void initClientId() {

service.getClientId(new AsyncCallback<Integer>() {

@Override

public void onFailure(Throwable caught) {

// TODO Auto-generated method stub

}

@Override

public void
onSuccess(Integer result) {

clientId = result;

}

});

}

private boolean
isUpdating = false;

private void update() {

if
(clientId == -1) {

initClientId();

} else {

if (!isUpdating) {

isUpdating = true;

service.updateMessage(clientId, lastIndex, new
AsyncCallback<HiMessage[]>() {

@Override

public void onFailure(Throwable caught) {

// TODO Auto-generated method stub

}

@Override

public void onSuccess(HiMessage[] result) {

if (result != null && result.length != 0) {

newMessages = result;

lastIndex += result.length;

handlerManager.fireEvent(new
HiChangedEvent(EChangeType.MessageUpdated));

}

isUpdating = false;

}

});

}

}

}

public void sendMessage(String input) {

if
(!input.isEmpty()) {

service.sendMessage(clientId, input,
new AsyncCallback<Void>() {

@Override

public void onFailure(Throwable caught) {

// TODO Auto-generated method stub

}

@Override

public void
onSuccess(Void result) {

handlerManager.fireEvent(new HiChangedEvent(EChangeType.MessageSent));

update();

}

});

}

}

}
再修改原来的HiChatUi

public class HiChatUi
extends Composite

implements
HiChangedEventHandler {

private static HelloHiUiUiBinder
uiBinder = GWT

.create(HelloHiUiUiBinder.class);

interface HelloHiUiUiBinder extends UiBinder<Widget, HiChatUi> {

}

private HiChatClient client;

@UiField

VerticalPanel contentPanel;

@UiField

TextArea inputText;

@UiField

ScrollPanel scrollPanel;

@UiField

Button
startButton;

public HiChatUi() {

initWidget(uiBinder.createAndBindUi(this));

}

public void setClient(HiChatClient client) {

this.client =
client;

}

@UiHandler("inputText")

void
onKeyPress(KeyPressEvent event) {

if (event.getCharCode() ==
KeyCodes.KEY_ENTER) {

String input = inputText.getText();

if (!input.isEmpty()) {

client.sendMessage(inputText.getText());

}

}

}

@Override

public void onMessageSent() {

inputText.setText("");

}

@Override

public void onMessageUpdated() {

HiMessage newMessages[] =
client.getNewMessages();

if (newMessages != null &&
newMessages.length != 0) {

for (HiMessage message :
newMessages) {

if (message.getClientId() ==
client.getClientId()) {

contentPanel.add(new
HiMessageUi("You:", message.getContent()));

} else {

contentPanel.add(new HiMessageUi("Stanger:",
message.getContent()));

}

}

scrollPanel.scrollToBottom();

}

}

@Override

public void onStateChanged() {

// TODO
Auto-generated method stub

}

}

暂时还没有实现
StateChanged。

接下来在Ui添加一个按钮，控制连接断开的。呃，日后再说吧。