How to create multiple forms (like in Winforms) in Haxeui?

Nirmal · September 18, 2020, 6:43am

I am new to Haxeui. My current experience is with Winforms in .NET under Windows. I had developed a software for Point-of-Sale billing and stock management using C# and Winforms. As porting it to Linux is posing a lot of problems, I was looking for an alternative development platform which would produce portable software. My search lead me to Haxe and HaxeUI. After some study, I found very simple sample programs and no example which would demonstrated creating something like multiple Forms like in WinForms. The documentation of Haxeui also seems limited.

Can somebody enlighten me how to proceed. In the existing software, I have a menu. When clicking the menu items, separate windows open up for different functions. I would like to see a small sample wherein, click a menu item or even a button opens up a new window.

Thanks!

ianharrigan · September 18, 2020, 7:52am

Hello and welcome

So, yeah, documentation is pretty thin on the ground, its something im currently working on, in the meantime however, ive knocked up a really basic example of what i think you are talking about. Ive used XML here as i think, personally, its much faster to use and prototype, but you can, of course, do all this exactly the same using just haxe code (im attaching the code here as adding zips, etc can sometimes get lost, and its easier to view if its all in one place - i think so anyway):

Main.hx

class Main {
    public static function main() {
        var app = new HaxeUIApp();
        app.ready(function() {
            var mainView = new MainView();
            app.addComponent(mainView);
            app.start();
        });
    }
}

MainView.hx

@:build(haxe.ui.macros.ComponentMacros.build("assets/main-view.xml"))
class MainView extends VBox {
    public function new() {
        super();
    }
    
    @:bind(showDialog1Button, MouseEvent.CLICK)
    private function onShowDialog1Button(e) {
        showDialog1();
    }
    
    @:bind(showDialog2Button, MouseEvent.CLICK)
    private function onShowDialog2Button(e) {
        showDialog2();
    }
    
    @:bind(mainMenu, MenuEvent.MENU_SELECTED)
    private function onMainMenu(e:MenuEvent) {
        switch (e.menuItem.id) {
            case "showDialog1Menu":
                showDialog1();
            case "showDialog2Menu":    
                showDialog2();
        }
    }
    
    private function showDialog1() {
        var d = new Dialog1();
        d.onDialogClosed = function(e:DialogEvent) {
            Toolkit.messageBox("You clicked: " + e.button, "Dialog Closed", MessageBoxType.TYPE_INFO);
        }
        d.show();
    }
    
    private function showDialog2() {
        var d = new Dialog2();
        d.onDialogClosed = function(e:DialogEvent) {
            Toolkit.messageBox("You clicked: " + e.button, "Dialog Closed", MessageBoxType.TYPE_INFO);
        }
        d.show();
    }
}

main-view.xml

<vbox style="padding: 5px;" width="300" height="200">
    <menubar id="mainMenu" width="100%">
        <menu text="Menu">
            <menu-item text="Show Dialog 1 (Modal)" id="showDialog1Menu" />
            <menu-item text="Show Dialog 2 (Modeless)" id="showDialog2Menu" />
        </menu>
    </menubar>
    <button id="showDialog1Button" text="Show Dialog 1 (Modal)" />
    <button id="showDialog2Button" text="Show Dialog 2 (Modeless)" />
</vbox>

Dialog1.hx

@:build(haxe.ui.macros.ComponentMacros.build("assets/dialog1.xml"))
class Dialog1 extends Dialog {
    public function new() {
        super();
        
        buttons = DialogButton.SAVE | DialogButton.CANCEL;
    }
}

dialog1.xml

<dialog title="Dialog 1" width="300">
    <frame text="Some input form" width="100%"> 
        <grid width="100%">
            <label text="First Name:" verticalAlign="center" />
            <textfield width="100%" />
            
            <label text="Last Name:" verticalAlign="center" />
            <textfield width="100%" />
            
            <label text="Sex:" verticalAlign="center" />
            <dropdown width="100%">
                <data>
                    <item text="Male" />
                    <item text="Female" />
                    <item text="Unspecified" />
                </data>
            </dropdown>
        </grid>
    </frame>
</dialog>

Dialog2.hx

@:build(haxe.ui.macros.ComponentMacros.build("assets/dialog2.xml"))
class Dialog2 extends Dialog {
    public function new() {
        super();
        
        buttons = DialogButton.CLOSE;
    }
}

dialog2.xml

<dialog title="Dialog 2" width="500" height="300" modal="false">
    <tabview width="100%" height="100%">
        <hbox text="Page 1" width="100%" height="100%">
            <listview width="200" height="100%">
                <data>
                    <item text="Item 1" />
                    <item text="Item 2" />
                    <item text="Item 3" />
                    <item text="Item 4" />
                    <item text="Item 5" />
                    <item text="Item 6" />
                    <item text="Item 7" />
                    <item text="Item 8" />
                    <item text="Item 9" />
                    <item text="Item 10" />
                    <item text="Item 11" />
                    <item text="Item 12" />
                    <item text="Item 13" />
                    <item text="Item 14" />
                    <item text="Item 15" />
                </data>    
            </listview>
            <grid width="100%" columns="2" style="padding: 5px;">
                <label text="First Name" verticalAlign="center" />
                <textfield width="100%" />
                
                <label text="Last Name" verticalAlign="center" />
                <textfield width="100%" />
                
                <label text="Sex" verticalAlign="center" />
                <dropdown selectedIndex="0" width="100%">
                    <data>
                        <item text="Male" />
                        <item text="Female" />
                    </data>
                </dropdown>
            </grid>
        </hbox>
        <vbox text="Page 2" />
        <vbox text="Page 3" />
    </tabview>
</dialog>

Hopefully that helps!

Cheers,
Ian

ianharrigan · September 18, 2020, 8:00am

Ive just noticed the tags on this question, openfl and html5… are they the backends you would like to use? The dialogs there are pretty different, ie, they are all contained inside the same openfl window / browser window, i think this could be changed, but im not sure the effect would be that great - maybe as an option on html5 / openfl (well, all composite backends) it could popup another browser window for a dialog… im pretty sure openfl too can open another draw context (though i have no idea how to do it, or how stable that is)…

@intoxopox has done something similar, though vastly more complex, maybe he can shed some light on the openfl side?

Ian

Nirmal · September 18, 2020, 4:35pm

Hi! Thanks a lot for your prompt, detailed and clear reply. Thank you for the same. As Haxeui targets many platforms, I was considering those which would result in least issues in porting a software from Windows to Linux. My software which I had developed for my wife’s Clinic is a bit complex which was developed using C#, Winforms and SQL Server Express. So, I though possibly HTML5 and OpenFL would be suitable. If you have any advise on which target I should be prefer, I would be highly thankful.

I would also like, to know which target you have used for the above example.

And, Yes ! Thanks to you for the great software. With a bit more of documents and handholding, I think, more software developers would migrate to Haxe and HaxeUI for cross-platform development.

Nirmal

Nirmal · September 18, 2020, 4:37pm

Forgot one point! Thanks for putting the code also in this discussion. It would be of great help to other newcomers to HaxeUI.

Nirmal · September 20, 2020, 4:23am

Hi! Sorry for using ‘target’ instead of ‘backend’ in my post! I am just getting used to the terminologies of HaxeUI ! So please read ‘backend’ instead of ‘target’ in my post!

ianharrigan · September 20, 2020, 11:27am

Hey,

So that example above is using haxeui-hxwidgets (which uses wxWidgets under the hood - which also works on linux and mac fyi)… it means you’ll end up with the fully native ui / application. Other ones, like haxeui-openfl and haxeui-html5 are considered “composite” backends (rather than “native” backends) - this basically means that the logic and layout of components of a composite backend are handled inside haxeui-core (rather than delegated to a backend - which is the case in native backends).

As for “which backend” its hard to say, however, since it sounds like you are creating a purely ui based application, you shouldnt have to choose a backend really, since it sounds like you are creating a, so called, “pure” haxeui application (ie, a ui application that doesnt use any specific features of a specific backend). This means you can write your UI code and app logic and simply compile to a different backend, you can do this to speed up dev, create multiple builders for multiple platforms, or simply test different backends… ie, that code above will compile 100% fine on any of the backends (though it will look and feel a little differently on composite backends).

Hopefully that clears this up a little? I realise there are some “terms” to get to grips with haxeui (backends, composite / native, behaviors, etc) but hopefully this will at least start to clear things up.

Feel free to ask away if you get stuck!

Cheers,
Ian

Nirmal · September 20, 2020, 5:22pm

HTML5 backend

First I created the following folders with the following structure :

Projects
    |______html5test
    |______openfltest

I changed current directory to html5test and on command line, executed
the following command :

haxelib run  haxeui-crore create html5

This created the the following folders and files under the html5test :

html5test
    |_____assets (folder)
        |       |
    |     main-view.xml
        |     		
    |_____build  (folder)
    |       |
    |      html5 (folder)
    |	    |
    |      index.html
    |      Main.js
    |
    |_____src    (folder)
    |	    |  
    |	   Main.hx
    |	
    |__ .haxeui    
    |__  html5.hxml

Next, at the command prompt I executed the following commandc:

haxelib run haxeui-crore test html5

I got the following output :

Building for heaxeui-html5 using "haxe html5.hxml"

running :  start chrome http://localhost:2000
Process creation failure : start

I expect Chrome to open show the output. But some error has happened. So
what I did was to double-click ‘index.html’ under the build>html5 folder.

This opened Chrome with the desired output i.e. it display a button 'Click me!"
and it worked.

So, I was able to compile and run the default code even though it did not run Chrome
on its own.

My next, step was use the sample code you provided to see the how it works with
the hope that it would work in HTML5 also.

This is what I did :

I copied the following files to ‘src’ folder :

Dialog1.hx 
    Dialog2.hx
Main.hx
MainView.hx

Then, I copied the following files into the ‘assets’ folder:

dialog1.xml
dialog2.xml
main-view.xml

Again I ran the following command :

haxelib run haxeui-core test html5

src/Main.hx:3:  characters 23-32 :  Type not found : haxeUIApp
src/MainView.hx :2: characters 24-28 : Type not found : VBox
src/Main.hx:1: lines 1-10: Defined in this class
    running :  start chrome http://localhost:2000
    Process creation failure : start

Now I was stuck. I think I have made some mistake somewhere. I went to
the haxeui-core GitHub repository and found a link “haxeui-guides - Set of
guides to working with HaxeUI and backends.” But I couldn’t find any content
there.

I changed track and decided to try to compile to hxwidgets backend.
I used the haxeui-crore create command to create the hxwidgets project.
Again, I copied the same files as in your example and tried to compile.
But I got a very big error message :

D:\Nirmal\Haxe\projects\hxwidget>haxelib run haxeui-core test hxwidgets

Building for haxeui-hxwidgets using “haxe hxwidgets.hxml”

haxelib run hxcpp Build.xml haxe -DABI="-MD" -DNO_PRECOMPILED_HEADERS=“1” -DPLATFORM_WINDOWS=“1” -DWXSTATIC=“1” -Dhaxe=“4.1.4” -Dhaxe3=“1” -Dhaxe4=“1” -Dhaxe_ver=“4.104” -Dhaxeui-core=“1.1.2” -Dhaxeui-hxwidgets=“1.1.0” -Dhaxeui_core=“1.1.2” -Dhaxeui_hxwidgets=“1.1.0” -Dhscript=“1” -DhxWidgets=“1.6.0” -Dhxcpp=“4.1.15” -Dhxcpp_api_level=“400” -Dhxcpp_smart_strings=“1” -Dsource-header=“Generated by Haxe 4.1.4” -Dstatic=“1” -Dtarget.name=“cpp” -Dtarget.static=“true” -Dtarget.sys=“true” -Dtarget.threaded=“true” -Dtarget.unicode=“true” -Dtarget.utf16=“true” -Dutf16=“1” -I"C:\HaxeToolkit\haxe\lib\hxcpp/4,1,15/" -I"C:\HaxeToolkit\haxe\lib\hxWidgets/1,6,0/src/" -I"C:\HaxeToolkit\haxe\lib\haxeui-hxwidgets/1,1,0/" -I"C:\HaxeToolkit\haxe\lib\hscript/2,4,0/" -I"C:\HaxeToolkit\haxe\lib\haxeui-core/1,1,2/" -I"src/" -I"" -I"C:\HaxeToolkit\haxe\extraLibs/" -I"C:\HaxeToolkit\haxe\std/cpp/_std/" -I"C:\HaxeToolkit\haxe\std/"
Using wxWidgets from: \lib\vc_lib

Compiling group: haxe
cl.exe -Iinclude -I\include -I\lib\vc_lib\mswu -IC:/HaxeToolkit/haxe/lib/hxWidgets/1,6,0/\include -DUNICODE -D_UNICODE -DwxMSVC_VERISON_AUTO -DwxUSE_GRAPHICS_CONTEXT -DWIN32 -D__WXMSW__ -D__WX__=1 -nologo /WX- /fp:precise -DHX_WINDOWS -GR -O2(optim-std) -Zi(debug) -FdD:\Nirmal\Haxe\projects\hxwidget\build\hxwidgets\obj/msvc19xp/vc.pdb(debug) -Od(debug) -O2(release) -Os(optim-size) -FS -Oy- -c -EHs -GS- -arch:SSE2 -IC:/HaxeToolkit/haxe/lib/hxcpp/4,1,15/include -DHXCPP_VISIT_ALLOCS(haxe) -DHX_SMART_STRINGS(haxe) -DHXCPP_API_LEVEL=400(haxe) -D_CRT_SECURE_NO_DEPRECATE -D_ALLOW_MSC_VER_MISMATCH -D_ALLOW_ITERATOR_DEBUG_LEVEL_MISMATCH -wd4996 … tags=[haxe,static]

src/haxe/ui/components/_HorizontalScroll/PosFromCoord.cpp
src/wx/widgets/styles/MessageDialogStyle.cpp
src/hx/widgets/ImageList.cpp
src/hx/widgets/SystemOptions.cpp
src/haxe/ui/components/_DropDown/DataSourceBehaviour.cpp
src/hx/widgets/BoolProperty.cpp
src/sys/FileSystem.cpp
src/hx/widgets/CheckBox.cpp
Error: CheckBox.cpp
./src/hx/widgets/CheckBox.cpp(6): fatal error C1083: Cannot open include file: ‘wx/checkbox.h’: No such file or directory

Error: Build failed
Using name from descriptor “descriptors.HxmlFile”: “Main”
running: build/hxwidgets/Main
Process creation failure : build/hxwidgets/Main

Did I miss something and do something wrong. For compiling hxwidgets example,
is it necessary to install wxWidgets also. I couldn’t find any instruction
in this regard anywhere on haxeu site. Again, I started googling. Finally I
reached the hxWidgets repository in GitHub. Ah! There it is! Here it was
mentioned the pre-requisites for compiling under Windows. I will try this and
report again.

I checked the haxeui.org website at ‘haxeui.org’. Well, it links ‘Components’,
‘Playground’, ‘API’, ‘Forums’ and 'Contribute". I couldn’t find any ‘Getting
Started’ tutorial to help beginners like me.

Though I have good experience in C# and .NET, I feel lost trying to get a hold
of Haxeui. My search further led me to the GitHub repository ‘haxeui-guides’. This appeared
to be work-in-progress to create some documentation. I wish it was completed.
In this repository, I found a topics on ‘Custom Components’, ‘Modules’. I liked it very
much as I have experience in creating custom user components in C#. So, this
was an area I am interested in.

I wish there is sufficient documentation on topics such as :

Installation of haxeui library - command-line instructions to be used
and details of the parameters, any points to be noted specifically
Creating to directory structure using the haxeui-core create command -
the details of each sub-folder in the directory and the purpose of the
the directory, what type of files are placed in them. For example,
what is the purpose of ‘assets’ sub-folder, what type of files are stored
therein etc.
Pre-requisites for compiling for difference backends.
In which folder should we save the .hx, .hxml and .xml files so that the
compiler could find it.
Any differences in the code for different types of backends, if so what they
are.

I was also in search of different frameworks/platform for cross-platform coding.
My search also led me to ‘Apache Royale’. It uses ActionScript and XML (for GUI)
and seems to be similar to Haxe language and Haxeui. I found detailed and elaborate
documents for Apache Royale. It hand-holds a new user in developing and compiling
programs. I wish there was similar documents for HaxeUI also. It would help
in greater adoption by users like.

Anyways, I will continue to explore HaxeUI. This post is a lengthy one and
I fear whether I am wasting your valuable time! But if you could provide
some help I hope it would help other like me too! Thanks a lot for answering
all my previous queries!

Regards,
Nirmal

ianharrigan · September 21, 2020, 11:13am

Hi, So yeah, you will need to build wxWidgets also in order to use the haxeui-hxwidgets backend - the points you raise are totally valid and docs are something im actively working on - i sent you a private message (on this discourse) with some of the work in progress guides, that hopefully will get you on your way.

Cheers,
Ian

Nirmal · September 22, 2020, 4:32am

Yes. Thanks a lot ! Will try wxWidgets in a few when I get time and get back to you with the result.

Cheers,
Nirmal