ASP.NET-FineUI开发实践-4

2023-12-06 11:48
文章标签 实践 开发 asp net fineui

本文主要是介绍ASP.NET-FineUI开发实践-4，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

  最近实在没时间研究东西，FineUI一直也没进一步实践，但是还是很想学点东西，所以找了个课题研究了下，在论坛里看见了又下角的提醒，自己想了想做了一个，我不是大神，接触EXTJS很少，就是用到哪看哪，没有系统的学习，所以这次做的不细只是提供下思路和学习方法，可以让初学者借鉴探讨。以下环境为官方实例FineUI4.0.6。

1.JS文件

首先运行项目进入default.aspx，右键查看源文件看见引用了三个JS文件<script src="/extjs/ext-part1.js" type="text/javascript"></script><script src="/extjs/ext-part2.js" type="text/javascript"></script><script src="/extjs/lang/zh_CN.js" type="text/javascript"></script>


最后一个是语言包，前两个都是FineUI自己基于EXTJS写的js包，打开有看到ext-part1是压缩（没有格式）的，ext-part2没有压缩，可以看成是FineUI写的js方法的增强或者重写。

default.aspx 在最后还引用了default.js文件，打开后都是本页的一些配置文件，写在F.ready()里，页面加载执行。这里要重申下FineUI的NO js 是页面上尽量减少JS的使用，其实都是打包好的。基于EXTJS.NET 不可能没有JS。

2.实现右下角提醒准备

2.1又下角的提醒很常见，我借鉴了FineUI论坛里的这个

可以看见基本元素有标题，翻页，关闭，不可拖动，不可调整大小，在页面顶端等。这让我想到了window组件，window打开时就是层级置顶的，而且有标题、不可拖动、关闭、不可调整大小等属性。页面里的消息我选择了Label控件。


传图片是因为不能一下看懂的可以自己把代码敲上理解一下。 Lable里 Label="1" ShowLabel="false" 没用，我写的玩的。

2.2下面要准备的就是显示，FineUI window.cs文件里提供了获取显示窗体的客户端脚本的方法GetShowReference，还有其他各种重载，到最后用返回的是f_show的js方法。要显示我的window_tips就是要重写f_show方法，在ext-part2.js里一下就搜到了，复制粘贴，取个名字叫f_showTips，


简单的看一下就是重写iframeUrl和标题，然后再执行wnd.show()（wnd就是window的缩写）方法，这个就够用了wnd.show就不重写了，也在这个js里，搜索‘show:’不是很难看懂。同样找到了关闭的方法 f_hide也看到了怎么实现的 ，还是用这个，没必要写新的。

2.3显示和关闭准备好了就是信息的显示还有翻页功能，明显window的标题那一行就有标题关闭最大化什么的，要自定义添加俩按钮还得用脑子，一下子就想起来default.js里预备下了


这个是FineUI4.0新加的，在树菜单的顶上加了个设置的图标点完了显示个菜单。正常的往回缩怎么能有个设置按钮呢，.aspx文件里也没有这个的按钮所以肯定就是js自己做了什么。


看的懂的参数第一个是类型，第二个是提示，第三个不知道，第四个就是按钮点击触发的方法。要实验我的蒙的对不对要先把window_tips的ClientID传过去，详见页面上GetClientIDS方法，在js接一下，


怎么实践的就不说了就是传个带ShowHeader="true"的控件看看有没有加上就行，是成功了，但是跑到关闭那个X的右侧了，因为是新增的，插入到左侧我也不会，干脆连关闭一块新增，但是都是设置图标，应该跟tyoe有关系，gear是设置的意思，其他的type我也没不知道啊。显示的是个图标那肯定跟样式有关，果断F12


嗯，被发现了，他旁边那个就是向左样式是x-tool-img x-tool-collapse-left，collapse是隐藏属性，隐藏-向左，左右关闭就都出来了，

  window_tips.addTool({
type: 'left',
tooltip: '上一条',
regionTool: true,
handler: function (event, toolEl, panelHeader) {
});
window_tips.addTool({
type: 'right',
tooltip: '下一条',
regionTool: true,
handler: function (event, toolEl, panelHeader) {
}
});
window_tips.addTool({
type: 'close',
tooltip: '关闭',
regionTool: true,
handler: function (event, toolEl, panelHeader) {
window_tips.hide();//关闭方法
}
});
关闭按钮我把关闭方法加上了。

2.4还有就是window的显示位置，提醒肯定是在右下角，在官方的教程里提到位置黄金分割点，在ext-part2.js wnd.show()里找到了定义位置的方法，

if (left !== '' && top !== '') {
panel.setPosition(parseInt(left, 10), parseInt(top, 10));
} else {
var bodySize = target.window.Ext.getBody().getViewSize();
var panelSize = panel.getSize(), leftTop;
if (isGoldenSection) {
leftTop = _calculateGoldenPosition(bodySize, panelSize);
} else {
leftTop = _calculateCenterPosition(bodySize, panelSize);
//panel.alignTo(target.Ext.getBody(), "c-c");
}
panel.setPosition(leftTop.left, leftTop.top);
}

找能看的懂的，不多解释，总之在f_showTips下面加个方法 

 f_tipsPosition:function(){
var left =  Ext.getBody().getViewSize().width - 4 - this.width;
var top =  Ext.getBody().getViewSize().height - 4 - this.height;
this.f_property_left=left;
this.f_property_top=top; 
this.setPosition(left, top);
},

在default.js里触发，window_tips.f_tipsPosition();就行了。

2.5左右信息的图标有了，还没有方法，可以写成dopostback获取，也可以执行JS，当然是写JS，把数据放个参数里，是个json再用js解析，不提了，直接看代码。

3.完成 f_tipsPosition没粘

ext-part2.js

     //显示提醒窗体;
//iframeUrl窗体的url，目前未考虑传'';
//windowTitle窗体的title，目前未考虑传'';
//txthtml窗体显示的数据
//width窗体的宽，目前未考虑传'';
//height窗体的高，目前未考虑传'';
f_showTips: function (iframeUrl, windowTitle,txthtml, width, height) {
if (typeof (iframeUrl) === 'undefined') {
iframeUrl = this.f_iframe_url;
}
if (typeof (windowTitle) === 'undefined') {
windowTitle = this.title;
}
window.label_html=txthtml;//显示数据存到全局参数里
window.label_html_num=0;//第一次打开重置查看到第几条
this.f_showtips_label(label_html);//显示方法，传入数据
windowTitle="消息提醒"+"   "+(label_html_num+1)+"/"+txthtml.length;//拼写标题
//原show方法
F.wnd.show(this, iframeUrl, windowTitle, this.f_property_left, this.f_property_top, this.f_property_position, this.id + '_Hidden', width, height);
},
//显示信息方法
//txthtml信息
//t翻页方向
f_showtips_label:function(txthtml,t){
//计算翻到第几页了
var nub=label_html_num;
if (t=='left') {label_html_num=window.label_html_num-1;}
if (t=='right') {label_html_num=window.label_html_num+1;}
if (typeof (txthtml[label_html_num]) == 'undefined') {
label_html_num=nub;
}
//设置标题
this.setTitle("消息提醒"+"   "+(label_html_num+1)+"/"+txthtml.length);
//显示信息，JQ方法，ID写死了，JSON格式所以写成 txthtml[0]
$('#window_tips_window_tips_label-inputEl').text(txthtml[label_html_num]);
}

default.js 

 //新增翻页按钮
window_tips.addTool({
type: 'left',
tooltip: '上一条',
regionTool: true,
handler: function (event, toolEl, panelHeader) {
window_tips.f_showtips_label(label_html, 'left');//触发翻页方法
}
});
//新增翻页按钮
window_tips.addTool({
type: 'right',
tooltip: '下一条',
regionTool: true,
handler: function (event, toolEl, panelHeader) {
window_tips.f_showtips_label(label_html, 'right');//触发翻页方法
}
});
//新增关闭按钮
window_tips.addTool({
type: 'close',
tooltip: '关闭',
regionTool: true,
handler: function (event, toolEl, panelHeader) {
window_tips.f_hide();
}
});
//定位坐标
window_tips.f_tipsPosition();
//网上找的
Ext.EventManager.onWindowResize(window_tips.f_tipsPosition, window_tips); //window大小改变时，重新设置位置
Ext.EventManager.on(window, 'scroll', window_tips.f_tipsPosition, window_tips); //滚动时重新设置位置

传值 

protected void MenuButton1_Click(object sender, EventArgs e)
{
List<string> liststr = new List<string>();
liststr.Add("消息一");
liststr.Add("消息二");
var resultObj = JsonConvert.SerializeObject(liststr);
PageContext.RegisterStartupScript(window_tips.GetShowTips(String.Empty, String.Empty, Unit.Empty, Unit.Empty, resultObj));
}

Window.cs加了方法 

/// <summary>
/// 返回右下角提醒JS
/// </summary>
/// <param name="iframeUrl">地址</param>
/// <param name="windowTitle">标题</param>
/// <param name="width">宽</param>
/// <param name="height">高</param>
/// <param name="innerHtml">JSON值提醒的HTML</param>
/// <returns></returns>
public string GetShowTips(string iframeUrl, string windowTitle, Unit width, Unit height, string innerHtml)
{
if (!String.IsNullOrEmpty(iframeUrl))
{
iframeUrl = ResolveIFrameUrl(iframeUrl);
}
iframeUrl = JsHelper.GetJsStringWithScriptTag(iframeUrl);
windowTitle = JsHelper.GetJsString(windowTitle);
if (width != Unit.Empty && height != Unit.Empty)
{
return String.Format("{0}.f_showTips({1},{2},{3},{4},{5});", ScriptID,
iframeUrl,
windowTitle,
innerHtml,
width.Value,
height.Value);
}
else
{
return String.Format("{0}.f_showTips({1},{2},{3});", ScriptID,
iframeUrl,
windowTitle,
innerHtml
);
}
}


4.扩展

遗憾的是没有时间在完善下，标题，传iframeUrl，标题，定义大小都没写。显示和隐藏的滑动效果没有，这个还得学...，很突兀的显示和关闭了，FineUI并没有提供动画的方法。

5.后记

其实实现的方法有很多，我又不是专业的，自己弄出来有成就感，只是给刚入门的人看的，想说的是FineUI中提供了很多现成的可以学习的代码，肯研究的都能自己做点东西，FineUI是开源的后台的C#方法和js方法都是现成的谁也没说不能改。谁要是有现成的例子给我也共享个，我很愿意学习学习。

这篇关于ASP.NET-FineUI开发实践-4的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/461725。

相关文章

SpringBoot项目中Maven剔除无用Jar引用的最佳实践

SpringBoot项目中Maven剔除无用Jar引用的最佳实践

《SpringBoot项目中Maven剔除无用Jar引用的最佳实践》在SpringBoot项目开发中,Maven是最常用的构建工具之一,通过Maven,我们可以轻松地管理项目所需的依赖,而,... 目录1、引言2、Maven 依赖管理的基础概念2.1 什么是 Maven 依赖2.2 Maven 的依赖传递机
阅读更多...
Oracle查询优化之高效实现仅查询前10条记录的方法与实践

Oracle查询优化之高效实现仅查询前10条记录的方法与实践

《Oracle查询优化之高效实现仅查询前10条记录的方法与实践》：本文主要介绍Oracle查询优化之高效实现仅查询前10条记录的相关资料,包括使用ROWNUM、ROW_NUMBER()函数、FET... 目录1. 使用 ROWNUM 查询2. 使用 ROW_NUMBER() 函数3. 使用 FETCH FI
阅读更多...
在C#中获取端口号与系统信息的高效实践

在C#中获取端口号与系统信息的高效实践

《在C#中获取端口号与系统信息的高效实践》在现代软件开发中,尤其是系统管理、运维、监控和性能优化等场景中,了解计算机硬件和网络的状态至关重要,C#作为一种广泛应用的编程语言,提供了丰富的API来帮助开... 目录引言1. 获取端口号信息1.1 获取活动的 TCP 和 UDP 连接说明：应用场景：2. 获取硬
阅读更多...
Java内存泄漏问题的排查、优化与最佳实践

Java内存泄漏问题的排查、优化与最佳实践

《Java内存泄漏问题的排查、优化与最佳实践》在Java开发中,内存泄漏是一个常见且令人头疼的问题,内存泄漏指的是程序在运行过程中,已经不再使用的对象没有被及时释放,从而导致内存占用不断增加,最终... 目录引言1. 什么是内存泄漏？常见的内存泄漏情况2. 如何排查 Java 中的内存泄漏？2.1 使用 J
阅读更多...
基于Python开发电脑定时关机工具

基于Python开发电脑定时关机工具

《基于Python开发电脑定时关机工具》这篇文章主要为大家详细介绍了如何基于Python开发一个电脑定时关机工具,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 简介2. 运行效果3. 相关源码1. 简介这个程序就像一个“忠实的管家”，帮你按时关掉电脑，而且全程不需要你多做
阅读更多...
Java中的Opencv简介与开发环境部署方法

Java中的Opencv简介与开发环境部署方法

《Java中的Opencv简介与开发环境部署方法》OpenCV是一个开源的计算机视觉和图像处理库,提供了丰富的图像处理算法和工具,它支持多种图像处理和计算机视觉算法,可以用于物体识别与跟踪、图像分割与... 目录1.Opencv简介Opencv的应用2.Java使用OpenCV进行图像操作opencv安装j
阅读更多...
Linux中Curl参数详解实践应用

Linux中Curl参数详解实践应用

《Linux中Curl参数详解实践应用》在现代网络开发和运维工作中,curl命令是一个不可或缺的工具,它是一个利用URL语法在命令行下工作的文件传输工具,支持多种协议,如HTTP、HTTPS、FTP等... 目录引言一、基础请求参数1. -X 或 --request2. -d 或 --data3. -H 或
阅读更多...
基于Qt开发一个简单的OFD阅读器

基于Qt开发一个简单的OFD阅读器

《基于Qt开发一个简单的OFD阅读器》这篇文章主要为大家详细介绍了如何使用Qt框架开发一个功能强大且性能优异的OFD阅读器,文中的示例代码讲解详细,有需要的小伙伴可以参考一下... 目录摘要引言一、OFD文件格式解析二、文档结构解析三、页面渲染四、用户交互五、性能优化六、示例代码七、未来发展方向八、结论摘要
阅读更多...
Docker集成CI/CD的项目实践

Docker集成CI/CD的项目实践

《Docker集成CI/CD的项目实践》本文主要介绍了Docker集成CI/CD的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录一、引言1.1 什么是 CI/CD？1.2 docker 在 CI/CD 中的作用二、Docke
阅读更多...
在 VSCode 中配置 C++ 开发环境的详细教程

在 VSCode 中配置 C++ 开发环境的详细教程

《在VSCode中配置C++开发环境的详细教程》本文详细介绍了如何在VisualStudioCode（VSCode）中配置C++开发环境,包括安装必要的工具、配置编译器、设置调试环境等步骤,通... 目录如何在 VSCode 中配置 C++ 开发环境：详细教程1. 什么是 VSCode？2. 安装 VSCo
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2