haxeui / haxeui-html5 Goto Github PK
View Code? Open in Web Editor NEWThe HTML5 backend of the HaxeUI framework -
Home Page: http://haxeui.org
License: MIT License
The HTML5 backend of the HaxeUI framework -
Home Page: http://haxeui.org
License: MIT License
What I am looking for is the ability to autoheight a textfield with wordwrap. I dont think we can use the input field for the textfield since this doesnt wordwap
Editable DIV looks best?
http://jsfiddle.net/ARuce/
TextArea
https://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length
The header "Column C" is slightly taller than A & B? Not sure why but it is in html only raylib was fine.
The second and third columns are offset to the left. Clicking the header fixes it? raylib was fine.
I'm trying explore haxeui examples, responsive ui example. It's works OK, but i have some problems with viewing it on mobile. when i try to scroll, it scrolls a bit and then refuses to scroll. you can see transpiled example here: https://haxeresponsiveui.appleroot.repl.co/
Scrolling works on touch devices
It won't work
Use Native Scrolls instead of custom implementation.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
into head of html file<scrollview width="100%" height="100%" contentWidth="100%" style="border-size:0;background-color: white;">
<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="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="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>
I'm new in haxe and haxeui and discovering it's features, but found bug in relevant example for me
haxeui-core: [1.6.0]
haxeui-hxwidgets: [1.6.0]
hxcpp: [4.3.2]
hxWidgets: [1.11.0]
Currently, the following styles my be in the .html file in order for the UI to work correctly:
* {
box-sizing: border-box;
}
html {
margin: 0;
width: 100%;
height: 100%;
}
body {
font-family: 'Arial';
font-size: 13px;
margin: 0;
width: 100%;
height: 100%;
}
This should happen automatically (not the exact styles, investigation needs to go into which are the minimum / best ones)
If you dont include these styles then measurement issues arise, which usually, means you dont end up with a visible UI
A configurable flag somewhere in the backend (defaults to true) that add the most important of these properties automatically.
In other targets an empty textfield has a height.
I would expect that the textfield height we be the same as a single line of text, if no height is provided
the tetfield height is very small
The html5 target is different from nme and kha for the attached project. With regards to the left column:
Also you will notice the textarea has scrollbars (sorta) in html5
Project files
UnitTestGui.zip
Just copying it over here from discord
http://haxeui.org/builder/?9042621c
Scrollbar doesn't appear.
<vbox style="padding: 5px;">
<textarea width="450" height="300" text="l0\nl1\nl2\nl3\nl4\nl5\nl6\nl7\nl8\nl9\nl10\nl11\nl12\nl13\nl14\nl15" />
<textarea width="450" height="320" text="l0\nl1\nl2\nl3\nl4\nl5\nl6\nl7\nl8\nl9\nl10\nl11\nl12\nl13\nl14\nl15" />
<!-- \nl16 addeed -->
<textarea width="450" height="320" text="l0\nl1\nl2\nl3\nl4\nl5\nl6\nl7\nl8\nl9\nl10\nl11\nl12\nl13\nl14\nl15\nl16" />
</vbox>
Bug appears in the builder.
Must be added the new line after key "Enter" was pressed.
Will add a whitespace instead of new line.
--upd:
also if I try to paste text with several lines:
asdasd
asdas
asd
then it will be displayed as asdasd asdas asd
Sample available here.
Haxe 3.4.2-1
Linux Mint 18.1 x64
Firefox 52.0.1
haxeui-core from git
haxeui-openfl from git
Thanks.
simple page with one ListView
Linux Mint 18.1 x64
Haxe 3.4.0
haxeui-core from git
haxeui-html5 from git
Firefox 51.0.1
Thanks.
This is a custom component.
<hbox id="hboxRight">
<checkbox native="true" selected="true"/>
<label text="Native checkbox" style="margin-left:-6px; margin-top:2px; "/>
</hbox>
No error.
Throws an Uncaught TypeError: Cannot read property 'addClass' of null onMouseOver.
Throws an Uncaught TypeError: Cannot read property 'removeClass' of null onMouseOut.
Edit: Add -debug flag and rebuild the project using build-html5.hxml.
Go bin directory and open the index.html, activate devtools then move your mouse pointer over the checkbox.
Here is the example project to reproduce the error:
HaxeUI.zip
If you try to build the default httml5 project
haxe html5.hxml
/home/pi/Sten/plaf/haxe/lib/haxeui-html5/1,2,0/haxe/ui/backend/ComponentImpl.hx:517: characters 12-39 : js.html.CSSStyleDeclaration has no field pointerEvents
haxeui-html5/haxe/ui/backend/ComponentImpl.hx
Line 517 in 4b49b9a
I commented the line and it worked
So just compile the line only on haxe > 4
Assigning string that contains <
or other html special symbols as button text results in <
being displayed.
Any string can be assigned as button label.
Label string gets excessively escaped resulting in escape sequence being displayed as label instead of intended text.
Run test app described bellow.
package ;
import haxe.ui.HaxeUIApp;
import haxe.ui.core.Component;
import haxe.ui.components.Button;
import haxe.ui.containers.VBox;
import haxe.ui.macros.ComponentMacros;
class Main {
public static function main() {
var app = new HaxeUIApp();
app.ready(function() {
var main:Component = new VBox();
app.addComponent(main);
var button = new Button();
button.text = "<";
main.addComponent(button);
app.start();
});
}
}
haxeui-core: [1.0.5]
haxeui-html5: [1.0.1]
"WARNING: no class found for component" occurs when ComponentMacros.buildComponent is called outside of the static calls
I expected the Macro to run wherever it is called?
This appeared to work in flash (maybe CPP) but did not work in HTML5
Currently when the text is changed to a longer string then the button doesnt automatically resize to accomodate the new string.
The button should resize and thus force a relayout of parent layouts
<vbox>
<script>
function test() {
button.text = "This text should make the button grow";
}
</script>
<button id="button" text="Test" onclick="test()" />
</vbox>
When trying to add components by using the .element
property and appending them to an existing <div/>
the components are never considered "ready" and therefore never resize, or show correctly.
Should be able to add a UI anywhere in the DOM tree and it all work as expected.
class Main {
static public function main() {
haxe.ui.Toolkit.init();
var main = new VBox();
var button1 = new Button();
button1.text = "Button 1";
main.addComponent(button1);
var button2 = new Button();
button2.text = "Button 2";
main.addComponent(button2);
js.Browser.document.getElementById("content").appendChild(main.element);
}
}
Hi,
I see no other way of contacting you guys then by submitting an issue. I am using https://github.com/haxeui/haxeui-html5/blob/master/haxe/ui/backend/html5/util/FontDetect.hx for quite a while to detect if fonts are loaded. But now I saw this piece of code or the package in which it is included has no license. Could you add a license please? I saw the haxeui-core package had the MIT license.
Kind regards,
Jelle Bakker
application with button
exception:
$ haxe build.hxml
/home/username/.haxelib_repo/haxeui-html5/git/haxe/ui/backend/html5/native/size/TextSize.hx:7: lines 7-9 : Missing super constructor call
/home/username/.haxelib_repo/haxeui-html5/git/haxe/ui/backend/html5/native/size/ComponentSize.hx:8: lines 8-10 : Missing super constructor call
/home/username/.haxelib_repo/haxeui-html5/git/haxe/ui/backend/html5/native/size/ElementSize.hx:9: lines 9-11 : Missing super constructor call
/home/username/.haxelib_repo/haxeui-html5/git/haxe/ui/backend/html5/native/size/ButtonSize.hx:9: lines 9-11 : Missing super constructor call
UI.xml:
<?xml version="1.0" encoding="utf-8"?>
<button text="click me!"/>
Main.hx
import haxe.ui.Toolkit;
import haxe.ui.core.Screen;
import haxe.ui.core.Component;
import haxe.ui.macros.ComponentMacros;
class Main {
public static function main() {
Toolkit.init();
var ui:Component = ComponentMacros.buildComponent("Assets/Xml/UI.xml");
Screen.instance.addComponent(ui);
}
}
build.hxml:
-cp Source
-main Main.hx
-lib haxeui-core
-lib haxeui-html5
-lib hscript
-js Export/Html5/Main.js
Haxe 3.4.0
haxeui-core from git
haxeui-html5 from git
Thanks.
I've noticed an issue when using Splitters to shrink a ListView that resizes together with the shrinking container. Once you shrink it to the smallest size possible, the browser tab hangs forcing you to close the unresponsive tab.
Reproduction on the Playground (move the splitter all the way to the right)
This issue persists on Chrome, Edge, and FireFox. Seems like an infinite loop or recursion occurs during resizing.
Pasting in the code bellow:
<vbox style="padding: 5px;" width="100%" height="100%">
<splitter direction="horizontal" width="100%" height="100%">
<box width="75%" height="100%">
</box>
<box width="25%" height="100%">
<listview id="lv1" width="100%" height="100%">
<data>
<item text="List item 1" />
<item text="List item 2" />
<item text="List item 3" />
<item text="List item 4" />
<item text="List item 5" />
</data>
</listview>
</box>
</splitter>
</vbox>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.