VincentWei/minigui-docs

Fork 0

mirror of https://github.com/VincentWei/minigui-docs.git synced 2025-10-19 20:13:25 +08:00

Files

Vincent Wei c4099c51a4 auto generate TOC by using AWK

2019-10-30 17:44:37 +08:00

50 KiB

Raw Blame History

Button and Derived Control Classes

Brief Introduction of Button Series Control
Button Class Renderer
mButton
mCheckButton
mRadioButton
mMenuButton
mColorButton
Appendix:A

Brief Introduction of Button Series Control

Button is an essential control of human computer interaction in the user interface, and all the human computer interaction interfaces include button. In the design of mGNCS, button use conditions under different use environments are fully considered, and different properties and interfaces etc. are provided for the convenience of user componentization development. Buttons in mGNCS reconstruct built-in button control in MiniGUI 3.0 and conduct big adjustment. Two button types are added, greatly strengthening button control. Buttons in MiniGNCS include five types, common button, check box, single selection button, menu button and color selection button. Users can select or switch status of buttons through keyboard or mouse. Input of users will make buttons generate notification message, and applications can send messages to the buttons to change the status of the buttons. Each button type corresponds to one class, which contains style, property, event, method and renderer. Functions of the controls provided in mGNCS are usually stronger than the functions of the controls used on PC, providing more configurable information, and renderer editing is added.

In this document, button class and the properties in it will be introduced in detail, making it convenient for the users to further understand the details of buttons, thus buttons can be used more flexibly.

Class hierarchical relation related to buttons:

mWidget
- mButton
  - mCheckButton
  - mRadioButton
  - mMenuButton (mPopMenuMgr is used)
  - mColorButton

Control creating methods:

Automatic creation: through interface designer in miniStudio, corresponding button control is dragged. miniStudio will automatically create control and provide visual control configuration, and at the same time, creation codes are generated automatically.
Manual generation: according to mGNCS control creation process, through programming, corresponding control window class ID is imported and control is generated. Manual programming sets control property and event handling.

Button Class Renderer

mGNCS provides four types of renderers and defines renderer property setting set. The four types of renderers correspond to four kinds of renderer property setting set. For button class control, the four kinds of renderers defines which renderer property can be set in the button control and which effect can it be set to. mGNCS provides default renderer property. Of course, users can change these properties, thus different effects can be set. That is to say, users can change different renderer properties and create numerous renderer examples based on the four types of renderers.

`mButton`

Control window class: NCSCTRL_BUTTON
Control English name: Push Button
Brief introduction: It is button of press down mode. On the button, the simple ones can be represented by literals and can be marked by images, and they can be displayed by mixture of images and literals.

To understand programming of buttons, firstly, it is necessary to understand the status of buttons. In mGNCS, the status of buttons is divided into four kinds, refer to appendix definition and note: ButtonState ButtonState

Style of `mButton`

Style of buttons includes two categories:

Firstly, it is defining button CHECK status, which is press down status, and setting is carried out through Checkable/Autocheck/ThreeDCheck in the property;
Secondly, it is setting button panel as displaying text or image or coexistence if image and text, which is done mainly through options in Label Type in property. Text by default, while layout of images and texts is set through other properties.

mButton is the foundation class of all buttons, which implements PushButton by default. Buttons of all other types are derived from it.

It is inherited from the style of mWidget.

Style ID	miniStudio property name	Comments
`NCSS_BUTTON_CHECKABLE`	Checkable	Set if the button can carry out `CHECKED` status conversion; if `FALSE`, `CHECK` status conversion is not carried out, and autocheck and `ThreeDCheck` are invalid
`NCSS_BUTTON_AUTOCHECK`	Autocheck	When `CHECKED` status conversion can be carried out, set if clicking can be carried out to automatically switch `CHECK` status
`NCSS_BUTTON_3DCHECK`	`ThreeDCheck`	Set button `CHECK` status as three status (unchecked-halfchecked-checked) or two status (unchecked-checked) switch
`NCSS_BUTTON_IMAGE`	`LabelType->Image`	Image button style, the button is label literal mode in `LabelType` by default
`NCSS_BUTTON_IMAGELABEL`	`LabelType->ImageLabel`	Button of horizontally arranged image text
`NCSS_BUTTON_VERTIMAGELABEL`	`LabelType->VertImageLabel`	Button of vertically arranged image text

Property of `mButton`

It is inherited from the property of mWidget.

Property ID name	miniStudio property name	Type	Permission	Comments
`NCSP_BUTTON_ALIGN`	Align	Alignment enumeration value	`RW`	Content on the button (image or literal) is aligned with the button according to the set mode in horizontal direction
`NCSP_BUTTON_VALIGN`	`VAlign`	Alignment enumeration value	`RW`	Content on the button (image or literal) is aligned with the button according to the set mode in vertical direction, and the alignment value is top – 0, bottom – 1, center – 2
`NCSP_BUTTON_WORDWRAP`	Wordwrap	int	`RW`	Automatic wrap property of the literals on the button, when the single line length of the literal content is bigger than the control width, automatic wrap can be selected. `TRUE`: automatic wrap `FALSE`: single line, and the exceeding part is not displayed
`NCSP_BUTTON_IMAGE`	Image	`PBITMAP`	`RW`	Image, corresponding to button property pbmp, which is image pointer, it must be valid when `NCSS_BUTTON_IMAGE` or `NCSS_BUTTON_IMAGELABEL` or `NCSS_BUTTON_VERTIMAGELABEL` is set
`NCSP_BUTTON_CHECKSTATE`	None	mButtonCheckState	`RW`	Set or get check status, valid when `NCSS_BUTTON_CHECKABLE` is set, `NCS_BUTTON_HALFCHECKED` is regarded as valid value when `NCSS_BUTTON_3DCHECK` is set
`NCSP_BUTTON_IMAGE_SIZE_PERCENT`	`ImageSizePercent`	int	`RW`	Under the style of coexistence of image and text, set proportion of image on the control (take value 15~85, representing 15% to 85%), and the remaining is occupied by the text
`NCSP_BUTTON_GROUPID`	`GroupID`	int	`RW`	When there is `NCSS_BUTTON_CHECKABLE` style, ID of a `mButtonGroup` can be set to the window, it will automatically get a corresponding `mButtonGroup` object and set
`NCSP_BUTTON_GROUP`	None	`mButtonGroup*`	RW	When there is `NCSS_BUTTON_CHECKABLE` style, set a `mButtonGroup` object pointer, and all the buttons adding to the group has the automatic switching ability of Radio style

Event of `mButton`

It is inherited from the event of mWidget.

Event notification code	Explanation	Parameter
`NCSN_BUTTON_PUSHED`	Key pressed down
`NCSN_BUTTON_STATE_CHANGED`	After status changes	New status

Note, the control inherits NCSN_WIDGET_CLICKED event of the parent class.

Renderer of `mButton`

For the usage of renderer, see look and feel renderer.

`mButton` Classic renderer

The basic style under classic renderer is as shown in the figure below:

Drawing of mButton Classic renderer is as below: for the drawing of non client area, please refer to the renderer of mWidget.

Property ID	Meaning	miniStudio property name	Value type	Schematic diagram of the valid region
`NCS_FGC_3DBODY`	Text foreground color	`FgColor3DBody`	`DWORD` (`ARGB`)
`NCS_BGC_3DBODY`	Background color	`BgColor3DBody`	`DWORD` (`ARGB`)
`NCS_FGC_DISABLED_ITEM`	Text foreground color when the window is invalid	`TextDisableColor`	`DWORD` (`ARGB`)	<img src=figures/push-button-classic-fgdisable.png" alt="push-button-classic-fgdisable.png"/>
`NCS_BGC_DISABLED_ITEM`	background color when the window is invalid	`BgColorDisable`	`DWORD` (`ARGB`)	<img src=figures/push-button-classic-bgdisable.png" alt="push-button-classic-bgdisable.png"/>

High light effect: through enhancing the brightness of the background color (NCS_BGC_3DBODY), as the high light color
check effect: implement through drawing invaginated border
Three status Check effect: implement half selection through drawing high light color in the invaginated border

Schematic diagram:

`mButton` Skin Renderer

Refer to Appendix B: Specification for the Image Resources Used by Skin Renderer.

`mButton` Fashion Renderer

For the drawing of non client area, please refer to the drawing of Fashion renderer of mWidget.

Property ID	Meaning	miniStudio property name	Value type	Schematic diagram of the valid region	Value range
`NCS_FGC_3DBODY`	Text foreground color	`FgColor3DBody`	`DWORD` (`ARGB`)	Same as Classic renderer
`NCS_FGC_DISABLED_ITEM`	Text foreground color when the window is invalid	`TextDisableColor`	`DWORD` (`ARGB`)	Same as Classic renderer
`NCS_BGC_3DBODY`	Background color	`BgColor3DBody`	`DWORD` (`ARGB`)
`NCS_BGC_DISABLED_ITEM`	Text background color when the window is invalid	`BgColorDisable`	`DWORD` (`ARGB`)
`NCS_MODE_BGC`	Gradual change fill mode	`GradientMode`	int		GradientMode
`NCS_METRICS_3DBODY_ROUNDX`	Window rectangle round corner X radius	`RoundX`	int		0 to 1/2 of the window width
`NCS_METRICS_3DBODY_ROUNDY`	Window rectangle round corner Y radius	`RoundY`	int		0 to 1/2 of the window height

Gradual change color: the gradual change color gives different brightness factor from the ground color (NCS_BGC_3DBODY or NCS_BGC_DISABLED_ITEM), and calculates the two objective colors. Gradually change from the center (ground color) to the two sides or top and bottom (highlighted color achieved through calculation)
High light color: after the ground color is highlighted, the gradual change color calculates to obtain on the foundation of this
Representing method of check status: after the ground color undergoes darkening processing, calculate the gradual change color
Representing method of three status check: besides the method is the same as above in check status, in half selection status, use the window ground color (NCS_BGC_WINDOW) as the whole ground color to draw

Schematic diagram:

`mButton` Flat Renderer

For the drawing of non client area, please refer to the drawing of Flat renderer of mWidget.

Property ID	Meaning	miniStudio property name	Value type	Schematic diagram of the valid region	Value range
`NCS_FGC_3DBODY`	Text foreground color	`FgColor3DBody`	`DWORD` (`ARGB`)	Same as Classic renderer
`NCS_FGC_DISABLED_ITEM`	Text foreground color when the window is invalid	`TextDisableColor`	`DWORD` (`ARGB`)	Same as Classic renderer
`NCS_BGC_3DBODY`	background color	`BgColor3DBody`	`DWORD` (`ARGB`)	Same as Classic renderer
`NCS_METRICS_3DBODY_ROUNDX`	Window rectangle round corner X radius	`RoundX`	int		0 to 1/2 of the window width
`NCS_METRICS_3DBODY_ROUNDY`	Window rectangle round corner Y radius	`RoundY`	int		0 to 1/2 of the window height

High light: draw small prompting symbols to implement around the control
check status: draw lines at right-bottom edition, and compose inverted “L” realization
check representing method of three status: in half selection status, draw lines at left-top, forming fell flat “L”

Schematic diagram:

Programming Example of `mButton`

Operation screen shot:

This program uses Fashion renderer to create buttons of four different styles, which are common button, image button, Autocheck style button and three status button.
Complete example code of common button:

List 1 button.c

/*
** button.c: Sample program for mGNCS Programming Guide
**      The first mGNCS application.
**
** Copyright (C) 2009 ~ 2019 FMSoft Technologies.
*/

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

// START_OF_INCS
#include <minigui/common.h>
#include <minigui/minigui.h>
#include <minigui/gdi.h>
#include <minigui/window.h>

#include <mgncs/mgncs.h>
// END_OF_INCS

#define ID_BTN  101
#define ID_BTN1 102
#define ID_BTN5 106
#define ID_BTN6 107
#define ID_BTN7 108
#define ID_BTN8 109

// START_OF_HANDLERS
static BITMAP bmp;
static BOOL mymain_onCreate(mWidget* self, DWORD add_data)
{
    //set image
//START_SET_IMAGE
    if(LoadBitmapFromFile(HDC_SCREEN, &bmp, "icon_button.png")!=0)
    {
        printf("cannot load image file \"icon_button.png\"\n");
    }

    mButton *mb1 = (mButton*)ncsGetChildObj(self->hwnd, ID_BTN1);

    if(mb1)
        _c(mb1)->setProperty(mb1, NCSP_BUTTON_IMAGE, (DWORD)&bmp);
//END_STE_IMAGE
    return TRUE;
}

static void mymain_onClose(mWidget* self, int message)
{
    DestroyMainWindow(self->hwnd);
    PostQuitMessage(0);
}

static NCS_EVENT_HANDLER mymain_handlers[] = {
    {MSG_CREATE, mymain_onCreate},
    {MSG_CLOSE, mymain_onClose},
    {0, NULL}
};
// END_OF_HANDLERS

// START_OF_RDRINFO
NCS_RDR_ELEMENT btn_rdr_elements[] =
{
    { NCS_MODE_USEFLAT, 1},
    { -1, 0 }
};
static NCS_RDR_INFO btn_rdr_info[] =
{
    {"fashion","fashion", btn_rdr_elements}
};
// END_OF_RDRINFO

// START_OF_TEMPLATE
static NCS_WND_TEMPLATE _ctrl_templ[] = {
//START_DCL_DEF_PUSHBUTTON
    {
        NCSCTRL_BUTTON,
        ID_BTN,
        30, 30, 80, 25,
        WS_BORDER | WS_VISIBLE,
        WS_EX_NONE,
        "button",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
//END_DCL_DEF_PUSHBUTTON
//START_DCL_IMAGEBUTTON
    {
        NCSCTRL_BUTTON,
        ID_BTN1,
        150, 30, 80, 25,
        WS_VISIBLE | NCSS_BUTTON_IMAGE,
        WS_EX_NONE,
        "Image",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
//END_DCL_IMAGEBUTTON
//START_DCL_AUTOCHECKBTN
    {
        NCSCTRL_BUTTON,
        ID_BTN1,
        30, 80, 80, 25,
        WS_VISIBLE  | NCSS_BUTTON_AUTOCHECK | NCSS_BUTTON_CHECKABLE,
        WS_EX_NONE,
        "Auto button",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
//END_DCL_AUTOCHECKBTN
//START_DCL_3DAUTOCHECKBTN
    {
        NCSCTRL_BUTTON,
        ID_BTN1,
        150, 80, 80, 25,
        WS_VISIBLE | NCSS_BUTTON_AUTOCHECK | NCSS_BUTTON_CHECKABLE \
            | NCSS_BUTTON_3DCHECK,
        WS_EX_NONE,
        "3D button",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
//END_DCL_3DAUTOCHECKBTN
};

static NCS_MNWND_TEMPLATE mymain_templ = {
    NCSCTRL_MAINWND,
    1,
    0, 0, 260, 180,
    WS_CAPTION | WS_BORDER | WS_VISIBLE,
    WS_EX_NONE,
    "Push Button",
    NULL,
    NULL,
    mymain_handlers,
    _ctrl_templ,
    sizeof(_ctrl_templ)/sizeof(NCS_WND_TEMPLATE),
    0,
    0, 0,
};
// END_OF_TEMPLATE

int MiniGUIMain(int argc, const char* argv[])
{
    ncsInitialize();

    mDialogBox* mydlg = (mDialogBox *)ncsCreateMainWindowIndirect
                (&mymain_templ, HWND_DESKTOP);

    _c(mydlg)->doModal(mydlg, TRUE);

    MainWindowThreadCleanup(mydlg->hwnd);

    ncsUninitialize ();

    return 0;
}

Define common button

    {
        NCSCTRL_BUTTON,
        ID_BTN,
        30, 30, 80, 25,
        WS_BORDER | WS_VISIBLE,
        WS_EX_NONE,
        "button",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },

Define Image button, generally it is handled in onCreate event of the main window

    {
        NCSCTRL_BUTTON,
        ID_BTN1,
        150, 30, 80, 25,
        WS_VISIBLE | NCSS_BUTTON_IMAGE,
        WS_EX_NONE,
        "Image",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },

Load and set Image

    if(LoadBitmapFromFile(HDC_SCREEN, &bmp, "icon_button.png")!=0)
    {
        printf("cannot load image file \"icon_button.png\"\n");
    }

    mButton *mb1 = (mButton*)ncsGetChildObj(self->hwnd, ID_BTN1);

    if(mb1)
        _c(mb1)->setProperty(mb1, NCSP_BUTTON_IMAGE, (DWORD)&bmp);

Define button of Autocheck style

    {
        NCSCTRL_BUTTON,
        ID_BTN1,
        30, 80, 80, 25,
        WS_VISIBLE  | NCSS_BUTTON_AUTOCHECK | NCSS_BUTTON_CHECKABLE,
        WS_EX_NONE,
        "Auto button",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },

Define button of three status check style

    {
        NCSCTRL_BUTTON,
        ID_BTN1,
        150, 80, 80, 25,
        WS_VISIBLE | NCSS_BUTTON_AUTOCHECK | NCSS_BUTTON_CHECKABLE \
            | NCSS_BUTTON_3DCHECK,
        WS_EX_NONE,
        "3D button",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },

`mCheckButton`

Control window class: NCSCTRL_CHECKBUTTON
Control English name: CheckButton
Brief introduction: Check box button, mainly used on multi-selection occasion. The common pattern is a box, and the user checks or unchecks the box.

Property of `mCheckButton`

It is inherited from the property of mButton.

Event of `mCheckButton`

It is inherited from the event of mButton.

Renderers of `mCheckButton`

For the usage of renderers, see look and feel renderer

`mCheckButton` Classic Renderer

Drawing of renderer in the mCheckButton Classic text region is as below: for the drawing of non client area, please refer to the renderer of mWidget.

Property ID	Meaning	miniStudio property name	Value type	Schematic diagram of the valid region	Value range
`NCS_FGC_3DBODY`	Text foreground color	`FgColor3DBody`	`DWORD` (`ARGB`)
`NCS_FGC_DISABLED_ITEM`	Text foreground color when the window is invalid	`TextDisableColor`	`DWORD` (`ARGB`)

Classic renderer of Check box fills and draws through loading image resource. (image resource is minigui-res by default, and installed in /usr/local/share/minigui/res/bmp/classic_check_button.bmp）by default
Specification of image: the image is composed of eight parts from left to right, and each part is a square (13x13), corresponding to eight statuses of checkbutton:

0~3: common, highlight, pressed down and banned statuses when not selected
4~7: common, highlight, pressed down and banned statuses when selected

If the image is bigger than the drawing region, the image will be reduced to draw; if the image is smaller or equal to the drawing region, the image actual size will be adopted to draw
Example

`mCheckButton` Skin Renderer

Refer to Appendix B : Specification for the Image Resource Used by Skin Renderer

`mCheckButton` Fashion Renderer

Drawing of mCheckButton Fashion text region renderer is as follows: for the drawing of non client area, please refer to the renderer of mWidget.

Property ID	Meaning	miniStudio property name	Value type	Schematic diagram of the valid region	Value range
`NCS_FGC_3DBODY`	Text foreground color	`FgColor3DBody`	`DWORD` (`ARGB`)
`NCS_FGC_DISABLED_ITEM`	Text foreground color when the window is invalid	`TextDisableColor`	`DWORD` (`ARGB`)

Fashion renderer of Check box fills and draws through loading image resource. (Note: the image resource is minigui-res by default, and installed in /usr/local/share/minigui/res/bmp/fashion_check_btn.bmp by default)
Specification of the image: the image is composed of eight parts from top to bottom, and each part is a square (13x13), corresponding to eight statuses of checkbutton:

0~3: common, highlight, pressed down and banned status when not selected
4~7: Common, highlight, pressed down and banned status when selected

If the image is bigger than the drawing region, the image will be reduced to draw; if the image is smaller or equal to the drawing region, the image actual size will be adopted to draw
Example

`mCheckButton` Flat Renderer

Drawing of text region and check box of mCheckButton Flat renderer is as below: for the drawing of non area region, please refer to the renderer of mWidget.

Property ID	Meaning	miniStudio property name	Value type	Schematic diagram of the valid region	Value range
`NCS_FGC_3DBODY`	Text foreground color	`FgColor3DBody`	`DWORD` (`ARGB`)
`NCS_BGC_3DBODY`	Background color	`BgColor3DBody`	`DWORD` (`ARGB`)

Programming Example of `mCheckbutton`

Operation screen shot:

Check box example code

List 2 checkbutton.c

/*
** checkbutton.c: Sample program for mGNCS Programming Guide
**      The first mGNCS application.
**
** Copyright (C) 2009 ~ 2019 FMSoft Technologies.
*/

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

// START_OF_INCS
#include <minigui/common.h>
#include <minigui/minigui.h>
#include <minigui/gdi.h>
#include <minigui/window.h>

#include <mgncs/mgncs.h>
// END_OF_INCS

// START_OF_HANDLERS
static BOOL mymain_onCreate(mWidget* _this, DWORD add_data)
{
    return TRUE;
}

static void mymain_onClose(mWidget* _this, int message)
{
    DestroyMainWindow(_this->hwnd);
    PostQuitMessage(0);
}

static NCS_EVENT_HANDLER mymain_handlers[] = {
    {MSG_CREATE, mymain_onCreate},
    {MSG_CLOSE, mymain_onClose},
    {0, NULL}
};
// END_OF_HANDLERS

// START_OF_RDRINFO
NCS_RDR_ELEMENT btn_rdr_elements[] =
{
    { NCS_MODE_USEFLAT, 1},
    { -1, 0 }
};

static NCS_RDR_INFO btn_rdr_info[] =
{
    {"flat","flat", btn_rdr_elements}
};
// END_OF_RDRINFO

// START_OF_TEMPLATE
#define ID_BTN  101
#define ID_BTN1 102
#define ID_BTN2 103
static NCS_WND_TEMPLATE _ctrl_templ[] = {
    {
        NCSCTRL_CHECKBUTTON,
        ID_BTN,
        20, 30, 120, 25,
        WS_BORDER | WS_VISIBLE,
        WS_EX_NONE,
        "option1",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
    {
        NCSCTRL_CHECKBUTTON,
        ID_BTN1,
        20, 60, 120, 25,
        WS_BORDER | WS_VISIBLE | NCSS_BUTTON_AUTOCHECK,
        WS_EX_NONE,
        "option2",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
    {
        NCSCTRL_CHECKBUTTON,
        ID_BTN2,
        20, 90, 120, 25,
        WS_BORDER | WS_VISIBLE |NCSS_BUTTON_AUTOCHECK | NCSS_BUTTON_3DCHECK,
        WS_EX_NONE,
        "option3",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    }
};

static NCS_MNWND_TEMPLATE mymain_templ = {
    NCSCTRL_DIALOGBOX,
    1,
    0, 0, 260, 180,
    WS_CAPTION | WS_BORDER | WS_VISIBLE,
    WS_EX_NONE,
    "Check button",
    NULL,
    NULL,
    mymain_handlers,
    _ctrl_templ,
    sizeof(_ctrl_templ)/sizeof(NCS_WND_TEMPLATE),
    0,
    0, 0,
};
// END_OF_TEMPLATE

int MiniGUIMain(int argc, const char* argv[])
{
    ncsInitialize();

    mDialogBox* mydlg = (mDialogBox *)ncsCreateMainWindowIndirect
                (&mymain_templ, HWND_DESKTOP);

    _c(mydlg)->doModal(mydlg, TRUE);

    ncsUninitialize ();

    return 0;
}

#define ID_BTN  101
#define ID_BTN1 102
#define ID_BTN2 103
static NCS_WND_TEMPLATE _ctrl_templ[] = {
    {
        NCSCTRL_CHECKBUTTON,
        ID_BTN,
        20, 30, 120, 25,
        WS_BORDER | WS_VISIBLE,
        WS_EX_NONE,
        "option1",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
    {
        NCSCTRL_CHECKBUTTON,
        ID_BTN1,
        20, 60, 120, 25,
        WS_BORDER | WS_VISIBLE | NCSS_BUTTON_AUTOCHECK,
        WS_EX_NONE,
        "option2",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
    {
        NCSCTRL_CHECKBUTTON,
        ID_BTN2,
        20, 90, 120, 25,
        WS_BORDER | WS_VISIBLE |NCSS_BUTTON_AUTOCHECK | NCSS_BUTTON_3DCHECK,
        WS_EX_NONE,
        "option3",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    }
};

static NCS_MNWND_TEMPLATE mymain_templ = {
    NCSCTRL_DIALOGBOX,
    1,
    0, 0, 260, 180,
    WS_CAPTION | WS_BORDER | WS_VISIBLE,
    WS_EX_NONE,
    "Check button",
    NULL,
    NULL,
    mymain_handlers,
    _ctrl_templ,
    sizeof(_ctrl_templ)/sizeof(NCS_WND_TEMPLATE),
    0,
    0, 0,
};

`mRadioButton`

Control window class: NCSCTRL_RADIOBUTTON
Control English name: RadioButton
Brief introduction: Single selection button, matched with mButtonGroup. mButtonGroup concludes multiple single selection buttons into one group. Among the buttons in the group, only one is in the selected status. After a button is selected, the originally selected button will cancel the selection. When the single selection button is used independently, its behavior is similar to that of a mCheckbutton.

Property of `mRadiobutton`

It is inherited from the property of mButton`.

Event of `mRadiobutton`

It is inherited from the event of mButton.

Renderers of `mRadiobutton`

For the usage of renderers, see look and feel renderer.

`mRadiobutton` Classic Renderer

For the drawing of mRadiobutton Classic non client area, please refer to the renderer of mWidget.

Property ID	Meaning	miniStudio property name	Value type	Schematic diagram of the valid region	Value range
`NCS_FGC_3DBODY`	Text foreground color	`FgColor3DBody`	`DWORD` (`ARGB`)
`NCS_FGC_DISABLED_ITEM`	Text foreground color when the window is invalid	`TextDisableColor`	`DWORD` (`ARGB`)

Classic renderer of Check Box of Radiobutton fills and draws through loading image resource. (the image resource is minigui-res by default, and installed in /usr/local/share/minigui/res/bmp/classic_radio_button.bmp by default)
Specification of the image: the image is composed of eight parts from left to right, and each part is a square (13x13), corresponding to eight statuses of checkbutton:

0~3: common, highlight, pressed down and banned status when not selected
4~7: common, highlight, pressed down and banned status when selected

If the image is bigger than the drawing region, the image will be reduced to draw; when the image is smaller than or equal to the drawing region, the image actual size is adopted to draw
Example

`mRadiobutton` Skin Renderer

Refer to Appendix B : Specification for the Image Resource Used by Skin Renderer.

`mRadiobutton` Fashion Renderer

For the drawing of mRadiobutton Fashion non client area, please refer to the renderer of mWidget.

Property ID	Meaning	miniStudio property name	Value type	Schematic diagram of the valid region	Value range
`NCS_FGC_3DBODY`	Text foreground color	`FgColor3DBody`	`DWORD` (`ARGB`)
`NCS_FGC_DISABLED_ITEM`	Text foreground color when the window is invalid	`TextDisableColor`	`DWORD` (`ARGB`)

Fashion renderer of Check Box of Radiobutton fills and draws through loading image resource. (The image resource is minigui-res by default, and installed in /usr/local/share/minigui/res/bmp/fashion_radio_btn.bmp by default)
Specification of the image: the image is composed of eight parts from top to bottom, and each part is a square (13x13), corresponding to eight statuses of checkbutton:

0~3: common, highlight, pressed down and banned status when not selected
4~7: common, highlight, pressed down and banned status when selected

If the image is bigger than the drawing region, the image will be reduced to draw; when the image is smaller than or equal to the drawing region, the image actual size is adopted to draw
Example

`mRadiobutton` Flat Renderer

For the drawing of mRadiobutton Flat non client area, please refer to the renderer of mWidget.

Property ID	Meaning	miniStudio property name	Value type	Schematic diagram of the valid region	Value range
`NCS_FGC_3DBODY`	Text foreground color	`FgColor3DBody`	`DWORD` (`ARGB`)
`NCS_BGC_3DBODY`	Background color	`BgColor3DBody`	`DWORD` (`ARGB`)

Programming Example of `mRadiobutton`

Operation screen shot:

Single selection button example code

static NCS_PROP_ENTRY radioGroup_props [] = {
    {NCSP_BUTTON_GROUPID, 200},
    {0, 0}
};

static NCS_WND_TEMPLATE _ctrl_templ[] = {
    {
        NCSCTRL_BUTTONGROUP ,
        ID_GROUP,
        5, 10, 200, 120,
        WS_VISIBLE|NCSS_NOTIFY,
        WS_EX_NONE,
        "Button Group",
        NULL,          //props,
        btn_rdr_info,  //rdr_info
        NULL,          //handlers,
        NULL,          //controls
        0,
        0              //add data
    },
    {
        NCSCTRL_RADIOBUTTON,
        ID_BTN1,
        20, 30, 80, 25,
        WS_VISIBLE,
        WS_EX_NONE,
        "option1",
        radioGroup_props, //props,
        btn_rdr_info,     //rdr_info
        NULL,             //handlers,
        NULL,             //controls
        0,
        0                 //add data
    },
    {
        NCSCTRL_RADIOBUTTON,
        ID_BTN2,
        20, 60, 80, 25,
        WS_VISIBLE,
        WS_EX_NONE,
        "option2",
        radioGroup_props, //props,
        btn_rdr_info,     //rdr_info
        NULL,             //handlers,
        NULL,             //controls
        0,
        0                 //add data
    },
    {
        NCSCTRL_RADIOBUTTON,
        ID_BTN2,
        20, 90, 80, 25,
        WS_VISIBLE,
        WS_EX_NONE,
        "option3",
        radioGroup_props, //props,
        btn_rdr_info,     //rdr_info
        NULL,             //handlers,
        NULL,             //controls
        0,
        0                 //add data
    },
};

static NCS_MNWND_TEMPLATE mymain_templ = {
    NCSCTRL_DIALOGBOX,
    1,
    0, 0, 260, 180,
    WS_CAPTION | WS_BORDER | WS_VISIBLE,
    WS_EX_NONE,
    "Radio button",
    NULL,
    NULL,
    mymain_handlers,
    _ctrl_templ,
    sizeof(_ctrl_templ)/sizeof(NCS_WND_TEMPLATE),
    0,
    0, 0,
};

`mMenuButton`

Control window class: NCSCTRL_MENUBUTTON
Control English name: MenuButton
Brief introduction: Menu button. Click the button, and the menu will pop up. Select the menu item through keyboard or mouse, and the selected menu item will display on the button.

mMenuButton is inherited from mPopMenuMgr Class.

Property of `mMenuButton`

It is inherited from the property of mButton`.

Property name	Type	Permission	Explanation
`NCSP_MNUBTN_POPMENU`	`mPopMenuMgr*`	`RW`	Set `PopMenu` object pointer
`NCSP_MNUBTN_CURITEM`	int	`RW`	Get or set the currently selected id of Menu Item

Event of `mMenuButton`

It is inherited from the event of mButton`.

Event notification code	Explanation	Parameter
`NCSN_MNUBTN_ITEMCHANGED`	When `MenuItem` changes	id value of the new Item

Programming Example of `mMenuButton`

mMenuButton is mainly implemented through creating mPopMenuMgr object.

Operation screen shot:

Menu button example code:

/*
** menubutton.c: Sample program for mGNCS Programming Guide
**      The first mGNCS application.
**
** Copyright (C) 2009 ~ 2019 FMSoft Technologies.
*/

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

// START_OF_INCS
#include <minigui/common.h>
#include <minigui/minigui.h>
#include <minigui/gdi.h>
#include <minigui/window.h>

#include <mgncs/mgncs.h>
// END_OF_INCS

#define ID_BTN  101

// START_OF_HANDLERS
static void menubutton_onitemchanged(mMenuButton *self, int id, int nc,
                                     DWORD add_data)
{
    char szText[100];
    sprintf(szText,"id=%d",id);
    MessageBox(self->hwnd, szText,"Menu ID",0);
}

static NCS_EVENT_HANDLER menubutton_handlers[] = {
    NCS_MAP_NOTIFY(NCSN_MNUBTN_ITEMCHANGED, menubutton_onitemchanged),
    {0, NULL}
};

static BOOL mymain_onCreate(mWidget* self, DWORD add_data)
{
    mPopMenuMgr * popmenu = NEW(mPopMenuMgr);

    _c(popmenu)->addItem(popmenu,0, "menuitem 1", NULL, 200, 0, NULL, 0);
    _c(popmenu)->addItem(popmenu,0, "menuitem 2", NULL, 201, 0, NULL, 0);
    _c(popmenu)->addItem(popmenu,0, "menuitem 3", NULL, 202, 0, NULL, 0);

    mButton *mb1 = (mButton*)ncsGetChildObj(self->hwnd, ID_BTN);
    if(mb1)
    {
        _c(mb1)->setProperty(mb1, NCSP_MNUBTN_POPMENU, (DWORD)popmenu);
    }

    return TRUE;
}

static void mymain_onClose(mWidget* self, int message)
{
    DestroyMainWindow(self->hwnd);
    PostQuitMessage(0);
}

static NCS_EVENT_HANDLER mymain_handlers[] = {
    {MSG_CREATE, mymain_onCreate},
    {MSG_CLOSE, mymain_onClose},
    {0, NULL}
};
// END_OF_HANDLERS

// START_OF_RDRINFO
NCS_RDR_ELEMENT btn_rdr_elements[] =
{
    { NCS_MODE_USEFLAT, 1},
    { -1, 0 }
};
static NCS_RDR_INFO btn_rdr_info[] =
{
    {"skin", "skin", NULL},
};
// END_OF_RDRINFO

// START_OF_TEMPLATE
static NCS_WND_TEMPLATE _ctrl_templ[] = {
    {
        NCSCTRL_MENUBUTTON,
        ID_BTN,
        40, 40, 100, 30,
        WS_BORDER | WS_VISIBLE,
        WS_EX_NONE,
        "menu button",
        NULL,                //props,
        btn_rdr_info,        //rdr_info
        menubutton_handlers, //handlers,
        NULL,                //controls
        0,
        0                    //add data
    },
};

static NCS_MNWND_TEMPLATE mymain_templ = {
    NCSCTRL_DIALOGBOX,
    1,
    0, 0, 260, 180,
    WS_CAPTION | WS_BORDER | WS_VISIBLE,
    WS_EX_NONE,
    "Menu button",
    NULL,
    NULL,
    mymain_handlers,
    _ctrl_templ,
    sizeof(_ctrl_templ)/sizeof(NCS_WND_TEMPLATE),
    0,
    0, 0,
};
// END_OF_TEMPLATE

int MiniGUIMain(int argc, const char* argv[])
{
    ncsInitialize();

    mDialogBox* mydlg = (mDialogBox *)ncsCreateMainWindowIndirect
                (&mymain_templ, HWND_DESKTOP);

    _c(mydlg)->doModal(mydlg, TRUE);

    MainWindowThreadCleanup(mydlg->hwnd);

    ncsUninitialize ();

    return 0;
}

`mColorButton`

Control window class: NCSCTRL_COLORBUTTON
Control English name: ColorButton
Brief introduction: Color selection button, which is used to select color. When clicking the button, color selection box pops up, and the user selects the color. After confirmation, the selected color displays effect on the button panel.

mColorButton uses ColorSelectDialog of mgutils to select color, and the selected color displays in the middle box.

Property of `mColorButton`

It is inherited from the property of mButton.

Property name	Type	Permission	Explanation
`NCSP_CLRBTN_CURCOLOR`	`DWORD` (`ARGB`)	`RW`	Set or get Color value

Event of `mColorButton`

It is inherited from the event of mButton.

Event notification code	Explanation	Parameter
`NCSN_CLRBTN_COLORCHANGED`	Update after being selected by the user	`DWORD` (`ARGB`)

Programming Example of `mColorButton`

Operation screen shot

Color button example code:

/*
** colorbutton.c: Sample program for mGNCS Programming Guide
**      The first mGNCS application.
**
** Copyright (C) 2009 ~ 2019 FMSoft Technologies.
*/

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

// START_OF_INCS
#include <minigui/common.h>
#include <minigui/minigui.h>
#include <minigui/gdi.h>
#include <minigui/window.h>

#include <mgncs/mgncs.h>
// END_OF_INCS

#define ID_BTN  101

// START_OF_HANDLERS
static BOOL mymain_oncolorchanged(mMainWnd* self, mColorButton *sender,
        int id, DWORD param)
{
    SetWindowBkColor(self->hwnd, DWORD2PIXEL(HDC_SCREEN, param));
    InvalidateRect(self->hwnd, NULL, TRUE);

    return FALSE;
}

static BOOL mymain_onCreate(mWidget* self, DWORD add_data)
{
    mColorButton *btn = (mColorButton*)_c(self)->getChild(self, ID_BTN);
    if(btn)
    {
        _c(btn)->setProperty(btn, NCSP_CLRBTN_CURCOLOR, PIXEL2DWORD(HDC_SCREEN,
            GetWindowBkColor(self->hwnd)));
        ncsAddEventListener((mObject*)btn, (mObject*)self,
            (NCS_CB_ONPIECEEVENT)mymain_oncolorchanged,
            NCSN_CLRBTN_COLORCHANGED);
    }

    return TRUE;
}

static void mymain_onClose(mWidget* self, int message)
{
    DestroyMainWindow(self->hwnd);
    PostQuitMessage(0);
}

static NCS_EVENT_HANDLER mymain_handlers[] = {
    {MSG_CREATE, mymain_onCreate},
    {MSG_CLOSE, mymain_onClose},
    {0, NULL}
};
// END_OF_HANDLERS

// START_OF_RDRINFO
static NCS_RDR_INFO btn_rdr_info[] =
{
      {"fashion", "fashion", NULL},
};
// END_OF_RDRINFO

// START_OF_TEMPLATE
static NCS_WND_TEMPLATE _ctrl_templ[] = {
    {
        NCSCTRL_COLORBUTTON,
        ID_BTN,
        40, 40, 80, 30,
        WS_VISIBLE|NCSS_NOTIFY,
        WS_EX_NONE,
        "button",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    }
};

static NCS_MNWND_TEMPLATE mymain_templ = {
    NCSCTRL_MAINWND,
    1,
    0, 0, 180, 140,
    WS_CAPTION | WS_BORDER | WS_VISIBLE,
    WS_EX_NONE,
    "Color button",
    NULL,
    NULL,
    mymain_handlers,
    _ctrl_templ,
    sizeof(_ctrl_templ)/sizeof(NCS_WND_TEMPLATE),
    0,
    0, 0,
};
// END_OF_TEMPLATE

int MiniGUIMain(int argc, const char* argv[])
{
    ncsInitialize();

    mDialogBox* mydlg = (mDialogBox *)ncsCreateMainWindowIndirect
                (&mymain_templ, HWND_DESKTOP);

    _c(mydlg)->doModal(mydlg, TRUE);

    MainWindowThreadCleanup(mydlg->hwnd);

    ncsUninitialize ();

    return 0;
}

Definition processing function

static BOOL mymain_oncolorchanged(mMainWnd* self, mColorButton *sender,
        int id, DWORD param)
{
    SetWindowBkColor(self->hwnd, DWORD2PIXEL(HDC_SCREEN, param));
    InvalidateRect(self->hwnd, NULL, TRUE);

    return FALSE;
}

static BOOL mymain_onCreate(mWidget* self, DWORD add_data)
{
    mColorButton *btn = (mColorButton*)_c(self)->getChild(self, ID_BTN);
    if(btn)
    {
        _c(btn)->setProperty(btn, NCSP_CLRBTN_CURCOLOR, PIXEL2DWORD(HDC_SCREEN,
            GetWindowBkColor(self->hwnd)));
        ncsAddEventListener((mObject*)btn, (mObject*)self,
            (NCS_CB_ONPIECEEVENT)mymain_oncolorchanged,
            NCSN_CLRBTN_COLORCHANGED);
    }

    return TRUE;
}

static void mymain_onClose(mWidget* self, int message)
{
    DestroyMainWindow(self->hwnd);
    PostQuitMessage(0);
}

static NCS_EVENT_HANDLER mymain_handlers[] = {
    {MSG_CREATE, mymain_onCreate},
    {MSG_CLOSE, mymain_onClose},
    {0, NULL}
};

Define the window template

static NCS_WND_TEMPLATE _ctrl_templ[] = {
    {
        NCSCTRL_COLORBUTTON,
        ID_BTN,
        40, 40, 80, 30,
        WS_VISIBLE|NCSS_NOTIFY,
        WS_EX_NONE,
        "button",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    }
};

static NCS_MNWND_TEMPLATE mymain_templ = {
    NCSCTRL_MAINWND,
    1,
    0, 0, 180, 140,
    WS_CAPTION | WS_BORDER | WS_VISIBLE,
    WS_EX_NONE,
    "Color button",
    NULL,
    NULL,
    mymain_handlers,
    _ctrl_templ,
    sizeof(_ctrl_templ)/sizeof(NCS_WND_TEMPLATE),
    0,
    0, 0,
};

Appendix:A

`GrandientMode`

It must be one of the values below:

MP_LINEAR_GRADIENT_MODE_HORIZONTAL: horizontal gradual change, gradual change from the center to the left and right
MP_LINEAR_GRADIENT_MODE_VERTICAL: vertical gradual change, gradual change from the center to the top and bottom The two values are defined in mGPlus (<mgplus/mgplus.h>). Although mGPlus defines other gradual change modes as well, it is not supported in mGNCS.

`ButtonState`

One of the following four statuses:

Normal: normal status.
Hilight: the status when the mouse is moved to the button and not clicked, also referred to as highlight status.
Checked: the button is in the status of being clicked, also referred to as checked status. In this status, different statuses are subdivided, refer to the definition of ButtonCheckState status below.
Disabled: the button is in disabled status.

`ButtonCheckState`

/* Button CHECK status subdivided definition */
enum mButtonCheckState{
        /* Button CHECK status subdivided definition */
        NCS_BUTTON_UNCHECKED = 0,

        /* Under three status condition, the status is valid, which can be understood as the middle transition status */
        NCS_BUTTON_HALFCHECKED,

        /* Represent pressed down status */
        NCS_BUTTON_CHECKED
};

<< Static Box and Derived Control Classes | Table of Contents | Panel and Derived Classes >>

50 KiB Raw Blame History Unescape Escape

Button and Derived Control Classes

Brief Introduction of Button Series Control

Button Class Renderer

mButton

Style of mButton

Property of mButton

Event of mButton

Renderer of mButton

mButton Classic renderer

mButton Skin Renderer

mButton Fashion Renderer

mButton Flat Renderer

Programming Example of mButton

mCheckButton

Property of mCheckButton

Event of mCheckButton

Renderers of mCheckButton

mCheckButton Classic Renderer

mCheckButton Skin Renderer

mCheckButton Fashion Renderer

mCheckButton Flat Renderer

Programming Example of mCheckbutton

mRadioButton

Property of mRadiobutton

Event of mRadiobutton

Renderers of mRadiobutton

mRadiobutton Classic Renderer

mRadiobutton Skin Renderer

mRadiobutton Fashion Renderer

mRadiobutton Flat Renderer

Programming Example of mRadiobutton

mMenuButton

Property of mMenuButton

Event of mMenuButton

Programming Example of mMenuButton

mColorButton

Property of mColorButton

Event of mColorButton

Programming Example of mColorButton

Appendix:A

GrandientMode

ButtonState

ButtonCheckState

50 KiB

Raw Blame History

`mButton`

Style of `mButton`

Property of `mButton`

Event of `mButton`

Renderer of `mButton`

`mButton` Classic renderer

`mButton` Skin Renderer

`mButton` Fashion Renderer

`mButton` Flat Renderer

Programming Example of `mButton`

`mCheckButton`

Property of `mCheckButton`

Event of `mCheckButton`

Renderers of `mCheckButton`

`mCheckButton` Classic Renderer

`mCheckButton` Skin Renderer

`mCheckButton` Fashion Renderer

`mCheckButton` Flat Renderer

Programming Example of `mCheckbutton`

`mRadioButton`

Property of `mRadiobutton`

Event of `mRadiobutton`

Renderers of `mRadiobutton`

`mRadiobutton` Classic Renderer

`mRadiobutton` Skin Renderer

`mRadiobutton` Fashion Renderer

`mRadiobutton` Flat Renderer

Programming Example of `mRadiobutton`

`mMenuButton`

Property of `mMenuButton`

Event of `mMenuButton`

Programming Example of `mMenuButton`

`mColorButton`

Property of `mColorButton`

Event of `mColorButton`

Programming Example of `mColorButton`

`GrandientMode`

`ButtonState`

`ButtonCheckState`