Presentation about Crux Framework on GWT.create Demo Stage, January 2015

1. 1
A CROSS-DEVICE WEB FOCUSED
FRAMEWORK
THIAGO R. BUSTAMANTE
www.cruxframework.org

2. First… Who am I?
2
Thiago da Rosa de Bustamante
Java Architect & Crux founder.
thiago.bustamante@triggolabs.com
Master's Degree in Computer Science, UFMG – BR
BS in Computer Science, UFV - BR

3. 3
Front-end
Framework
Secure and
Reliable
100%
Open Source
Mantained by:
What is Crux?

4. 4
Cross-device
applications
Simplified
development
Powerful API
on the client’s side
Why Crux?

5. Adaptive Components
5
Single Contract (Write only one code)
Different screen sizes (Small or Large)
Different interaction
model (Touch,
Mouse, Arrows)

6. Development Model
6
(MVC)

7. Lots of other features
7
Dependency Injection on Client
Local
Database
REST
Offline
Support
Value Binding
Animations
(CSS3 / JS)
HTML5 APIs
Support
Open Social Support
Bootstrap 2.0 / 3.0
Integration
Apache Cordova
Integration

8. Demo!

9. 9
VIEW screen: main.view.xml
<v:view
xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="http://www.cruxframework.org/view"
xmlns:faces="http://www.cruxframework.org/crux/smart-faces"
title="${messages.myContacts}"
useController="contactsController">
<faces:label id="title" text="${messages.myContacts}"/>
<faces:widgetList id="contacts" pageSize="25" >
<faces:lazyDataProvider onFetchData="contactsController.onFetchContacts"
onMeasureData="contactsController.onCountContacts"
dataObject="contact" autoLoadData="true"/>
<faces:widget>
<faces:label id="contactLabel" text="@{contact.lastName}, @{contact.firstName}"
onSelect="contactsController.onSelectContact"/>
</faces:widget>
</faces:widgetList>
<faces:navPanel id="controlPanel">
<faces:button id="edit" text="${messages.editContact}"
onSelect="contactsController.editContact"/>
<faces:button id="remove" text="${messages.removeContact}"
onSelect="contactsController.removeContact"/>
....
</faces:navPanel>
</v:view>

10. 10
<v:view
xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="http://www.cruxframework.org/view"
xmlns:crux="http://www.cruxframework.org/crux/widgets"
xmlns:gwt="http://www.cruxframework.org/crux/gwt"
xmlns:faces="http://www.cruxframework.org/crux/smart-faces"
useController="contactInfoController"
onLoad="contactInfoController.onLoad"
title="${messages.contactInfo}">
<crux:formDisplay id="contactForm">
<crux:entry label="${messages.firstName}" horizontalAlignment="right">
<gwt:textBox id="txtFirstName" value="@{contact.firstName}" />
</crux:entry>
<crux:entry label="${messages.lastName}" horizontalAlignment="right">
<gwt:textBox id="txtLastName" value="@{contact.lastName}" />
</crux:entry>
<crux:entry label="${messages.email}" horizontalAlignment="right">
<gwt:textBox id="txtEmail" value="@{contact.email}" />
</crux:entry>
<crux:entry>
<faces:navPanel id="btnPanel" style="text-align:center;">
<faces:button id="btnSave" text="${messages.save}"
onSelect="contactInfoController.saveAddOrUpdate" />
<faces:button id="btnCancel" text="${messages.cancel}"
onSelect="contactInfoController.cancel"
/>
</faces:navPanel>
</crux:entry>
</crux:formDisplay>
VIEW screen: contact.view.xml

11. 11
@Controller("contactInfoController")
public class ContactInfoController
{
@Inject
public MainViewControllers mainControllers;
private boolean newRecord;
@Expose
public void onLoad(ViewLoadEvent event)
{
Contact contact = event.getParameterObject();
newRecord = contact == null;
if (!newRecord)
{
View.of(this).write(contact);
}
}
private Contact getContact()
{
return View.of(this).read(Contact.class);
}
//...
CONTROLLER class: ContactInfoController.java

12. 12
@DataObject("contact")
public class Contact implements Serializable
{
private static final long serialVersionUID = -848444894214013789L;
private String firstName;
private String lastName;
private String email;
public Contact()
{
}
public Contact(String firstName, String lastName, String email)
{
this.firstName = firstName;
this.lastName = lastName;
this.email = email;
}
// getters and setters...
MODEL class: Contact.java

13. 13
@RestService("contactService")
@Path("contact")
public class ContactService
{
@GET(cacheTime=GET.ONE_DAY)
@Path("size")
public Integer countContacts()
{
int result = 0;
// read the contact list size from database
return result;
}
@GET
@Path("all")
public Contact[] getContacts(@QueryParam("start")int startRecord,
@QueryParam("size")int pageSize)
{
Contact[] result = null;
// read the contact list from database
return result;
}
MODEL class: ContactService.java

14. 14
@TargetRestService("contactService")
public interface ContactRestProxy extends RestProxy
{
void countContacts(Callback<Integer> callback);
void getContacts(int startRecord, int pageSize, Callback<List<Contact>> callback);
}
MODEL class: ContactRestProxy.java

15. 15
@Controller("contactsController")
public class ContactsController
{
@Inject
public ContactRestProxy contractService;
@Expose
public void onCountContacts(final MeasureDataEvent<Contact> event)
{
contractService.countContacts(new Callback<Integer>()
{
@Override
public void onSuccess(Integer result)
{
event.getSource().setSize(result);
}
@Override
public void onError(Exception e)
{
MessageBox.show(e.getMessage(), MessageType.ERROR);
}
});
}
//...
CONTROLLER class: ContactController.java

16. Questions?
16
thiago.bustamante@triggolabs.com
www.cruxframework.org
Thiago Bustamante

17. Thanks.
17
Get in touch
thiago.bustamante@triggolabs.com
www.cruxframework.org
Thiago Bustamante