https://linen.dev logo
Powered by
# haxe-ui
  • b
    how do i flip an object?
  • b
    like is there a property that lets me flip/change rotation of components/ontainers
  • m
    what are you trying to achieve? If you are using openfl, you can rotate the components by using 
    .rotation
    , because components are openfl DisplayObjects, but this will make the UI, framework dependent (there's probably the same in the others frameworks/backends, but I don't know exactly what they are...)
  • b
    An arrow, that when pressed, expands a menu and flips
  • m
    and that can't be achieved with a button and a menu? or perhaps using something like a accordion? Is the expanded menu, horizontal or vertical?
  • m
    the arrow could be a button that changes the image when the menu expands and return to the initial image when the menu disappears...
  • m
    I wish I could help you more but I don't have a visual of what you are trying to achieve...
  • m
    @bright-gpu-74537 Any news on the following? (just checking) - Color picker - min-width
  • b
    i noticed a problem with haxeui scroll on darkmode. the scroll thumbs background is the same as the default darkmode background
  • b
    it should be lighter/darker
  • m
    Hi, Ian should be busy with the wedding atm. - if it is a palette color picker only (like Ian's and mine), you could do one yourself, is a great way to learn a little more how to make custom components, I could help if you need help on that. If it is a spectrum color picker, then, to be backend agnostic, you will have to wait for the haxeui canvas (well you can do the @best-agent-85158 alternative way, and put a spectrum color image and then read the color of the pixel clicked on 😉 - so I think it was what he said about his color picker...) - what's wrong with the min-width, I'm not up to date with that (if you could recall what's wrong with it...)
  • m
    I don't know if that's a problem, or Ian intention, but I believe you could change that by styling the thumb, like so (you probably know this, but it will help others that have the same issue): http://haxeui.org/builder/?logxmf
  • b
    unlucky me uses code...
  • l
    that doesn't stop you from using a custom CSS file. there's even functions for adding and removing CSS classes to components
  • m
    So, as @loud-salesclerk-7438 is saying, you can use (I believe) all the css functionality with code, for that you can use it 
    .customStyle
    or 
    .styleString
    or even use some already added class css names with 
    .styleNames
     (
    .addClass
    or 
    .addClasses
    - see two messages below about class names) to a component (there's more ways, but I don't use code for styling, sorry). But you could do, probably, even better, and use a 
    global.css
    file (or other name for that matter), and then reference it in the 
    module.xml
    like this:
    Copy code
    xml
 <themes>
    <global>
        <style resource="path-to-file/global.css" />
    </global>
</themes>
    and the css that you put in there will be globally applied, and if you put some new class names in there, then you can apply those with 
    .styleNames
    in the component itself (note take this with a grain of salt, because I didn't try any of this myself, I use XML and CSS files almost everywhere 😁 )
  • m
    and I have to give a big 👏 to you, because to me it will be a nightmare and counterproductive, to do all UI by code, at least in a medium/big project 😅 (just to remark that I used to be like you, doing all by code, until I started to do big projects, and I "surrendered" and started to separate the UI part, using XML and CSS, and tbh I never looked back again, it's easier to integrate a designer on board, and a hell lot easier to maintain the UI)
  • m
    Actually, better methods for adding, swapping and removing class names are 
    .addClass
    , 
    .swapClass
    and 
    .removeClass
    (add `es`in the end for more than one at once) respectably. Sorry, for the confusion, but I don't usually use styling by code 😅
  • b
    It's because I don't have intellisense in xml
  • b
    Pretty much the only reason I'm working with code
  • m
    that is a misconception, I still have intellisense with my xml, because haxeui uses macros to transform xml in code, so the macros are pre-compiled for intellisense, and you can use it as you use in coding. You can take my previous example of xml, put it in a xml file called 
    main-view.xml
    in a fresh project (in assets folder or somewhere else), and create a 
    Mainview.hx
    to create a custom component just to bare all the UI for the app, like this:
    Copy code
    haxe
package ;

import haxe.ui.containers.VBox;

@:build(haxe.ui.ComponentBuilder.build("assets/main-view.xml"))
class MainView extends VBox {
    public function new() {
        super();
    }
}
    in the 
    Main.hx
    do:
    Copy code
    haxe
package ;

import haxe.ui.HaxeUIApp;

class Main {
    public static function main() {
        var app = new HaxeUIApp();
        var mainview = new MainView();
        app.ready(function() {
            app.addComponent(mainview);
            
            app.start();
        });
    }
}
  • m
    ofc, for accessing the slider component with ease, you have to put an id on it, so the main-view.xml will be like this:
    Copy code
    xml
<vbox style="padding: 5px;">
    <style>
        /* thumb portion  */
        .classic-scrolls .thumb {
            background-color: red;
        }

        /* both up/down arrow buttons  */
        .classic-scrolls .deinc,
        .classic-scrolls .inc {
            background-color: green;
        }
    </style>

    <scroll id="testscroll" direction="vertical" pos="100" pageSize="50" styleName="classic-scrolls"/>

</vbox>
    And now you can access the slider component inside the 
    Mainview.hx
    using 
    this.testscroll.pos = 50;
    (you can use intellisense for all, including the name of the scroll) and in 
    Main.hx
    you can access the scroll by using 
    mainview.testscroll.width = 200;
    , also with intellisense. And you can arrange your UI from a "million" different way, like creating a class for left sidebar, other to the right sidebar, other to the menu and add those to the 
    Mainview.hx
    and have intellisense everywhere and still enjoy a clean short code, with the UI separated in xml files styled with css, also in files, and any change or whatever is simply go to the xml/css change the properties and see the magic happen, no need to code endless 
    .width
    , etc lines, just do the logic with them, nice and neat, but that's my opinion (don't requires "follow by the book" 😅 )
  • m
    If you still have doubts, I'm here to help 😉
  • b
    No imena in the xml file itself
  • b
    Like there's no xml suggestions
  • b
    And I don't know which tags can I use
  • m
    well, you have a point there, but as you didn't know that you have to use scrollview, to have a box with scroll bars, you can find, almost, all you can do in xml/code using the component explorer, just like I did, and that make things easier, any doubt of what you can do in that component you just can take the id in code and use intellisense to find out
  • m
    the point of xml, is to make the separation of the logic from the view, more easily
  • m
    and in that way, imo, makes the UI maintainability a lot easier
  • m
    and, another plus is, you can make custom components and then register in the 
    module.xml
    and easily add them in any xml you want
  • m
    no need for adding the custom components by code (although you can do it anyway)
1...111811191120...1687Latest