Morfik 07 - The IDE
From Morfikwiki.com
One of the major elements that separate a modern development platform from a simple compiler is the existence of an Integrated Development Environment, also known as an IDE. The IDE offers the software developer major performance gains in the process of creating a new application because it ties together several tools that previously had to be used together but were in no way connected, such as a text editor, a compiler, a linker and a debugger.
Since the introduction of tools such as SQLWindows, Powerbuilder, Visual Basic and Delphi the reference for what an IDE should look like has been raised to a much higher standard than those of popular tools such as Turbo Pascal which were, at one time, the standard to follow.
IDEs evolved into what we now call Visual Development Environments but are still generally known by the same three letter acronym. Visual Development Environments now offer tools that allow for the visual creation of application elements without the need for hand coding.
Morfik offers a very sophisticated IDE which combines all the features that developers have come to expect from development tools in order to be productive, in the WebOS AppsBuilder.
Contents |
[edit] Getting Started
When you first load the Morfik IDE, the first thing you will notice is that it starts up displaying some information to help you get started quickly. As you can see in Figure 1, you are presented with options to create a new project or to open one that already exists. Below those options is a short list of projects which you have worked on recently so that you can click on them and avoid the hassle of having to go through a file open dialog and navigate through folders until you find the desired project file.
Figure 1 - The Morfik IDE at startup
In Figure 1, the IDE is offering the option of opening two projects on which I had worked recently - the BasicNewFeatures and Northwind Projects.
[edit] Creating a New Project
For our purposes we will start up by creating a new project in order to get past this welcome screen and see what the IDE looks like when we are actually working with it. So you should click on the "Create a New Project" option. On doing so you are prompted to enter a series of choices, through the use of wizard.
Please follow through with the steps shown in this section. We will be creating a project called Contacts which will be used again as an example in several places, in future chapters.
Figure 2 - New Project Wizard with the Intermediate level selected.
Figure 3 - New Project Wizard asks for a project name.
The default suggested name for a project is Project1.mxs. Please create a project called Contacts.mxs, instead.
Figure 4 - New Project Wizard offers choice of project types.
At this point we are only going to be working with AppsBuilder type projects which allow for visual development.
Figure 5 - New Project Wizard asks if project should be created in a new folder.
It is highly recommended that new projects be created within a new folder. Although this is not necessary, it makes for easier project management later, when you have many different projects.
Figure 6 - New Project Wizard asks about which storage model to use.
Morfik supports two different ways of storing project source files: embedded or individual. Sources files can either be stored as embedded files in the main project file, or as individual files which are referenced by the main project file. The advantage of embedding the files is simplicity, while the other method is better suited for use with source-code management systems such as CVS. So, if you are working by yourself on a small project and are not making use of a Version Control System, you should probably use the Embedded option. If you are, on the contrary, working as part of team on a larger project, you will probably prefer to store the files separately for use with your team’s Version Control System. In either case, you will be able to convert at any time from one mode to the other through the "Convert Project" command in the File menu.
Figure 7 - New Project Wizard offers choice of default programming
language for the new project.
Here you can select your preferred Morfik programming language. Remember that Morfik languages target the web platform and while syntactically similar to the original language are semantically different and do not use the original run time libraries or frameworks.
The programming language that you choose at this point is merely the default programming language for the project. Morfik has the flexibility to allow you to choose different language syntaxes for different Forms and Modules within the same project! For this project I have selected Basic as the default.
Figure 8 - New Project Wizard offers choice of default programming
language for the new project.
Choosing the character set of your project is an important step since it defines which languages you will be able to support. The default value is iso-8859-1.
Figure 9 – The New Project Wizard is complete and will create the new project.
At this point you will have created a new project and will be able to start working with it inside the Morfik AppsBuilder IDE.
[edit] First Impressions
The first impression you generally have when looking at the Morfik IDE for the first time is that it is very similar to the Microsoft Access environment. The Morfik IDE also employs a list of application objects as the central work nexus for the IDE. From this place a developer can have quick access to all the components of his or her application.
Figure 10 - Starting point. The forms view in the Project Designer shows all forms used in the project.
A Morfik project can be stored inside a single file. All components, such as forms, reports, web services and modules, are, in this case, stored along with queries and code in a database, in a way that is similar to the way that Microsoft’s Access database application stores its modules in databases.
[edit] The Project Designer
The Project Designer is the main view you see as soon as you create or open a project in the Morfik IDE. This view has a vertical bar with icons for each kind of document/file the IDE works with. Clicking on one of these icons filters the list to show only items of that specific kind.
Figure 11 - The Project Designer’s Tables view, showing the
System Bar on the left.
You can change the Project Designer’s bar from Documents to System and then back by clicking on the title tabs that appear in it. If you select the System bar, you will find an option to enter the Relationships View which will allow you to see all relationships between tables in the project’s integrated database. We will look into this in more detail in chapter 3. If you have selected Debug Intermediate Code in the Debug Options dialog, you will see a Debug Bar, as well.
[edit] The Forms Designer
It is in the Morfik IDE’s Forms Designer that you as an application developer will create your application’s entire interface, without having to write a single line of html code. Bear in mind that Morfik’s goal is not to allow you to create applications without knowing how to program or to write code, but to allow you do so without knowledge of "Web-specific" technology. This means that in addition to designing your basic interface in the Forms Designer you will be writing code just as you would do with tools for Windows application development.
In Figure 12 you can see the Forms Designer as it appears to you when you open a form for editing. In this case the IDE is showing the Index default form for my Contacts project. (Don’t worry about all the contents on the page – we will look at these in Chapter 5.)
Figure 12 - Forms Designer showing the Index form for the Contacts project.
Note that the Forms Designer offers you a "band" oriented design philosophy, allowing you to work in a way that is at the same time, oddly enough, form oriented and page oriented. You design forms that fit together, inside other forms, to create web pages. In the example show in Figure 12, you have a form that has both a header and a footer band, in addition to the main details band. Additional pairs of bands can be nested to generate the desired effect, through the use of Grouping and Sorting options. We will go into more detail about these options in Chapter 5 - Working With Forms. This bands concept is something more traditionally associated with reports, but when you combine that with interactive forms, and then add nesting, you will be amazed at what can be done.
In order to give you an overview of how the Forms Designer works and how it integrates with the code you need to write for your application, I will take a small detour from our chosen example in order to do a simple form that changes the color of a text in response to the users click on a button. This is a very basic example and I will not use it again in the book but I encourage you to try it out in order to better familiarize yourself with the workings of the IDE.
In this example I will use just two components placed directly into the project’s default Index form: a Button and a TextLabel. I have called the project Basic Form and you can see in Figure 13 what the Index should look like. Before you add anything, I suggest you save the project so that you can revert to the saved version and discard these changes.
Our goal here is to click on a button and get some other text to change color. To do this we need to set the text’s initial font color to black ($000000 in Morfik Basic) and write some code for the button’s OnClick Event. You can change the TextLabel’s font color through the Properties Window which can be called up by clicking on the Properties tab on the left side of the IDE’s main window or through the F11 key. You can see this being done in Figure 14.
Figure 13 - The Basic Form project’s default Index form with two components added.
Figure 14 - Changing the TextLabel’s initial font color to black.
On the left side of the screen, in Figure 14, you can see the Properties Window with a color dropdown allowing the color or the TextLabel component’s property to be changed. In the Event tab of the Properties Window you will find all the events for which you can write code, in the control you are currently configuring. Double clicking on the empty field besides the event name will automatically create a stub for the desired event and take you to it in the code editor.
Notice that on the title bar of the Properties Window there is a small icon representing a "pin". By clicking on this small icon you can "pin" and "unpin" the Properties Window. While the Windows is "pinned" it will stay visible and displace the Forms Designer to the right, while "unpinned" it will float in from the left hiding part of the Forms Designer while it is in use.
While working in the IDE’s Forms Designer you will always have three tabs at the bottom. The first one is named Designer and it selects the view you use to actually design your applications interface while the other two tabs will take you into the code for your application. One will take you to the browser side code and the other to the server side code.
In our Basic Form example no server side code was necessary. Everything was done directly in the browser and no html code whatsoever was used. Listing 1 shows you the Morfik Basic code for this quick sample.
Listing 1 - Browser side code (in Morfik Basic) for the Index form of the Basic Form example.
Namespace Index
Public Class Index
Inherits Form
Published changer As Button
Published [Changing Text] As TextLabel
Published Message Sub changerClick(Event As TDOMEvent)
If [Changing Text].FontColor = $000000 then
[Changing Text].FontColor = $00FF00
Else
[Changing Text].FontColor = $000000
End If
End Sub
End Class
End Namespace
Once you have finished the application, Press F9 to run it. (Application execution is explained in more detail later in the book. But for now, we want to see our application working).
In Figure 15 you can see the Basic Form example application running in Internet Explorer. In this view the button has already been clicked on and the TextLabel’s font color is already green. By clicking repeatedly on the Change button the font color will continuously alternate between black and green.
Figure 15 - The Basic Form example application running in Internet Explorer.
Once you are done, delete the text button and text as well as the code generated for the browser, or if you saved before you started, revert back to the original version. We will add new things to the project in subsequent chapters. For now, let’s continue on our exploration of the IDE.
[edit] The Report Designer
In many ways the Report Designer is very similar to the Forms Designer, allowing a developer who has learned how to create a form, to easily create a report. The way you work in creating reports is totally analogous to creating forms. Since reports are optimized for the printed page, they differ from forms in that they have five default bands, instead of just three. In reports you get the extra Page Header and Page Footer pair of bands. You can add more bands to the report through the use of the Grouping and Sorting options just as you did with forms. We will see these options in more detail in Chapter 6 - Working With Reports.
Figure 16 - Report with several grouping bands added.
You can see in Figure 16 a sample of a Report in design mode with several extra bands added through the use of the grouping options. In this case the report is grouping data by year and then by quarter, based on a date field. You can also see the Page Footer band, for example, being used to print a page number on each page.
[edit] Copying Components
The Morfik IDE allows you to copy components through the clipboard, from one form to another and from one report to another. Even though reports and forms are not the same, they share some of the basic components so it is possible to copy components between them, also. It is possible to copy components from one project into another.
[edit] Database Views
We will cover all database related views, as well as many database related topics, much more in depth, in Chapter 3 - Working With Databases. In this chapter, I will just quickly present the views that are available so that you can have a complete overview of the IDE and its capabilities.
[edit] The Data Design View
The Data Design View allows you to define the structure of tables in your project’s default integrated database. This view will be used frequently, especially at the start of projects to define the application’s database structure.
Figure 17 - Data Design View, editing the structure of a table.
Though Morfik AppsBuilder does not intend to be a database management application, it does offer all the necessary functionality to create tables and indices that will be needed by an application, as long as it is using the default, Firebird, database management system.
[edit] The Visual Query Designer
The Visual Query Designer allows the easy creation of SQL Queries in a visual manner. Through this designer you can create queries that will be used and reused throughout your application.
Figure 18 - Visual Query Designer editing a query joining three tables.
All Query objects are stored, in text form, within you project. These queries can then be used throughout your project as data sources for Forms and Reports. Query objects can also be created by inputting SQL language code. The AppsBuilder IDE allows the developer to test run queries to make sure they are returning the desired results.
[edit] The Relationships View
In the Relationships View you can define how the tables in your database relate to one another. This view gives you a general overview of your database enabling you to configure database behaviors at the same time.
Figure 19 - The Relationships View showing part of the model for the
sample Northwind application.
The Relationships View provides developers with an overview of the relationships between the various tables in their schema at a glance.
[edit] Environment Options
Morfik’s IDE offers a huge range of configuration options as can be seen in Figure 20. Note that you have detailed options for topics such as debugging. We will discuss each of the tabs of the Options dialog when the corresponding topics are explored in specialized chapters.
Figure 20 - General Tab of the Options Dialog.
In the example shown in Figure 20, the Snap to Smart Grid option is selected. This allows for greater productivity in positioning the controls in a form since they tend to align themselves with controls which are already present.
The Morfik AppsBuilder IDE has two other options dialogs, one for Project options and another for Debugger options which can be seen in figures 21 and 22, respectively.
Figure 21 – The project options dialog.
Figure 22 – The Debugger options dialog.
[edit] Debugging Views
The Morfik IDE offers an extensive range of features and views to help in the application debugging process. Amongst these you will find the Profiler View, Breakpoints View, Watches View and Call Stack View. These views appear at the bottom of the main window and popup when the respective tab is clicked.
Figure 23 - Debug View tabs.
We will look into the debugging views in much more detail in Chapter 13 - Debugging Morfik WebOS Applications.
[edit] Compiling Projects
When you are ready to test your work, there are a few options for you to be aware of.
1. Make is an incremental compile. With this option, Morfik’s WebOS AppsBuilder attempts to only compile that which has changed since the last time it was compiled.
2. Preview does an incremental compile and then displays the actual Form in a browser. This is in contrast to Make and Build which do not invoke the executable. This option is available when you right click on a Form.
3. Run does an incremental compile and then displays the Form in the browser as specified in the Options menu. This is, by default, the Index Form. This is the equivalent of opening the ’home page’ of a traditional web site.
In Figure 24, you can see two views of a small dialog that is shown so that you can follow the compilation process through its steps. The topmost dialog is how it appears during a compilation process and the bottom one is indicating that the process is completed.
Figure 24 - Two views of the compiler progress dialog.
During the compilation process you can keep track of what is happening through the compiler progress dialog or thought the Output View which pops up from the bottom of the screen. You can see a screenshot of the Morfik IDE with the Output View in display, in Figure 25.
Figure 25 - The Output View in display at the bottom of the main window of the IDE.
[edit] Running and Debugging an Application
Once a project has been successfully compiled it can be run directly from within the Morfik WebOS AppsBuilder IDE with the Debug Browser Window. This allows you to see what your application looks like and and how it behaves. If something is not working as you expect you can single step through the application code using the built in debuggers for both server and browser side code.
[edit] Wrapping it up
In the Morfik IDE you will find all the features and facilities you would expect from a modern development tool and a few that you had not yet imagined. One of the design choices by Morfik R&D engineers for version one of the WebOS AppsBuilder was to make sure that you will have basic familiarity with most features of the IDE. This should allow you to quickly get up to speed with the features you might not have seen in other tools.
