haxeui · x-0D · Oct 20, 2024
diff --git a/_template/build/html5/index.html b/_template/build/html5/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
     <title>Main</title>
     <meta name="description" content="" />
 

diff --git a/responsive/.haxeui b/responsive/.haxeui
@@ -0,0 +1,2 @@
+# generated file simply to hold info about projects created with "haxeui create ..."
+name=Main
diff --git a/responsive/.vscode/launch.json b/responsive/.vscode/launch.json
@@ -0,0 +1,32 @@
+{
+    "configurations": [
+        {
+            "name": "Kha: HTML5",
+            "request": "launch",
+            "type": "chrome",
+            "cwd": "${workspaceFolder}/build/debug-html5",
+            "runtimeExecutable": "${command:kha.findKhaElectron}",
+            "runtimeArgs": [
+                "--no-sandbox",
+                "--force-device-scale-factor=1",
+                "."
+            ],
+            "outFiles": [
+                "${workspaceFolder}/build/debug-html5/*.js"
+            ],
+            "preLaunchTask": "Kha: Build for Debug HTML5",
+            "internalConsoleOptions": "openOnSessionStart",
+            "skipFiles": [
+                "<node_internals>/**"
+            ]
+        },
+        {
+            "type": "krom",
+            "request": "launch",
+            "name": "Kha: Krom",
+            "preLaunchTask": "Kha: Build for Krom",
+            "internalConsoleOptions": "openOnSessionStart"
+        }
+    ],
+    "compounds": []
+}
diff --git a/responsive/.vscode/tasks.json b/responsive/.vscode/tasks.json
@@ -0,0 +1,15 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "haxe",
+			"args": "active configuration",
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			},
+			"problemMatcher": [],
+			"label": "haxe: active configuration"
+		}
+	]
+}
diff --git a/responsive/application.xml b/responsive/application.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<project>
+    <meta title="Main" package="" version="1.0.0" company="" />
+    <app main="Main" file="Main" path="build/openfl" />
+
+    <window background="#FFFFFF" fps="60" />
+    <window width="800" height="600" if="desktop" />
+    <window width="0" height="0" if="html5" />
+
+    <!-- classpath, haxe libs -->
+    <source path="src" />
+
+    <haxelib name="openfl" />
+    <haxelib name="actuate" />
+
+    <haxelib name="haxeui-core" />
+    <haxelib name="haxeui-openfl" />
+</project>
diff --git a/responsive/assets/empty.txt b/responsive/assets/empty.txt
diff --git a/responsive/assets/main-view.xml b/responsive/assets/main-view.xml
@@ -0,0 +1,64 @@
+<scrollview width="100%" height="100%" contentWidth="100%" style="border-size:0;">
+    <vbox id="main" width="100%" style="padding: 5px;">
+        <style source="main.css" />
+
+        <script>
+            main.registerEvent("resize", function() {
+                headerLabel.text = "Responsive Example - (" + main.width + "x" + main.height + ")";
+            });
+        </script>
+
+        <box styleName="header" width="100%">
+            <label id="headerLabel" text="Responsive Example" verticalAlign="center" />
+            <image id="logo" verticalAlign="center" horizontalAlign="right" />
+        </box>
+
+        <hbox width="100%" continuous="true">
+            <vbox styleName="x-menu">
+                <box><label text="Menu Item 1" /></box>
+                <box><label text="Menu Item 2" /></box>
+                <box><label text="Menu Item 3" /></box>
+                <box><label text="Menu Item 4" /></box>
+                <box><label text="Menu Item 5" /></box>
+            </vbox>
+
+            <vbox styleName="content" width="100%">
+                <box width="100%">
+                    <label id="small" text="size < 500px" />
+                    <label id="medium" text="size >= 500px && size <= 800px" />
+                    <label id="large" text="size > 800px" />
+                    <label id="html5" text="backend: haxeui-html" horizontalAlign="right" />
+                    <label id="hxwidgets" text="backend: haxeui-hxwidgets" horizontalAlign="right" />
+                </box>
+
+                <vbox width="100%">
+                    <hbox width="100%">
+                        <button text="Button" width="50%" />
+                        <button text="Button" width="50%" />
+                    </hbox>
+                    <button text="Button" width="100%" />
+                    <hbox width="100%">
+                        <button text="Button" width="33%" />
+                        <button text="Button" width="34%" />
+                        <button text="Button" width="33%" />
+                    </hbox>
+                </vbox>
+
+                <label id="lorem1" width="100%" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia, ipsum id egestas pulvinar, ex metus ultricies lacus, vitae blandit urna sapien id ex. Curabitur finibus tempor ex, et pulvinar nunc interdum egestas. Proin dapibus tincidunt massa eget efficitur. Mauris sagittis non ante non rutrum. Sed gravida nunc vel blandit tempor. Curabitur consequat cursus metus malesuada varius. Suspendisse blandit tempor mattis. Duis sed diam sollicitudin ipsum interdum pellentesque." />
+                <label id="lorem2" width="100%" text="Proin vitae pharetra sem. Nunc sit amet urna eget sapien molestie rhoncus. Phasellus nec facilisis nibh. Aenean congue, orci ut luctus aliquam, augue ipsum ullamcorper leo, at blandit urna justo id odio. Etiam aliquam, neque pretium euismod pharetra, tortor orci efficitur justo, nec auctor metus orci at lectus. Nam quis fermentum tellus, at tempor eros. Integer faucibus elementum cursus. Aliquam eu lobortis purus. Nullam et elit vitae arcu tempor tristique ut eget metus. Nam sagittis mi eu enim tempus dignissim. Suspendisse id massa sit amet urna sollicitudin cursus. Ut fringilla tortor et elementum ultricies. Donec euismod tortor sit amet porttitor consectetur. Ut non nibh quis ipsum eleifend vulputate. Nunc interdum non enim in efficitur." />
+            </vbox>
+
+            <vbox styleName="x-sidebar">
+                <box><label text="Side Item 1" /></box>
+                <box><label text="Side Item 2" /></box>
+                <box><label text="Side Item 3" /></box>
+                <box><label text="Side Item 4" /></box>
+                <box><label text="Side Item 5" /></box>
+            </vbox>
+        </hbox>
+
+        <box styleName="footer" width="100%">
+            <label text="Footer" width="100%" verticalAlign="center" />
+        </box>
+    </vbox>
+</scrollview>    
diff --git a/responsive/assets/main.css b/responsive/assets/main.css
@@ -0,0 +1,145 @@
+.header {
+    background-color:rgb(170, 170, 204);
+    padding: 5px;
+    filter: drop-shadow(1, 45, #000000, 0.5, 2, 2, 1, 3, false);
+}
+
+.footer {
+    background-color:#CCAACC;
+    padding: 5px;
+    filter: drop-shadow(1, 45, #000000, 0.5, 2, 2, 1, 3, false);
+}
+
+.header label, .footer label {
+    font-size: 18px;
+    /*color: white;*/
+}
+
+.x-menu {
+    width: 100%;
+}
+
+.x-menu box {
+    width:100%;
+    background-color:#AACCCC;
+    padding: 5px;
+    filter: drop-shadow(1, 45, #000000, 0.5, 2, 2, 1, 3, false);
+}
+
+.x-menu label {
+    width:100%;
+    /*color: white;*/
+}
+
+.x-sidebar {
+    width: 100%;
+}
+
+.x-sidebar box {
+    width:100%;
+    background-color:#CCCCAA;
+    padding: 5px;
+    /*filter: drop-shadow(1, 45, #000000, 0.5, 2, 2, 1, 3, false);*/
+}
+
+.x-sidebar label {
+    width:100%;
+    /*color: white;*/
+}
+
+.content {
+    width:100%;
+    padding: 5px;
+}
+
+#logo {
+    resource: "haxeui-core/styles/default/haxeui_tiny.png";
+}
+
+#small {
+    hidden: false;
+}
+
+#medium {
+    hidden: true;
+}
+
+#large {
+    hidden: true;
+}
+
+#html5, #hxwidgets {
+    hidden: true;
+}
+
+@media (min-width: 500px) {
+    .x-menu {
+        width: 25%;
+    }
+
+    .content {
+        width: 75%;
+    }    
+
+    #logo {
+        resource: "haxeui-core/styles/default/haxeui_small.png";
+    }
+
+    #small {
+        hidden: true;
+    }
+
+    #medium {
+        hidden: false;
+    }
+
+    #large {
+        hidden: true;
+    }
+}
+
+@media (min-width: 800px) {
+    .x-menu {
+        width: 25%;
+    }
+
+    .x-sidebar {
+        width: 25%;
+    }
+
+    .content {
+        width: 50%;
+    }    
+
+    #small {
+        hidden: true;
+    }
+
+    #medium {
+        hidden: true;
+    }
+
+    #large {
+        hidden: false;
+    }
+}
+
+@media (backend: html5) {
+    #html5 {
+        hidden: false;
+    }
+
+    #hxwidgets {
+        hidden: true;
+    }
+}
+
+@media (backend: hxwidgets) {
+    #html5 {
+        hidden: true;
+    }
+
+    #hxwidgets {
+        hidden: false;
+    }
+}
diff --git a/responsive/build/html5/index.html b/responsive/build/html5/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <title>Main</title>
+    <meta name="description" content="" />
+
+        <style>
+            * {
+                box-sizing: border-box;
+            }
+
+            html {
+                margin: 0;
+                width: 100%;
+                height: 100%;
+            }
+
+            body {
+                font-family: 'Arial';
+                font-size: 13px;
+                margin: 0;
+                width: 100%;
+                height: 100%;
+            }
+        </style>
+
+
+</head>
+<body>
+
+    <script src="Main.js"></script>
+</body>
+</html>
diff --git a/responsive/flixel-hl.hxml b/responsive/flixel-hl.hxml
@@ -0,0 +1,3 @@
+-lib haxeui-core
+-lib haxeui-flixel
+--cmd lime test project.xml hl
diff --git a/responsive/flixel-html5.hxml b/responsive/flixel-html5.hxml
@@ -0,0 +1,3 @@
+-lib haxeui-core
+-lib haxeui-flixel
+--cmd lime build project.xml html5
diff --git a/responsive/flixel-windows.hxml b/responsive/flixel-windows.hxml
@@ -0,0 +1,3 @@
+-lib haxeui-core
+-lib haxeui-flixel
+--cmd lime test project.xml windows
diff --git a/responsive/heaps-hl.hxml b/responsive/heaps-hl.hxml
@@ -0,0 +1,11 @@
+-cp src
+-main Main
+
+-lib heaps
+-lib hlsdl
+-lib haxeui-core
+-lib haxeui-heaps
+
+-D resourcesPath=assets
+
+-hl build/heaps/hl/Main.hl
diff --git a/responsive/heaps-js.hxml b/responsive/heaps-js.hxml
@@ -0,0 +1,10 @@
+-cp src
+-main Main
+
+-lib heaps
+-lib haxeui-core
+-lib haxeui-heaps
+
+-D resourcesPath=assets
+
+-js build/heaps/js/Main.js
diff --git a/responsive/html5.hxml b/responsive/html5.hxml
@@ -0,0 +1,7 @@
+-cp src
+-main Main
+
+-lib haxeui-core
+-lib haxeui-html5
+
+-js build/html5/Main.js
diff --git a/responsive/hxwidgets.hxml b/responsive/hxwidgets.hxml
@@ -0,0 +1,11 @@
+-cp src
+-main Main
+
+-lib haxeui-core
+-lib haxeui-hxwidgets
+-lib hxWidgets
+
+-D ABI=-MD
+-D WXSTATIC
+
+-cpp build/hxwidgets
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# generated file simply to hold info about projects created with "haxeui create ..."
		name=Main