Embed Size (px)
Citation preview
1
A CROSS-DEVICE WEB FOCUSED
FRAMEWORK
THIAGO R. BUSTAMANTE
www.cruxframework.org
First… Who am I?
2
Thiago da Rosa de Bustamante
Java Architect & Crux founder.
Master's Degree in Computer Science, UFMG – BR
BS in Computer Science, UFV - BR
3
Front-end
FrameworkSecure and
Reliable
100%
Open Source
Mantained by:
What is Crux?
4
Cross-device
applications
Simplified
development
Powerful API
on the client’s side
Why Crux?
Adaptive Components
5
Single Contract (Write only one code)
Different screen sizes (Small or Large)
Different interaction
model (Touch,
Mouse, Arrows)
Development Model
6
(MVC)
Lots of other features
7
Dependency Injection on ClientLocal
DatabaseREST
Offline
Support
Value BindingAnimations
(CSS3 / JS)
HTML5 APIs
Support
Open Social SupportBootstrap 2.0 / 3.0
Integration
Apache Cordova
Integration
Demo!
9
VIEW screen: main.view.xml
<v:viewxmlns="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
<v:viewxmlns="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></v:view>
VIEW screen: contact.view.xml
11
@Controller("contactInfoController")public class ContactInfoController{
@Injectpublic MainViewControllers mainControllers;
private boolean newRecord;
@Exposepublic 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
@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
@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 databasereturn result;
}
@GET@Path("all")public Contact[] getContacts(@QueryParam("start")int startRecord,
@QueryParam("size")int pageSize){
Contact[] result = null;// read the contact list from databasereturn result;
}
MODEL class: ContactService.java
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
@Controller("contactsController")public class ContactsController {
@Injectpublic ContactRestProxy contractService;
@Exposepublic void onCountContacts(final MeasureDataEvent<Contact> event){
contractService.countContacts(new Callback<Integer>(){
@Overridepublic void onSuccess(Integer result){
event.getSource().setSize(result);}
@Overridepublic void onError(Exception e){
MessageBox.show(e.getMessage(), MessageType.ERROR);}});
}
//...
CONTROLLER class: ContactController.java
