Egret GUI and Egret Wing is the most slag-h5 design I've seen.

A copy of the flexlite copy of their own thoughts are not, the essence of others do not understand the garbage framework. Do not learn Mornui, at least a bit of their own ideas.

Let's start with a minimum available set:

1. Egret Create Legogame--type GUI. Build a project with a GUI.

2. Open this stupid project with Webstorm.

3. Modify Theme.thm:

{    "skins":    {        "Egret.gui.Button": "Skins.simple.ButtonSkin"    }}

4. Modify Resource.json

{    "Groups":[    {        "Keys": "Button_disabled_png,button_down_png,button_normal_png,bgimage",        "Name": "Preload"    }],    "Resources":[    {        "Name": "Button_disabled_png",        "Scale9grid": "3,4,14,13",        ' type ': ' Image ',        "url": "Assets/simple/normalbutton/button_disabled.png"    },    {        "Name": "Button_down_png",        "Scale9grid": "4,3,13,14",        ' type ': ' Image ',        "url": "Assets/simple/normalbutton/button_down.png"    },    {        "Name": "Button_normal_png",        "Scale9grid": "4,3,13,15",        ' type ': ' Image ',        "url": "Assets/simple/normalbutton/button_normal.png"    },    {        "Name": "Bgimage",        ' type ': ' Image ',        "url": "Assets/bg.jpg"    }    ]}

5. Enter the Resource/assets/simple directory, keep the Normalbutton, and delete the other. Enter src/skins/simple/except Buttonskin.exml, others to delete.

6. Go to Showcaseskin.exml, delete list, get:

<?XML version= ' 1.0 ' encoding= ' utf-8 '?><E:skinwidth= "480"Height= "$"xmlns:e= "Http://ns.egret-labs.org/egret"xmlns:w= "Http://ns.egret-labs.org/wing">    <w:hostcomponentname= "Egret.gui.SkinnableComponent"/>    <w:declarations/>    <e:states>        <e:statename= "normal"/>        <e:statename= "Disabled"/>a</e:states>    <E:buttonID= "Btnshowmessage"label= "click"y= " the"Horizontalcenter= "0"/></E:skin>

7. Enter Showcase.ts, except button, all other delete:

class Showcase extends Egret.gui.SkinnableComponent {public    constructor () {        super ();         this. Skinname = "Skins.scene.ShowcaseSkin";    }    public BtnShowMessage:egret.gui.Button;    Public partadded (Partname:string, Instance:any):void  {        super.partadded (PartName, instance) ;    }}

8. Under the Legogame directory, Run Egret build, Egret startserver. Get the result with only one button.

This is the minimum available set: Mininum available set.

It is not superfluous to continue studying Resource.json and theme.thm. and the Buttonskin.exml file.

Egret GUI and Egret Wing is the most slag-h5 design I've seen.