Graal Forums - My first Crack at GUI

Graal Forums (https://forums.graalonline.com/forums/index.php)

- NPC Scripting (https://forums.graalonline.com/forums/forumdisplay.php?f=8)

- - My first Crack at GUI (https://forums.graalonline.com/forums/showthread.php?t=134262834)

My first Crack at GUI

I thought about making this for a while but never got around to doing it but here it is. Its simple, but it works.

PHP Code:


		
			
//#CLIENTSIDE

function onCreated() {

  new GuiWindowCtrl("ServerList_Window1") {

    profile = GuiRedWindowProfile;

    clientrelative = true;

    clientextent = "104,374";



    alpha = 5;

    canclose = false;

    canmaximize = false;

    canminimize = false;

    canmove = false;

    canresize = true;

    closequery = false;

    destroyonhide = false;

    text = "Serverlist";

    x = 1050;

    y = 100;



    new GuiButtonCtrl("ServerList_Button1") {

      profile = GuiRedButtonProfile;

      text = "Login";

      width = 80;

      x = 10;

      y = 10;

    }

    new GuiButtonCtrl("ServerList_Button4") {

      profile = GuiRedButtonProfile;

      text = "Zone";

      width = 80;

      x = 10;

      y = 50;

    }

    new GuiButtonCtrl("ServerList_Button5") {

      profile = GuiRedButtonProfile;

      text = "Kingdoms";

      width = 80;

      x = 10;

      y = 90;

    }

    new GuiButtonCtrl("ServerList_Button6") {

      profile = GuiRedButtonProfile;

      text = "Zodiac";

      width = 80;

      x = 10;

      y = 130;

    }

    new GuiButtonCtrl("ServerList_Button7") {

      profile = GuiRedButtonProfile;

      text = "Era";

      width = 80;

      x = 10;

      y = 170;

    }

    new GuiButtonCtrl("ServerList_Button8") {

      profile = GuiRedButtonProfile;

      text = "Unholy N";

      width = 80;

      x = 10;

      y = 210;

    }

    new GuiButtonCtrl("ServerList_Button9") {

      profile = GuiRedButtonProfile;

      text = "Valikorlia";

      width = 80;

      x = 10;

      y = 250;

    }

    new GuiButtonCtrl("ServerList_Button10") {

      profile = GuiRedButtonProfile;

      text = "AEON";

      width = 80;

      x = 10;

      y = 290;

    }

    new GuiButtonCtrl("ServerList_Button11") {

      profile = GuiRedButtonProfile;

      text = "Maloria";

      width = 80;

      x = 10;

      y = 330;

    }

  }

}



function ServerList_Button1.onAction() {

  // Button "Login" has been pressed

  ServerWarp("Login");

}



function ServerList_Button4.onAction() {

  // Button "Zone" has been pressed

  ServerWarp("Zone");

}



function ServerList_Button5.onAction() {

  // Button "Kingdoms" has been pressed

  ServerWarp("Graal Kingdoms");

}



function ServerList_Button6.onAction() {

  // Button "Zodiac" has been pressed

  ServerWarp("Zodiac");

}



function ServerList_Button7.onAction() {

  // Button "Era" has been pressed

  ServerWarp("Era");

}



function ServerList_Button8.onAction() {

  // Button "Unholy N" has been pressed

  ServerWarp("Unholy Nation");

}



function ServerList_Button9.onAction() {

  // Button "Valikorlia" has been pressed

  ServerWarp("Valikorlia");

}



function ServerList_Button10.onAction() {

  // Button "AEON" has been pressed

  ServerWarp("AEON");

}



function ServerList_Button11.onAction() {

  // Button "Maloria" has been pressed

  ServerWarp("Maloria");

}

Ideally use clientWidth and clientHeight (or width and height if not using clientRelative) for setting the dimensions of objects (edit: just noticed you used it for the window but not the buttons; consistency is key, and make sure to give the buttons a height).

If you're interested in improving the script, look into using catchEvent to avoid duplicated code and to greatly simplify your script.

Tip: You can center a GUI when it's created by setting it's X and Y like this:

PHP Code:


		
			
//#CLIENTSIDE

function center(guiObj) {

  with (guiObj) {

    x = (screenwidth - width) / 2;

    y = (screenheight - height) / 2;

  }

}

In your case you could just change the X and Y lines with the ones I suggested above. The default coordinates you left (1050,100) when you were making it with the GUI Editor could cause it to be off the screen for people.

You can also use a for-each loop and catchevent to remove the redundant button code.

PHP Code:


		
			
// For-each Example

temp.servers = {

  "Login",

  "Graal Kingdoms",

  "Zone",

  "Zodiac",

  "Era",

  "Unholy Nations",

  "Valikorlia",

  "Maloria",

  "AEON"

};

for (temp.server: temp.servers) {

  new GuiButtonCtrl("ServerList_Button_" @ temp.server) { 

    profile = GuiRedButtonProfile; 

    text = temp.server; 

    width = 80; 

    x = 10;

    y = 10 + (40 * temp.servers.index(temp.server);

    thiso.catchevent(this, "onAction", "onServerWarp");

  }

}



// All your 'obj.onAction()' functions can then be replaced with just this:

function onServerWarp(obj) {

  serverwarp(obj.text);

}

This is already created, you just edited it, to keep the newer servers.

Quote:

Originally Posted by Astram (Post 1643544)

This is already created, you just edited it, to keep the newer servers.

Uhuh

Maybe, Emera, if you would spend your time learning instead of ripping off other people (which doesn't help you much anyways, the way you have been going), you would be able to actually learn to script...

I made it myself using the gui editor so stop pointing fingers please. You are just out to spot my errors astram.

Quote:

Originally Posted by Emera (Post 1645894)

I made it myself using the gui editor so stop pointing fingers please. You are just out to spot my errors astram.

Please don't use the GUI editor.

Why is that? Sorry :(

It's cool and awesome of course, but lacks certain things that only coding can do. Try learning actual GUI script, wiki does have decent documentation on most GUI features, thankfully. If you learn how to GUI script, many light bulbs will click for you and you will be surprised at how many new ideas you can/will come up with, both GUI and other kinds scripts.

Quote:

Originally Posted by Emera (Post 1645929)

Why is that? Sorry :(

It creates disgusting code, teaches you to position things absolutely (rather than based off text size, etc), is way less flexible in what it can do, and you won't understand how GUIs work as well if you continue to use it.

Quote:

Originally Posted by cbk1994 (Post 1645985)

GUI's are fun to do also!
I like them ^.^;
Apparently I still have a few oddities in them like canMove not allowing something to move, and passing numbers via text with this. or thiso. but they are still neat to create..

I need to understand all of the types you can use in GUI; I've only used textbox, pulldown, slider, buttons, tabs and 1-2 other things so far..

I'd like to create my own tutorial which should be more helpful, but in the mean time this is what has helped me for the basics. http://forums.delteria.com/topic/1666-gui-tutorial/

Thanks for this Devil_lord