Creating an MVC style architecture.

This topic contains 5 replies, has 2 voices, and was last updated by cocon 1 year, 3 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts

December 19, 2017 at 6:51 pm #12376

cocon

Participant

I want to create some sort of MVC style architecture, where the Model is standalone as it is and the View as well.

The data section (the model) are supposed to be where the values are stored
The window should have it’s own elements (the view)
these two sections (the model and the view) are supposed for the one update the other, this logic is introduced in the ModelViewBinding class
Later on a container class that will hold all of the bindings (per string key and ModelViewBinding) can be created, but for now things are kept simple

If you have any ideas or suggestions about this one drop your answers.

December 20, 2017 at 8:58 am #12384

cocon

Participant

[Updated Post – I removed the noise from the first post and resulted to this one newest code example]

In this test I try to go with the Variant approach, more or less this is the code design I like the most. The only bummer in this case is when I do right click, it updates the model, but the changes are not transfered back to the textfield. Perhaps I might need to hold a reference to the GUI element as well?

#Import "<std>"
#Import "<mojo>"
#Import "<mojox>"

Using std..
Using mojo..
Using mojox..

Class Data Abstract
	Global First:String = "Hello"
End

Class ModelViewBinding
	Field Model:Variant
	Field View:Variant
	
	Method UpdateModel()
		Model = View
		Print("Model Updated: " + TraceVariant(Model))
		Print(Self)
	End
	
	Method UpdateView()
		View = Model
		Print("View Updated: " + TraceVariant(View))
		Print(Self)
	End
	
	Method SetModel(v:Variant, updateView:Bool = True)
		Model = v
		Print("Model Set: " + TraceVariant(Model))
		If updateView Then UpdateView()
	End
	
	Method SetView(v:Variant, updateModel:Bool = True)
		View = v
		Print("View Set: " + TraceVariant(View))
		If updateModel Then UpdateModel()
	End
	
	Method TraceVariant:String(v:Variant)
		If v.Type = Typeof<Bool>
			Return Cast<Bool>(v)
		Elseif v.Type = Typeof<Int>
			Return Cast<Int>(v)
		End
		
		Return Cast<String>(v)
	End
	
	Method To:String()
		If Model = Null Or View = Null Then Return ""
		Return "Model: " + TraceVariant(Model) + ", View: " + TraceVariant(View)
	End
End

Class MyWindow Extends Window
	Method New()
		Super.New("Example", 640, 480, WindowFlags.Resizable)
		
		Local textfield := New TextField
		Local button := New Button("Left Click - Update Model, Right Click - Update View")
		Local mainDock := New DockingView
		mainDock.AddView(textfield, "top")
		mainDock.AddView(button, "top")
		ContentView = mainDock
		
		Local bind := New ModelViewBinding
		bind.Model = Data.First
		bind.View = textfield.Text
		
		button.Clicked = Lambda()
			bind.SetModel(textfield.Text, False)
		End
		
		button.RightClicked = Lambda()
			bind.SetModel("Time: " + Millisecs(), True)
		End
		
	End
End

Function Main()
	
	New AppInstance
	New MyWindow
	App.Run()
End

#Import "<std>"

#Import "<mojo>"

#Import "<mojox>"

Using std..

Using mojo..

Using mojox..

Class Data Abstract

Global First:String = "Hello"

End

Class ModelViewBinding

Field Model:Variant

Field View:Variant

Method UpdateModel()

Model = View

Print("Model Updated: " + TraceVariant(Model))

Print(Self)

End

Method UpdateView()

View = Model

Print("View Updated: " + TraceVariant(View))

Print(Self)

End

Method SetModel(v:Variant, updateView:Bool = True)

Model = v

Print("Model Set: " + TraceVariant(Model))

If updateView Then UpdateView()

End

Method SetView(v:Variant, updateModel:Bool = True)

View = v

Print("View Set: " + TraceVariant(View))

If updateModel Then UpdateModel()

End

Method TraceVariant:String(v:Variant)

If v.Type = Typeof<Bool>

Return Cast<Bool>(v)

Elseif v.Type = Typeof<Int>

Return Cast<Int>(v)

End

Return Cast<String>(v)

End

Method To:String()

If Model = Null Or View = Null Then Return ""

Return "Model: " + TraceVariant(Model) + ", View: " + TraceVariant(View)

End

Class MyWindow Extends Window

Method New()

Super.New("Example", 640, 480, WindowFlags.Resizable)

Local textfield := New TextField

Local button := New Button("Left Click - Update Model, Right Click - Update View")

Local mainDock := New DockingView

mainDock.AddView(textfield, "top")

mainDock.AddView(button, "top")

ContentView = mainDock

Local bind := New ModelViewBinding

bind.Model = Data.First

bind.View = textfield.Text

button.Clicked = Lambda()

bind.SetModel(textfield.Text, False)

End

button.RightClicked = Lambda()

bind.SetModel("Time: " + Millisecs(), True)

End

Function Main()

New AppInstance

New MyWindow

App.Run()

End

December 21, 2017 at 4:56 pm #12397

nerobot

Participant

1. Usually ViewModel has links to model and view of concrete types, where the types are interface types.

2. View and model are classes, not plain data, so you should work with objects, not a plain properties like Text.

Model is like data provider, we ask it “get me a text” and it give it to us.

View is displayable element, that can notify ViewModel about events like text changing or mouse click, and ViewModel decides what to do.

Also VM may listen signals / changes of Model and update View.

Class TextModel Implements ITextModel
 Method GetText:String ()
 ....
 End
End

Class TextView Extends mojox.TextView Implements ITextView
 'Signals like OnClicked
 Method SetText(t:String)
  Text=t
 End
 'And getter...
End

Class TextViewModel
 Field model:ITextModel
 Field view:ITextView
 Method New (model,view)
  ' subscribes to needed model and view signals
 End
End

Class TextModel Implements ITextModel

Method GetText:String ()

....

End

Class TextView Extends mojox.TextView Implements ITextView

'Signals like OnClicked

Method SetText(t:String)

Text=t

End

'And getter...

End

Class TextViewModel

Field model:ITextModel

Field view:ITextView

Method New (model,view)

' subscribes to needed model and view signals

End

View is the only but it can be complex like DockingView with parents – and it always provide us needed methods via its interface. We just call method and view updates itself in proper way.

VM can contains many models to get / put data.

You never assing view to model or vice versa.. as I saw in your code.

December 24, 2017 at 2:26 pm #12439

cocon

Participant

I resulted into this sort of design. It looks a bit strange but there’s reason for doing it. I want to keep the entire model domain separated – and so on for the view domain. If I start to wrap my primitive datatypes with my own type system, I would probably connect the two domains in the core, while I want to connect them through a thin bridge.

Perhaps in this aspect you would assume I would simply have a manager function, with a beefed up select statement, that does straight value exchange from one place to the other. Well this is also one practical way of doing so, but for now it seems that this lambda approach gives the illusion of flexibility, because later I would create a Map-Database of such bindings ( Bindings:Map<String, Binding> ) in order to handle them by the large.

' the class that binds two function callbacks
Class Binding
	Field UpdateModel:Void()
	Field UpdateView:Void()
End

' setting up the function callbacks
bind.UpdateModel = Lambda()
	Data.Text = textfield.Text
End

bind.UpdateView = Lambda()
	textfield.Text = Data.Text
End

' updating the model
button.Clicked = Lambda()
	bind.UpdateModel()
End

' updating the view
Function SomethingHappens()
	bind.UpdateView()
End

' the class that binds two function callbacks

Class Binding

Field UpdateModel:Void()

Field UpdateView:Void()

End

' setting up the function callbacks

bind.UpdateModel = Lambda()

Data.Text = textfield.Text

End

bind.UpdateView = Lambda()

textfield.Text = Data.Text

End

' updating the model

button.Clicked = Lambda()

bind.UpdateModel()

End

' updating the view

Function SomethingHappens()

bind.UpdateView()

End

Lately I have started becoming anti-object oriented, that’s why I try to find functional or metaprogramming-reflection alternatives. In order to minimize declarations and such. However perhaps creating a full project that scales predictably perhaps needs a more streamlined approach as you suggest.

December 24, 2017 at 3:11 pm #12440

nerobot

Participant

In your case UpdateModel () and UpdateView () can became monstrous.

And also you can to subscribe on these events many times, I don’t know is it good.

And any small change for view or model entails full updating because you grab/set all changes in two single functions.

December 26, 2017 at 12:50 pm #12450

cocon

Participant

I would imagine only about repeating this concept about 20 times (for about a dozen of gui components). But for scalable code perhaps I will choose the architecture pattern instead. If in the future I will go that way I will post some new code.

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Creating an MVC style architecture.

Archives

Recent Replies

What is this?