There are 10 spirals in the [todo_mvc_spirals] (https://github.com/dzenanr/todo_mvc_spirals) project. After you clone the project, open the todo_mvc_spirals folder in Dart Editor (Figure 1).
![Alt Figure 1: todo_mvc_spirals] (/img/todo_mvc_s00/todo_mvc_spirals.png)
Figure 1: todo_mvc_spirals project.
Each spiral is a web application with the lib, test and web folders. The initial spiral is todo_mvc_s00 (Figure 2).
![Alt Figure 2: todo_mvc_s00] (/img/todo_mvc_s00/todo_mvc_s00.png)
Figure 2: todo_mvc_s00 spiral.
In the application’s root folder there is the pubspec.yaml file (Code 1). The application depends on the [dartling] (https://github.com/dzenanr/dartling) model framework.
Code 1: pubspec.yaml.
name: todo_mvc
author: Dzenan Ridjanovic <dzenanr@gmail.com>
homepage: http://ondart.me/
version: 0.0.1
description: >
Todo.Mvc is a demo, done with Dartling, of the TodoMVC project.
Based on TodoMVC in Dart.
Dartling is a domain model framework for web application prototypes.
A new dartling project is copied and adapted from dartling_skeleton.
dependencies:
dartling:
git: git://github.com/dzenanr/dartling.git
In Dart Editor, select the todo_mvc_s00 spiral and use the Tools menu. Click on Pub Install or on Pub Update, to get the last version of dartling.
The web application is run in Dartium by selecting the todo_mvc_web.html file, in the web/todo/mvc folder (Figure 3), and by using the Run menu.
![Alt Figure 3: todo_mvc_s00_web] (/img/todo_mvc_s00/todo_mvc_s00_web.png)
Figure 3: web folder.
There are only two tasks (or todos) in the model of the application (Figure 4).
![Alt Figure 4: home_page_tasks_todos] (/img/todo_mvc_s00/home_page_tasks_todos.png)
Figure 4: tasks (or todos).
The spiral 00 is created from the [dartling_skeleton] (https://github.com/dzenanr/dartling_skeleton) project. The rules how to create a new project in dartling from dartling_skeleton are outlined in the GitHub page of the dartling_skeleton project. The process is tedious because dartling is still only a client application. In [future] (https://docs.google.com/document/d/15rvqT1QOEusUniqNJOad-vwJDwRLombVmG3X87T6xkM/edit), a server version of dartling will create folders and files with appropriate names for the new project.
A dartling project has a repository with domains and models. In the todo_mvc application there is only one domain (Todo) and only one model (Mvc). In the lib, test and web folders, files are organized in domain and model folders. For example, the todo_mvc_web.html file is in the web/todo/mvc folder.
The application model (Figure 5) is designed in [Magic Boxes] (https://github.com/dzenanr/magic_boxes).
![Alt Figure 5: todo_mvc_s00_todo_mvc] (/img/todo_mvc_s00/todo_mvc.png)
Figure 5: todo_mvc model.
The [JSON] (http://www.json.org/) representation (Code 2) of the graphical model is displayed in Magic Boxes, coped and pasted into the lib/todo/mvc/json/model.dart file as a value of the todoMvcModelJson variable.
Code 2: model’s json.
var todoMvcModelJson = r'''
{
"width":990,
"lines":[
],
"height":580,
"boxes":[
{
"entry":true,
"name":"Task",
"x":162,
"y":147,
"width":80,
"height":80,
"items":[
{
"sequence":20,
"category":"required",
"name":"title",
"type":"String",
"init":""
},
{
"sequence":30,
"category":"required",
"name":"completed",
"type":"bool",
"init":"false"
}
]
}
]
}
''';
Finally, the initial code of the application is generated by running the test/todo/mvc/todo_mvc_gen.dart file (Code 3).
Code 3: code generation.
genCode() {
var repo = new Repo();
// change "Dartling" to "YourDomainName"
var todoDomain = new Domain("Todo");
// change dartling to yourDomainName
// change Skeleton to YourModelName
// change "Skeleton" to "YourModelName"
Model todoMvcModel =
fromMagicBoxes(todoMvcModelJson, todoDomain, "Mvc");
repo.domains.add(todoDomain);
repo.gen("todo_mvc");
}
initTodoData(TodoRepo todoRepo) {
var todoModels =
todoRepo.getDomainModels(TodoRepo.todoDomainCode);
var todoMvcEntries =
todoModels.getModelEntries(TodoRepo.todoMvcModelCode);
initTodoMvc(todoMvcEntries);
todoMvcEntries.display();
todoMvcEntries.displayJson();
}
void main() {
genCode();
var todoRepo = new TodoRepo();
initTodoData(todoRepo);
}
The two tasks are created in the lib/todo/mvc/init.dart file (Code 4).
Code 4: model initialization.
initTodoMvc(var entries) {
_initTasks(entries);
}
_initTasks(var entries) {
Task task1 = new Task(entries.tasks.concept);
task1.title = 'Design a model with Magic Boxes.';
entries.tasks.add(task1);
Task task2 = new Task(entries.tasks.concept);
task2.title = 'Generate JSON for thed model in Magic Boxes.';
entries.tasks.add(task2);
}
The code in the lib/gen folder (Figure 6) is generated by dartling and should not be changed by a programmer. The code may be regenerated by dartling if the model changes. The code in the lib/todo folder (Figure 6) is also generated by dartling, but it may be changed by a developer in order to add a value to the model.
![Alt Figure 6: todo_mvc_s00_lib] (/img/todo_mvc_s00/todo_mvc_s00_lib.png)
Figure 6: lib folder.
The gen folder has the todo folder where there are two Dart files, one for the domain’s repository and another for the models of the domain (in this project only one model). The mvc folder has the model’s entries (only one here). Also, for each concept in the model (here only one) there is a Dart file (here tasks.dart) with two abstract classes, one for a concept’s entity and another for a collection of the concept’s entities (Code 5).
Code 5: abstract entities.
abstract class TaskGen extends ConceptEntity<Task> {
TaskGen(Concept concept) : super.of(concept);
String get title => getAttribute("title");
set title(String a) => setAttribute("title", a);
bool get completed => getAttribute("completed");
set completed(bool a) => setAttribute("completed", a);
Task newEntity() => new Task(concept);
}
abstract class TasksGen extends Entities<Task> {
TasksGen(Concept concept) : super.of(concept);
Tasks newEntities() => new Tasks(concept);
}
The todo folder of the library folder (Figure 6) contains also the mvc folder. Both folders are generated by dartling together with some files, but only as the starting point for specific changes and additions. For each concept in the model (here only one) there is a Dart file with two specific classes that extend the corresponding abstract classes in the gen folder (Code 6). It is in those specific classes where additional code may be added by hand. In this way, even if the abstract classes are regenerated, the specific code is not lost. However, if the model changes there may be a need to update the specific classes.
Code 6: specific entities.
class Task extends TaskGen {
Task(Concept concept) : super(concept);
}
class Tasks extends TasksGen {
Tasks(Concept concept) : super(concept);
}
In summary, the graphical model of tasks (todos) is transformed in Magic Boxes into JSON and the code for the complete web application is generated by dartling. The model, initialized with some entities, becomes alive (currently read-only) in the web application. The todo_mvc_s00 spiral is just the starting point for further spirals.