# Basic XHP Abstractions

DevFeed: [Basic XHP Abstractions](<https://devfeed.tech/articles/basic-xhp-abstractions-22027.md>)

Original publisher: [Read original article](<https://codebeforethehorse.tumblr.com/post/3288864699>)

Author: Codebeforethehorse

Published: 2011-02-14T07:22:00Z

Content type: tutorial

Language: en

Sources: [Stefan Parker](<https://devfeed.tech/sources/stefan-parker.md>)

Topics: [Development](<https://devfeed.tech/topics/development.md>), [HTML](<https://devfeed.tech/topics/html.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Code](<https://devfeed.tech/topics/code.md>), [Programming](<https://devfeed.tech/topics/programming.md>), [ui](<https://devfeed.tech/topics/ui.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [class](<https://devfeed.tech/tags/class.md>), [code](<https://devfeed.tech/tags/code.md>), [component](<https://devfeed.tech/tags/component.md>), [components](<https://devfeed.tech/tags/components.md>), [css](<https://devfeed.tech/tags/css.md>), [development](<https://devfeed.tech/tags/development.md>), [examples](<https://devfeed.tech/tags/examples.md>), [function](<https://devfeed.tech/tags/function.md>), [html](<https://devfeed.tech/tags/html.md>), [markup](<https://devfeed.tech/tags/markup.md>), [programming](<https://devfeed.tech/tags/programming.md>), [render](<https://devfeed.tech/tags/render.md>), [ui](<https://devfeed.tech/tags/ui.md>), [web](<https://devfeed.tech/tags/web.md>), [web-developers](<https://devfeed.tech/tags/web-developers.md>), [xhp](<https://devfeed.tech/tags/xhp.md>)

## AI overview

This tutorial demonstrates how XHP can abstract HTML rendering logic into reusable components. Examples cover generating form inputs from a data object and conditionally adding markup for rounded corners based on browser requirements.

## Source excerpt

On the surface XHP is nothing more than eye candy, but used correctly it can greatly simplify development. Creating good abstractions has always been smart programming, but it's very difficult to do that for your HTML components without mucking up your rendering code. Enter XHP to the rescue. Here I'll show you some basic examples of how XHP can be used to abstract out your rendering logic. These will be pretty basic, but hopefully enough to give you some ideas for your own setups. Let's start off with a simple abstraction to render form inputs of a basic data object. We can create an XHP element that takes the object as a parameter and returns the correct HTML input: class :ui:data-input extends :x:element { attribute DataObject data @required, string property @required; protected function render() { $data = $this->getAttribute('data'); $property = $this->getAttribute('property'); $input = <input type="text" name={$property} class="dataInput" value={$data->$property} placeholder={$data->getPropertyDesc($property)} />; if ($data->propertyIsRequired($property)) { $input->addClass('dataRequired'); } return $input; } } Now all we have to do is use a <ui:data-input /> element everywhere we want a text input for our DataObject. We can continue this abstraction out, assuming we model our DataObject well enough, to handle multiple form elements. The resulting XHP might look something like this: class :ui:data-form-element extends :x:element { attribute DataObject data @required, string property @required; protected function render() { $data = $this->getAttribute('data'); $property = $this->getAttribute('property'); switch ($data->getPropertyType($property)) { case 'text': $element = <input type="text" value={$data->$property} placeholder={$data->getPropertyDesc($property)} />; break; case 'select': $element = <select />; $element->setOptions( $data->getOptions($property), $data->$property ); break; case 'checkbox': $element = <input type="checkbox" value={$data->$property}