（25）uniGUI for C++ builder之UniHTMLMemo初使用及uniGUI如何调用javaScript

Posted 2021-01-10 我的学习笔记

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了（25）uniGUI for C++ builder之UniHTMLMemo初使用及uniGUI如何调用javaScript相关的知识，希望对你有一定的参考价值。

（25）uniGUI for C++ builder之UnihtmlMemo初使用及uniGUI如何调用javascript

(中行雷威2018.9.29)

（同一个世界，同一个梦想，交流学习C++Builder XE10，传承c++builder的魅力！欢迎各地朋友加入我的QQ群484979943,进群密码“BCB”，同时也请将该群号广为宣传，希望能够广集各方高手，共同进步。如需下载开发工具及源代码请加入我的QQ群。）

【阅读倡议】

1、有问题请留言;

2、没问题请点赞;

3、看连载请加群;

4、下源码请加群;

【开发工具】

1、C++Builder10.2.3 tokyo

2、FMSoft_uniGUI_Complete_Professional_1.10.0build1471（正版）

一、需求

最近在开发一个web聊天工具，想做一个聊天信息交互小窗口，原来我习惯用UniMemo，但是UniMemo不支持超文本链接，因此首次尝试使用UniHTMOMemo控件。

二、用法

拖两个UniHTMLMemo控件到MainForm窗口上，UniHTMLMemo1用于显示交互信息，UniHTMLMemo3用于输入文字，如下图所示，大家不需要关注其他控件。

技术分享图片

1、发送文字消息

if(UniHTMLMemo3->Text.Length()==0)
   {
   ShowMessageN("亲，你还没有输入聊天信息呢！");
   UniHTMLMemo3->SetFocus();
   return;
   }
if(UniHTMLMemo3->Text.Length()>450)
   {
   ShowMessageN("亲，聊天信息太长啦，限制长度450个字符呢！");
   UniHTMLMemo3->SetFocus();
   return;
   }

UniHTMLMemo1->Lines->Add("<p>"+UniHTMLMemo3->Text);//发送文字
UniHTMLMemo3->Lines->Clear();//发送文字后清空输入框

在这里你会发现我在发送文字处增加了“<p>”，那是因为如果不增加这个，接收窗口显示时会把多次信息链接到一起，没有换行。

2、发送文件链接

destPath=“fileHome” 是程序运行根目录到文件存放的子目录

fileName="abc.doc" 是文件名字

UniHTMLMemo1->Lines->Add("<p>你给["+toUserName+"]发送了一个文件");
UniHTMLMemo1->Lines->Add("<a href=""+destPath+"/"+fileName+"" target="_blank">"+fileName+"</a>");
UniHTMLMemo3->Lines->Clear();

注意：超链接串是否正确，将访问地址放到浏览器url里，如果能打开下载就是正确了。本例子可以在浏览器中输入http://127.0.0.1/fileHome/abc.doc验证文件链接是否正确。

3、解决滚屏问题

也许是uniHTMLMemo的BUG，uniMemo在不断增加新的消息时会自动滚屏，但是UniHTMOMemo不会，可在发完消息后和收到消息后添加调用javaScript函数解决。

/*HTMLMemo好友聊天滚屏*/
UniSession->AddJS("Ext.defer(function(){var me="+ UniHTMLMemo1->JSName +".iframeEl.el.dom; me.contentWindow.scrollTo(0, me.contentDocument.scrollingElement.scrollHeight)}, 200);");

4、输入长度限制问题

该控件没有了MaxLength属性，可以在ClientEvents的UniEvents的beforeinit事件中实现

function beforeInit(sender, config)
{
config.enforceMaxLength=true;
config.maxLength=450;

}

本例子介绍了一种程序中添加调用js代码的一种调用javaScript的方式，下一例子将介绍uniGUI调用js文件的调用方式。

一、需求

最近在开发一个web版聊天工具，如果浏览器最小化后，进来消息如何显示告知呢？经unigui中文群-总群（QQ241140802）【smartSoft】和【支付宝微信小程序开发】两位高手指点，通过向浏览器推送消息，实现了显示器右下角的消息弹屏功能。

二、实现

1、将消息推送功能编写到一个javaScript文件中，本例子放在执行代码同级别目录下的javaScript目录下，名称为smartChatServer.js，内容如下：

function notifyMe(msg) {
if (!("Notification" in window)) {
alert("你的浏览器不支持消息通知功能！");
}
else if (Notification.permission === "granted") {
var notification = new Notification(msg);
notification.iconurl = ‘‘;
autoClose(notification);

}
else if (Notification.permission !== ‘denied‘) {
Notification.requestPermission(function (permission) {
if (!(‘permission‘ in Notification)) {
Notification.permission = permission;
}

if (permission === "granted") {
var notification = new Notification(msg);
}
});
}
}

notification.addEventListener(‘click‘, function () {
notification.close();
}, false)
}

2、js文件调用

在ServerModule窗口的CustomFiles属性里输入javaScriptsmartChatServer.js

技术分享图片