首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

HT图形组件设计之道(一)

完整前端设计是需要考虑到后台加载并发等因素,但本系列更侧重于纯客户端图形组件,不涉及网络通讯部分思考,例如最近阿里无线前端招聘让谈谈:讲讲输入完网址按下回车,到看到网页这个过程中发生了什么。...》文章介绍HT自定义矢量方式来实现图形效果,这种方式介于以上两种扩展方式之间,需要自定义绘制效果,但通过HT提供矢量格式,用户可采用较为直观易读JSON格式来描述图形,并通过数据绑定方式实现模型数据与界面呈现关联...上呈现’server-image’描述矢量效果,并且PropertyView、Slider和GraphView三个组件都通过nodeattr上cpu和mem来显示界面,这样当后台获取到采集实时数据后...,Mouse和Touch交互是否能正常操作,界面在不同设备屏幕上显示是否正常等等,这些纯客户端组件封装工作都做到位后,你就可以安心连接后台数据进行测试了。...见过太多客户出问题时只会说:界面显示不对。这样问题描述完全无法定位根源,到底时后台数据库问题,网络通讯问题,解析数据问题,设置模型问题还是组件封装问题?

63250
您找到你想要的搜索结果了吗?
是的
没有找到

HT图形组件设计之道(一)

完整前端设计是需要考虑到后台加载并发等因素,但本系列更侧重于纯客户端图形组件,不涉及网络通讯部分思考,例如最近阿里无线前端招聘让谈谈:讲讲输入完网址按下回车,到看到网页这个过程中发生了什么。...》文章介绍HT自定义矢量方式来实现图形效果,这种方式介于以上两种扩展方式之间,需要自定义绘制效果,但通过HT提供矢量格式,用户可采用较为直观易读JSON格式来描述图形,并通过数据绑定方式实现模型数据与界面呈现关联...上呈现’server-image’描述矢量效果,并且PropertyView、Slider和GraphView三个组件都通过nodeattr上cpu和mem来显示界面,这样当后台获取到采集实时数据后...,Mouse和Touch交互是否能正常操作,界面在不同设备屏幕上显示是否正常等等,这些纯客户端组件封装工作都做到位后,你就可以安心连接后台数据进行测试了。...见过太多客户出问题时只会说:界面显示不对。这样问题描述完全无法定位根源,到底时后台数据库问题,网络通讯问题,解析数据问题,设置模型问题还是组件封装问题?

85150

HTML5拓扑图形组件设计之道(一)

完整前端设计是需要考虑到后台加载并发等因素,但本系列更侧重于纯客户端图形组件,不涉及网络通讯部分思考,例如最近阿里无线前端招聘让谈谈:讲讲输入完网址按下回车,到看到网页这个过程中发生了什么。...》文章介绍HT自定义矢量方式来实现图形效果,这种方式介于以上两种扩展方式之间,需要自定义绘制效果,但通过HT提供矢量格式,用户可采用较为直观易读JSON格式来描述图形,并通过数据绑定方式实现模型数据与界面呈现关联...上呈现'server-image'描述矢量效果,并且PropertyView、Slider和GraphView三个组件都通过nodeattr上cpu和mem来显示界面,这样当后台获取到采集实时数据后...,Mouse和Touch交互是否能正常操作,界面在不同设备屏幕上显示是否正常等等,这些纯客户端组件封装工作都做到位后,你就可以安心连接后台数据进行测试了。...见过太多客户出问题时只会说:界面显示不对。这样问题描述完全无法定位根源,到底时后台数据库问题,网络通讯问题,解析数据问题,设置模型问题还是组件封装问题?

1K90

java swing入门教程_java swing基础(菜鸟教程学习)

Java Swing介绍 1.Swing是一个为java世纪GUI工具包 2.Swing是JAVA基础类一部分 3.Swing包括了图形用户界面(GUI)器件如:文本框,按钮,分隔窗格和表 4个器件...意味着你可以在任意平台上使用java支持任意模板 虽然不知道这是啥意思,看着挺牛:轻量级组件缺点则是执行速度较慢,优点是可以在所有平台上采用统一行为。...panel = new JPanel(); //日常添加到窗口frame中 frame.add(panel); //调用用户定义方法并添加组件到面板 placeComponents(panel);...//好,日常设置界面可见 frame.setVisible(true); } //基本框架完成,现在往里面添加东西吧 private static void placeComponents(JPanel...JPanel java图形用户界面(GUI)工具包swing中面板容器类,包含在javax.swing包中,可以进行嵌套,功能是对窗体中具有相同逻辑功能组件进行组合,是一种轻量级容器,可以加入到JFrame

2.5K20

开源)嗨,Java,你可以生成金山词霸二维码分享海报吗?

使用 Swing 构建图形界面 将项目打成 jar 包发行 运行 jar 包,填写必要信息后生成海报 02、采集网络图片 第一步,获取网络图片路径。...BufferedImage 使用可访问图像数据缓冲区描述图像,由颜色模型和图像数据栅格组成,所有 BufferedImage 对象左上角坐标为(0,0)。...06、利用 Graphics2D 在海报上打印中文 Font 类表示字体,用于以可见方式呈现文本。字体提供了将字符序列映射到象形文字序列以及在图形组件对象上呈现象形文字序列所需信息。...是不是感觉海报左下角比较空白,整体对称性不够自然,那就在左下角追加一些二维码描述文本吧。...08、使用 Swing 构建图形界面 Swing 是一个用于 Java GUI 编程(图形界面设计)工具包(类库);换句话说,Java 之所以可以用来开发带界面的 PC 软件,就是因为 Swing

71430

基于HT for WebWeb SCADA工控移动应用

最近客户采用HT for Web图形界面组件,实现了油田燃气管网和供水管网等工控SCADAHMI人机界面,并将系统运行在平板和手机等Android和iOS移动终端,在此我们在技术支持过程中一些知识点进行些梳理和分享...for Web提供矢量技术方案,HT矢量技术方案在《HT全矢量化图形组件设计》和《HT图形组件设计之道(二)》有详细介绍可参考之,而且采用HT矢量方案不仅得到了缩放不失真的有点,还具备动态数据绑定强大功能...对于SCADAHMI人机界面管网拓扑图网络加载问题,用户采用了我们建议Web客户端缓存方案,很好解决了较多网络拓扑图切换打开网络加载问题,可参考《HTML5 Web 客户端五种离线存储方式汇总...对于部分HTML5应用页面,用户需要嵌入Native AppWebView和Native应用界面做集成,以前这种方案特别是在Android端总会让我发毛,老AndroidWebView组件集成奇烂...上width参数,或者该参数设置过大导致iOS终端浏览器无法显示拓扑图内容情况,这种情况也不会报错但就是没内容,遇到这样情况简单方案就是先让用户<meta name=”viewport” content

1.2K30

基于HT for WebWeb SCADA工控移动应用

最近客户采用HT for Web图形界面组件,实现了油田燃气管网和供水管网等工控SCADAHMI人机界面,并将系统运行在平板和手机等Android和iOS移动终端,在此我们在技术支持过程中一些知识点进行些梳理和分享...for Web提供矢量技术方案,HT矢量技术方案在《HT全矢量化图形组件设计》和《HT图形组件设计之道(二)》有详细介绍可参考之,而且采用HT矢量方案不仅得到了缩放不失真的有点,还具备动态数据绑定强大功能...对于SCADAHMI人机界面管网拓扑图网络加载问题,用户采用了我们建议Web客户端缓存方案,很好解决了较多网络拓扑图切换打开网络加载问题,可参考《HTML5 Web 客户端五种离线存储方式汇总...对于部分HTML5应用页面,用户需要嵌入Native AppWebView和Native应用界面做集成,以前这种方案特别是在Android端总会让我发毛,老AndroidWebView组件集成奇烂...上width参数,或者该参数设置过大导致iOS终端浏览器无法显示拓扑图内容情况,这种情况也不会报错但就是没内容,遇到这样情况简单方案就是先让用户<meta name=”viewport” content

1.9K50

基于HTML5Web SCADA工控移动应用

最近客户采用HT for Web图形界面组件,实现了油田燃气管网和供水管网等工控SCADAHMI人机界面,并将系统运行在平板和手机等Android和iOS移动终端,在此我们在技术支持过程中一些知识点进行些梳理和分享...for Web提供矢量技术方案,HT矢量技术方案在《HT全矢量化图形组件设计》和《HT图形组件设计之道(二)》有详细介绍可参考之,而且采用HT矢量方案不仅得到了缩放不失真的有点,还具备动态数据绑定强大功能...对于SCADAHMI人机界面管网拓扑图网络加载问题,用户采用了我们建议Web客户端缓存方案,很好解决了较多网络拓扑图切换打开网络加载问题,可参考《HTML5 Web 客户端五种离线存储方式汇总...对于部分HTML5应用页面,用户需要嵌入Native AppWebView和Native应用界面做集成,以前这种方案特别是在Android端总会让我发毛,老AndroidWebView组件集成奇烂...上width参数,或者该参数设置过大导致iOS终端浏览器无法显示拓扑图内容情况,这种情况也不会报错但就是没内容,遇到这样情况简单方案就是先让用户<meta name=”viewport” content

1.4K20

做低代码引擎有多难?OneCode五个版本心路历程

二,V2.0 低代码引擎雏形,全站拖动计划 SPA改造并不是一帆风顺,在改造过程中,团队无法适应前后端分离开发,前段组件构建时候灵活度太差无法适应用户需求等等问题,一次次让产品模型在新旧模型间不断转换...页面加载上了还必须考虑到新界面可能由不同团队开发,在结构上甚至是全局变量命名空间上都会冲突。而将多页扩展到整个项目工程时,多达几百个页面不同层次加载关系。...,D&D在丰富组件支持下,初步显示了其快做,快改,快上特点。...但眼见为实还是无法避免,组件拖动组合硬伤,界面结构复杂,数据应用交互命名错乱,数据结构臃肿缺少体系性结构性梳理,让后期才逐步介入后端团队差点陷入崩溃边缘。...后端为可视化应用逐步增加了,接口参数说明、组件绑定描述、事件回调支持等多种可被图形注解描述(可被前端直接图形注解),这样在前端可以在后端更新新接口信息,及参数时可以动态通知用户,并提供基础参数校验

1.4K10

基于 HTML5 网络拓扑图快速开发之入门篇(一)

GarphView 具有基本图形呈现和编辑功能,拓扑节点连线及自动布局功能,电力和电信等行业预定义对象,具有动画渲染等特效, 因此其应用面很广泛,可作为监控领域绘图工具和人机界面,可作为一般性图形化编辑工具...但如果父容器是原生 html元素, 则 HT 组件无法获知需要更新,因此最外层 HT 组件一般需要监听 window窗口大小变化事件,调用最外层组件 invalidate函数进行更新。...DataModel,以不同形式呈现到用户界面,可以通过 view.getDataModel() (简写为 view.dm())方式获取数据容器;同时组件也会监听 DataModel 模型变化事件(...如果采用 url 路径方式 HT 内部会自动加载图片,并在 onload 之后自动更新相应视图组件。...通过 getAttr(name)和 setAttr(key, value) 存取,该类型是 HT 预留给用户存储业务数据 这里我是通过 style 类型来添加文字说明,通过 ‘label’ 属性设置显示文字

1.5K30

一文带你深入了解小程序生命周期

,首次加载页面会触发 onLoad 事件当页面显示时候,会加载 onShow 事件如果这个页面是首次渲染完成,会接着触发 onReady 事件如果 小程序切换到后台,页面就会被隐藏同时 会触发 onHide...例如,你可以在 onLoad 事件中使用 JavaScript 对象来获取用户数据,或者将数据加载到小程序中。...onShow 事件onShow 事件在小程序显示时发生,该事件通常用于显示小程序界面和功能。例如,你可以在 onShow 事件中启动小程序功能或者打开小程序界面。...通常,你可以在 onHide 事件中处理小程序隐藏逻辑,例如保存用户数据或者关闭小程序界面等。...注意事项:在 onReady 事件中渲染界面和数据时,请确保数据已经被正确加载和准备就绪。如果小程序在准备时遇到了错误,则 onReady 事件可能不会触发,并且小程序将无法正常运行。

40421

快速开发基于 HTML5 网络拓扑图应用--入门篇(一)

GarphView 具有基本图形呈现和编辑功能,拓扑节点连线及自动布局功能,电力和电信等行业预定义对象,具有动画渲染等特效, 因此其应用面很广泛,可作为监控领域绘图工具和人机界面,可作为一般性图形化编辑工具...但如果父容器是原生 html元素, 则 HT 组件无法获知需要更新,因此最外层 HT 组件一般需要监听 window窗口大小变化事件,调用最外层组件 invalidate函数进行更新。...为了最外层组件加载填充满窗口方便性,HT 所有组件都有 addToDOM 函数,其实现逻辑如下,其中 iv 是 invalidate简写: addToDOM = function(){...DataModel,以不同形式呈现到用户界面,可以通过 view.getDataModel() (简写为 view.dm())方式获取数据容器;同时组件也会监听 DataModel 模型变化事件(...如果采用 url 路径方式 HT 内部会自动加载图片,并在 onload 之后自动更新相应视图组件

1.2K40

java SWT:自定义布局(Layout)实现组件自动缩放显示

,当Composite改变大小时,会自动调用Composite初始化时设置Layout对象来重新调整所有组件位置。...一般UI框架都提供了一些默认布局,比如SWT中FillLayout,GridLayout…如果使用WindowBuilder开发UI,可以在Design界面下看到所有SWT提供布局对象,见下图...自定义布局 有的时候,使用SWT提供布局是无法满足需要,这种情况下,就需要自实现所需特殊布局。...* 设置所有容器组件(父窗口)内所有子组件位置和大小 * @param composite 将被重新设置布局容器组件(父窗口) * @param flushCache true<.../reference/api/org/eclipse/swt/widgets/Layout.html 组件自动缩放显示 上一节讲完Layout实现思路,下面就以以一个实例来说明如何实现自定义布局。

1.7K20

界面之下:还原真实MV*模式

网上很多文章关于这方面的讨论比较杂乱,各种MV模式之间区别分不清,甚至有些描述都是错误。本文追根溯源,从最经典Smalltalk-80 MVC模式开始逐步还原图形界面之下最真实MV模式。...GUI程序所面临问题 图形界面的应用程序提供给用户可视化操作界面,这个界面提供给数据和信息。...在开发图形界面应用程序时候,会把管理用户界面的层次称为View,应用程序数据为Model(注意这里Model指的是Domain Model,这个应用程序对需要解决问题数据抽象,不包含应用状态...在没有UI环境下对Controller进行单元测试时候,应用逻辑正确性是无法验证:Model更新时候,无法对View更新操作进行断言。 View无法组件化。...可以简单把ViewModel理解为页面上所显示内容数据抽象,和Domain Model不一样,ViewModel更适合用来描述View。

59720

JAVA学习Swing章节按钮组件JButton简单学习

对象表示 * JButton含有4种主要构造方法 * 参数text,icon分别代表显示文字标签和图标 * * 3:本实例使用了两种方式创建按钮,第一种是在初始化按钮时赋予按钮图标与文字...* 这种初始化必须先获得图片路径,然后将路径实例化到Icon,然后在Button中加载出来 * 第二种方式是首先创建一个没有定义图标和文字按钮对象,然后使用 * setIcon()方法为这个按钮定制一个图标...* setToolTipText()方法是为按钮设置提示文字,鼠标停留在按钮上面即可 * setBorderPainted()方法设置边界是否显示 * setMaximumSize()方法设置按钮大小与图标的大小一致...JCheckBox * 其在Swing组件使用也非常广泛,它具有一个方性图标,外加一段描述性文字 * 复选框区别于单选按钮就是每一个复选框都提供了选中和不选中两种状态 * * @author...* * 2:单选按钮是Swing组件中JRadioButton类对象,该类是JToggleButton子类 * 而JToggleButton类又是AbstractButton类子类,所以控制单选按钮诸多方法都是

3.2K50

跨平台移动APP开发进阶(三):hbuilder+mui mobile app 开发心酸路

> 置于图片加载之前,图片不会显示, 解决措施:将其置于图片显示之后才会显示。...2.问题描述: 同上面的问题,会遇到报指针为null异常。若要获取一个组件id,可能带获取组件还未加载,导致获取失败。 解决措施:将获取组件idjs脚本在定义组件id之后完成。...3.问题描述:页面是由主页面加内容页面组合而成。在主页面做弹出菜单时,弹出菜单无法显示。 问题根源:内容页面遮挡了弹出菜单,致其无法显示。 解决措施:弹出层放在内容页面里,父页面通知内容页面来显示。...(使用遮罩蒙版技术解决) 注:在popover、侧滑菜单等界面,经常会用到蒙版遮罩;比如popover弹出后,除popover控件外其它区域都会遮罩一层蒙版,用户点击蒙版不会触发蒙版下方逻辑,而会关闭...popover同时关闭蒙版;再比如侧滑菜单界面,菜单划出后,除侧滑菜单之外其它区域都会遮罩一层蒙版,用户点击蒙版会关闭侧滑菜单同时关闭蒙版。

3.1K30

kali linux 开机无法进入图形界面

Kali Linux 开机无法进入图形界面最近,有一些用户在使用Kali Linux操作系统时遇到了一个很常见问题:开机后无法进入图形界面,只能看到命令行界面。...本文将介绍可能导致此问题出现原因,并提供解决方案。问题描述开机后,用户期望看到Kali Linux图形化登录界面,但实际上只能看到命令行终端界面。...可能原因显卡驱动问题:Kali Linux默认不包含所有的显卡驱动,可能会导致图形界面无法正常加载。...X11配置问题:X11是Linux系统上常用图形显示系统,配置不正确可能导致图形界面无法启动。更新问题:最新系统更新可能引入了一些兼容性问题,导致图形界面无法启动。解决方案1....它提供了直观图形界面和丰富应用程序,方便用户进行配置和操作。结论如果您在使用Kali Linux时遇到了开机无法进入图形界面的问题,本文提供了一些常见解决方案。

1.2K00

Java之线程———GUI线程(包含打字游戏和计时器俩个GUI实列)

当java程序包含图形用户界面(GUI)时,Java虚拟机在运行应用程序时会自动启动更多线程,其中有两个重要线程:AWT-EventQuecue 和 AWT-Windows。...AWT-EventQuecue 线程负责处理GUI事件,AWT-EventQuecue线程负责将窗体或组件绘制到桌面。JVM保证各个线程都有使用CPU资源机会.    ...java.awt.Font; 6 import java.awt.event.ActionEvent; 7 import java.awt.event.ActionListener; 8 9 import javax.swing.JFrame...(new Font("Arial",Font.BOLD,22)); 48 showScore =new JLabel("分数:"); 49 add(new JLabel("显示字母.../ TODO Auto-generated method stub 82 String get = inputLetter.getText().trim(); /*trim()方法作用为删除多余空格

1.8K60

WPF面试题-来自ChatGPT解答

而XAML主要用于描述用户界面和应用程序结构,它是一种特定领域标记语言,用于构建WPF、Silverlight和UWP等应用程序用户界面。...语法:XML语法相对简单,它使用标签和属性来描述数据结构。而XAML语法更加复杂,它使用标签、属性和属性值来描述用户界面元素和应用程序结构。...这些组件共同协作,实现了 WPF 图形渲染、布局、事件处理、数据绑定和用户界面功能。 17. Style 和 ControlTemplate主要区别是什么?...性能:如果你数据集合很大,ListView可能更适合,因为它支持虚拟化,只会在需要时加载显示可见项,而ListBox会一次性加载所有项。 数据绑定是将数据源与控件关联过程。...矢量图形和动画支持:WPF支持矢量图形,可以使用XAML创建可缩放图形和图标。此外,WPF还提供了丰富动画功能,可以轻松地创建动态和交互式用户界面

32030
领券