I hereby present Mysidia's new GUI API. You may wonder what this is, well, it may not seem that alien to you if you are a Java programmer. The GUI system is designed to work like Java, and give coders a good experience working on the document construction.
Before we move into details, let's take a look at what Mys v1.3.2 has to do with building up the content of a document at this point. The below code demonstrates some basic idea:
It does look easy to use, but there is a problem involved when the document content gets more complex. What if we have to build a table or a form? A standard way to accomplish this is:
I am not sure how you feel about it, but mixing html inside php main script files makes it look messy and unprofessional. In many cases we have to build a dropdown menu by fetching data from mysql table, which gives it an even worse nightmare.
By Mys v1.3.3 I decide to design a GUI API package, which handles the construction of the document body like a charm. It uses composite design pattern, each component can be added into a container. A container can be added to a higher-level container until it reaches the top layer called Document. A document may contain text, paragraph, division(div), links, images, forms, tables and anything you can think of.
I know its pointless to give a long speech that does not do anything, so I will show you an example that makes use of the GUI API:
It may seem tough for those who have absolutely no knowledge of PHP to interpret. Nonetheless, if you really are a programmer/coder(especially if you are comfortable with Java GUI Programming), you'd be thrilled at how easy it is to manipulate HTML form and form elements with this GUI API. The above code renders to give the following document and the HTML code:
http://www.mysidiarpg.com/site/mys133a/demo/form_document.php
The GUI API will make its first appearance in Mys v1.3.3, its role is vital in the design of the new Widget System. It will continue to evolve throughout the course of Mys v1.3.x's development, and its usefulness will become more evident when Mysidia's MVC structure is completed. The GUI API will be used extensively in the View classes, which you will see in a few months. Note Mys v1.3.3 does not separate controllers from views, so the code may still look messy in some way.
And what do you think? I know it makes little difference to absolute non-coders, but the well-organized code is an excellent news for programmers. Lemme know if you have any suggestions to make, Id love to hear.
Before we move into details, let's take a look at what Mys v1.3.2 has to do with building up the content of a document at this point. The below code demonstrates some basic idea:
PHP:
$mysidia->page->settitle("The document title");
$mysidia->page->addcontent("The first line of content<br>");
$mysidia->page->addcontent("The second line of content<br>");
PHP:
$form = "<form name='form1' method='post' action='login.php'>
<p>Username: <input name='username' type='text' id='username'></p>
<p>Password: <input name='password' type='password' id='password'></p>
<p><input type='submit' name='Submit' value='Submit'></p>
<p>Don't have an account?<br>
<a href='register.php'>Register Free</a> </p>
<a href='forgotpass.php'>Forgot your password? Click Here</a>
</form>";
$mysidia->page->addcontent($form);By Mys v1.3.3 I decide to design a GUI API package, which handles the construction of the document body like a charm. It uses composite design pattern, each component can be added into a container. A container can be added to a higher-level container until it reaches the top layer called Document. A document may contain text, paragraph, division(div), links, images, forms, tables and anything you can think of.
I know its pointless to give a long speech that does not do anything, so I will show you an example that makes use of the GUI API:
PHP:
$document = $mysidia->frame->getDocument();
$document->setTitle("register");
$form = new Form("regform", "register.php", "post");
$form->setAlign(new Align("center", "middle"));
$src = new URL("http://www.tivo.com/assets/images/abouttivo/resources/downloads/backgrounds/Green_bkgd_72rgb.jpg");
$field = new FieldSet();
$field->setLineBreak(FALSE);
$field->setBackground(new Image($src, "back", 300));
$field->add(new Legend("Required Field"));
$field->add(new Division(new Comment("Please enter your username here, it must be alphanumeric."), "username"));
$field->add(new TextField("username", "admin", 10));
$field->add(new Paragraph(new Comment("Please fill in your password confirmed password here.")));
$field->add(new PasswordField("password", "password", "123456"));
$field->add(new PasswordField("password", "password2"));
$email = new Paragraph();
$email->setID("email");
$email->setFont(new Font(14, "Times New Roman"));
$email->getFont()->setWeight("bolder");
$email->setForeground(new Color("#000080"));
$email->add(new Comment("Please type your email and confirmed email here.", TRUE));
$email->add(new PasswordField("email", "email"));
$email->add(new PasswordField("email", "email2"));
$field->add($email);
$checkbox = new CheckBox("I agree to the terms of services", "tos", "yes", "yes");
$field->add($checkbox);
$field2 = new FieldSet(new Legend("Additional Fields"));
$field2->setBackground(new Color("red"));
$radiolist = new RadioList("gender");
$radiolist->add(new RadioButton("Male", "gender", "male"));
$radiolist->add(new RadioButton("Female", "gender", "female"));
$radiolist->add(new RadioButton("Unknown", "gender", "unknown"));
$radiolist->check("unknown");
$countries = array("Britain", "France", "Germany", "Italy", "Spain", "America", "Canada", "Russia", "Australia");
$alias = array("gbr", "fra", "ger", "ita", "esp", "usa", "can", "rus", "aus");
$default = "usa";
$dropdown = new DropdownList("country");
$dropdown->fill($countries, $alias, $default);
$comment2 = new Comment("Your Citizenship: ", FALSE);
$comment2->setBold();
$comment2->setUnderlined();
$comment2->setForeground(new Color("yellow"));
$field2->add(new Comment("Your Gender: ", FALSE));
$field2->add($radiolist);
$field2->add($comment2);
$field2->add($dropdown);
$field2->add(new Comment("Select an Avatar: ", FALSE));
$field2->add(new FileField("avatar"));
$field2->add(new CheckBox("Receive System/Administrator Email", "systememail", "enabled"));
$submit = new Button("Register", "submit", "submit");
$submit->setLineBreak(FALSE);
$form->add($field);
$form->add($field2);
$form->add(new Image(new URL("../templates/icons/facebook.gif"), "facebook", 20));
$form->add($submit);
$form->add(new Image(new URL("../templates/icons/twitter.gif"), "twitter", 20));
$lang = new Comment("Registratio Form", FALSE);
$lang->setCentered();
$lang->setBold();
$lang->setUnderlined();
$lang2 = new Comment("Note: It is your own responsibility to protect your password!");
$lang2->setCentered();
$lang2->setForeground(new Color("red"));
$document->add($lang);
$document->add($form);
$document->add($lang2);http://www.mysidiarpg.com/site/mys133a/demo/form_document.php
HTML:
<article>
<u><b><center>Registratio Form</center></b></u>
<form style=' text-align:center;' name='myform' id='myform' action='form.php' method='post'>
<fieldset style=' background-image: url(http://www.tivo.com/assets/images/abouttivo/resources/downloads/backgrounds/Green_bkgd_72rgb.jpg);'>
<legend>Required Field </legend>
<div name='username' id='username'>
Please enter your username here, it must be alphanumeric.<br>
</div>
<input name='username' id='username' maxlength='10' value='admin'><br>
<p>
Please fill in your password confirmed password here.<br>
</p>
<input name='password' id='password' type='password' value='123456'>
<input name='password2' id='password2' type='password'>
<p style=' font-size: 14px; font-family: Times New Roman; font-weight: bolder; color:#000080;' id='email'>
Please type your email and confirmed email here.<br>
<input name='email' id='email' type='email'>
<input name='email2' id='email2' type='email'>
</p>
<input name='tos' id='tos' value='yes' checked='checked' type='checkbox'>
I agree to the terms of services<br>
</fieldset>
<fieldset style=' background-color:red;' name='Additional Fields'>
<legend>Additional Fields </legend>
Your Gender:
<input name='gender' id='gender' value='male' type='radio'>Male
<input name='gender' id='gender' value='female' type='radio'>Female
<input name='gender' id='gender' value='unknown' type='radio' checked='checked'>Unknown<br>
<span style=' color:yellow;'>
<u><b>Your Citizenship: </b></u>
</span>
<select name='country' id='country'>
<option id='gbr' value='gbr'>Britain </option>
<option id='fra' value='fra'>France </option>
<option id='ger' value='ger'>Germany </option>
<option id='ita' value='ita'>Italy </option>
<option id='esp' value='esp'>Spain </option>
<option id='usa' value='usa' selected='selected'>America </option>
<option id='can' value='can'>Canada </option>
<option id='rus' value='rus'>Russia </option>
<option id='aus' value='aus'>Australia </option>
</select><br>
Select an Avatar:
<input name='avatar' id='avatar' type='file'><br>
<input name='systememail' id='systememail' value='enabled' type='checkbox'>
Receive System/Administrator Email<br>
</fieldset><br>
<img id='facebook' src='../templates/icons/facebook.gif' alt='facebook' width='20' height='20'>
<button name='submit' id='submit' value='submit' type='submit'>
Register
</button>
<img id='twitter' src='../templates/icons/twitter.gif' alt='twitter' width='20' height='20'>
</form>
<span style=' color:red;'>
<center>Note: It is your own responsibility to protect your password!</center>
</span><br>
</article>And what do you think? I know it makes little difference to absolute non-coders, but the well-organized code is an excellent news for programmers. Lemme know if you have any suggestions to make, Id love to hear.
, oh course, it didn't work. It looks like we'll have many more different ways of customizing our forms and information on the website. I like the looks of it! 
Forum Contains New Posts
Forum Contains No New Posts
