Have you ever dreamed of creating iOS App’s UI with clean and human nature HTML/XML? Now CocoaUI provides you an easy way to do this, the UI develop of an App is not a big deal any more!
I will show you how to create a register form UI with XML, it is native, not webview based, nor hybrid.
Let’s first see how a register form look like on iPhone 5(simulator):
It is a normal register form, with:
- A logo of your company or product, on top of the form, center-aligned.
- Then a text input for user to input user name to register, there is a small icon on the left, also, there is a bottom line below the icon and the text input.
- Much the same as user name input.
- Last, at the bottom there is a button which is 100% width stretched to fill the screen horizontally, with blue background.
As described above, with CocoaUI‘s powerful HTML/XML UI descriptive language, you are able to simply translate human readable sentences into CocoaUI’s UI codes.
<img id="logo" src="logo.png" style="float: center; clear: both; width: 64; height: 64; margin: 10 0;" />
The logo image is floating horizontally centered, and clear any possible controls on its both sides(left and right), it has 10pt blank spaces above and below it, and no addition blank spaces on its left and right(float: center has already give it blank spaces as well), which is defined by margin.
The Username and Password inputs
<div style="margin: 15 0; border-bottom: 1 solid #eee;"> <img src="name.png" style="width: 18; height: 24; margin: 8 8 0 0;" /> <input type="text" placeholder="Username" style="width: 100%; height: 40;" /> </div>
div is the wrapper box of the small icon and the text input. There is 15pt blank spaces above and below the wrapper box, and the box has a bottom line.
Then the small icon given by image file
name.png. The text input will layout to the right side of the icon, and fill the whole space(by 100% width).
The password input is almost the same, but with
password input type, not
The Submit button
<button id="submit" style="clear: both; width: 100%; height: 40; font-size: large; margin: 15 0 0 0; color: #fff; background: #6cf; border-radius: 5;"> Register </button>
The Submit button fills the screen horizontally(by 100% width), before it stretch to 100% width, it clear(avoid) any possible controls on its left, and not allow any controls to layout on its right. The text color is white(#fff), and the background color is blue(#6cf). And
border-radius makes it rounded ranctangle shape.
Is it EXCITING? Get rid of long nonsense iOS contraint based layout codes now!