Stepper text through code not showing

f-rank · August 12, 2020, 4:12pm

Hi, been trying to put a stepper for an Hour and Minutes value.
Not seeing the displayed text, in this case numbers or the border. See the stepper arrows though.

var hora:Stepper = new Stepper();

hora.step = 1;
hora.value = 0;
hora.max = 23;
hora.min = 0;
hora.hasTextDisplay();
hora.hasTextInput();
hora.marginLeft = 220;
hora.marginTop = -10;
hora.customStyle.fontSize = 20;
hora.customStyle.textAlign = “right”;
hora.customStyle.color = 0x00ff00;
hora.customStyle.borderColor = 0xff0000;
hora.onClick = function (e)
{
trace(hora.pos);
}

Then I add it to screen. But only see the arrows.
Does it not have a text display at all and I’m missing the glaringly obvious ?
Do I have to implement the text display has a separate field and communicate the values between them. Looking at the examples on the web page it looks like it should show up though.

ianharrigan · August 12, 2020, 4:42pm

Hey,

That defo looks like a bug - maybe a regression - what versions are you using? Which backend?

Ill check it out.

Thanks!
Ian

f-rank · August 12, 2020, 4:47pm

Hi Ian,

I’m on:
haxeui-core 1.1.1
haxeui-openfl 1.1.0

openfl 8.9.7
hxcpp 4.1.15

Thanks for looking into it.

ianharrigan · August 12, 2020, 6:07pm

So actually, it wasnt a number stepper issue, but a style issue in general - you comfortable using haxeui from git? Any chance you could pull latest of haxeui-core / haxeui-openfl and try again, hopefully fixed now.

I didnt get the same issue as you (ie, i got borders, but not the ones i set, you got no borders - which is strange), but i certainly fixed an issue with the style.

Cheers,
Ian

f-rank · August 12, 2020, 6:17pm

Yeah, I’ll pull both and give it a whirl.
Will report back.
I think I bumped into something else but on dropdowns, still have to check if it’s me or not.

f-rank · August 12, 2020, 6:36pm

Getting :

Error: Style.cpp
./src/haxe/ui/styles/Style.cpp(94): error C2039: ‘borderColor’: is not a member of ‘haxe::ui::styles::Style_obj’
include\haxe/ui/styles/Style.h(20): note: see declaration of ‘haxe::ui::styles::Style_obj’
./src/haxe/ui/styles/Style.cpp(99): error C2039: ‘borderSize’: is not a member of ‘haxe::ui::styles::Style_obj’
include\haxe/ui/styles/Style.h(20): note: see declaration of ‘haxe::ui::styles::Style_obj’

Build halted with errors.

I tried to remove:

//hora.customStyle.borderColor = 0xff0000;
//hora.customStyle.borderSize = 3;

but that wasn’t it.

Edit 1: These were two separate clean builds to check what was up.

Edit 2: Maybe there was some code that didn’t actually get pushed to openfl on git though ?

ianharrigan · August 12, 2020, 6:52pm

Hmmm, two secs - checking

ianharrigan · August 12, 2020, 7:09pm

Ok, can you pull and try again, should compile now.

f-rank · August 12, 2020, 7:36pm

Compiles perfect now.
Still just the arrows though. No worries, I’ll work around it.

ianharrigan · August 12, 2020, 7:41pm

If you get 5 mins, is there any chance you could knock up a minimal sample and paste the whole test project here? Id like to work out what it is…

Cheers,
Ian

f-rank · August 12, 2020, 7:46pm

Sure I’ll do that, just a sec.

f-rank · August 12, 2020, 7:49pm

package i.m.a;

import haxe.ui.components.DropDown;
import openfl.display.Sprite;
import openfl.Lib;

import haxe.ui.HaxeUIApp;
import haxe.ui.Toolkit;
import haxe.ui.containers.TabView;
import haxe.ui.containers.VBox;
import haxe.ui.components.Button;
import haxe.ui.containers.CalendarView;
import haxe.ui.components.DropDown.CalendarDropDownHandler;
import haxe.ui.containers.TabView;
import haxe.ui.components.TextArea;
import haxe.ui.components.Stepper;
import haxe.ui.data.ArrayDataSource;


/**
 * ...
 * @author 
 */
class Main extends Sprite 
{

	var minutos_45:Button = new Button();
	var cal:CalendarView = new CalendarView();
	var hora:Stepper = new Stepper();
	var tab:TabView = new TabView();
	var vbox1:VBox = new VBox();
	var vbox2:VBox = new VBox();
	
	var dropcal:DropDown = new DropDown();
	var dropjogs:DropDown = new DropDown();
	var jogadoresPT = new ArrayDataSource();
	
	public function new() 
	{
		super();
		


		POPULATE();
		
		LOAD_UI();
		// Assets:
		// openfl.Assets.getBitmapData("img/assetname.jpg");
	}
	
	function POPULATE()
	{
jogadoresPT.add({value:"0 INDEX DUMMY", jogador:"DUMMY", ultimo:"", path:"img/jogadores/PT/Andre Silva.png", numero:1});
	
jogadoresPT.add({value:"22 BETO", jogador:"BETO",ultimo:"", path:"img/PL/PT/Beto.png", numero:22});

jogadoresPT.add({value:"2 JOÃO CANCELO", jogador:"JOÃO
CANCELO",ultimo:"CANCELO", path:"img/PL/PT/Joao Cancelo.png", numero:2});

jogadoresPT.add({value:"3 PEPE", jogador:"PEPE", ultimo:"", path:"img/PL/PT/Pepe.png", numero:3});

jogadoresPT.add({value:"5 Raphael Guerreiro", jogador:"RAPHAEL
GUERREIRO",ultimo:"GUERREIRO", path:"img/PL/PT/Raphael Guerreiro.png", numero:5});

jogadoresPT.add({value:"8 RENATO SANCHES", jogador:"RENATO
SANCHES",ultimo:"SANCHES", path:"img/PL/PT/Renato Sanches.png", numero:8});

jogadoresPT.add({value:"13 DANILO", jogador:"DANILO",ultimo:"", path:"img/PL/PT/Danilo.png", numero:13});

jogadoresPT.add({value:"14 WILLIAM CARVALHO", jogador:"WILLIAM
CARVALHO",ultimo:"CARVALHO", path:"img/PL/PT/William Carvalho.png", numero:14});

jogadoresPT.add({value:"15 RAFA SILVA", jogador:"RAFA
SILVA",ultimo:"", path:"img/PL/PT/Rafa.png", numero:15});

jogadoresPT.add({value:"18 RÚBEN DIAS", jogador:"RÚBEN
DIAS", ultimo:"", path:"img/PL/PT/Ruben Dias.png", numero:18});

jogadoresPT.add({value:"19 KEVIN RODRIGUES", jogador:"KEVIN
RODRIGUES",ultimo:"RODRIGUES", path:"img/PL/PT/Kevin Rodrigues.png", numero:19});

jogadoresPT.add({value:"23 ANDRÉ SILVA", jogador:"ANDRÉ
SILVA", ultimo:"SILVA", path:"img/PL/PT/Andre Silva.png", numero:23});
	}
	
	public function LOAD_UI()
	{
		trace ("::LOAD_UI() ENTRY POINT");
		
		var app = new HaxeUIApp();
		app.ready(function()
		{
			//Toolkit.styleSheet.addRules("test");
			//Mouse.cursor = "arrow";
		
		
			// 45 MINUTOS
			minutos_45.text = "45";
			minutos_45.width = 100;
			minutos_45.height = 60;
			minutos_45.x = 50; minutos_45.y = 50;
			minutos_45.fontSize = 20.0;
			minutos_45.alpha = 1;
			minutos_45.onClick = function(e)
			{
				if (minutos_45.alpha == 1)
				{
					minutos_45.alpha = 0.5;
				}
				else if (minutos_45.alpha == 0.5)
				{
					minutos_45.alpha = 1;
				}
			}
			
			dropcal.width = 120;
			dropcal.height = 30;
			dropcal.marginLeft = 10;
			dropcal.marginTop = 20;
			dropcal.text = "DATA";
			dropcal.type = "date";
			dropcal.onChange = function (e)
			{
				var data_jogo_drop = dropcal.text;
				trace (data_jogo_drop);
				trace ("Done !");
			}
			
			
			dropjogs.marginLeft = 10;
			dropjogs.marginTop = 100;
			dropjogs.fontSize = 15;
			dropjogs.text = "jogadores";
			dropjogs.customStyle.fontSize = 15;
			
			dropjogs.dataSource = jogadoresPT;
			
			//CALENDÁRIO
			cal.x = 200;
			cal.y = 200;
			
			cal.onClick = function (e)
			{
				var data_jogo = cal.selectedDate;
				//trace(cal.selectedDate.toString());
				trace (data_jogo);
				trace("Done!");
			}
			
			hora.step = 1;
			hora.value = 0;
			hora.max = 23;
			hora.min = 0;
			
			hora.hasTextDisplay();
			hora.hasTextInput();
			
			hora.marginLeft = 220;
			hora.marginTop = -10;
			
			hora.customStyle.fontSize = 20;
			hora.customStyle.textAlign = "center";
			hora.customStyle.color = 0x00ff00;
			//hora.customStyle.borderColor = 0xff0000;
			//hora.customStyle.borderSize = 3;
			
			hora.onClick = function (e)
			{
				trace(hora.pos);
			}
	
			
			vbox1.text = "JOGO";
			vbox1.customStyle.fontSize = 10;
			vbox1.x = 0; vbox1.y = 0;
			vbox1.width = tab.width;
			vbox1.height = 720;
			//vbox1.padding = 20.0;
			vbox1.id = "styledTextField";
			
			// VBOX2
			vbox2.text = "11 SCP";
			vbox1.customStyle.fontSize = 10;
			vbox2.x = 0;vbox2.y = 0;
			vbox2.width = tab.width;
			vbox2.height = 720;
			//vbox2.padding = 20.0;
			vbox2.id = "styledTextField";
			
			// ESTRUTURA DE TABS			
			tab.percentWidth = 100.0; tab.percentHeight = 100.0;
			tab.x = 0; tab.y = 0;
			tab.addComponent(vbox1);
			tab.addComponent(vbox2);

			
		});
		
		//ADICIONAR BOTOES
		//app.addComponent(minutos_45);
		//app.addComponent(cal);
		//vbox1.addComponent(cal);
		vbox1.addComponent(dropcal);
		vbox1.addComponent(dropjogs);
		vbox1.addComponent(hora);
		app.addComponent(tab);
		app.start();
	}

}

ianharrigan · August 12, 2020, 8:10pm

OK, so i found the issue, the problem was you were using Stepper and not NumberStepper… The Stepper is just the up and down buttons (ie, the arrows) the NumberStepper uses that Stepper along with a TextField to give you a numerical stepper component…

Once i changed it, it all seemed fine.

Hope that helps!
Ian

PS: i added a tiny tweak to the number stepper style in haxeui-openfl git, nothing major but you might want to grab latest.

ianharrigan · August 12, 2020, 8:15pm

FYI, you may (or may not) find this useful, its about custom component / views which might make your app / tool / test easier to write: https://github.com/haxeui/haxeui-guides/blob/master/custom-components.md

Totally up to you of course, but thought i would put it out there anyway

Cheers,
Ian

f-rank · August 12, 2020, 8:51pm

Thanks for looking into it… I missed the NumberStepper…
going to read up about the custom components now.
Thank you.