Creating an edit box with dX functions

[Bacchus]

Hello guys,

I'm currently working on a login window made with dxFunctions. However, I would like to know how can I manage to create an edit box with the dX functions.

Regards,

[Dealman]

This can be a little tricky, as there's a few different ways to accomplish this. I've been thinking of re-writing my login interface and make it publicly available so people can learn from it and customize it the way they want. But I've been lazy lately

Basically, first of all you will need to use these events;

onClientClick -- Detect whenever an "editbox" is clicked. 
onClientKey   -- Detect whenever the player tries to type something into the "editbox" 

1. The player clicks the editbox, this sets the status to active/true (onClientClick)

2. While an editbox is active, it will accept input (onClientKey)

3. Update the text whenever a letter or number is entered. Look up concatenation if you don't know how to do this.

4. Detect if backspace or delete is pressed (onClientKey). Use string.sub to remove letters accordingly.

5. You can count the letters in the string to calculate the position of the caret.

The list goes on. Basically when you write interface behaviour like this you should always assume that the user will mess something up. So be ready to capture any possible mistakes and notify the user. For example if the text is too long, contains invalid characters and so on.

[JR10]

I know this doesn't help you nor answer your question but, why don't you just use the CEGUI one? It's efficient and bug-free. It doesn't have to be inside a window, just create it in the right position to suit the rest of your dx user interface.

[Bacchus]

Hello guys,

I created an edit box but in fact I can't write anything on it (when I press keys on my keyboard nothing is displayed)

  
button = guiCreateEdit( 0.3823, 0.4383, 0.2146, 0.0611, "", true ) 
  

Regards,

[JR10]

Are you sure it's not disabled? And that it's active?

[Bacchus]

What do you mean by disabled or active?

[JR10]

guiSetEnabled 

[Bacchus]

Ok it's working, thank you.

But, is there a way to hide (with setGuiAlpha) an edit box but display the characters that have been entered into this edit box? Because when I set the alpha of the edit box to 0, I can't see the characters typed.

Thanks,

[Dealman]

Not that I'm aware of, but you can create a label on top of that. Then use onClientGUIChanged and guiGetText and guiSetText to make it so the label has the same text.

[thisdp]

how to hide edit's caret?

[Dealman]

Not sure if you can, have you tried using guiSetProperty? Maybe something in there works.

[thisdp]

Not sure if you can, have you tried using guiSetProperty? Maybe something in there works.

I have already tried it. But it seems that it doesn't work

[JR10]

There's no way to do that that, not that I know of. I've tried to do it before as a part of a dxEditBox class.

I ended up treating the caret as the dxEditBox's caret as well. So basically, I positioned the dx text so that the edit box's caret would also be the dxEditBox's caret.

[LabiVila]

local keys = {} 
  
function isMouseInPosition ( x, y, width, height ) 
    if ( not isCursorShowing ( ) ) then 
        return false 
    end 
  
    local sx, sy = guiGetScreenSize ( ) 
    local cx, cy = getCursorPosition ( ) 
    local cx, cy = ( cx * sx ), ( cy * sy ) 
    if ( cx >= x and cx <= x + width ) and ( cy >= y and cy <= y + height ) then 
        return true 
    else 
        return false 
    end 
end 
  
addEventHandler ("onClientResourceStart", getRootElement(), 
    function () 
        showCursor (true) 
    end 
) 
  
function isClickingOnRectangle (button, state) 
    local position = isMouseInPosition (350, 350, 150, 200) 
    if position and (state == "down") then 
        addEventHandler ("onClientCharacter", getRootElement(), insertCharsInTable) 
        bindKey ("backspace", "down", removeLastChar) 
    else 
        removeEventHandler ("onClientRender", getRootElement(), insertCharsInTable) 
        unbindKey ("backspace", "down", removeLastChar) 
    end 
end 
addEventHandler ("onClientClick", getRootElement(), isClickingOnRectangle) 
  
function insertCharsInTable (charac) 
    table.insert (keys, charac) 
end 
  
function removeLastChar () 
    local lastNum = table.maxn (keys) 
    table.remove (keys, lastNum) 
end 
  
function drawIt () 
    local sentence = table.concat (keys, "") 
    dxDrawRectangle (350, 350, 150, 35, tocolor (255, 255, 255, 150)) 
    if sentence then 
        dxDrawText (sentence, 400, 354, x, y, tocolor (255, 255, 255), 1.2, "default-bold") 
    end 
end 
addEventHandler ("onClientRender", getRootElement (), drawIt) 
  
function mouseDrawingLine () 
    dxDrawRectangle (355, 353, 2, 30, tocolor (0, 0, 0, 100))  
end 
addEventHandler ("onClientRender", getRootElement(), mouseDrawingLine) 

Have a look at this, it's a way how edit works. It was made so fast but you can look at the example, and make your own. Make sure you have to click on the rectangle to be able to write on it. Then the way to get the text from there is by table.concating the whole table keys

[MAB]

Hello guys,

I'm currently working on a login window made with dxFunctions. However, I would like to know how can I manage to create an edit box with the dX functions.

Regards,

never learn the hard way bro these is an easier and better way here at the 5th spolier

https://forum.multitheftauto.com/viewtopic.php?f=148&t=91351&p=821076#p821076

[Dealman]

never learn the hard way bro

Sometimes you'll just have to... You can't always expect there to be an easy way out

[JR10]

You can check how I did it here: https://github.com/Woovie/dxGUI/blob/de ... tfield.lua

This has only one problem, it doesn't support more characters than what can fit inside the box.