Towards Effective User Interfaces Design AspectFaces

AspectFaces.com

af_logo_black.png

No matter how beautiful, no matter how cool your interface,
it would be better if there were less of it.


Alan Cooper
Notes

Design is not just what it
looks like and feels like
 
- Design is how it works.


Steve Jobs

Around 48% of total application code and
50% of application time are devoted to implementing user interfaces (UIs)

User interface development/maintenance is too complex, hard, time-consuming, error-prone and exhibits restated info..

it’s time to make it easy!    

Notes

User Interface (UI)

Notes

*UI is important It mediates user communication with the system It must *Look attractive & must reflect the system *Enforce the input validation *Help your user to understand what he does At the same time it is boring to develop (restated info) **Hard to maintain: often no type-safety

Quick jump to code preview                                       with                           Standard development

…our goal

We design a basic plain form with validation
plainForm.png 3-exampleRich.png
How do we do that
We refer to the data entity definition
And then
And restate its field properties in the UI code

…here is the UI code snippet with standard approach

..
<util:inputText label="#{text['personInfo.name']}"
                edit="#{edit}"
                value="#{personInfo.name}"
                required="true"
                size="30"
                title="#{text['tooltip.personInfo.name']}"
                maxlength="255"
                rendered="#{empty renderName ? 'true' : renderName}"
                id="#{prefix}name" />
<util:inputEmail label="#{text['personInfo.email']}"
                edit="#{edit}"
                value="#{personInfo.email}"
                required="true"
                size="30"
                title="#{text['tooltip.personInfo.email']}"
                maxlength="255"
                rendered="#{empty renderEmail ? 'true' : renderEmail}"
                id="#{prefix}email" />
..
And..
..much more..

Quick jump to code preview                                       with                                             AspectFaces

…basic Form code with AspectFaces

<af:ui edit=”true" instance="#{selectedPerson}" />
All that is needed in the UI code to render the form
Configuration by exception
e.g. hide email?
<af:ui edit=”true" ignore="email" instance="#{selectedPerson}" />
e.g. read-only name?
<af:ui edit=”true" ignore="email"
   editName="false" instance="#{selectedPerson}" />

Lets look at existing systems

(i) Presentation

FB1.png

(i) Presentation

FB2.png

(i) Presentation

FB3.png

(i) Presentation

FB4.png

(i) Presentation

GM1.png

(i) Presentation

GM2.png

(ii+iii) Data binding and input validation

Binding1.png

(ii+iii) Data binding and input validation

Binding2.png

(iv) Layout

SingleForm.png

(iv) Layout

2colForm.png

(iv) Layout

3colForm.png

(v) Filtering / Restrictions

Restricted1.png Restricted2.png

Lets state the problem

Whats the problem?

Whats the problem?

Example concerns

img-Decomposition2.png

Concerns captured in UI code

2img-AOP.png

Related problems?

The Java EE               architecture

Java EE architecture

architecture.png

Rich Entity Aspect/Audit                                                Design - The READ job

Rich Entity

…here is an example Entity

@Entity @Table(name = "personInfo")
public class PersonInfo {
   ...
  @Enumerated(EnumType.STRING)
  public Title getTitle() { return title; }

  @Length(max=100)
  @NotEmpty @Column(nullable = false, length = 100)
  @Pattern(regex="^[^\\s].*",message="No spaces")
  public String getFirstName() { return firstName; }

  @NotEmpty @Column(nullable = false)
  public String getHomeState() { return state; }
}

…and here is example Rich Entity

@Entity @Table(name = "personInfo")
public class PersonInfo {
   ...
  @UiUserRoles({"Admin","Owner"})
  @UiOrder(1) @Enumerated(EnumType.STRING)
  public Title getTitle() { return title; }

  @UiOrder(2) @Length(max=100)
  @NotEmpty @Column(nullable = false, length = 100)
  @Pattern(regex="^[^\\s].*",message="No spaces")
  public String getFirstName() { return firstName; }

  @UiOrder(8) @UiProfiles({"US"})
  @NotEmpty @Column(nullable = false)
  public String getHomeState() { return state; }
}

Audit/Inspection

architecture2.png LC1.png

Meta-model

architecture2.png LC2.png

Transformation to a UI component model I.

architecture2.png LC3.png

Transformation to a UI component model II.

architecture2.png LC3.png

Transformation to a UI component model III.

architecture2.png LC3.png

The generated UI

architecture2.png LC4.png

READ Summary

The Code preview

…already shown the Rich Entity

@Entity @Table(name = "personInfo")
public class PersonInfo {
   ...
  @UiUserRoles({"Admin","Owner"})
  @UiOrder(1) @Enumerated(EnumType.STRING)
  public Title getTitle() { return title; }

  @UiOrder(2) @Length(max=100)
  @NotEmpty @Column(nullable = false, length = 100)
  @Pattern(regex="^[^\\s].*",message="No spaces")
  public String getFirstName() { return firstName; }

  @UiOrder(8) @UiProfiles({"US"})
  @NotEmpty @Column(nullable = false)
  public String getHomeState() { return state; }
}
Notice that annotations address different aspects
Fields and annotations are subject of audit

…UI code "READ" call

<h1>Person Info Form</h1>
  ..
<af:ui instance="#{personHome.instance.personInfo}"
     layout="personInfo-layout"
     config="rich-config" edit="true"
     ignore="keywords clothingSizes" />
  ..
<h:commandButton action="#{controller.save}"
                  value="save"/>
Notice the instance and local context passed to the UI handler

…Aspect-like rules

<mapping>
 <type>String</type>
 <default tag="inputTextTag.xhtml" size="20"
   javaPattern="" minLength="0" maxLength="255" />

 <var name="Person.username" tag="emailTag.xhtml"/>
 <condition expression="${email == true}"
                   tag="emailTag.xhtml" />
 <condition expression="${password == true}"
                   tag="inputPasswordTag.xhtml" />
 <condition expression="${link == true}"
                   tag="inputLinkTag.xhtml" />
 <condition expression="${maxLength > 255}"
                   tag="inputTextAreaTag.xhtml" />
 ...
</mapping>
Example for String field
$ opens the EL environment to access context
We pick inputTextTag for the next slide

…Presentation template

<x:inputText id="#{prefix}$field$"
     label="#{text[`$entity$.$field$`]}"
      edit="#{empty edit$field.firstToUpper()$
         ? edit : edit$field.firstToUpper()$}"
     value="#{instance.$field$}"
  required="$required$"
      size="$size$"
   pattern="$pattern$"
 minlength="$minLength$"
 maxlength="$maxLength$"
     title="#{text[`title.$entity$.$field$`]}"
  rendered="#{empty render$field.firstToUpper()$
         ? 'true' : render$field.firstToUpper()$}"/>
Example for input text
$ opens the EL environment to access context

…Layout template

<table class="classLayout">
 <af:iteration-part maxOccurs="100">
   <tr>
      <td>$af:next$</td><td>$af:next$</td>
    </tr>
 </af:iteration-part>
 <tr>
   <td colspan="2" class="center">
          $af:agreeOnIcpcRules$
   </td>
 </tr>
</table>

Advantages of READ

Advantages I

Advantages II

Std. process: Developer implements in one space

Adv1.png

READ: Developer implements in multiple spaces

Adv2.png

READ in action

…basic form code with AspectFaces

<af:ui edit=”true" instance="#{selectedPerson}" />
plainForm.png 3-exampleRich.png

…layout form code with AspectFaces

<af:ui edit=”true"
     layout="person-layout.xhtml"
     instance="#{selectedPerson}" />
layoutForm.png

…restricted form code with AspectFaces

<af:ui edit="#{personManager.edit}"
     ignore=”email,notes"
     instance="#{selectedPerson}" />
Restricted2.png

…read-only fields form code with AspectFaces

<af:ui edit=”true"
     editFirstName=”false"
     editLastName=”false"
     instance="#{selectedPerson}" />
Ex3.png

…Multi-instance ; read-only form code with AspectFaces

<af:ui edit=”false” instance="#{person},#{organization}”/>
Ex4.png

…table code with AspectFaces

<p:dataTable value=“#{list}” var=“#{_p}”>
   <af:ui edit=“false” instance=“#{_p}”
       config=“pfTable” ignore=“..”
       entity=“com.my.model.Person” />
</p:dataTable>
Ex5.png

READ performance

…slow or not?

Is it slow?
No it’s not! performs pretty similar to what you are use to.
 (form with 6 fields)
Perf.png

READ perks

What to learn to use AspectFaces?

Prod uction                 experience

…does it work in production?

Yes!
Java EE 6 with 70 tables
Reduction of 32% of UI code
Prod.png

Try yourself

Showcase

Adaptive UI with minimum code

Normal case

SingleForm.png

How about more screen sizes?

2colForm.png 3colForm.png

How about different users?

Users1.png

Why not to support different users?

Users2.png

Why not to support different users?

Consider other constraints

Users4.png Users5.png Users6.png

Future work

Future work

Research

Please cite I ;)

Model-driven Rich Form Generation 2012, ČERNÝ T., SONG E. INFORMATION-AN INTERNATIONAL INTERDISCIPLINARY JOURNAL. 2012, vol. 15, no. 7, p. 2695-2714. ISSN 1343-4500.

UML-based Enhanced Rich Form Generation 2011,ČERNÝ T., SONG E. In Proceedings of the 2011 Research in Applied Computation Symposium (RACS 2011). New York: ACM, 2011, vol. 1, p. 192-199. ISBN 978-1-4503-1087-1.

Towards Smart User Interface Design 2012, ČERNÝ T., CHALUPA V., DONAHOO M. J. In Information Science and Applications (ICISA), 2012 International Conference on. New York: IEEE, 2012, p. 1-6. ISBN 978-1-4673-1402-2.

Please cite II ;)

Machine-driven Code Inspection to Reduce Restated Information 2012, ČERNÝ T., CHALUPA V., RYCHTECKÝ L., LINHART T. In Lecture Notes in Information Technology (LNIT). Newark, Delaware: Information Engineering Research Institute, 2012, vol. 1, p. 213-218. ISBN 978-1-61275-009-5.

Impact of user interface generation on maintenance 2012, ČERNÝ T., CHALUPA V., DONAHOO M. J. In Computer Science and Automation Engineering (CSAE), 2012 IEEE International Conference]. Beijing: IEEE, 2012, p. 621-625. ISBN 978-1-4673-0088-9.

Please cite III ;)

FormBuilder: A Novel Approach to Deal with View Development and Maintenance 2011, ČERNÝ T., DONAHOO M. J. In SofSem 2011 Proceedings of Student Research Forum. Bratislava: OKAT, 2011, p. 16-34. ISBN 978-80-88720-17-1.

A Profile Approach to Using UML Models for Rich Form Generation 2010, ČERNÝ T., SONG E. In ICISA 2010 International Conference on Information Science and Applications (ICISA), 2010. New York: IEEE Computer Society Press, 2010, p. 635-342. ISBN 978-1-4244-5941-4.