Using C#.NET through Programming Without Coding Technology - Part (2)

Download FirstComponent - 1.57 MB

Introduction

I am going to explain how to create your first component inside Programming Without Coding Technology based on C#.NET but i still need to clear some points first.

The first thing i want to describe is what is the meaning of (Programming Without Coding Technology) ?

Programming is giving instructions to computer to perform the required job and software development include more than one sub process like research, design, coding, test & documentation

Before coding we need to solve the problem first so we need to find a solution and we could describe this solution by using UML, algorithms & flowcharts for example.

After finding a solution we have to implement it and we could do that through coding (Writing code by hand).

So when we talk about programming we could think of design and algorithms and when we talk about Coding we could think of writing code to implement the algorithms.

Then Programming is related to design of algorithms and Coding is related to writing code to implement the algorithms.

Some of programmers ignore this difference because they start their work by directly coding (without writing algorithms or Drawing flowchart first).

Programming without coding = design of algorithms but don't write code to implement the algorithms because the (Programmign Without Coding Technology) will do that.

This is just a description behind the name (Programming Without Coding Technology).

Anyway consider this name is just a name .... because PWCT is a tool and it's name will not change a lot with respect to what this tool could present and what this tool cann't offer.

Now i am going to talk a little with respect to why PWCT is going to replace our CODE EDITOR with Goal Designer.

At first Goal Designer replace Code Editor with respect to what we will use, but not the complete function because code editor ready to work with text based source code while the goal designer uses GUI and database to represent the source.

What I mean is there is no need to say that the Goal Designer will replace the Code Editor because each one of them is used in different stage

Goal Designer used in the stage of Design while the Code editor used in the stage of Coding.

But using PWCT the user don't need code editor but can use it and see/modify the code

So we could say Goal Designer is replacement for code editor in PWCT but really we could use them together.

Steps Tree inside the Goal designer is not a ( tree visualizer for the code )
The Steps tree is a virtual description of what the application do and we could state a collection of important points here :-

1 - Steps Tree = Replacement for Algorithms = Replacement for Flowcharts

2 - You can edit step name without restriction ( To get max. Readability ) while in code editor you are restricted with Syntax

3 - You can change components names (To get max. Writability) while in code editor you are restricted with Syntax

4 - Steps Tree isolate you from Syntax ... and Code is related to Syntax .... but logic is related to design and programming conepts that we explain by using Algorithms & Flowchart

Now after taking about what is PWCT and what is Goal Designer, i am going to answer a critical question, could users without programming knowledge uses PWCT to create software ?

This could be done and we could get a not bad level of success (maybe 50% ) using templates but at a certain points when they need to apply crititcal control they will need to use and know basic programming concepts and components will be ready in this stage and will help them more than writing code by hand (Just an opinion and you could test this and take your decision)

PWCT is a way to go to reduce complexity of programming & increase productivity but .... programming still programming and human mind needed in this process

In the future and based on Steps tree we could increase the intelligence of our programming systems because we have now a useful and easy to handle Knowledge base ( the Steps Tree ) that the programming system will use it to automate most of programming tasks (Just a hope - still need more research and practical implementation to prove it).

There are another many questions related to PWCT like IS PWCT is CODE Generator, IS PWCT IS WIZARD, ...etc in fact PWCT uses ideas like code generation, wizards, templates,...etc but integerate all of these ideas togther in one environment.

Now after this description and details about PWCT, it's the time to get a practical example that will make things more clear , i am going to explain how to create your first component then using it inside the environment and finally we still get C#.NET source code.

Background

Just you need to read part (1) before reading this article

Using the code

In this article we will start using the simple code from part (1)

using</span /> System ;
using</span /> System.Drawing ;
using</span /> System.Collections ;
using</span /> System.ComponentModel ;
using</span /> System.Windows.Forms ;
using</span /> System.Data ;
public</span /> class</span /> win1 : Form
{
 private</span /> System.Windows.Forms.Label lbl1 ;
 public</span /> static</span /> void</span /> Main ( string</span />[] argc )
 {
  Application.Run(  new</span /> win1() );
 }
 public</span /> win1 (  )
 {
  this</span />.Load += new</span /> System.EventHandler( this</span />.win1_Load );
  this</span />.Click += new</span /> System.EventHandler( this</span />.win1_Click );
  this</span />.lbl1 = new</span /> System.Windows.Forms.Label ( );
  this</span />.Controls.Add (lbl1);
  lbl1.Click += new</span /> System.EventHandler (this</span />.lbl1_Click);
  this</span />.lbl1.Top = 10</span /> ;
  this</span />.lbl1.Left = 10</span /> ;
  this</span />.lbl1.Width = 200</span /> ;
  this</span />.lbl1.Height = 30</span /> ;
  this</span />.lbl1.Text = "</span /></span />Count from 1 to 10 "</span /></span /></span /> ;
  int</span />[] lbl1acolorsfc = {0</span />,0</span />,0</span />} ;
  this</span />.lbl1.ForeColor = System.Drawing.Color.FromArgb (lbl1acolorsfc[0</span />],lbl1acolorsfc[1</span />]
                                                       ,lbl1acolorsfc[2</span />]);
  int</span />[] lbl1acolorsbc = {255</span />,255</span />,255</span />} ;
  this</span />.lbl1.BackColor = System.Drawing.Color.FromArgb (lbl1acolorsbc[0</span />],lbl1acolorsbc[1</span />]
                                                       ,lbl1acolorsbc[2</span />]);
  this</span />.lbl1.Font = new</span /> Font( "</span /></span />arial"</span /></span /></span /> , 10</span />) ;
 }
 private</span /> void</span /> win1_Click( object</span /> sender, System.EventArgs e )
 {
 }
 private</span /> void</span /> win1_Load( object</span /> sender, System.EventArgs e )
 {
  int</span /> [] acolors = {255</span />,255</span />,255</span />} ;
  this</span />.BackColor = System.Drawing.SystemColors.Control;
  this</span />.FormBorderStyle = System.Windows.Forms.FormBorderStyle.Sizable;
  this</span />.WindowState = System.Windows.Forms.FormWindowState.Normal;
  this</span />.Top = 10</span /> ; 
  this</span />.Left = 10</span />;
  this</span />.Width = 400</span /> ;
  this</span />.Height = 400</span /> ;
  this</span />.Text = "</span /></span />Hello World"</span /></span /></span /> ;
  this</span />.Opacity = 100</span /> ;
 }
 protected</span /> void</span /> lbl1_Click (  object</span /> sender, System.EventArgs e)
 {
  for</span /> ( int</span /> x = 1</span /> ; x <</span /></span />= 10</span /> ; x++ )
  {
   Console.WriteLine( x );
  }
 }
}

In the first article this code generated after creating the next (Steps Tree - Goal Designer)

The First Step
 Using
  Using System
  Using System.Drawing
  Using System.Collections
  Using System.ComponentModel
  Using System.Windows.Forms
  Using System.Data
  Class ( win1 : Form )  Title = "</span />Hello World"</span />
   [1</span />] Declare Controls Here
    Declare label lbl1
   Main Window : Yes
   Properties
    Top : 10</span />
    Left : 10</span />
    Width : 400</span />
    Height : 400</span />
    Backcolor : Control
    Title : "</span />Hello World"</span />
    Opacity : 100</span />
   [2</span />] Create Controls Here |  Open Form Designer From Here
    Create label lbl1
     Properties
      Top : 10</span />
      Left : 10</span />
      Width : 200</span />
      Height : 30</span />
      Caption : "</span />Count from 1 to 10 "</span />
      Fore Color : {0</span />,0</span />,0</span />}
      Back Color : {255</span />,255</span />,255</span />}
      Font Name : "</span />arial"</span /> Font Size : 10</span />
   Window Events
    Click Event
     Start Here
     End of Click Event
    Load Event
     Start Here
     End of Click Event
   [3</span />] Controls Events Here
    Label lbl1 : Events
     Label lbl1 : Click Event
      Start Here
        For ( int</span /> x = 1</span /> ; x <= 10</span /> ; x++ )
        Start Here
         Console Write Line : x
        End of For Loop 
     End of Click Event
   End Window

Now we will create a component replace this part of code

 for</span /> ( int</span /> x = 1</span /> ; x <</span /></span />= 10</span /> ; x++ )
  {
   Console.WriteLine( x );
  }

And the new component will replace the next steps

  For ( int</span /> x = 1</span /> ; x <</span />= 10</span /> ; x++ )
        Start Here
         Console Write Line : x
        End of For Loop

With one step

  Print Numbers in</span /> Range 1</span />:10</span />

And before i start explaing how to create this new component, i will explain first how to use it so we could figure together what exactly we are going to create.

1 - Open the project then goto goal designer and delete the selected step

2 - click interact to open components browser or start by pressing (p) and components browser will be invoked and the letter (p) will be in search line then press enter to use our new component ( Print Numbers in Range ).

3 - enter the start and the end of the range and to do that quickly write 1 then press tab

then write 10 then press CTRL+W (Instead of clicking OK)

4 - We are again in Goal Designer (Welcome back) and we could see a new step

generated carry the name (Print Numbers in Range 1:10)

5 - We could see the code behind this generated step , to do that select the step then click

step details then goto tab (result)

The generated code behind the step is

 for</span /> ( int</span /> t = 1</span /> ; 10</span /> ></span />= t ; t++ )
 {
    Console.WriteLine( t );
 }

Now we are going to implement this component from scratch then we will install it so we could use it as we have seen now.

Implementation Steps

To create new component we need to

1 - Create Interaction Page that will appers in (Interaction Using Transporter)

2 - Create a Transporter that control the generated steps (Steps Tree-Goal Designer) and determine the generated code

3 - Install Component

With respect to point one you could create interaction page using Interaction designer but we have a better and quickly method we could use interaction pages generator to generate the interaction page directly

So let's go and create our interaction page

1 - open Interaction Pages Generator

2 - Click Title to determine the title of the interaction page

3 - We need to accept a start of range and end of range

4 - save interaction pages generator script to a file (*.ISF)

5 - Determine the interaction designer file (*.IDF) that will be generated

After creating the interaction page using interaction pages generator , we could open it using the interaction designer.

It's clear that the interaction page will accept two values a one for the start of the range and this value will be stored in a variable called D_TB_Start and this name determined automatically by the interaction pages generator, and the second value will be the end of the range and this value will be stored in a variable called D_TB_End and this name too determined automatically by the interaction page generator.

Now after creating the interaction page we need to create a (Transporter)

The transporter will determine the generated code in the background and will generate steps in goal designer after accepting values from the user using interaction pages that the transporter will call at first and after the end of interaction process the transporter will get values from the interaction page and then will do a matching process between the variables in the interaction page and the variables in the transporter script (code mask) where the code mask control the generated code and the generated steps.

<RPWI:NEWSTEP> Print Numbers in Range <X1>:<X2>
for ( int t = <X1> ; <X2> >= t ; t++ )
{
     Console.WriteLine( t );
}

The code mask uses the command <RPWI:NEWSTEP> to create a new step in the goal designer

and the generated code is written directly and variables written betweem < and >

i.e. <VariableName>

In the code mask we have two varaibles <X1> and <X2> while in the interaction page we have another two varaible so we need to match between variables

After creating Transporter we need to install it

No we can use our first and simple component.

Points of Interest

1 - Creating components is an art and you need to design it very well to create very useful one.

2 - When we create a component we may wrap a simple feature of our programming language (C#.NET for example) but we may too go forward and wrap more complex ideas.

3 - We need to determine steps names carefully to get Max. Readability.

4 - We need to determine component name carefully to get Max Writablity where we could use keyboard and search line to get component quickly to interact with it.

5 - We need to determine the generated code carefully to ensure stability and performance.

6 - We need to design interaction page carfully to ensure ease of use.

History

After creating my components i found that using things become more simpler and under control but you need to invest time to create your components and you need to know how to create the right component for the right task and this what we will learn soon in next articles.