Oracle JET – primeiro CRUD

Neste post irei demonstrar como criar um CRUD utilizando Rest e o Oracle JET.

Instalações e configurações necessárias para o Oracle JET:

Passos:

1-) Instalando o npm:

sudo apt-get install npm

2-) Atualizar o nodejs:

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

3-) Setup necessário para o OracleJET

sudo npm -g install yo grunt-cli
sudo npm -g install generator-oraclejet

4-) Criar a estrutura do projeto:
yo oraclejet MyRestTest --template=basic

5-) Executando o projeto

cd MyRestTest
grunt build
grunt serve

Referencia: OracleJET – Get Started

Com o template gerado, peguei como referencia o html e o JavaScript do cookbook para gerar a minha pagina.

Referencia Simple Table using knockout observableArray data

O exemplo utiliza conteúdo estático para o preenchimento da tabela, eu gerei um serviço Rest, para o CRUD de um contato. Com isso no JavaScript, acrescentei a referencia para a biblioteca 'ojs/ojmodel'.

Caso queira saber como gerar um serviço Rest, fica o link do post que fiz utilizando o Spring Boot e o IntelliJ.

ContactController:

package br.com.sugahara.myrestproject.controller;

import br.com.sugahara.MyRestProject.controller.response.Contact;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by leonardo on 20/05/17.
 */
@RestController
@RequestMapping("/contact")
public class ContactController {

    private List<Contact> listContact;

    public ContactController(){
        this.listContact = new ArrayList<Contact>();
        listContact.add(new Contact(1, "Nethba","Dadon","+5511999999999"));
        listContact.add(new Contact(2, "Sigly","Mitda","+5511888888888"));
        listContact.add(new Contact(3, "Maar","Herema","+5511888888888"));
        listContact.add(new Contact(4, "Rethelm","Phereal","+5511888888888"));

    }

    @CrossOrigin(origins = "http://localhost:8000")
    @GetMapping("/contacts")
    public List<Contact> getContacts(@RequestParam(required=false) Integer contactId){

        return listContact;
    }

    @CrossOrigin(origins = "http://localhost:8000")
    @PostMapping("/contacts")
    public Contact postContacts(@RequestBody(required=true) Contact contact){
        contact.setContactId(listContact.size()+1);
        listContact.add(contact);
        return contact;
    }

    @CrossOrigin(origins = "http://localhost:8000")
    @PutMapping("/contacts/{contactId}")
    public Contact putContacts(@PathVariable("contactId") Integer contactId,@RequestBody(required=true) Contact contact){
        contact.setContactId(contactId);
        for(Contact c : listContact ){
            if(c.getContactId() == contact.getContactId()){
                //c = contact;
                c.setFirstName(contact.getFirstName());
                c.setLastName(contact.getLastName());
                c.setCellphone(contact.getCellphone());
                break;
            }
        }

        return contact;
    }

    @CrossOrigin(origins = "http://localhost:8000")
    @DeleteMapping("/contacts/{contactId}")
    public Integer deleteContacts(@PathVariable("contactId") Integer contactId){

        for(Contact c : listContact ){
            if(c.getContactId() == contactId){
                listContact.remove(c);
                break;
            }
        }

        return contactId;
    }
} 

Contact:

package br.com.sugahara.myrestproject.controller.response;

import java.io.Serializable;

/**
 * Created by leonardo on 22/05/17.
 */
public class Contact implements Serializable {

    private Integer contactId;
    private String firstName;
    private String lastName;
    private String cellphone;

    public Contact() {
    }

    public Contact(Integer contactId, String firstName, String lastName, String cellphone) {
        this.contactId = contactId;
        this.firstName = firstName;
        this.lastName = lastName;
        this.cellphone = cellphone;
    }

    public Integer getContactId() {
        return contactId;
    }

    public void setContactId(Integer contactId) {
        this.contactId = contactId;
    }

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public String getCellphone() {
        return cellphone;
    }

    public void setCellphone(String cellphone) {
        this.cellphone = cellphone;
    }
} 

Criando a pagina

1-) Crie os diretórios "views" e "viewModels" na seguinte estrutura:

2-) Em views, crie o arquivo contact.html, com o seguinte conteúdo:

<div id="tableDemo" class="oj-flex oj-flex-items-pad">
    <div class="oj-xl-8 oj-lg-8 oj-md-6 oj-flex-item">
        <table id="table" summary="Contact List" aria-label="Contacts Table"
               data-bind="
                          ojComponent: {component: 'ojTable',
                                    beforeCurrentRow: currentRowListener,
                                    data: datasource,
                                    columnsDefault: {sortable: 'none'},
                                    columns: [{headerText: 'Contact Id',
                                               field: 'contactId'},
                                              {headerText: 'First Name',
                                               field: 'firstName'},
                                              {headerText: 'Last Name',
                                               field: 'lastName'},
                                              {headerText: 'Cellphone',
                                               field: 'cellphone'}]}">
        </table>
    </div>
    <div class="oj-xl-4 oj-lg-4 oj-md-6 oj-flex-item">
        <div class="oj-flex oj-flex-items-pad">
            <div class="oj-flex-item deprecated-col-default-width">
                <label for="spinnercontrol">Contact Id</label>
            </div>
            <div class="oj-flex-item deprecated-col-default-width">
                <input id="contactIdInput"
                       data-bind="ojComponent: {
                       component: 'ojInputNumber',
                       max: 2000, min: 0, step: 1, value: inputContactId}"/>
            </div>
        </div>
        <div class="oj-flex oj-flex-items-pad">
            <div class="oj-flex-item deprecated-col-default-width">
                <label for="inputcontrol">First Name</label>
            </div>
            <div class="oj-flex-item deprecated-col-default-width">
                <input id="firstNameInput"
                       data-bind="ojComponent: {
                       component: 'ojInputText',
                       value: inputFirstName}"/>
            </div>
        </div>
        <div class="oj-flex oj-flex-items-pad">
            <div class="oj-flex-item deprecated-col-default-width">
                <label for="spinnercontrol">Last Name</label>
            </div>
            <div class="oj-flex-item deprecated-col-default-width">
                <input id="lastNameInput"
                       data-bind="ojComponent: {
                       component: 'ojInputText',
                       value: inputLastName}"/>
            </div>
        </div>
        <div class="oj-flex oj-flex-items-pad">
            <div class="oj-flex-item deprecated-col-default-width">
                <label for="spinnercontrol">Cellphone</label>
            </div>
            <div class="oj-flex-item deprecated-col-default-width">
                <input id="cellphoneInput"
                       data-bind="ojComponent: {
                       component: 'ojInputText',
                       value: inputCellphone}"/>
            </div>
        </div>
        <div class="oj-flex oj-flex-items-pad">
            <button id="addbutton"
                    data-bind="click: addRow,
                    ojComponent: { component: 'ojButton', label: 'Add to end' }">
            </button>

            <button id="updateButton"
                    data-bind="click: updateRow,
                    ojComponent: { component: 'ojButton', label: 'Update' }">
            </button>
            <button id="removeButton"
                    data-bind="click: removeRow,
                    ojComponent: { component: 'ojButton', label: 'Remove' }">
            </button>
        </div>
    </div>
</div>

3-) Em viewModels crie o arquivo contact.js, com o seguinte conteúdo:

define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'promise', 'ojs/ojinputtext', 'ojs/ojinputnumber', 'ojs/ojtable', 'ojs/ojarraytabledatasource','ojs/ojmodel'],
function(oj, ko, $)
{
  function contactViewModel()
  {
    var self = this;

    self.ContCol = ko.observable();
    self.datasource = ko.observable();
    var contactArray = [];
     self.contactObservableArray = ko.observableArray(contactArray);

    self.serviceURL = 'http://localhost:8090/contact/contacts';
    self.parseContact = function(response) {
        return {contactId: response['contactId'],
                firstName: response['firstName'],
                lastName: response['lastName'],
                cellphone: response['cellphone']};
        };
    self.Contact = oj.Model.extend({
                urlRoot: self.serviceURL,
                parse: self.parseContact,
                parseSave: self.parseContact,
                idAttribute: 'contactId'
    });

    self.myCont = new self.Contact();
    self.ContCollection = oj.Collection.extend({
                url: self.serviceURL,
                model: self.myCont
    });

    self.ContCol(new self.ContCollection());

    self.ContCol().fetch({
                    success: function(model, response, options) {
                        for(x=0;x<response.length;x++){
                           self.contactObservableArray.push(response[x]);
                           console.log("Load contacts success");
                        }
                    },
                    error: function(model, xhr, options) {
                         console.log("Load contacts error");
                    }
    });

    self.datasource = new oj.ArrayTableDataSource(self.contactObservableArray, {idAttribute: 'contactId'});

    /** ADD ROW BUTTON **/
    self.addRow = function()
    {
        var addCon = new self.Contact();

        addCon.save({'firstName': self.inputFirstName(),
                     'lastName': self.inputLastName(),
                     'cellphone': self.inputCellphone()},{
                        success: function(model, response, options) {
                            self.contactObservableArray.push(response);
                            console.log("Save contact success");
                        },
                        error: function(model, xhr, options) {
                             console.log("Save contact error");
                        }
        });

    };

    /** UPDATE ROW BUTTON **/
    self.updateRow = function()
    {
        var currentRow = $('#table').ojTable('option', 'currentRow');

        var updateCon = new self.Contact();

        if (currentRow != null){
            updateCon.save({'contactId': self.inputContactId(),
                            'firstName': self.inputFirstName(),
                            'lastName': self.inputLastName(),
                            'cellphone': self.inputCellphone()},{
                                success: function(model, response, options) {
                                    self.contactObservableArray.splice(currentRow['rowIndex'], 1,response);
                                    console.log("Update contact success");
                                },
                                error: function(model, xhr, options) {
                                     console.log("Update contact error");
                                }
            });
        }
    };

    /** DELETE ROW BUTTON **/
    self.removeRow = function()
    {
        var currentRow = $('#table').ojTable('option', 'currentRow');

        if (currentRow != null)
        {

            var destroyContact = self.contactObservableArray()[currentRow['rowIndex']];
            var deleteCon = new self.Contact({'contactId': destroyContact.contactId});

            deleteCon.destroy({
                               success: function(model, response, options) {
                                    self.contactObservableArray.splice(currentRow['rowIndex'], 1);
                                    console.log("Delete contact success");
                               },
                               error: function(model, xhr, options) {
                                    console.log("Delete contact error");
                               }
            });
        }
    };


    self.inputContactId = ko.observable();
    self.inputFirstName = ko.observable();
    self.inputLastName = ko.observable();
    self.inputCellphone = ko.observable();
  }
  var cvm = new contactViewModel;

  /** CURRENT ROW LISTENER **/
  self.currentRowListener = function (event,ui) {

      var currentRow = cvm.contactObservableArray()[ui.currentRow['rowIndex']];
      cvm.inputContactId(currentRow.contactId);
      cvm.inputFirstName(currentRow.firstName);
      cvm.inputLastName(currentRow.lastName);
      cvm.inputCellphone(currentRow.cellphone);

    }

  return cvm;
});

4-) Abra o arquivo index.html e acrescente a div para referenciar a pagina que foi criada.

5-) Teste: