Quantcast
need some help for an editbox - WoWInterface
Thread Tools Display Modes
06-19-17, 08:17 AM   #1
volchantv
A Defias Bandit
Join Date: Jun 2017
Posts: 2
need some help for an editbox

Hey there, i'm new too wow addon dev, i need to make an editbox so my user can copy paste content inside it, i can't find good reference to do this :/

edit : i got it to show and behave allmost like i want but i can't get it to fit the space :/




here is my building function
UIConfig = CreateFrame("Frame", "Tchin_Frame", UIParent, "BasicFrameTemplateWithInset");

UIConfig:SetSize(500, 560);
UIConfig:SetPoint("CENTER", UIParent, "CENTER");
UIConfig:SetMovable(true);

UIConfig.title = UIConfig:CreateFontString(nil, "OVERLAY");
UIConfig.title:SetFontObject("GameFontHighlight");
UIConfig.title:SetPoint("LEFT", UIConfig.TitleBg, 5, 0);
UIConfig.title:SetText("Tch´n Raid Scheduler")

UIConfig.editFrame = CreateFrame("EditBox", nil, UIConfig, "InputBoxTemplate");
UIConfig.editFrame:SetPoint("CENTER", UIConfig, "CENTER");
UIConfig.editFrame:SetWidth(400);
UIConfig.editFrame:SetHeight(400);
UIConfig.editFrame:SetMovable(false);
UIConfig.editFrame:SetAutoFocus(false);
UIConfig.editFrame:SetMultiLine(1000);
UIConfig.editFrame:SetMaxLetters(32000);

UIConfig.inviteBtn = CreateFrame("Button", nil, UIConfig, "GameMenuButtonTemplate");
UIConfig.inviteBtn:SetPoint("CENTER", UIConfig, "BOTTOM", 0, 40);
UIConfig.inviteBtn:SetSize(120, 30);
UIConfig.inviteBtn:SetText("Invite Members");
UIConfig.inviteBtn:SetNormalFontObject("GameFontNormal");
UIConfig.inviteBtn:SetHighlightFontObject("GameFontHighlight");

Last edited by volchantv : 06-19-17 at 08:40 AM.
  Reply With Quote
06-19-17, 04:39 PM   #2
Ketho
A Molten Giant
 
Ketho's Avatar
AddOn Author - Click to view addons
Join Date: Mar 2010
Posts: 942
You can find references by looking in some of these notepad addons
http://www.wowinterface.com/forums/s...ad.php?t=53494

I personally use the below example in my own addons


Lua Code:
  1. function KethoEditBox_Show(text)
  2.     if not KethoEditBox then
  3.         local f = CreateFrame("Frame", "KethoEditBox", UIParent, "DialogBoxFrame")
  4.         f:SetPoint("CENTER")
  5.         f:SetSize(600, 500)
  6.        
  7.         f:SetBackdrop({
  8.             bgFile = "Interface\\DialogFrame\\UI-DialogBox-Background",
  9.             edgeFile = "Interface\\PVPFrame\\UI-Character-PVP-Highlight", -- this one is neat
  10.             edgeSize = 16,
  11.             insets = { left = 8, right = 6, top = 8, bottom = 8 },
  12.         })
  13.         f:SetBackdropBorderColor(0, .44, .87, 0.5) -- darkblue
  14.        
  15.         -- Movable
  16.         f:SetMovable(true)
  17.         f:SetClampedToScreen(true)
  18.         f:SetScript("OnMouseDown", function(self, button)
  19.             if button == "LeftButton" then
  20.                 self:StartMoving()
  21.             end
  22.         end)
  23.         f:SetScript("OnMouseUp", f.StopMovingOrSizing)
  24.        
  25.         -- ScrollFrame
  26.         local sf = CreateFrame("ScrollFrame", "KethoEditBoxScrollFrame", KethoEditBox, "UIPanelScrollFrameTemplate")
  27.         sf:SetPoint("LEFT", 16, 0)
  28.         sf:SetPoint("RIGHT", -32, 0)
  29.         sf:SetPoint("TOP", 0, -16)
  30.         sf:SetPoint("BOTTOM", KethoEditBoxButton, "TOP", 0, 0)
  31.        
  32.         -- EditBox
  33.         local eb = CreateFrame("EditBox", "KethoEditBoxEditBox", KethoEditBoxScrollFrame)
  34.         eb:SetSize(sf:GetSize())
  35.         eb:SetMultiLine(true)
  36.         eb:SetAutoFocus(false) -- dont automatically focus
  37.         eb:SetFontObject("ChatFontNormal")
  38.         eb:SetScript("OnEscapePressed", function() f:Hide() end)
  39.         sf:SetScrollChild(eb)
  40.        
  41.         -- Resizable
  42.         f:SetResizable(true)
  43.         f:SetMinResize(150, 100)
  44.        
  45.         local rb = CreateFrame("Button", "KethoEditBoxResizeButton", KethoEditBox)
  46.         rb:SetPoint("BOTTOMRIGHT", -6, 7)
  47.         rb:SetSize(16, 16)
  48.        
  49.         rb:SetNormalTexture("Interface\\ChatFrame\\UI-ChatIM-SizeGrabber-Up")
  50.         rb:SetHighlightTexture("Interface\\ChatFrame\\UI-ChatIM-SizeGrabber-Highlight")
  51.         rb:SetPushedTexture("Interface\\ChatFrame\\UI-ChatIM-SizeGrabber-Down")
  52.        
  53.         rb:SetScript("OnMouseDown", function(self, button)
  54.             if button == "LeftButton" then
  55.                 f:StartSizing("BOTTOMRIGHT")
  56.                 self:GetHighlightTexture():Hide() -- more noticeable
  57.             end
  58.         end)
  59.         rb:SetScript("OnMouseUp", function(self, button)
  60.             f:StopMovingOrSizing()
  61.             self:GetHighlightTexture():Show()
  62.             eb:SetWidth(sf:GetWidth())
  63.         end)
  64.         f:Show()
  65.     end
  66.    
  67.     if text then
  68.         KethoEditBoxEditBox:SetText(text)
  69.     end
  70.     KethoEditBox:Show()
  71. end

Last edited by Ketho : 06-19-17 at 05:18 PM.
  Reply With Quote
06-19-17, 04:52 PM   #3
Ketho
A Molten Giant
 
Ketho's Avatar
AddOn Author - Click to view addons
Join Date: Mar 2010
Posts: 942
Originally Posted by volchantv View Post
edit : i got it to show and behave allmost like i want but i can't get it to fit the space :/

a good way to do this is using a scrollframe so the editbox won't grow out of your frame
http://wowprogramming.com/docs/widge...SetScrollChild
  Reply With Quote
06-19-17, 06:21 PM   #4
volchantv
A Defias Bandit
Join Date: Jun 2017
Posts: 2
hey, thanks for your answers

I got it kind of working



Lua Code:
  1. local _, core = ...;
  2. core.Config = {};
  3.  
  4. local Config = core.Config;
  5. local UIConfig;
  6.  
  7. local defaults = {
  8.   theme = {
  9.     r = 0,
  10.     g = 0.8,
  11.     b = 1,
  12.     hex = "00ccff"
  13.   }
  14. }
  15.  
  16. function Config:Toggle()
  17.   local menu = UIConfig or Config:CreateMenu();
  18.   menu:SetShown(not menu:IsShown());
  19. end
  20.  
  21. function Config:GetThemeColor()
  22.   local c = defaults.theme;
  23.   return c.r, c.g, c.b, c.hex;
  24. end
  25.  
  26. local function ScrollFrame_OnMouseWheel(self, delta)
  27.   local newValue = self:GetVerticalScroll() - (delta * 20);
  28.  
  29.   if (newValue < 0) then
  30.     newValue = 0;
  31.   elseif (newValue > self:GetVerticalScrollRange()) then
  32.     newValue = self:GetVerticalScrollRange();
  33.   end
  34.  
  35.   self:SetVerticalScroll(newValue);
  36. end
  37.  
  38. function Config:CreateMenu()
  39.   UIConfig = CreateFrame("Frame", "TchinFrame", UIParent, "BasicFrameTemplateWithInset");
  40.   UIConfig:SetSize(500, 560);
  41.   UIConfig:SetPoint("CENTER");
  42.   UIConfig:SetMovable(true);
  43.   UIConfig:EnableMouse(true);
  44.   UIConfig:SetFrameStrata("HIGH")
  45.   UIConfig:RegisterForDrag("LeftButton");
  46.   UIConfig:SetScript("OnDragStart", UIConfig.StartMoving);
  47.   UIConfig:SetScript("OnDragStop", UIConfig.StopMovingOrSizing);
  48.  
  49.   UIConfig.title = UIConfig:CreateFontString(nil, "OVERLAY");
  50.   UIConfig.title:SetFontObject("GameFontHighlight");
  51.   UIConfig.title:SetPoint("LEFT", UIConfig.TitleBg, 5, 0);
  52.   UIConfig.title:SetText("Tch´n Raid Scheduler");
  53.  
  54.   UIConfig.ScrollFrame = CreateFrame("ScrollFrame", nil, UIConfig, "UIPanelScrollFrameTemplate");
  55.   UIConfig.ScrollFrame:SetPoint("TOPLEFT", TchinFrame.InsetBg, "TOPLEFT", 8, -8);
  56.   UIConfig.ScrollFrame:SetPoint("BOTTOMRIGHT", TchinFrame.InsetBg, "BOTTOMRIGHT", -3, 60);
  57.   UIConfig.ScrollFrame:SetClipsChildren(true);
  58.   UIConfig.ScrollFrame:SetScript("OnMouseWheel", ScrollFrame_OnMouseWheel);
  59.  
  60.   UIConfig.child = CreateFrame("Frame", nil, UIConfig.ScrollFrame);
  61.   UIConfig.child:SetSize(475, 450);
  62.   UIConfig.ScrollFrame:SetScrollChild(UIConfig.child);
  63.  
  64.  
  65.  
  66.   UIConfig.ScrollFrame.ScrollBar:ClearAllPoints();
  67.   UIConfig.ScrollFrame.ScrollBar:SetPoint("TOPLEFT", UIConfig.ScrollFrame, "TOPRIGHT", -20, -22);
  68.   UIConfig.ScrollFrame.ScrollBar:SetPoint("BOTTOMRIGHT", UIConfig.ScrollFrame, "BOTTOMRIGHT", -15, 22);
  69.  
  70.   UIConfig.editBox = CreateFrame("EditBox", "TchinEditBox", UIConfig, "TchinInputBoxTemplate");
  71.   UIConfig.editBox:SetPoint("TOPLEFT", UIConfig.child, 5, -5);
  72.   UIConfig.editBox:SetWidth(430);
  73.   UIConfig.editBox:SetText("Paste the list here.");
  74.   UIConfig.editBox:SetAutoFocus(false);
  75.   UIConfig.editBox:SetMultiLine(true);
  76.   UIConfig.editBox:SetMaxLetters(2000);
  77.  
  78.   UIConfig.inviteBtn = CreateFrame("Button", nil, UIConfig, "GameMenuButtonTemplate");
  79.   UIConfig.inviteBtn:SetPoint("CENTER", UIConfig, "BOTTOM", 0, 40);
  80.   UIConfig.inviteBtn:SetSize(120, 30);
  81.   UIConfig.inviteBtn:SetText("Invite Members");
  82.   UIConfig.inviteBtn:SetNormalFontObject("GameFontNormal");
  83.   UIConfig.inviteBtn:SetHighlightFontObject("GameFontHighlight");
  84.  
  85.   UIConfig:Hide();
  86.   return UIConfig;
  87. end

but i'm gonna try your solution, looks way better
  Reply With Quote
06-11-20, 08:48 AM   #5
Antiklesys
A Murloc Raider
Join Date: Jun 2020
Posts: 5
Originally Posted by Ketho View Post
You can find references by looking in some of these notepad addons
http://www.wowinterface.com/forums/s...ad.php?t=53494

I personally use the below example in my own addons


Lua Code:
  1. function KethoEditBox_Show(text)
  2.     if not KethoEditBox then
  3.         local f = CreateFrame("Frame", "KethoEditBox", UIParent, "DialogBoxFrame")
  4.         f:SetPoint("CENTER")
  5.         f:SetSize(600, 500)
  6.        
  7.         f:SetBackdrop({
  8.             bgFile = "Interface\\DialogFrame\\UI-DialogBox-Background",
  9.             edgeFile = "Interface\\PVPFrame\\UI-Character-PVP-Highlight", -- this one is neat
  10.             edgeSize = 16,
  11.             insets = { left = 8, right = 6, top = 8, bottom = 8 },
  12.         })
  13.         f:SetBackdropBorderColor(0, .44, .87, 0.5) -- darkblue
  14.        
  15.         -- Movable
  16.         f:SetMovable(true)
  17.         f:SetClampedToScreen(true)
  18.         f:SetScript("OnMouseDown", function(self, button)
  19.             if button == "LeftButton" then
  20.                 self:StartMoving()
  21.             end
  22.         end)
  23.         f:SetScript("OnMouseUp", f.StopMovingOrSizing)
  24.        
  25.         -- ScrollFrame
  26.         local sf = CreateFrame("ScrollFrame", "KethoEditBoxScrollFrame", KethoEditBox, "UIPanelScrollFrameTemplate")
  27.         sf:SetPoint("LEFT", 16, 0)
  28.         sf:SetPoint("RIGHT", -32, 0)
  29.         sf:SetPoint("TOP", 0, -16)
  30.         sf:SetPoint("BOTTOM", KethoEditBoxButton, "TOP", 0, 0)
  31.        
  32.         -- EditBox
  33.         local eb = CreateFrame("EditBox", "KethoEditBoxEditBox", KethoEditBoxScrollFrame)
  34.         eb:SetSize(sf:GetSize())
  35.         eb:SetMultiLine(true)
  36.         eb:SetAutoFocus(false) -- dont automatically focus
  37.         eb:SetFontObject("ChatFontNormal")
  38.         eb:SetScript("OnEscapePressed", function() f:Hide() end)
  39.         sf:SetScrollChild(eb)
  40.        
  41.         -- Resizable
  42.         f:SetResizable(true)
  43.         f:SetMinResize(150, 100)
  44.        
  45.         local rb = CreateFrame("Button", "KethoEditBoxResizeButton", KethoEditBox)
  46.         rb:SetPoint("BOTTOMRIGHT", -6, 7)
  47.         rb:SetSize(16, 16)
  48.        
  49.         rb:SetNormalTexture("Interface\\ChatFrame\\UI-ChatIM-SizeGrabber-Up")
  50.         rb:SetHighlightTexture("Interface\\ChatFrame\\UI-ChatIM-SizeGrabber-Highlight")
  51.         rb:SetPushedTexture("Interface\\ChatFrame\\UI-ChatIM-SizeGrabber-Down")
  52.        
  53.         rb:SetScript("OnMouseDown", function(self, button)
  54.             if button == "LeftButton" then
  55.                 f:StartSizing("BOTTOMRIGHT")
  56.                 self:GetHighlightTexture():Hide() -- more noticeable
  57.             end
  58.         end)
  59.         rb:SetScript("OnMouseUp", function(self, button)
  60.             f:StopMovingOrSizing()
  61.             self:GetHighlightTexture():Show()
  62.             eb:SetWidth(sf:GetWidth())
  63.         end)
  64.         f:Show()
  65.     end
  66.    
  67.     if text then
  68.         KethoEditBoxEditBox:SetText(text)
  69.     end
  70.     KethoEditBox:Show()
  71. end
Hey Ketko,

I'm using this example and I'm trying to do a "Submit" form.
Basically what happens is a slashcommand brings up the edit box which is populated with the value of one of the variables in the addon.
I delete everything and the behavior I'm trying to implement is that by clicking the "Ok" button I would set a new value for that variable (the value to be set to the content of the text field).
I'm struggling with this as I don't seem to understand how the "Okay" button has been generated in the first place as it doesn't seem to be part of the code?
Any help is appreciated!
  Reply With Quote
06-11-20, 10:17 AM   #6
Ketho
A Molten Giant
 
Ketho's Avatar
AddOn Author - Click to view addons
Join Date: Mar 2010
Posts: 942
Originally Posted by Antiklesys View Post
I'm trying to do a "Submit" form.

In your case it might be easier to just use a StaticPopupDialog, you can reference StaticPopup.lua for more detailed examples
Lua Code:
  1. local someVar
  2.  
  3. -- /run StaticPopup_Show("TestPopup")
  4. StaticPopupDialogs.TestPopup = {
  5.     text = "Some text",
  6.     button1 = OKAY,
  7.     OnAccept = function(self)
  8.         someVar = self.editBox:GetText()
  9.         print(someVar)
  10.     end,
  11.     hasEditBox = 1,
  12. }


There is also the AceConfig input option if you want more full fledged options


Originally Posted by Antiklesys View Post
I'm struggling with this as I don't seem to understand how the "Okay" button has been generated in the first place as it doesn't seem to be part of the code?

The "Okay" button there is part of the DialogBox frame template

Here is an ugly example using the global variables because apparently I didn't bother making them accessible as keys at that time
Lua Code:
  1. local someVar
  2.  
  3. KethoEditBoxButton:HookScript("OnClick", function(self)
  4.     someVar = KethoEditBoxEditBox:GetText()
  5.     print(someVar)
  6. end)
  Reply With Quote
06-11-20, 07:38 PM   #7
Antiklesys
A Murloc Raider
Join Date: Jun 2020
Posts: 5
Thanks,

In my specific use case I'm in need to paste a looooooooong text in there hence why I wanted to use the text frame rather than the Static Popup Dialog I guess.

I tried working with your other code example with the "Okay" button but I'm getting some errors in the code,
it seems this line is making some fuss:
Code:
KethoEditBoxButton:HookScript("OnClick", function(self)
I was able to modify it to use the "escape" key instead but this is just a temporary solution till I figure out how to use the Okay button instead:

Code:
	eb:SetScript("OnEscapePressed", function(self)
		lootlist = eb:GetText()
		f:Hide()
	end)
Any help is welcome as these UI elements are completely a new territory for me.
  Reply With Quote

WoWInterface » Developer Discussions » Lua/XML Help » need some help for an editbox

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off