Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Gwt.create - Presentation

531 visualizaciones

Publicado el

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

Publicado en: Software
  • Inicia sesión para ver los comentarios

  • Sé el primero en recomendar esto

Gwt.create - Presentation

  1. 1. 1 A CROSS-DEVICE WEB FOCUSED FRAMEWORK THIAGO R. BUSTAMANTE www.cruxframework.org
  2. 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. 3 Front-end Framework Secure and Reliable 100% Open Source Mantained by: What is Crux?
  4. 4. 4 Cross-device applications Simplified development Powerful API on the client’s side Why Crux?
  5. 5. Adaptive Components 5 Single Contract (Write only one code) Different screen sizes (Small or Large) Different interaction model (Touch, Mouse, Arrows)
  6. 6. Development Model 6 (MVC)
  7. 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. 8. Demo!
  9. 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. 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. 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. 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. 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. 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. 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. 16. Questions? 16 thiago.bustamante@triggolabs.com www.cruxframework.org Thiago Bustamante
  17. 17. Thanks. 17 Get in touch thiago.bustamante@triggolabs.com www.cruxframework.org Thiago Bustamante

×