Alkalmazások fejlesztése

11. előadás

Horváth Győző
Egyetemi adjunktus
1117 Budapest, Pázmány Péter sétány 1/c., 2.420-as szoba
Tel: (1) 372-2500/1816
horvath.gyozo@inf.elte.hu

Eddig

• Ember.js
• Fejlesztői környezet előállítása
• Router, Route, sablonok
• Komponensek
• (Ember.Object)
• Adatok lefele

Tartalomjegyzék

• Eseménykezelés, akciók
• CRUD műveletek
• Űrlapvalidáció

CRUD műveletek

Feladat

Készítsd el a hibakezeléshez tartozó CRUD műveleteket!

• Lista (/errors/list)
• Egy hiba megjelenítése (/errors/:id)
• Hiba létrehozása (/errors/list/new)
• Módosítása (/errors/edit/:id)
• Törlése

Megjelenítés

export default Ember.Route.extend({
    model(params) {
        // console.log(params)
        return this.store.findRecord('error', params.error_id);
    }
});

Sablon

{{error-detail error=model}}

error-detail komponens

<dl class="dl-horizontal">
  <dt>id</dt>
  <dd>{{error.id}}</dd>
  <dt>Hely</dt>
  <dd>{{error.location}}</dd>
  <dt>Leírás</dt>
  <dd>{{error.description}}</dd>
</dl>
{{link-to "Vissza" "errors.list" class="btn btn-default"}}

Új hiba

Sablon

<div class="page-header">
    <h1>Új hiba bejelentése</h1>
</div>

{{error-form onSave=(action "newError")}}

Controller

export default Ember.Controller.extend({
    actions: {
        newError(properties) {
            console.log(properties)
        }
    }
});

error-form komponens

Ld. a szerveroldali alkalmazás űrlapját

error-form komponens

import Ember from 'ember';

export default Ember.Component.extend({
    errors: Ember.Object.create(),
    hasErrors: false,
    
    actions: {
        submit() {
            // ...
        },
    },
    
    validate() {
        
    }
});

edit route

Sablon

{{error-form error=model onSave=(action "saveError")}}

Route

export default Ember.Route.extend({
    model(params) {
        return this.store.findRecord('error', params.error_id);
    },
});

Controller

export default Ember.Controller.extend({
    actions: {
        saveError(properties) {
            console.log(properties)
        }
    }
});

Törlés

error-list komponens

export default Ember.Component.extend({
    actions: {
        deleteError(error) {
            console.log(error);
            
        }
    }
});

Feladatok

Vegyél fel üzeneteket a hibákhoz! Ld. ember-data relációi.

Modális dialógusablak

Komponenssablon

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">{{title}}</h4>
      </div>
      <div class="modal-body">
        {{yield}}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" {{action 'ok'}}>OK</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Komponensosztály

export default Ember.Component.extend({
  show: function() {
    this.$('.modal').modal();
  }.on('didInsertElement')
});

Használat

{{#my-modal title="My modal #1"}}
  This is the content of my modal #1
{{/my-modal}}

Application sablon

{{outlet}}
{{outlet 'modal'}}

ApplicationRoute

ember g route application

export default Ember.Route.extend({
  actions: {
    showModal: function(name, controller, model) {
      this.render(name, {
        into: 'application',
        outlet: 'modal',
        controller: controller,
        model: model
      });
    },
    removeModal: function() {
      this.disconnectOutlet({
        outlet: 'modal',
        parentView: 'application'
      });
    },
  }
});

Application sablon

/templates/application.hbs --> pods/application/template.hbs

Komponens

export default Ember.Component.extend({
  actions: {
    ok: function() {
      this.$('.modal').modal('hide');
      this.sendAction('ok');
    }
  },
  show: function() {
    this.$('.modal').modal().on('hidden.bs.modal', function() {
      this.sendAction('close');
    }.bind(this));
  }.on('didInsertElement')
});

Sablon

ember g template logout-modal

{{#my-modal title='Logout' ok='logout' close='removeModal'}}
  Are you sure you want to logout?
{{/my-modal}}

Használat (példa)

App.LogoutModalController = Ember.Controller.extend({
  actions: {
    logout: function() {
      alert('logout');
    }
  }
});

<button {{action 'showModal' 'logout-modal'}}>logout</button>

Feladat

Oldd meg az új hiba felvételét felugró ablakkal!

errors/list sablon (gomb, felugró ablak hívása)

<button {{action "showModal" "new-error-modal" "errors.list"}} class="btn btn-default">Új hiba felvitele</button>

new-error-modal sablon

{{#modal-dialog title="Új hiba" close="removeModal"}}
  {{new-error-form onSave=(action "newError")}}
{{/modal-dialog}}

errors/list controller

export default Ember.Controller.extend({
    actions: {
        newError(formData) {
            /* ... */
        },
    }
});