[ALG] MVC: Hoe hierarchie/relaties toevoegen

[Verwijderd]

--- Achtergrond v.d. vraag ---

Ik ben bezig mij design patterns eigen te maken, zodat ik mijn applicaties wat beter op kan zetten. Voor de achtergrond: ik wil deze in verschillende programmeertalen gaan inzetten, zoals C#, Java en AS3.

Ik ben nu het e.e.a. aan het toepassen in AS3/Flex, omdat ik deze binnenkort wil inzetten om er een programma in te maken. Nu heb ik twee boeken doorgelezen over het e.e.a. en veel is me een stuk duidelijker geworden. Maar ik snap nog niet hoe ik de structuur tussen de MVC modellen het beste kan aanbrengen.

Ik heb hier in dit boek (in het bijzonder het vrij inzichtelijke hoofdstuk 12), geleerd hoe ik tussen/in de views hierarchie kan toebrengen. Maar ik snap het nog niet, voor als de objecten zelf ook structuur bevatten. Ik heb ook wat rond gegoogled, maar ik moet nog eerst een paar bomen kappen om het bos te kunnen zien


-- De eigenlijke vraag --

Stel ik het volgende netjes in een MVC model opzetten, hoe zorg ik ervoor dat de relaties tussen de objecten ook toegepast worden? (even in XML voor de duidelijkheid)

XML:

<Pagina Hoogte="297" Breedte="210" >
    <AfbeeldingsKader Hoogte="50" Breedte="100" X="20" Y="20">
          <Afbeelding />
    </AfbeeldingsKader>
</Pagina>

of in mxml:

XML:

<mx:Canvas height="297" width="210" backgroundColor="white" >
    <mx:Canvas height="50" width="100" x="20" y="20" backgroundColor="black">
        <mx:Canvas height="46" width="96" x="2" y="2" backgroundColor="blue" />
    </mx:Canvas>
</mx:Canvas>

Nogmaals, de views is me redelijk duidelijk, die kan een composite implementeren. Maar hoe gaat dit voor de models? Kan dit daar ook? Want de afbeelding is toch ook daar onderdeel van de pagina (has-a)?

[rewind.]

Ik weet niet of ik het helemaal snap maar volgens mij moet je ff zoeken naar HMVC

[Verwijderd]

Zonder design patterns probeer ik zeg maar het volgende te doen:

Flash ActionScript 3:

var pagina:Pagina = new Pagina();
var afbeeldingsKader:AfbeeldingsKader = new AfbeeldingsKader();
var afbeelding:Afbeelding = new Afbeelding();
        
pagina.addChild(afbeeldingsKader);
afbeeldingsKader.addChild(afbeelding);

En HMVC had ik al gevonden voordat ik dit poste, maar het euro-kwartje valt nog niet. Kan ik hetzelfde als bovenstaande, het addChild(), ook in het model-gedeelte doen? Dus een model als een child toevoegen op een ander model?

[Verwijderd]

Ik ben er over blijven nadenken, en ik denk dat ik het wederom beter begin te snappen. Momenteel leeft het volgende idee in mijn hoofd:
Ik kan een class diagram maken zoals ik dat normaal gewend ben, waarbij ik relaties aan breng tussen, bijvoorbeel het voorbeeld in deze thread, Pagina en Afbeelding(skader). Ik zorg dat deze observersable zijn, zodat andere objecten geupdate kunnen worden als er iets veranderd. Daarna zorg ik dat er iets alles in de gaten houdt, en als er b.v. aan de pagina een nieuw object wordt toegevoegd, deze ook een Controller en een View welke de pagina-view meekrijgt in de constructer om als child hierop de view te kunnen weergeven.
Correct?

Ik vraag me trouwens nu het volgende af, kan ik de views ook gebruiker om een code-view mee te maken? Met andere woorden, een textfile met representaties als in mijn start-thread, en die deze vervolgens ook update naar een andere GUI-view? (zeg maar een code en een design view zoals in de meeste IDEs). Of moet ik hiervoor een andere techniek voor gebruiken?
Kunnen jullie hierover ook wat buzz-woorden geven, zodat ik hier op kan zoeken? Heet dit een parser?

[Verwijderd]

Verwijderd schreef op donderdag 07 augustus 2008 @ 22:54:
Kunnen jullie hierover ook wat buzz-woorden geven, zodat ik hier op kan zoeken? Heet dit een parser?

Natuurlijk is 't een parser, maar da's nogal een breed begrip.
Zoeken op 'syntax highlight'zal je meer gerichte hits geven.

[mOrPhie]

Waarom zou het niet in code mogen? Het is -juist- zo dat je hierarchie in een model kunt uitlezen in de view en dynamisch (als je het zo wilt noemen) kunt renderen. MVC zegt niets over het statisch houden of dynamisch genereren van je view, louter dat je view geen business logica mag bevatten. Net zo goed dat de business logica eigenlijk niets mag dicteren over hoe de view gerenderd moet worden.

HMVC is volgens mij een pattern voor embedden van views in een andere view. Dat heeft niet zo zeer met controls op je view te maken volgens mij.

[Verwijderd]

Bedankt voor jullie replies. Het MVC model wordt met steeds duidelijker, en het lijkt me een ontzettend goed model dat ik voor veel dingen kan gebruiken!

Het lukt me ook beter om de hierarchie toe te voegen, en deze te onderhouden. Soms blijft het moeilijk waar ik precies een view moet toevoegen enzo, maar uiteindelijk lijkt het punt waarop ik ze toevoeg wel correct!


Ik probeer het model nu echter ook toe te passen in javascript, en het lukt me (op mijn eigen manier zelfs) bijzonder goed al! 1 dingetje kan ik echter nog niet bevatten:

Nieuw probleempje met MVC in javascript:
Het probleempje zit hem in de view:

JavaScript:

var TextLine_CheckBoxView = Class.create({
     initialize: function(model, controller, checkbox) {
         this.model = model;
         this.controller = controller;
         this.displayObject = checkbox;
         //De volgende regel heeft (logischerwijs) een verkeerde verwijzing naar de 'this' en dus 'controller' wanneer deze aangeroepen word
         this.displayObject.onclick = function() { this.controller.toggleExcluded() };
     },

    update: function() {
      this.displayObject.checked = this.model.excluded;
   }
});

Het gaat hier om de onClick van de checkbox. Ik wil het model via de controller b.v. excluden. De functie die ik mee geef voert ie wel uit (alert geeft ie keurig weer), maar logischerwijs is dit niet de juiste verwijzing naar mijn huidge View.Controller, maar naar de this.controller van de context op dat moment (die niet bestaat). Anders geformuleerd: 'this' is niet de juiste 'this'.

edit:
De 'this' is de checkbox op het moment van aanroepen om precies te zijn

Is er in javascript ook een manier om ook echt het bedoelde controller object aan te laten roepen?
(ps. ik gebruik prototype javascript)

[Orphix]

Zoek even op de functie createDelegate( .. ) dat zal je verder helpen.

Verder wil ik je erop wijzen dat MVC niet heilig is, het is een design pattern om grotere/complexere applicaties logisch te structuren. Dit brengt ook bagage met zich mee en voor kleinere applicaties, of kleine stukjes functionaliteit (bijvoorbeeld client-side javascript) is het niet altijd nodig dit toe te passen. Keep it simple. Misschien is het geheel gerechtvaardigt in jouw geval en is je javascript functionaliteit dusdanig uitgebreid dat het structuren volgens MVC een goede oplossing is, maar let er wel op.

[JKVA]

Verwijderd schreef op vrijdag 15 augustus 2008 @ 22:25:
Het gaat hier om de onClick van de checkbox. Ik wil het model via de controller b.v. excluden. De functie die ik mee geef voert ie wel uit (alert geeft ie keurig weer), maar logischerwijs is dit niet de juiste verwijzing naar mijn huidge View.Controller, maar naar de this.controller van de context op dat moment (die niet bestaat). Anders geformuleerd: 'this' is niet de juiste 'this'.

edit:
De 'this' is de checkbox op het moment van aanroepen om precies te zijn

Is er in javascript ook een manier om ook echt het bedoelde controller object aan te laten roepen?
(ps. ik gebruik prototype javascript)

Wat jij nodig hebt is een closure. Met prototypejs is dit gelukkig heel simpel.

Je gebruikt daarvoor de bind methode, waaraan je de function context meegeeft. Op het moment van klikken zal this wijzen naar je view object.

JavaScript:

var TextLine_CheckBoxView = Class.create({
     initialize: function(model, controller, checkbox) {
         this.model = model;
         this.controller = controller;
         this.displayObject = $(checkbox);
         //De volgende regel heeft (logischerwijs) een verkeerde verwijzing naar de 'this' en dus 'controller' wanneer deze aangeroepen word
         this.displayObject.observe("click", this.controller.toggleExcluded.bind(this));
     },

    update: function() {
      this.displayObject.checked = this.model.excluded;
   }
});

[Verwijderd]

Orphix schreef op zaterdag 16 augustus 2008 @ 00:28:
Verder wil ik je erop wijzen dat MVC niet heilig is, het is een design pattern om grotere/complexere applicaties logisch te structuren. Dit brengt ook bagage met zich mee en voor kleinere applicaties, of kleine stukjes functionaliteit (bijvoorbeeld client-side javascript) is het niet altijd nodig dit toe te passen. Keep it simple. Misschien is het geheel gerechtvaardigt in jouw geval en is je javascript functionaliteit dusdanig uitgebreid dat het structuren volgens MVC een goede oplossing is, maar let er wel op.

Dat ben ik met je eens. Echter denk ik dat in mijn geval het wel degelijk echt gerechtvaardigd zal zijn, omdat het toch een bijzonder uitgebreide en complexe interface wordt om data te kunnen visualiseren en bewerken. Zonder een lagen structuur zal het binnen de korste keren spaghetti worden.

JKVA schreef op zaterdag 16 augustus 2008 @ 14:17:
Wat jij nodig hebt is een closure. Met prototypejs is dit gelukkig heel simpel.

Je gebruikt daarvoor de bind methode, waaraan je de function context meegeeft. Op het moment van klikken zal this wijzen naar je view object.

JavaScript:

this.displayObject.observe("click", this.controller.toggleExcluded.bind(this));

Wat een briljante methode, deze doet inderdaad exact wat ik nodig heb Bedankt voor deze tip, ik was hem zelf helaas nog niet tegen gekomen in prototype.