手撸一个安装包制作工具(3) --向导界面

最新推荐文章于 2021-09-06 19:52:32 发布

chouhunpo4240

最新推荐文章于 2021-09-06 19:52:32 发布

阅读量334

点赞数

文章标签： ui

原文链接：https://my.oschina.net/tasker/blog/724599

版权

可以直接开搞向导界面了:

首先定义个界面库的对象:

ctWin32Dialog::ctDialog ctd;

开始时调用start() , 设置最初的几个参数(大小/标题/图标) , 然后调用初始页面1的布局, 并开始消息循环(ctd.showMainDialog())

void start()

{

    ctd.createMainDialog( 510, 370 );

    ctd.setTitle( GETSETUPSTRING( 1 ) );

   

    //调用页面1的布局显示

    page1( ctd.hMainDlg, 0 );



    //这里直接使用了固定的资源文件作为图标

    HICON hIcon = LoadIconA( ctd.appInstance, MAKEINTRESOURCEA( IDI_ICON1 ) );

    SendMessageA( ctd.hMainDlg, WM_SETICON, TRUE, (LPARAM)hIcon );



    //UI线程这里阻塞

    ctd.showMainDialog();

}

布局1的代码:

int CALLBACK page1( HWND hDlg, DWORD windowId )

{

    //先清空所有之前的控件

    ctd.clearDlg();



    //划线/显示bmp/前景色填充

    ctd.drawLine( 0, 290, 510, 290, (COLORREF)0xA0A0A0 );

    ctd.drawBmp( TMP_WizardImage, 0, 0, 160, 290 );

    ctd.setForecolor( RGB( 255, 255, 255 ), {0,0,ctd.hMainDlgRect.right,290} );



    //创建对应文字, 这里的宏是去读取字符串来显示

    ctd.createText( GETSETUPSTRING( 8 ), 180, 20, 300, 40, 16 );

    ctd.createText( GETSETUPSTRING( 9 ), 180, 65, 300, 25 );

    ctd.createText( GETSETUPSTRING( 10 ), 180, 90, 300, 25 );

    ctd.createText( GETSETUPSTRING( 11 ), 180, 115, 300, 25 );



    //创建按钮, 对应点击后显示page2

    ctd.createbutton( GETSETUPSTRING( 3 ), 300, 300, PARTCALLBACK( page2 ) );

    //创建按钮, 对应点击后显示cancel

    ctd.createbutton( GETSETUPSTRING( 4 ), 400, 300, PARTCALLBACK( cancel ) );



    return 0;

}

GETSETUPSTRING 宏 : 去解压的临时文件中获取''指定行''的字符串.

PARTCALLBACK :

#define PARTCALLBACK (proc) [=](HWND hDlg,DWORD windowId)-> int{return proc(hDlg,windowId);}

这个宏直接生成函数: 这个函数传入一个可调用2个参数的函数,并调用

在ctd.showMainDialog();之后就可以正确的显示出这个页面:

点击下一步之后到达page2:

int CALLBACK page2( HWND hDlg, DWORD windowId )

{

    ctd.clearDlg();



    ctd.setForecolor( RGB( 255, 255, 255 ), {0,0,ctd.hMainDlgRect.right,60} );

    ctd.drawLine( 0, 60, 510, 60, (COLORREF)0xA0A0A0 );

    ctd.drawLine( 0, 290, 510, 290, (COLORREF)0xA0A0A0 );

    ctd.drawBmp( TMP_WizardSmallImage, 435, 0, 55, 55 );

    ctd.createText( GETSETUPSTRING( 12 ), 20, 15, 200, 15, 12 );

    ctd.createText( GETSETUPSTRING( 13 ), 40, 35, 300, 15 );

    ctd.drawBmp( TMP_folders, 40, 75, 36, 36 );

    ctd.createText( GETSETUPSTRING( 14 ), 90, 85, 350, 15 );

    ctd.createText( GETSETUPSTRING( 15 ), 40, 120, 400, 15 );

    

    //这个edit显示的默认文本为当前的安装路径

    //setuppath默认为系统program路径

    ctd.createEdit( 40, 145, 300, 20, "path", setuppath.c_str() );

    //浏览

    ctd.createbutton( GETSETUPSTRING( 16 ), 350, 144, PARTCALLBACK( choosefile ) );

    //上一步 直接回到page1

    ctd.createbutton( GETSETUPSTRING( 2 ), 200, 300, PARTCALLBACK( page1 ) );

    //下一步 直接跳到page3

    ctd.createbutton( GETSETUPSTRING( 3 ), 300, 300, PARTCALLBACK( page3 ) );

    ctd.createbutton( GETSETUPSTRING( 4 ), 400, 300, PARTCALLBACK( cancel ) );

    return 0;

}

继续下一步,来到page3:

int CALLBACK page3( HWND hDlg, DWORD windowId )

{

    setuppath = ctd.getEditText( "path" );        //先读取之前page2中的path

    ctd.clearDlg();                               //然后清空面板



    char tmp[200];

    wsprintfA( tmp, "%s\r\n\t%s", GETSETUPSTRING( 30 ), setuppath.c_str() );



    ctd.setForecolor( RGB( 255, 255, 255 ), {0,0,ctd.hMainDlgRect.right,60} );

    ctd.drawLine( 0, 60, 510, 60, (COLORREF)0xA0A0A0 );

    ctd.drawLine( 0, 290, 510, 290, (COLORREF)0xA0A0A0 );

    ctd.drawBmp( TMP_WizardSmallImage, 435, 0, 55, 55 );

    ctd.createText( GETSETUPSTRING( 17 ), 20, 15, 200, 15, 12 );

    ctd.createText( GETSETUPSTRING( 18 ), 40, 35, 200, 15 );

    ctd.createText( GETSETUPSTRING( 19 ), 40, 75, 400, 15 );

    ctd.createEdit( 40, 100, 400, 170, "lastshow" );

    PostMessageW( ctd.getWnd( "lastshow" ), EM_SETREADONLY, 1, 0 );        //设置为只读

    ctd.setText( "lastshow", tmp );

    ctd.createbutton( GETSETUPSTRING( 2 ), 200, 300, PARTCALLBACK( page2 ) );

    ctd.createbutton( GETSETUPSTRING( 6 ), 300, 300, PARTCALLBACK( page4 ) );

    ctd.createbutton( GETSETUPSTRING( 4 ), 400, 300, PARTCALLBACK( cancel ) );

    return 0;

}

点击安装,来看看page4的安装页面:

int CALLBACK page4( HWND hDlg, DWORD windowId )

{

    ctd.clearDlg();



    ctd.setForecolor( RGB( 255, 255, 255 ), {0,0,ctd.hMainDlgRect.right,60} );

    ctd.drawLine( 0, 60, 510, 60, (COLORREF)0xA0A0A0 );

    ctd.drawLine( 0, 290, 510, 290, (COLORREF)0xA0A0A0 );

    ctd.drawBmp( TMP_WizardSmallImage, 435, 0, 55, 55 );

    ctd.createText( GETSETUPSTRING( 20 ), 20, 15, 200, 15, 12 );

    ctd.createText( GETSETUPSTRING( 21 ), 40, 35, 300, 15 );

    ctd.createText( GETSETUPSTRING( 22 ), 40, 75, 400, 15 );

    ctd.createbutton( GETSETUPSTRING( 4 ), 400, 300, PARTCALLBACK( cancel ) );



    //创建一个text 以供显示安装的文件名信息

    ctd.createText( "", 40, 95, 450, 15, 0, "showpath" );



    //创建一个隐藏按钮,可以通过他到page5

    ctd.createbutton( GETSETUPSTRING( 5 ), 300, 300, PARTCALLBACK( page5 ), 85, 22, "overbutton" );

    ShowWindow( ctd.getWnd( "overbutton" ), 0 );



    //这里可以设置进度为文件数量,每次释放一个文件 +1进度

    ctd.createProgress( 40, 120, "extract", filescount );



    //

    //功能线程: 创建一个线程去解压文件

    std::thread t1( &ctWizard::installing, this );

    t1.detach();

    return 0;

}

这个还是比较复杂的,因为要显示安装时的信息,所以放置一个空的text和一个空的progress组件到面板中

最后开启解压线程, 线程解压的同时也要反馈这些信息到UI上:

线程代码:

void installing()

{

    CreateDirectoryA(setuppath.c_str(),NULL);



    // from 4 to MAX  [tmpfile: 0-3]

    for(int i = 4; i < filescount; i++)

    {

        extractFile( i );



        // 设置每次解压完成一个文件进度组件+1

        ctd.setProgressPos( "extract", i );

    }



    // click hidden button 

    // goto page5

    SendMessageA( ctd.getWnd( "overbutton" ), BM_CLICK, 0, 0 );

}

最后显示成功页面page5:

int CALLBACK page5( HWND hDlg, DWORD windowId )

{

    ctd.clearDlg();



    ctd.drawLine( 0, 290, 510, 290, (COLORREF)0xA0A0A0 );

    ctd.drawBmp( TMP_WizardImage, 0, 0, 160, 290 );

    ctd.setForecolor( RGB( 255, 255, 255 ), {0,0,ctd.hMainDlgRect.right,290} );

    ctd.createText( GETSETUPSTRING( 23 ), 180, 20, 300, 22, 16 );

    ctd.createText( GETSETUPSTRING( 24 ), 180, 50, 300, 30 );

    ctd.createText( GETSETUPSTRING( 25 ), 180, 85, 300, 30 );



    //单选框按钮

    ctd.createCheckbox( GETSETUPSTRING( 26 ), 180, 111 );

    //跳转结束的按钮, 其中判断如果选中单选框,则运行指定的exe

    ctd.createbutton( GETSETUPSTRING( 7 ), 300, 300, PARTCALLBACK( end ) );

    return 0;

}

点击完成后的代码:

int CALLBACK end( HWND hDlg, DWORD windowId )

{

    //安装完毕后

    //创建桌面快捷方式/自动运行的程序

    //TODO...



    //退出UI

    PostQuitMessage( 0 );

    return 0;

}

至此界面结束,参考上面的代码,完全可以做出各种自定义的安装风格.

下一篇：手撸一个安装包制作工具(4) --解压

转载于:https://my.oschina.net/tasker/blog/724599

chouhunpo4240

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手撸一个安装包制作工具(3) --向导界面

可以直接开搞向导界面了: 首先定义个界面库的对象: ctWin32Dialog::ctDialog ctd; 开始时调用start() , 设置最初的几个参数(大小/标题/图标) , 然后调用初始页面1的布局, 并开始消息循环(ctd.showMainDialog()) voi...
复制链接

扫一扫