Aardio - construct a multi button component with customplus library +plus

utilize customPlus library +plus Components , Easily construct a multi button component , Achieve mouse over effect , Realize the response click function .

Effect 1 ：

  Code 1 ：

import win.ui;
/*DSG{
   {*/
var winform = win.form(text="aardio form";right=759;bottom=469)
winform.add(
plus={cls="plus";left=0;top=0;right=600;bottom=500;bgcolor=16777215;notify=1;z=1}
)
/*}}*/
winform.show();
//  Define project templates 
var itemModel = {
        {   
            type="rect", 
            rectf={x=3;y=3;width=-3;height=-3},
            name=" Project background color ",
            click=true; 
            width=1, 
            round=25,
            color=0xFF009955, 
            fillcolor=0x22009955,   
            itemhoverfillcolor=0xAA009955, 
        },
        {   
            type="text", 
            rectf={x=3;y=3;width=-3;height=-3},
            name=" Title Text ",
            align=1; 
            valign=1;
            smooth=true; 
            text="", 
            font={name="Tahoma",h=-13,color=0xFFFF0000,weight=700}, 
            itemhoverfont={name="Tahoma",h=-16,color=0xFFFFFFFF,weight=700},
        }
    }
    
// Generate project list 
var itemList = {}
for(i=1;28;1){
    ..table.push(itemList,{ Title Text ="ITEM"++i})    
}

// Construction components 
import godking.customPlus
var c = godking.customPlus(winform.plus,{
        itemWidth=80,    /* Project width */
        itemHeight=40,    /* Project height */
        autoSizeRow=true,    /* Automatically according to the number of project lines and plus Height adjustment item height */
        autoSizeCol=true,    /* Automatically according to the number of project columns and plus Width adjust item width */
        colnum=0,     /* Number of project Columns , by 0 According to the project width and plus Automatic width calculation */
        rownum=0,     /* Number of project lines , by 0 According to the project height and plus Automatic height calculation */
        padLeft=5,    /*plus Left margin */
        padTop=5,    /*plus Top margin distance */
        padRight=5,    /*plus Right margin distance */
        padBottom=5    /*plus Bottom margin distance */
        },itemModel,itemList);


c.onClick = function(itemIndex){
		..win.msgbox(" You clicked ："++itemIndex)
	}
	
win.loopMessage();

Effect two ：

Code 2 ：

import win.ui;
/*DSG{
   {*/
var winform = win.form(text="aardio form";right=669;bottom=399)
winform.add(
button={cls="button";text=" add to ";left=530;top=330;right=660;bottom=390;color=14120960;flat=1;font=LOGFONT(h=-14);note=" Add an item ";z=2};
plus={cls="plus";left=0;top=0;right=670;bottom=320;clipBk=false;notify=1;z=1}
)
/*}}*/

winform.show();
import inet.http
winform.plus.background = "https://img1.baidu.com/it/u=3977836567,3094831983&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
//  Define project templates 
var itemModel = {
        {   
            type="rect", 
            rectf={x=3;y=3;width=-3;height=-3},
            name=" Project background color ",
            click=true; 
            width=2, 
            round=4,
            color=0xFF009955, 
            fillcolor=0x55009955,   
            hoverfillcolor=0xBB009955, 
        },
        {   
            type="text", 
            rectf={x=3;y=3;width=-3;height=-3},
            name=" Title Text ",
            align=1; 
            valign=1;
            smooth=true; 
            text="", 
            font={name="Tahoma",h=-13,color=0xFFFFFFFF,weight=700}, 
            hoverfont={name="Tahoma",h=-16,color=0xFFFFFF00,weight=700},
        }
    }
    
// Generate project list 
var itemList = {}
for(i=1;28;1){
    ..table.push(itemList,{ Title Text ="ITEM"++i})    
}

// Construction components 
import godking.customPlus
var c = godking.customPlus(winform.plus,{
        itemWidth=80,    /* Project width */
        itemHeight=40,    /* Project height */
        autoSizeRow=true,    /* Automatically according to the number of project lines and plus Height adjustment item height */
        autoSizeCol=true,    /* Automatically according to the number of project columns and plus Width adjust item width */
        colnum=0,     /* Number of project Columns , by 0 According to the project width and plus Automatic width calculation */
        rownum=0,     /* Number of project lines , by 0 According to the project height and plus Automatic height calculation */
        padLeft=20,    /*plus Left margin */
        padTop=20,    /*plus Top margin distance */
        padRight=20,    /*plus Right margin distance */
        padBottom=20    /*plus Bottom margin distance */
        },itemModel,itemList);


c.onClick = function(itemIndex){
		..win.msgbox(" You clicked ："++itemIndex)
	}

winform.button.oncommand = function(id,event){
	..table.push(itemList,{ Title Text ="ITEM"++(#itemList+1)})  
	c.update()
}

win.loopMessage();

Effect three ：

  Code three ：

import win.ui;
/*DSG{
   {*/
var winform = win.form(text="aardio form";right=669;bottom=399)
winform.add(
button={cls="button";text=" add to ";left=530;top=330;right=660;bottom=390;color=14120960;db=1;dr=1;flat=1;font=LOGFONT(h=-14);note=" Add an item ";z=2};
plus={cls="plus";left=0;top=0;right=670;bottom=320;clipBk=false;db=1;dl=1;dr=1;dt=1;notify=1;z=1}
)
/*}}*/
 
winform.show();
import inet.http
//  Define project templates 
var itemModel = {
        {   
            type="rect", 
            rectf={x=23;y=3;width=-3;height=-3},
            name=" Project background color ",
            click=true; 
            width=0, 
            round=50,
            color=0xFF009955, 
            fillcolor=0x55009955,   
            hoverfillcolor=0xBB009955, 
        },
        {   
            type="text", 
            rectf={x=30;y=3;width=-3;height=-3},
            name=" Title Text ",
            align=1; 
            valign=1;
            smooth=true; 
            text="", 
            font={name="Tahoma",h=-13,color=0xFFFFFFFF,weight=700}, 
            hoverfont={name="Tahoma",h=-16,color=0xFFFFFF00,weight=700},
        }
         {   
            type="img", 
            rectf={x=0;y=0;width=50;height=50},
            scale = true;
            name="cio",
            img = "//img.inotgo.com/imagesLocal/202207/06/202207061439346027_0.png"
        }       
    }
    
// Generate project list 
var itemList = {}
for(i=1;580;1){
    ..table.push(itemList,{ Title Text ="ITEM"++i})    
}
 
// Construction components 
import godking.customPlus
var c = godking.customPlus(winform.plus,{
        itemWidth=150,    /* Project width */
        itemHeight=50,    /* Project height */
        autoSizeRow=true,    /* Automatically according to the number of project lines and plus Height adjustment item height */
        autoSizeCol=true,    /* Automatically according to the number of project columns and plus Width adjust item width */
        colnum=0,     /* Number of project Columns , by 0 According to the project width and plus Automatic width calculation */
        rownum=0,     /* Number of project lines , by 0 According to the project height and plus Automatic height calculation */
        padLeft=20,    /*plus Left margin */
        padTop=20,    /*plus Top margin distance */
        padRight=20,    /*plus Right margin distance */
        padBottom=20    /*plus Bottom margin distance */
        },itemModel,itemList,0xFF000000,);
 
c.onClick = function(itemIndex){
		..win.msgbox(" You clicked ："++itemIndex)
	}
 
winform.button.oncommand = function(id,event){
	..table.push(itemList,{ Title Text ="ITEM"++(#itemList+1)})  
	c.update()
}
 
winform.adjust = function( cx,cy,wParam ) {	 
	c.init()  
};
 c.toNextPage()
win.loopMessage();

Effect four ： 

   Code four ：

import win.ui;
/*DSG{
   {*/
var winform = win.form(text="aardio form";right=669;bottom=399)
winform.add(
button={cls="button";text=" add to ";left=530;top=330;right=660;bottom=390;color=14120960;db=1;dr=1;flat=1;font=LOGFONT(h=-14);note=" Add an item ";z=2};
plus={cls="plus";left=0;top=0;right=670;bottom=320;clipBk=false;db=1;dl=1;dr=1;dt=1;notify=1;z=1}
)
/*}}*/

winform.show();
import inet.http
//  Define project templates 
var itemModel = {
        {   
            type="rect", 
            rectf={x=3;y=3;width=-3;height=-3},
            name=" Project background color ",
            click=true; 
            width=2, 
            round=4,
            color=0xFF009955, 
            fillcolor=0x55009955,   
            hoverfillcolor=0xBB009955, 
        },
        {   
            type="text", 
            rectf={x=20;y=3;width=-3;height=-3},
            name=" Title Text ",
            align=1; 
            valign=1;
            smooth=true; 
            text="", 
            font={name="Tahoma",h=-13,color=0xFFFFFFFF,weight=700}, 
            hoverfont={name="Tahoma",h=-16,color=0xFFFFFF00,weight=700},
        }
         {   
            type="img", 
            rectf={x=10;y=10;width=30;height=30},
            scale = true;
            name="cio",
            img = "//img.inotgo.com/imagesLocal/202207/06/202207061439346027_0.png"
        }       
    }
    
// Generate project list 
var itemList = {}
for(i=1;580;1){
    ..table.push(itemList,{ Title Text ="ITEM"++i})    
}
 
// Construction components 
import godking.customPlus
var c = godking.customPlus(winform.plus,{
        itemWidth=150,    /* Project width */
        itemHeight=50,    /* Project height */
        autoSizeRow=true,    /* Automatically according to the number of project lines and plus Height adjustment item height */
        autoSizeCol=true,    /* Automatically according to the number of project columns and plus Width adjust item width */
        colnum=0,     /* Number of project Columns , by 0 According to the project width and plus Automatic width calculation */
        rownum=0,     /* Number of project lines , by 0 According to the project height and plus Automatic height calculation */
        padLeft=20,    /*plus Left margin */
        padTop=20,    /*plus Top margin distance */
        padRight=20,    /*plus Right margin distance */
        padBottom=20    /*plus Bottom margin distance */
        },itemModel,itemList,0xFF000000,);
 
c.onClick = function(itemIndex){
		..win.msgbox(" You clicked ："++itemIndex)
	}
 
winform.button.oncommand = function(id,event){
	..table.push(itemList,{ Title Text ="ITEM"++(#itemList+1)})  
	c.update()
}

winform.adjust = function( cx,cy,wParam ) {	 
	c.init()  
};
 c.toNextPage()
win.loopMessage();

Images used ：

Effect five ：

  Code five ：

import win.ui;
/*DSG{
   {*/
var winform = win.form(text="aardio form";right=639;bottom=399)
winform.add(
button={cls="button";text=" add to ";left=500;top=330;right=630;bottom=390;color=14120960;db=1;dr=1;flat=1;font=LOGFONT(h=-14);note=" Add an item ";z=2};
plus={cls="plus";left=0;top=0;right=650;bottom=320;clipBk=false;db=1;dl=1;dr=1;dt=1;notify=1;z=1}
)
/*}}*/
winform.show();
//  Define project templates 
var itemModel = {
        {   
            type="rect", 
            rectf={x=0;y=0;width=151;height=51},
            name=" Project background color ",
            click=true; 
            width=0, 
            round=0, //  or 1
            color=0xBB009955;
            fillcolor=0x55009955,   
            hoverfillcolor=0xBB009955, 
        },
        {   
            type="text", 
            rectf={x=20;y=3;width=-3;height=-3},
            name=" Title Text ",
            align=1; 
            valign=1;
            smooth=true; 
            text="", 
            font={name="Tahoma",h=-13,color=0xFFFFFFFF,weight=700}, 
            hoverfont={name="Tahoma",h=-16,color=0xFFFFFF00,weight=700},
        }
         {   
            type="img", 
            name = "pic",
            rectf={x=10;y=10;width=30;height=30},
            scale = true;
        }       
    }
    
// Generate project list 
var itemList = {}
for(i=1;580;1){
    ..table.push(itemList,{ Title Text ="ITEM"++i;pic="E:\ Picture material \png\png128_1000\"++i++".png"})    
}
 
// Construction components 
import godking.customPlus
var c = godking.customPlus(winform.plus,{
        itemWidth=150,    /* Project width */
        itemHeight=50,    /* Project height */
        autoSizeRow=0,    /* Automatically according to the number of project lines and plus Height adjustment item height */
        autoSizeCol=0,    /* Automatically according to the number of project columns and plus Width adjust item width */
        colnum=0,     /* Number of project Columns , by 0 According to the project width and plus Automatic width calculation */
        rownum=0,     /* Number of project lines , by 0 According to the project height and plus Automatic height calculation */
        padLeft=20,    /*plus Left margin */
        padTop=20,    /*plus Top margin distance */
        padRight=20,    /*plus Right margin distance */
        padBottom=20    /*plus Bottom margin distance */
        },itemModel,itemList,0xFF000000,);

c.onClick = function(itemIndex/* Project index */,elemIndex/* Element index */,elemID/* Elements id*/,elemName/* Elements name*/,pageIndex/* Current page item index */){
		..win.msgbox(" You clicked ："++c.itemList[itemIndex]. Title Text )
	}
	
winform.button.oncommand = function(id,event){
	..table.push(itemList,{ Title Text ="ITEM"++(#itemList+1)})  
	c.update()
}
 
winform.adjust = function( cx,cy,wParam ) {	 
	c.init()  
};
 c.toNextPage()
win.loopMessage();