SWAF markup language

SORAN UNIVERSITY
Faculty of science
DEPARTMENT OF COMPUTER SCIENCE
Bachelor Project
SWAF (Soran Web Application Framework) Markup
Language
By
Ezzat Ghaze Assad
Supervised By
Mr. Thenraja Vettivelraj
A Professional Project Report Submitted in Partial Fulfillment
Of the Requirements for the Degree of Bachelor of Computer
Science
May, 2015

[I]
ABSTRACT
SWAF is a markup language for mobile platforms to develop graphical web application.
It has its own compiler, tags, elements and properties. It supports all standard browsers.
The SWAF markup language helps the user to code in an easy and efficient way. By
embedding the SWAF compiler into the HTML file, the user can make use of SWAF
tags, elements and properties to develop a mobile web application. SWAF elements
support Touch events with all the given elements. The user can easily customize the
theme for any application by modifying the specific CSS file. For creating an element
using HTML5, CSS, JavaScript the user needs to have more knowledge in front-end
web development and need to write more lines of code, but in SWAF we can
accomplish the same with very few lines of code. As a result, a user can easily develop
mobile web application for different platforms with few lines of code.
Keywords: SWAF, Compiler, Tags, elements

[II]
ACKNOWLEDGEMENTS
First, I would like to thank Allah for helping me to finish my Bachelor degree and also
I would like to thank all my family members and friends for supporting me in all aspects
to finish this course. Finally, I would like to thank Mr. Thenraja Vettivelraj for teaching
and supervising my project.
Special thanks to Soran University’s Department of Computer Science staff.

[III]
TABLE OF CONTENTS
CHAPTER ONE ..........................................................................................................1
INTRODUCTION........................................................................................................1
1.1 History..................................................................................................................1
1.2 SWAF...................................................................................................................1
1.3 Problem................................................................................................................2
1.4 Objective ..............................................................................................................2
1.5 Approach..............................................................................................................2
1.6 Organization of this Thesis ..................................................................................3
CHAPTER TWO .........................................................................................................4
BACKGROUND ..........................................................................................................4
2.1 Scripting language................................................................................................4
2.2 Markup language..................................................................................................4
CHAPTER THREE .....................................................................................................6
SWAF COMPONENTS ..............................................................................................6
3.1 SWAF Elements...................................................................................................6
3.1.1 Ezzat Tag.......................................................................................................6
3.1.2 Anchor Button...............................................................................................7
3.1.3 Normal Button ..............................................................................................7
3.1.4 Newline .........................................................................................................7
3.1.5 Normal Textbox............................................................................................8
3.1.6 Search Textbox .............................................................................................8
3.1.7 Password Textbox.........................................................................................8
3.1.8 Text Area.......................................................................................................8
3.1.9 Slider .............................................................................................................9

[IV]
3.1.10 Checkbox ....................................................................................................9
3.1.11 Radio ...........................................................................................................9
3.1.12 Switch..........................................................................................................9
3.1.13 Notification ...............................................................................................10
3.1.14 Header .......................................................................................................10
3.2 Features in SWAF..............................................................................................10
3.3 Limitations in SWAF.........................................................................................11
CHAPTER FOUR......................................................................................................12
ARCHITECTURE AND IMPLEMENTATION ....................................................12
4.1 High Level Design .............................................................................................12
4.2 Implementation ..................................................................................................13
CHAPTER FIVE .......................................................................................................21
CONCLUSION ..........................................................................................................21
CHAPTER SIX ..........................................................................................................22
FUTURE WORK .......................................................................................................22
REFERENCES...........................................................................................................23
APPENDIX A .............................................................................................................24

[V]
List of Figures
Figure 1: SWAF Elements .............................................................................................6
Figure 2: SWAF.js Using...............................................................................................7
Figure 3: Anchor Button................................................................................................7
Figure 4: Normal Button................................................................................................7
Figure 5: New Line ........................................................................................................7
Figure 6: Normal Textbox..............................................................................................8
Figure 7: Search Textbox...............................................................................................8
Figure 8: Password Textbox ..........................................................................................8
Figure 9: Text Area........................................................................................................8
Figure 10: Slider.............................................................................................................9
Figure 11: Checkbox......................................................................................................9
Figure 12: Radio.............................................................................................................9
Figure 13: Switch.........................................................................................................10
Figure 14: Notification.................................................................................................10
Figure 15: Header.........................................................................................................10
Figure 16: SWAF Tags ................................................................................................12
Figure 17: Compiler working principle .......................................................................13
Figure 18: SWAF Elements .........................................................................................14
Figure 19: One of the UI bag Functions ......................................................................14
Figure 20: SWAF Compiler........................................................................................15
Figure 21: Set classes for styles ...................................................................................15
Figure 22: Button Class Style ......................................................................................16
Figure 23: Internal Slider Style....................................................................................17

[VI]
Figure 24: Button Function..........................................................................................17
Figure 25: Checking values .........................................................................................18
Figure 26: Set Color and Background Color ...............................................................18
Figure 27: Set Type......................................................................................................19
Figure 28: Set Positioning............................................................................................19
Figure 29: Set Element property - (id, x, y, w, h) .......................................................19
Figure 30: Set Events ...................................................................................................20

[1]
CHAPTER ONE
INTRODUCTION
1.1 History
Programming Language is a set of instructions used by the programmers to
accomplish some task. These tasks are called program. Low level programming
language (machine language) uses binary (“1” or “0”) code. A computer can run
very fast without using any translator or interpreter program. But this style is very
difficult and complex to write. Therefore, some of the organizations, companies
and individuals did some research and found an alternative programming language
called High level programming language such as C++, C#, Java. They are similar
to the English language. By using High level programming language, there is a
need for another program called a compiler or interpreter to convert a high level
programming language to low-level programming language. Therefore, high level
programming languages are slower than machine code to execute. He stated that
“Also now so many High-level language exists in the globe either have its own
philosophy of writing”. According to [2] “first high-level language was Plankalkül
developed by Konrad Zuse between 1943 and 1945. It was designed to represent
mathematical expressions in a format readable by human beings other early years,
some other High- level programming languages were developed in 1950 until 1960
including Autocode, COBOL, FLOW-MATIC, and LISP. Of these, only COBOL
and LISP are still in use today”. In reference with [3], Each of High- level language
are designed for special purpose and some of them designed for general purpose.
This thesis discusses about the markup language which is a subset of the
programming language. Also, the SWAF was implemented using markup
language. Since I use scripting language and markup language in my thesis, I
would discuss more in detail.
1.2 SWAF
SWAF is a high level programming language and it is of type Markup language.
It was written for a special purpose that is to create graphical mobile web
application in efficient and easy way to write less code. There is no need for a

[2]
special internet browser for displaying SWAF elements. Normally its work on all
standard web browsers. It has its own tags and properties and features and
compiler. Also, it has a special library for theme the user can write custom theme.
1.3 Problem
1. The traditional way to write a mobile web application needs the combination
of some programming languages (HTML, CSS, JavaScript etc.,) and also the
programmer should have a good knowledge in front-end web development.
2. Also, you need write more code and your application been a very large in size
and slower to load and run because this type of application based on web.
3. Stored the application source file on a web server to run the application you
will send a request to server in this case if you haven’t a speed internet it may
be a problem or crash the application.
4. For the beginners they need more time to learn writing a mobile web
application as we discussed should combination at least two languages it was
becoming a difficult to mobile web programmers.
1.4 Objective
The objective of SWAF has an ability to write an efficient mobile web application
in a very less time with a few lines of code and small file in size with a high level
of design and special library for themes. Comfortable application for interacting
with other programming languages. Suitable mobile web application for touch
devices without having a good acknowledgement from front-end web development
also no need a big web storage for storing SWAF files if you don’t have the
acknowledgement above SWAF with a few days can learn this markup language
and make a produce to Soran University like how MIT university have Scratch
Script.
1.5 Approach
SWAF have its own compiler and it’s written in JavaScript language. For using
SWAF the user should reference the SWAF compiler as an external JavaScript file.

[3]
Then add Ezzat tag to the body of HTML document. Inside the Ezzat tag you can
write SWAF tags. The compiler get Ezzat tag and assume it is a root node and then
by using tree algorithm it begins it search inside Ezzat tag. The compiler only
check the tags which are defined in SWAF. In case, if it find other tags that not
defined in SWAF engine or normal text the compiler ignores it. But if the SWAF
engine (core of compiler) found the SWAF tags then check the properties of that
tag and it creates the element and append to HTML document.
1.6 Organization of this Thesis
The Chapter 2 discusses about the background of SWAF and Chapter 3 discusses
the architecture and implementation of some of the SWAF elements and some
limitations in SWAF. The architecture of SWAF was discussed in Section 4.
Chapter 5 and 6 are the References and Future work. This report also has Appendix
A which discusses some implementation details.

[4]
CHAPTER TWO
BACKGROUND
This Chapter discusses the background of the thesis and some key concepts of
SWAF and related work.
2.1 Scripting language
Scripting Language is a form of programming language [4] some of the common
scripting language used in world are PHP, Python, Perl, ASP, JavaScript and VB
script. The main difference between the programming language and scripting
language is that a programming language normally first compile the whole code
before allow to run the application. If it finds any error it don’t allow the program
to run further. In scripting language the source code are interpreted which means
one command at a time or run one line by line instead of whole code at the same
time. [5] Another advantage of scripting language is type less writing application
in the scripting language is easier than the programming language. However the
scripting language is slower than the programming language as I discussed before
the scripting language normally designed to communicate among the languages in
scripting language the instruction is not handle only by the basic processor.
Scripting language allow rapid development, the scripting language is more
strength but system [6] programming language are better to choice while building
components are complexity in data structure and algorithms [7].
2.2 Markup language
Markup Language is a computer programming language. It uses a set of tags or
rules. For creating the elements within a document the user needs to use the
specific tag. It is also useful for storing data and sharing data. Some other
applications includes displaying the content in the webpage. As already said in
some cases it is used to share data using the markup file which usually contains
ASCII codes/values. These data inside the markup file is human readable, and it
can edited with a normal text editor [8] rather than the system and scripting
programming language syntax. There are so many markup language exists in the

[5]
globe, but the most popular ones are HTML, XML which were developed by
International Organization for Standards (ISO) in 1986. HTML (hypertext markup
language) is used to display the content of the document to the internet browser
and it have predefined tags. The developer or the user cannot change as they are
predefined, but XML (extensible markup language) which is standard to describe
the content of the document instead of how it should be display it don’t have the
predefine tags you should be define the tags by pair rule. There are many
applications using XML to share data among them [9] also both markups are using
Tags most tags are designed to be used in pairs (should have start and end with
same name) and enclose text inside the tags each tag can contain more than one
property to describe the future of the tags [10].

[6]
CHAPTER THREE
SWAF COMPONENTS
This chapter discusses on the SWAF elements and its functionality. Also, there is
a separate documentation in Appendix A where the readers can find more
information on tags and description of tags along with other details.
3.1 SWAF Elements
Figure 1 shows the different elements of SWAF like Normal Button, Anchor
Button, Text Area and others.
Figure 1: SWAF Elements
3.1.1 Ezzat Tag
It is the root (parent) node (tag) in the SWAF markup language via the properties of
this tag. It defines the structure of the application.

[7]
Figure 2: SWAF.js Using
3.1.2 Anchor Button
It is a type of button and it is used to navigate from one page to another page.
Figure 3: Anchor Button
3.1.3 Normal Button
It is another type of button from SWAF markup language used for normal action like
call function and other tasks.
Figure 4: Normal Button
3.1.4 Newline
This SWAF element used to create a new blank line inside the application between
elements.
Figure 5: New Line

[8]
3.1.5 Normal Textbox
It is a type of textbox from SWAF and it is used for normal actions (input text,
numbers) and other type of data.
Figure 6: Normal Textbox
3.1.6 Search Textbox
Search Textbox it is a type of textbox from SWAF. It is created with a special graphic
for search action.
Figure 7: Search Textbox
3.1.7 Password Textbox
It is a type of Textbox from SWAF and it is used for password or to write any
important credentials. The data inside this Textbox will be marked as dots (.).
Figure 8: Password Textbox
3.1.8 Text Area
In SWAF, the text area is a type of textbox unlike HTML it is used for inserting data.
It has a grid style text area and can hold an unlimited number of characters or text.
Figure 9: Text Area

[9]
3.1.9 Slider
One of other elements in SWAF is slider used to increase and decrease the value of
elements on runtime. It have both direction vertical and horizontal.
Figure 10: Slider
3.1.10 Checkbox
It has a checkbox element with a special design for checking the multiple choice at
the same time.
Figure 11: Checkbox
3.1.11 Radio
This SWAF element used to check the Boolean condition or one choice at a time.
Figure 12: Radio
3.1.12 Switch
Switch is a SWAF element undefined in HTML It used to toggle the status also it
have both direction vertical and horizontal.

[10]
Figure 13: Switch
3.1.13 Notification
Notification is a SWAF element and it is undefined in HTML. It is used to get the
notification when some event occurs.
Figure 14: Notification
3.1.14 Header
The element Header can set the header to your application. Figure 15 shows the
screenshot of Header with some text displayed on it.
Figure 15: Header
3.2 Features in SWAF
1. SWAF have its own compiler, tags and properties.
2. It has a special library for theme.
3. It supports touch events.
4. The application produced by SWAF is a cross platform application.
5. SWAF has two philosophies.
 Short
 Complete
<btn t=”n”> </btn> or <ezzat.button type=”normal”> </ezzat.button>
6. It is non-case sensitive markup language. For example: There is no difference
between <BTN> and </btn>

[11]
7. The other feature of SWAF is the small size of compiler. It is just 60kb and
easy to load and compile. The compiler has been designed is such a way that
its performance is high.
3.3 Limitations in SWAF
1. You cannot write SWAF tags as a separate file with special extension because
the SWAF tags need to be embedded into a HTML file since we haven’t
web browser to recognize the SWAF extension. All standard web browsers
only compile the HTML file and create element by the tags wrote inside the
HTML file. In case if we want to fix this limitation we should create our own
browser and define SWAF extension on the browser.
2. The SWAF markup language not have all elements that need to create an
advance mobile web application in current version it have near twenty elements
each of them have more than fifteen properties and four touch events we have
not enough time to create all elements and properties and events because I’m
study four objects in this year with this thesis and also I’m working as a
Peshmerge.
3. The HTML tags was not working on SWAF because the SWAF was embedded
into html and SWAF compiler only recognize SWAF tags if found html tag on
SWAF the compiler assume it is not important thing and not compile the tags.
4. It works perfectly with server side scripting languages but with client side
scripting it haven’t problem.

[12]
CHAPTER FOUR
ARCHITECTURE AND IMPLEMENTATION
This chapter discusses about the architecture and implementation of SWAF. This gives
the reader a clear understanding of how things work.
4.1 High Level Design
As mentioned earlier, for using SWAF tags we need to have the reference SWAF
compiler as an external JavaScript file. Then inside HTML head tag in the document,
write Ezzat tag then inside ezzat tag write the structure of the application such as how
the elements should be present, theme for application, title of application and Icon for
your application the between ezzat tags write the SWAF tags also each tag from SWAF
have a so many properties you can control the structure and format of the element via
this properties like
Figure 16: SWAF Tags

[13]
4.2 Implementation
When compiler start compiling the SWAF tags, first get Ezzat tag and assume it is
Parent tag then check the properties and events of ezzat tag and create the structure of
application via this tag after found ezzat tag the search throw e (between ezzat )tag. Use
three algorithm for searching and check all children from ezzat tag also check all
children node properties then create the elements via the properties of the element was
User required.
When compiler compile the tags then create the html element and add a special style as
user required inside a tag and add touch events if user require then append the result for
the parent node(ezzat node) and append the parent node to the Body of html. Then the
elements were displayed on the browser.
Ezzat
BTN TXT Slider RDB
TypeValue Position
Figure 17: Compiler working principle

[14]
Figure 18: SWAF Elements
The SWAF.js file consists of three parts. First one is UI bag. It is an object contain all
SWAF elements as a JavaScript function and properties of those element as a parameter
of that functions into that functions controlling the structure of elements and checking
the properties for null, undefined, empty or value and append the value for the elements.
Figure 19: One of the UI bag Functions
Second part from SWAF.js file is that the compiler have different tasks. That is, it is
responsible for recognizing tags and checking the properties inside the tags and getting
the property’s value then return for the UI bag part.

[15]
Figure 20: SWAF Compiler
Third part from the SWAF.js file is responsible for setting style for the elements called
set style function. It has two ways if user used theme library this function call the UI
bag user and initialize the special theme and get the name of theme then add class
attribute for every elements via the class attribute elements was get style from the CSS
file (theme library).
Figure 21: Set classes for styles
Let’s assume the name of theme is green after compiler get the green value via theme
property from the ezzat tag return this value for UI bag part and SWAF engine get the
value and add this value to the end of SWAF class name for each element then add this

[16]
combination as a class name after creating the element on runtime get the design via
class name
Figure 22: Button Class Style
If the user was not use theme library SWAF.js have special CSS code into set style
function and apply that codes to the elements via style tag on HTML

[17]
Figure 23: Internal Slider Style
In both case the elements was get the style via class attribute on runtime but from the
first way case using theme the elements was get the style from the external css file and
the style was designed by the user but if user no use theme we have ready and static
style into SWAF.js file this style will be apply to the elements.
How Compiler works?
From here I want to discuss about the implementation part and how they works. First,
let us discuss about BTN or Ezzat.button. Inside the UI bag object it has a function
name BTN this function have the following parameters
Figure 24: Button Function
When the compiler compiles the btn or ezzat.button it checks the tag for the following
attributes if exist get the value else assume the value is null then return the values for
UI bag then passed to BTN function on the function first check the value of etype
parameter if null or undefined set the normal value by default but if it have the value
get the value of this parameter if the value is Normal or N the SWAF engine will create
HTML input tag then add the button attribute to input tag the check the value parameter
if it have value append this value to input tag else append Button by default.

[18]
Figure 25: Checking values
Then check the theme parameter value if It is not null get the value and add the value
to the end of SWAF_N_BTN_THEME then add this phrase to the input tag as a class
attribute also from both type internal and external (theme) style elements are get the
CSS style via class name attribute but if the theme was not initialize add this name as a
class name SWAF_N_BTN then check both parameters Color and bgcolor if they have
value append that values to Input tag
Figure 26: Set Color and Background Color
Also doing the same principle if the value of etype is equal to A or Anchor but instead
of creating input tag create A tag and append Value of value parameter as a text node
to A tag and the add the value of href to the A tag so for both color and bgcolor doing
like Normal button

[19]
Figure 27: Set Type
Then check the layout parameter if it have the value and the value was defined add this
value to application else add default value (relative)
Figure 28: Set Positioning
Then checking that properties (id, x, y, h, w, radius) if they have value add those values
to the element via JavaScript.
Figure 29: Set Element property - (id, x, y, w, h)

[20]
Then check the events if they have value sure the value of the parameters are related of
touch are function name are want occur add the name of function was initialized by
user and add this function to the element. And evaluate this function and prevent default
event.
Figure 30: Set Events
After finishing that process append the element was created to the parent via VP
parameter and return the result.

[21]
CHAPTER FIVE
CONCLUSION
As a result, the developers can develop an elegant mobile web application with few
lines of code. The resulted application is cross platform and small in size. It supports
all touch devices, via all standard browsers. The developer can easily customize the
application with the available themes. There is no need to learn more than a language
for creating mobile web application only with SWAF. Using this framework, it is
more than sufficient for a developer to develop one of the best mobile web
application.

[22]
CHAPTER SIX
FUTURE WORK
For the future I have plans to develop some of the missing elements like collapse,
menu etc., that are needed to create advance mobile web application. Also, I have the
plan to create a special scripting language to manipulate, interact and manage SWAF
markup language. Finally, I make the markup language as an open source so that
anyone can use, rewrite and modify the source under the license of Soran University.

[23]
REFERENCES
[1]Business Dictionary Team, programming language definition and meaning,
programming language definition, Available. [Online].
http://www.businessdictionary.com/definition/programming-language.html.
[Accessed: January. 13, 2015].
[2]Hope Team, first programming language, programming language history,
Available. [Online]. http://www.computerhope.com/issues/ch001621.htm.
[Accessed: January. 17, 2015].
[3] Logc, Programming Language vs Markup Language vs Scripting Language,
Stack Programmer Available. [Online].
http://programmers.stackexchange.com/questions/241104/programming-
language-vs-markup-language-vs-scripting-language. [Accessed: may.3, 2015].
[4] Moffdub, “When is a language considered a scripting language”, Available.
[Online]. http://stackoverflow.com/questions/101055/when-is-a-language-
considered-a-scripting-language [Accessed: feb.4, 2015].
[5] Cory Janssen, “What does Scripting Language mean”, Available. [Online].
http://www.techopedia.com/definition/3873/scripting-language [Accessed:
mar.21, 2015].
[6] Margaret rouse “Scripting Language”, Available. [Online].
http://searchwindevelopment.techtarget.com/definition/scripting-language
[Accessed: mar.26, 2015].
[7] John K. Ousterhout, "Scripting: Higher Level Programming for the 21st
Century," IEEE, pp. 3-27, March 1998
[8] Teach terms team “Markup Language”, Available. [Online].
http://techterms.com/definition/markup_language [published: June 1, 2011]
[Accessed: mar.12, 2015].
[9] The Linux Information Project foundation. “Markup Language Definition”,
Available. [Online]. http://www.linfo.org/markup_language.html [published:
December 13, 2006.] [Accessed: February 7 , 2015].
[10] Vangie Beal “Markup Language”, Available. [Online].
http://www.webopedia.com/TERM/M/markup_language.html [Accessed:
February 3, 2015].

APPENDIXA
How to using this markup language?
SWAF has its own compiler. The developer should reference the compiler source as a
External JavaScript file then add ezzat tag into the body tag and write the SWAF tags
inside ezzat tag like below code
<!DOCTYPE html>
<html>
<head>
<script src="SWAF.js"></script>
<link rel="stylesheet" href="dark.css">
</head>
<body>
<ezzat >
<!—Write SWAF tags in this area 
</ezzat>
</body>
</html>
Also if you want use theme should be reference theme source file and set the theme
name to t property in ezzat tag for this example I used dark theme
Warning! Avoid using class property because it is not working only you can specified
elements via ID property
NOTE! SWAF is case sensitive Markup language do difference between CAPITAL
And SMALL
NOTE! Please when you use SWAF put IMG folder and swaf.js compiler into on
destination then reference swaf.js file
Theme Template: if you want write your own theme we are prepared the template you
can just modify the codes as you want also we commented the codes possible to modify
inside Theme-templet.css file on Bag folder
How to write custom theme?
Answer - When you try to write your own theme follow that phrases
* replace your theme name with the end of the element class names

For example in this example I want write my own theme with AVIN name
.SWAF_N_BTN_THEME_AVIN,
.SWAF_A_BTN_THEME_AVIN
Also do this for all elements
Note// the theme name should be CAPITAL like AVIN not avin
* uncomment the css properties and set your favorite value
*when you write your own Theme then references your theme file as CSS file
And set the value of T or Theme property inside ezzat tag as your theme name like this
example
And put the theme you was created to themes folder
<!DOCTYPE html>
<html>
<head>
<script src="../src/swaf.js"></script>
<link rel="stylesheet" href="../themes/AVIN.css">
</head>
<body>
<ezzat t="AVIN" >
</ezzat>
</body>
</html>
* save the file with your theme name
Like AVIN.CSS
SWAF Markup Language Tutorial
From the next pages contain the SWAF Tags tutorial as a table. for each tag have the
properties, style of using and description from the bellow table

Ezzat
NL or Ezzat.NEWLINE
Property Value Using Description
V or Value Number <nl v=”10”></nl> Breaking the line goes to new line also u
can instead of using 9 time nl tag set the
value property to 9 it breaking 9 time
automatically
T or Theme Dark,
Light..etc
<ezzat
T=”DARK”></ezzat>
You can write custom theme then
set this theme to your application
we have the theme templet you
can just modify as you want
P or Position Fixed,
absolute ,
relative,
STATIC,
blockline
<ezzat P=”
absolute”></ezzat>
Fixed ,absolute ,relative ,static are
HTML posting value
BLOCKLINE I added represent
each element per line
TLT or TITLE Anything <ezzat TLT=”
MYtitle”></ezzat>
Set the title to project
ICON or I Image
Source
<ezzat I=”
ezzat.PNG”></ezzat>
Set the icon to project
JSF or
JAVASCRIPTFILE
JS file
source
<ezzat JSF=”
ezzat.js”></ezzat>
Import external JavaScript file
into project
If u have more than one file
should be sorted them by number
like JSF1=”FIRST.JS”
JSF2=”SECON.JS” ……ETC

BTN or Ezzat.Button
V or Value anything <btn v=”button
1”></btn>
Set the value to button
(text appear on the
button )
X or Left number <btn x=”40”></btn> Every elements starting
from the left-Top of the
screen by set Y you can
specify the distance
between element and left
of the screen
Y or Top number <btn y=”40”></btn> Every elements starting
between element and top
of the screen
W or Width number <btn w=”40”></btn> Set the Width to project
H or Height number <btn h=”40”></btn> Set Height to elements
IDENTIFY or ID anything <btn id=” myElement”
></btn>
Set the Id to element
T or Type (A or
NCHRO)
OR
(N or
Normal)
<btn t=”n”></btn> Specify the type of
button if u set type to a
the button become a
normal button used to
interactive in the same
page else u set the type
to a the button become a
anchro button
Used to navigate
between pages
Ref or Reference Source
HTML page
<btn t=”a”
ref=”home.html”></btn>
If u set type A it work
used to file u linked with
this button

R or Radius number <btn R=”40”></btn> Set the border radius to
element
BGC or
BackgroundColor
HEX or
Name
<btn bgc=”black”></btn> Set the background color
to element
C or Color HEX or
Name
<btn c=”yellow”></btn> Set the color to element
TXT (or) Ezzat.TEXTBOX
V or Value anything <txt
v=”TextBox”></txt>
Set the value to
textbox (text appear
on the textbox )
X or Left number <txt x=”40”></txt> Every elements
starting from the left-
Top of the screen by
set Y you can specify
the distance between
element and left of the
screen
Y or Top number <txt y=”40”></txt> Every elements
element and top of the
screen
W or Width number <txt w=”40”></txt> Set the Width to
project
H or Height number <txt h=”40”></txt> Set Height to
elements
IDENTIFY or ID anything <txt id=” myID”></txt> Set the Id to element
T or Type (A or Area)
OR <txt t=”s”></txt>
Specify the type of
textbox

(N or
Normal)
OR (P or
Password)
OR(S or
Search)
What u want
TextArea OR Search ,
or Password Or
Normal textbox try all
of them
Ref or Reference Source
HTML page
<txt t=”a”
ref=”home.html”></txt>
If u set type A it work
used to file u linked
with this button
R or Radius number <txt R=”40”></txt> Set the border radius
to element
BGC or
BACKGROUNCOLOR
HEX or
Name
<txt
bgc=”black”></txt>
Set the background
color to element
PLCH or PlaceHolder Anything <txt
plch=”Search”></txt>
Set the non-clear text
to the element
whenever the user
touches it, it will be
removed
RO or Rows number <txt t=’a’
ro=’10’></txt>
It work when u use
Area text type it set
the rows to Text area
CL or COLOMS number <txt t=’a’
cl=’10’></txt>
It work when u use
Area text type it set
the coloms to Text
area
C or Color HEX or
Name
<txt c=”yellow”></txt> Set the color to
element
SLD (or) Ezzat.SLIDER
V or Value number <sld v=”3”></sld> Set the value to element
X or Left number <sld x=”40”></sld> Every elements starting
between element and
left of the screen

STH (or) Ezzat.SWITCH
STS or STATUS ON or OFF < sth sts=”on”></ sth
>
Set the status to element
X or Left number < sth x=”40”></ sth > Every elements starting
between element and
left of the screen
Y or Top number < sth y=”40”></ sth > Every elements starting
between element and
top of the screen
IDENTIFY or ID anything <sth id=”myElement”
></ sth >
Y or Top number <sld y=”40”></sld> Every elements starting
between element and
top of the screen
W or Width number <sld w=”40”></sld> Set the Width to project
IDENTIFY or ID anything <sld id=”myElement”
></sld>
ALG or Alignment
(V or
VERTICAL)
OR
(H or
HORIZENTAL
)
<sld alg=”h”></sld> Set the align of element

ALG or Alignment
V or Vertical
Or
H or
Horizontal
<sth alg=”h”></sth> Set the align of element
CHB (or) Ezzat.CHECKBOX
RDB (or) Ezzat.RADIO
TXT or TextValue anything <chb v=”3”></chb> Set the text value to
element (text appear
beside element)
X or Left number <chb x=”40”></chb> Every elements starting
between element and left
of the screen
Y or Top number <chb y=”40”></chb> Every elements starting
between element and top
of the screen
IDENTIFY or ID anything <chb id=”myElement”
></chb>
BGC or
BackgroundColor
Hex or name <chb bgc=”#fff”></chb> Set the background color
to text value beside the
element
C or Color Hex or name <chb c=”#fff”></chb> Set the color to text value
beside the element

TXT or TextValue anything <rdb v=”3”></rdb> Set the text value to
element (text appear
beside element)
X or Left number <rdb x=”40”></rdb> Every elements
element and left of
the screen
Y or Top number <rdb y=”40”></rdb> Every elements
element and top of
the screen
IDENTIFY or ID anything <rdb id=”myElement”
></rdb>
BGC or
BackgroundColor
Hex or name <rdb bgc=”#fff”></rdb> Set the background
color to text value
beside the element
C or Color Hex or name <rdb c=”#fff”></rdb> Set the color to text
value beside the
element
Gn or GroupName Anything <rdb gn=”group1”></rdb> Set the group name to
radio buttons
NTF (or) Ezzat.NOTIFICATION
V or Value anything <ntf v=”+21”></ ntf
>
Set the value to the
element (text appear on
the element )
X or Left number < ntf x=”40”></ ntf
>
Every elements starting
screen by set Y you

can specify the
distance between
element and left of the
screen
Y or Top number < ntf y=”40”></ ntf
>
Every elements starting
screen by set Y you
can specify the
distance between
element and top of the
screen
W or Width number < ntf w=”40”></ ntf
>
Set the Width to
project
H or Height number < ntf h=”40”></ ntf
>
Set Height to elements
IDENTIFY or ID anything < ntf id=”
myElement” ></ ntf >
R or Radius number < ntf R=”40”></ ntf
>
Set the border radius to
element
BGC or
BackgroundColor
HEX or Name < ntf bgc=”black”></
ntf >
Set the background
color to element
C or Color
HEX or Name < ntf c=”yellow”></
ntf >
Set the color to element
HED (or) Ezzat.HEADER
V or Value anything <hed v=”welcome”></
hed >
Set the value to
element (text appear on
the element )
X or Left number < hed x=”40”></ hed > Every elements starting

between element and
left of the screen
Y or Top number < hed y=”40”></ hed > Every elements starting
between element and
top of the screen
W or Width number < hed w=”40”></ hed > Set the Width to project
H or Height number < hed h=”40”></ hed > Set Height to elements
IDENTIFY or ID anything < hed id=” myElement”
></ hed >
R or Radius number < hed R=”40”></ hed > Set the border radius to
element
BGC or
BackgroundColor
HEX or
Name
< hed bgc=”black”></
hed >
Set the background
color to element
C or Color HEX or
Name
< hed c=”yellow”></
hed >
Set the color to element
Txtp or TextPosition
Left or
center
< hed
txtp=”center”></ hed
>
Set the position for
content of the header

All Elements supports Touch Events
Event Name Using Description
START or TOUCHSTART < btn
start=”FunctionName();”>
</ btn >
Triggers when the user
makes contact with the
touch surface and
creates a touch point
inside the element the
event is bound to.
END OR TOUCHEND < btn
end=”FunctionName();”>
</ btn >>
removes a touch point
from the surface. It fires
regardless of whether
the touch point is
removed while inside
the bound-to element, or
outside, such as if the
user's finger slides out
of the element first or
even off the edge of the
screen.
MOVE OR TOUCHMOBE < btn
move=”FunctionName();”>
</ btn >
moves the touch point
across the touch surface
CANCEL OR
TOUCHCANCEL
< btn
cancel=”FunctionName();”>
</ btn >
Triggers when the touch
point no longer registers
on the touch surface.
This can occur if the
user has moved the
touch point outside the
browser UI or into a
plugin, for example, or
if an alert modal pops
up.

SWAF markup language

Recommended

Recommended

More Related Content

Similar to SWAF markup language

Similar to SWAF markup language (20)

SWAF markup language