Fluent Java API for building HTML/Bootstrap Web UI
v. 1.3.0
A component of Nasdanika Foundation Server
Overview
 Fluent Java API to build
 Low level – HTML elements
 High level:
 Bootstrap UI elements
 Font Awesome ...
Getting Started
 Instantiate org.nasdanika.html.impl.DefaultHTMLFactory
 Use the factory to create generation componen...
Low-level HTML API
 UIElement, Container & Tag interfaces
 Set attributes
 Recognizes importance of id, style, and c...
High-level Bootstrap API
 Accordion
 Application panel
 Alert
 Breadcrumbs
 Button
 Form
 Glyphicons
 Inpu...
Accordion
Application Panel
Alert
LinkGroup
Breadcrumbs
Button
Form
The same form in horizontal layout
And inline layout
FormGroup
InputGroup
 A combination of an input and add-ons
Glyphicon
FormInputGroup
 A fusion of FormGroup and InputGroup
Label
LinkGroup & ListGroup
Modal
Navbar
Panel
Popover
Table
Tabs
Example of
error reporting
by nsdLoad()
Tooltip
Font Awesome
…
Dynamic content
 Content’s toString() is invoked every time component’s
toString() is invoked.
 Therefore assembled c...
Router Application
 Creates a single-page applications with a
Backbone route.
 nsdLoad() function – Ajax load with
“...
Sample application
Transactions table is dynamically reloaded on transaction period select
Account summary page
Transactions table generation
Themes
References
 Wiki - https://github.com/Nasdanika/server/wiki/html
 WebTest report – generated with Nasdanika HTML and
...
of 30

Nasdanika HTML - Fluent Java API for building HTML/Bootstrap Web UI

This presentation shows how to build HTML/Bootstrap/AngularJS/FontAwesome Web UI and single-page applications in Java using fluent API provided by Nasdanika HTML library - https://github.com/pvlasov/nasdanika/tree/master/org.nasdanika.html
Published on: Mar 3, 2016
Published in: Software      Technology      
Source: www.slideshare.net


Transcripts - Nasdanika HTML - Fluent Java API for building HTML/Bootstrap Web UI

  • 1. Fluent Java API for building HTML/Bootstrap Web UI v. 1.3.0 A component of Nasdanika Foundation Server
  • 2. Overview  Fluent Java API to build  Low level – HTML elements  High level:  Bootstrap UI elements  Font Awesome icons  Angular directives  Single-page applications  18 Style themes  Sources: https://github.com/pvlasov/nasdanika/tree/master/org.nasdanika.html
  • 3. Getting Started  Instantiate org.nasdanika.html.impl.DefaultHTMLFactory  Use the factory to create generation components.  Component’s toString() produces HTML.
  • 4. Low-level HTML API  UIElement, Container & Tag interfaces  Set attributes  Recognizes importance of id, style, and class attributes  Shortcut method to set id.  class attribute can be manipulated as a list with addClass() method  style attribute can be manipulated as a map with style(String, Object) method  Fluent API – methods return element and can be chained.  Enumerations for color, device size, element size, and element style  tag(), link(), fragment() and input() factory methods.
  • 5. High-level Bootstrap API  Accordion  Application panel  Alert  Breadcrumbs  Button  Form  Glyphicons  Input group  Label  Link group  List group Modal  Navbar  Panel  Popover  Table  Tabs  Tooltip
  • 6. Accordion
  • 7. Application Panel Alert LinkGroup
  • 8. Breadcrumbs
  • 9. Button
  • 10. Form The same form in horizontal layout And inline layout
  • 11. FormGroup
  • 12. InputGroup  A combination of an input and add-ons Glyphicon
  • 13. FormInputGroup  A fusion of FormGroup and InputGroup
  • 14. Label
  • 15. LinkGroup & ListGroup
  • 16. Modal
  • 17. Navbar
  • 18. Panel
  • 19. Popover
  • 20. Table
  • 21. Tabs Example of error reporting by nsdLoad()
  • 22. Tooltip
  • 23. Font Awesome …
  • 24. Dynamic content  Content’s toString() is invoked every time component’s toString() is invoked.  Therefore assembled components may be reused and will fetch fresh data every time their toString() is invoked.  AutoCloseable content is closed when component is closed.  Example:  Assemble user UI from preferences and metadata.  Wire dynamic content sources.  Store in user session.  Close UI top component when session closes.  close() will traverse down to AutoCloseable dynamic content and close it.
  • 25. Router Application  Creates a single-page applications with a Backbone route.  nsdLoad() function – Ajax load with “Loading” indicator and error reporting.  Lists of scripts and stylesheets are provided by the factory. Ajax loaded from test.html (initial route)
  • 26. Sample application
  • 27. Transactions table is dynamically reloaded on transaction period select Account summary page
  • 28. Transactions table generation
  • 29. Themes
  • 30. References  Wiki - https://github.com/Nasdanika/server/wiki/html  WebTest report – generated with Nasdanika HTML and shows screenshots of the application also generated with Nasdanika HTML – http://www.nasdanika.org/examples/test-report/  Sources - https://github.com/Nasdanika/server/tree/master/org.nasdanika.html  JavaDoc – http://www.nasdanika.org/server/apidocs/org/nasdanika/html/package-summary.html  Bootstrap themes - http://bootswatch.com/  Nasdanika Foundation Server presentation - http://www.slideshare.net/PavelVlasov2/nasdanika-foundation-server

Related Documents