- Dart:Scalable Application Development
- Davy Mitchell Sergey Akopkokhyants Ivo Balbaert
- 506字
- 2021-07-09 18:56:16
The next steps for the text editor
We have had some feedback on the text editor so far. Users like it and want more buttons, and the top priority is a word-count feature that displays a dialog with the current count. Customers have has indicated that they would like a powerful toolbar above the editor pane for a range of features. They like the pop-up dialog style, but say that the current one does not fit into the look of the application.
Starting point
Open the code sample for Chapter 2, Advancing the Editor texteditor
to see a slightly modified version of the project from the first chapter. It is not ready to run out of the box as we will add in a package
to deal with the dialog creation.
The text editor functionality has been moved into a separate file—our main.dart
was getting rather cluttered. My personal preference is to keep it as minimal as possible. The main.dart
now imports a file, editor.dart,
and the main function is used to connect the interface to the Editor
object, which now contains our functions as methods of the TextEditor
class.
Note
Dart is an object-orientated language like C# and Java. In object-orientated languages, objects can be defined as class declarations that typically group together variables and functions to model an aspect of a system. For more information on object-orientated programming, see https://en.wikipedia.org/wiki/Object-oriented_programming.
For example, web browsers have the document
and window
classes that can be accessed from JavaScript. These objects encapsulate aspects of the web page structure and web browser window in functions and properties.
Even if you have not written classes with JavaScript, you will likely have called functions and accessed properties on the built-in browser page objects such as the document.getElementById()
method and the document.body
property.
We have already encountered classes for HTML elements and event handlers. Dart has an advanced single-inheritance class system. Classes are declared with the class
keyword. The editor.dart
file has a class for the TextEditor
(an abbreviated version is shown below):
class TextEditor { final TextAreaElement theEditor; ... TextEditor(this.theEditor){ ... } ... }
The constructor is declared as the same name of the class, and we have a single parameter. Dart constructors have a convenient feature for directly setting member variables from the parameter declaration. This saves having a separate parameter that is only ever used to assign to the member variable. Without using this shorthand feature, the code would be as follows:
class TextEditor { final TextAreaElement theEditor; ... TextEditor(TextAreaElement theEditor){ this.theEditor = theEditor; } ... }
The field theEditor
is declared as final; this means it can only be assigned a value once in the lifetime of the application.
Structuring the project
Our new requirements are for two pop-up dialogs, and it sounds like we may need more. We need to build an HTML interface library to cover these needs. It is general-purpose, so can be used in many types of application. The rest of the application can go in the TextEditor
project.
- SPSS數據挖掘與案例分析應用實踐
- Mastering Zabbix(Second Edition)
- C語言程序設計實訓教程
- RTC程序設計:實時音視頻權威指南
- INSTANT CakePHP Starter
- Visual Basic程序設計教程
- Mastering Python High Performance
- 基于Swift語言的iOS App 商業實戰教程
- Python Data Analysis Cookbook
- Mastering Git
- 一塊面包板玩轉Arduino編程
- Unity 2018 Shaders and Effects Cookbook
- ArcGIS for Desktop Cookbook
- Practical GIS
- Building Business Websites with Squarespace 7(Second Edition)