EUI组件之EditableText】的更多相关文章

一.EditableText常规使用 EditableText是一个可输入文本,例如登陆时输入用户名.密码等. 拖动EditableText到exml即可 实际效果 其他: 1.输入密码框 设置inputType类型为password,则为密码框. 2.默认的提示语句 设置prompt提示语为“请输入昵称”.提示语只有在文本为空时显示,当用户点击文本框准备输入时,提示语句会自动隐藏.…
输入文本,被废弃的组件,可以用EditableText代替…
一.ProgressBar常规使用 拖动一个progressbar到exml 代码中使用 /** * 主页场景 * @author chenkai 2018/5/26 */ class HomeScene extends eui.Component{ private bar:eui.ProgressBar; public constructor() { super(); this.skinName = "HomeSceneSkin"; } protected childrenCreat…
一.常规使用 官网教程里没有这个组件的使用方法 这个组件配合Scroller使用 拖动一个scroller到exml上.scroller上已经默认存在了HScrollBar和VScrollBar 当图片大于scroller时,拖动图片,会显示出垂直和水平的滑块 实际效果 其他: 1. 设置滑块的显示方式 默认情况下是auto. 2.更换滑块的皮肤样式 默认滑块是个蓝色的小方块 尝试在exml里找,没有. 所以只能代码里找到scroller的verticalScrollBar属性,然后替换它的图片…
一.制作文图字体文件 使用TextureMerger制作位图字体,具体查看 官方教程. 我们这里制作了一组位图字体. 二.导入位图字体 位图字体素材放入资源配置文件default.res.json 三.EXML中使用位图字体 拖动一个bitmaplabel组件到exml上 设置右侧属性栏“位图字体”为countdown_fnt 标签为“123”,如下图所示,可正常显示位图字体了 其他:  1. 位图字体文件fnt配置 fnt内保存了图片名,以及各个数字图片的坐标.高宽等信息 2. 位图字体居中…
看官网教程,这个没法单独用. http://developer.egret.com/cn/github/egret-docs/extension/EUI/dataCollection/dataGroup/index.html…
一.CheckBox常规使用 拖动一个checkBox到exml即可 点击效果 二.代码中监听事件 /** * 主页场景 * @author chenkai 2018/5/26 */ class HomeScene extends eui.Component{ private checkBox:eui.CheckBox; public constructor() { super(); this.skinName = "HomeSceneSkin"; } protected childr…
一.Button的常规使用 用到的按钮素材,分别为按钮的正常.按下.禁用图片 拖动一个Button到exml,并设置正常.按下.禁用.标签等属性 点击效果 其他: 1. 按钮的标签字体颜色大小怎么改变? 打开exml的源码,在Button的Label中增加字体大小size属性,并设置大小为50. 同理可设置其他属性,例如颜色textColor.  2. 想在按钮普通状态时,显示两张图片,怎么办 可以增加一个<e:Image>标签,这个可以根据需求,举一反三,修改exml的代码,灵活配置.…
1. 首先,再次被网上一大堆屎一样的资料搞得浪费了我一天时间.各种坑. 2. 本文先讲一种正确的方式,然后再列举坑. 去www.egret.com下载最新的引擎,我的最新版本是5.2.2. 然后就会被安装了一个全家桶.在里面,你还要在去点击Egret Wing,安装个开发环境. 然后,在项目的地方,新建一个游戏项目,带EUI框架: 必须注意红框的地方,避免踩坑.类型是Egret游戏项目.之后,全家桶就会默认打开Egret Wing进入开发环境. 在src目录下面,新建模板文件——新建EUI组件.…
    新特性 36k   访问EUI组件宽高时,也会跟原生显示对象的表现一致,立即能得到包含子项的宽高值   统一的显示列表  普通对象和eui对象都可用addChild来添加   一个逻辑组件只管代码控制,一个皮肤组件只负责外观 内部类  <e:Button label="按钮">          <e:Skin states="up,over,down,disable">              <e:Image source…
egret3d的GUI目前还没有,在做3d游戏的时候没有UI可用,只能使用egret2d的EUI组件库,egret3d与egret2d混合开发,canvas3d的大小与位置与canvas2d并没有重合,导致适配ui时总是错位.在做手机屏幕适配的时候必须解决这种问题,我的解决方法是两个属性相同. 我的解决方案为修改源码,在egret2d适配屏幕的时候加入自定义接口,通过事件的方式通知适配canvas3d的大小和位置. 先看下效果如何 转屏适配⬇️ 增加Diy接口 打开 egret engine ,…
第十七篇(书中 7.4~8.2节 内容) 昨天看到 7.3 节,那么今天. 开始 7.4节.     好吧,这些其他的服务器运行知识,就不搞了... 至此,7.4节 内容结束. 开始 7.5节 内容. 额...后期接触到,我会去整整看的.现在先专心搞Egret. 至此,7.5节 内容结束. 开始 7.6节 内容. · 嗯...这节怎么说呢,其实就是把前面学会的,连贯的做一遍. 好吧,那我就做一遍吧. 我先去找点资源. 好,我找到资源了. 第一步,导入资源. 第二步,创建EUI组件. 在src目录…
一 自定义组件如下 /** * 文 件 名:ItemScroll.ts * 功 能: 滚动组件 * 内 容: 自定义组件,支持多张图片水平(垂直)切换滚动 * * Example: * 1. 从自定义组件中找到ItemScroller,并拖动到exml上 * 2. 将需要显示对象(图片等)拖动到ItemScroller的Group下 * 3. 设置Group的布局为垂直or水平 */ class ItemScroller extends eui.Scroller{ /**滚动项数量*/ publ…
一  TabBar+ViewStack实现 这个教程确实没看懂...贼麻烦... 二 RadioButton+ViewStack 在exml中拖动组件RadioButton和ViewStack 设置exml源码RadioButton的value值为0,1... 因为这个value值将会赋值给ViewStack .并将第一个RadioButton的seleted=true,这样默认选中的第一项. <?xml version='1.0' encoding='utf-8'?> <e:Skin…
封装一个选项卡的UI,用来应付游戏中各种需要选项卡的界面. 例如背包,背包界面的选项卡可以切换装备.物品.符文.宝箱. 下图方法的实现参考:EUI ViewStack实现选项卡组件 假如在主页HomeScene中有一个选项卡UI,如下图: TabView简单实现代码 /** * 选项卡UI * @author chenkai 2018/8/3 */ class TabView{ private radioGroup:eui.Group; //单选按钮 private viewStack:eui.…
先看看实际效果 实现原理1.  ScrollView继承eui.Scroll2.  监听eui.Sroll的CHANGE_START和CHANGE_END事件,      根据鼠标滑动距离,来改变视口viewport.scrollH,达到图片滑动的效果. 使用方法1. 拖动组件到exml上在自定义组件里,拖动ScrollView组件到exml上,将要显示的图片拖动到Scroll的Group下.ScrollView高宽一定要和图片高宽一致. 2. 设置Group的布局和水平间隔比如如果是横着的图片…
一 自定义组件如下 /** * 文 件 ScrollView.ts * 功 能: 滚动组件 * 内 容: 自定义组件,支持多张图片水平(垂直)切换滚动 * * Example: * 1. 从自定义组件中找到ScrollView,并拖动到exml上 * 2. 将需要显示对象(图片等)拖动到ScrollView的Group下 * 3. 设置Group的布局为垂直or水平 */ class ScrollView extends eui.Scroller { /**页面总数*/ public itemN…
  步骤 1 在根节点,添加一个自定义的命名空间  2 可以设置skinName 自定义组件规范 1 不复用的不要用自定义组件 2 属性必须要有默认值(赋值为null也可以),因为TS编译器会把没有默认值的属性直接优化掉,在运行时并不存在. 3.属性的getter方法内要判断访问的对象是否为空,确保外部任何情况下访问属性都不会报错. 4 组件构造函数参数必须为空,或者参数有默认值,否则无法用空构造函数实例化. 5.组件的构造函数内不应该有对外部业务逻辑依赖的代码,这部分代码可以转移到组件被添加到…
首先我了解了什么是Egret: Egret中文就是白鹭的意思,Egret是一套H5游戏开发的软件.(纯粹属于个人理解) 其次我对以下几款软件的相关知识做了些了解: Egret Engine(引擎),Egret Wing(编辑器),Texture Merger(可将零散纹理拼合为整图,同时也可以解析SWF.GIF动画,导出可供Egret使用的配置文件),Egret Feather(是一款粒子效果编辑器)ResDepot(是针对资源配置文件的创建,编辑和管理工具)等.......ps:现在我只看了这…
一  Scroll+List ,拖动组件到exml. List不能写定高度,不然无法自动扩展.  二 新建List条目皮肤, ListItemSkin皮肤 名字Label的文本{data.name} 头像Image的资源{data.headUrl} 三  代码设置数据源 将带头像和名字的数组hero封装到ArrayCollection中,然后赋值给List的数据源dataProvider即可. private heroList:eui.List; public constructor() { s…
官方地址:https://developer.egret.com/cn/article/index/id/518 官方案例:https://github.com/egret-labs/egret-examples/tree/rc/v2.5/EUIExample 如何使用EXML 第一种方式,直接引用EXML文件 EXML的根节点是Skin,表示这个文件描述的是一个皮肤. 在EXML根节点是Skin的情况下,可以直接使用组件的skinName接受EXML文件路径,这通常也是最普遍的使用情景. 这里…
没认真看过...现在试试... EXMl支持内部类 两种支持做为内部类的:Skin和ItemRenderer 优点: 这种最大的好处就是皮肤如果只用一次,不需要单独写成一个exml文件,只需要写在组件所在的exml里就行了. 如果是复用的皮肤,还是单独写成一个exml文件比较好,这样修改的时候只需要修改exml文件一处. 缺点: 没法可视化编辑...比如居个中 (horizontalCenter="0" verticalCenter="0"), 如果你对exml的语…
一  Scroll+List ,拖动组件到exml. List不能写定高度,不然无法自动扩展.  二 新建List条目皮肤, ListItemSkin皮肤 条目皮肤下有:一个红色背景Rect,头像Image,昵称Label 名字Label的文本{data.name} 头像Image的资源{data.headUrl} 三  代码设置数据源 将带头像和名字的数组hero封装到ArrayCollection中,然后赋值给List的数据源dataProvider即可. private heroList:…
一.前言 随着业务的发展,并发量的增多,业务的复杂度越来越大,对于系统架构能力要求越来越高,这时候微服务的设计思想应运而生,但是对于微服务需要引擎进行驱动,这时候基于.NET CORE 的微服务引擎surging 就诞生了.  1.那么怎么样去理解微服务呢? 微服务是针对业务的松耦合,是对于业务的解耦,也是粒度最小的功能业务模块,对于本地和远程的抽象化,对于远程调用提供了服务治理保证了可靠性通信. 2. 那么什么是微服务引擎呢? 微服务引擎是微服务的容器,是扫描或引用加载业务服务模块驱动生成服务…
第二十篇(书中 9.1~9.3 节 内容 组件篇) 第八章中的内容. 以上都是基本的Js知识,我就不录入了. 直接来看 第9章. 开始 9.1节. 以上内容告诉你,Egret官方舍弃了GUI,使用了EUI. 至此,9.1节 内容结束. 开始 9.2节 内容. 重点: 1.Label组件的 普通文本使用 和 富文本使用. 操作: 1.Label组件的 普通文本使用 和 富文本使用. 至此,9.2节 内容结束. 开始 9.3节 . 重点: 1.用代码创建按钮. 2.查看按钮的内部构造,以及修改按钮的…
  ArrayCollection  当数组内的数据被修改了(增删改),组件能有效的获知 myCollection.addEventListener(eui.CollectionEvent.COLLECTION_CHANGE,this.collectionChangeHandler,this); 长度 ArrayCollection.length 增 addItem() addItemAt() 删 removeItemAt() removeAll(); 改 replaceItemAt( {},…
  eui.UILayer UILayer是Group的子类它只有一个功能,到放到场景上后,宽高永远和场景宽度一致   Group Group 是自动布局的容器基类.如果包含的子项内容太大需要滚动显示,可以在在 Group 外部包裹一层 Scroller 组件(将 Group 实例赋值给 Scroller 组件的 viewport 属性).Scroller 会为 Group 添加滚动的触摸操作功能,并显示垂直或水平的滚动条. 做过试验了 操作内部对象的方法 和Sprite基本一致,只是多了get…
  自适应流式布局 width="100%" top left right horizontalCenter=0 失效验证机制 这些异步过程都封装好了,我们只需要关注那一对方法: invalidateProperties() 和 commitProperties() ,前者标记属性失效,后者应用失效的属性     一个是测量验证   invalidateSize() 和 measure() 一个是布局验证. invalidateDisplayList() 和 updateDisplay…
  皮肤分离机制    皮肤分离机制对制作可复用的外观比较有优势 那对于只使用一次的皮肤呢?如果也拆分出两个文件,显然不太方便.这里我们针对单次使用的皮肤定制了内部类的功能   每个组件都有一个childrenCreated()方法,它会在组件初始化完成后回调,子类通常覆盖这个方法来访问一些延迟实例化的子项. 皮肤部件 在皮肤附加到逻辑组件上时,会自动匹配双方的同名变量和id,这些同名变量就叫做“皮肤部件”(SkinPart)   .当为某个组件定制皮肤时,实际上就分为创建对应的皮肤部件和显示图…
    EXML是可以运行时加载解析的   <e:Skin class="skins.ButtonSkin" states="up,down,disabled" minHeight="50" minWidth="100" xmlns:e="http://ns.egret.com/eui"> <e:Image width="100%" height="100%&…