| <!-- |
| /*************************************************************************************************************************** |
| * Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file |
| * distributed with this work for additional information regarding copyright ownership. The ASF licenses this file |
| * to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance |
| * with the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an |
| * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the |
| * specific language governing permissions and limitations under the License. |
| ***************************************************************************************************************************/ |
| --> |
| |
| HTML5 |
| |
| <p> |
| The Juneau HTML5 DTOs are simply beans with fluent-style setters that allow you to quickly construct HTML |
| fragments as Java objects. These object can then be serialized to HTML using one of the existing HTML |
| serializers, or to other languages such as JSON using the JSON serializers. |
| </p> |
| <p> |
| The {@link oaj.dto.html5.HtmlBuilder} class is a utility class with predefined static methods |
| that allow you to easily construct DTO instances in a minimal amount of code. |
| </p> |
| <p> |
| The following examples show how to create HTML tables. |
| </p> |
| <table class='styled w800'> |
| <tr> |
| <th>Java code</th> |
| <th>HTML</th> |
| </tr> |
| <tr> |
| <td class='code'> |
| <jk>import static</jk> org.apache.juneau.dto.html5.HtmlBuilder.*; |
| |
| Object mytable = |
| <jsm>table</jsm>( |
| <jsm>tr</jsm>( |
| <jsm>th</jsm>(<js>"c1"</js>), |
| <jsm>th</jsm>(<js>"c2"</js>) |
| ), |
| <jsm>tr</jsm>( |
| <jsm>td</jsm>(<js>"v1"</js>), |
| <jsm>td</jsm>(<js>"v2"</js>) |
| ) |
| ); |
| |
| String html = HtmlSerializer.<jsf>DEFAULT</jsf>.serialize(mytable); |
| </td> |
| <td class='code'><xt> |
| <table> |
| <tr> |
| <th><xv>c1</xv></th> |
| <th><xv>c2</xv></th> |
| </tr> |
| <tr> |
| <td><xv>v1</xv></td> |
| <td><xv>v2</xv></td> |
| </tr> |
| </table> |
| </xt></td> |
| </tr> |
| <tr> |
| <td class='code'> |
| <jk>import static</jk> org.apache.juneau.dto.html5.HtmlBuilder.*; |
| |
| Object mydiv = |
| <jsm>div</jsm>().align(<js>"center"</js>).onmouseover(<js>"alert(\"boo!\");"</js>) |
| .children( |
| <jsm>p</jsm>(<js>"Juneau supports "</js>, <jsm>b</jsm>(<jsm>i</jsm>(<js>"mixed"</js>)), <js>" content!"</js>) |
| ); |
| |
| String html = HtmlSerializer.<jsf>DEFAULT</jsf>.serialize(mydiv); |
| </td> |
| <td class='code'><xt> |
| <div <xa>align</xa>=<xs>'center'</xs> <xa>onmouseover</xa>=<xs>'alert("boo!");'</xs>> |
| <p><xv>Juneau supports </xv><b><i><xv>mixed</xv></i></b> <xv>content!</xv></p> |
| </table> |
| </xt></td> |
| </tr> |
| <tr> |
| <td class='code'> |
| <jk>import static</jk> org.apache.juneau.dto.html5.HtmlBuilder.*; |
| |
| Object myform = |
| <jsm>form</jsm>().action(<js>"/submit"</js>).method(<js>"POST"</js>) |
| .children( |
| <js>"Position (1-10000): "</js>, <jsm>input</jsm>(<js>"number"</js>).name(<js>"pos"</js>).value(1), <jsm>br</jsm>(), |
| <js>"Limit (1-10000): "</js>, <jsm>input</jsm>(<js>"number"</js>).name(<js>"limit"</js>).value(100), <jsm>br</jsm>(), |
| <jsm>button</jsm>(<js>"submit"</js>, <js>"Submit"</js>), |
| <jsm>button</jsm>(<js>"reset"</js>, <js>"Reset"</js>) |
| ); |
| |
| String html = HtmlSerializer.<jsf>DEFAULT</jsf>.serialize(myform); |
| </td> |
| <td class='code'><xt> |
| <form <xa>action</xa>=<xs>'/submit'</xs> <xa>method</xa>=<xs>'POST'</xs>> |
| <xv>Position (1-10000):</xv> <input <xa>name</xa>=<xs>'pos'</xs> <xa>type</xa>=<xs>'number'</xs> |
| <xa>value</xa>=<xs>'1'</xs>/><br/> |
| <xv>Limit (1-10000):</xv> <input <xa>name</xa>=<xs>'pos'</xs> <xa>type</xa>=<xs>'number'</xs> |
| <xa>value</xa>=<xs>'100'</xs>/><br/> |
| <button <xa>type</xa>=<xs>'submit'</xs>><xv>Submit</xv></button> |
| <button <xa>type</xa>=<xs>'reset'</xs>><xv>Reset</xv></button> |
| </form> |
| </xt></td> |
| </tr> |
| </table> |
| <p> |
| Using the HTML5 DTOs, you should be able to construct any valid HTML5 from full document bodies |
| to any possible fragments. |
| </p> |
| <p> |
| The {@link oaj.html.HtmlParser} class can be used convert these HTML documents back |
| into POJOs. |
| </p> |
| <p> |
| Other serializers and parsers (e.g. {@link oaj.json.JsonSerializer}) can be used to |
| represent these POJOs in languages other than HTML. |
| </p> |
| |
| <h5 class='toc'>Additional Information - org.apache.juneau.dto.html5</h5> |
| <ol class='toc'> |
| <li><p>{@doc org.apache.juneau.dto.html5#Overview Overview}</p> |
| <ol> |
| <li><p>{@doc org.apache.juneau.dto.html5#Serialize Generating HTML5}</p> |
| <li><p>{@doc org.apache.juneau.dto.html5#Parse Parsing HTML5}</p> |
| <li><p>{@doc org.apache.juneau.dto.html5#Templates HTML5 Templates}</p> |
| </ol> |
| </ol> |