ISAS REPORT

Class: NSE11101

Faculty : Mr.Tiep

Center: NIIT - iNET

Members of group:

1. Long Van Minh

2. Nguyen Trung Khuong

3. Vu Quoc Hoang

4. Nguyen Minh Ngoc

Vector Markup Language

Contents

The shape element1

The fill element2

The shapetype element3

The background element4

Vector Markup Language

JAVA VML

Drawing Charts ?

ImagesPHP

VB

C#

Disadvantages

Vector Markup LanguageVector Markup Language

Not Work

The Shape elment

Shapes are the building blocks of graphical images defined by Vector Markup Language (VML).

The shape is the top-level element and several subelements help define the nature of each shape.

Arc

Curve

Line

Polyline

Rect

RoundRect

The Shape element

This is the top-level element used to describe a shape. This element may appear by itself or within a <group> element. If a <shapetype> is referenced using the type= attribute, any attributes specified in the shape will override those found in the shapetype.

<!element shape (%shape.elements;)* ><!attlist shape %coreattrs; %shapeattrs;  type cdata #implied -- reference to shapetype --  adj  cdata #implied -- list of adjust values for parameterized paths --  path cdata #implied -- string with command set describing a path - >

The Shape Element

Shadow

Fill

Path

Stroke

Background

TextPath

Group

The Fill Element

VML

Presented: NgocNM

Menu

Introduction fill element1

Table properties2

Description Attribute3

Thank you !4

Introduction fill element

This sub-element may appear inside a shape, shapetype, background or most predefined shape elements to describe how the path should be filled if something beyond a solid color fill is desired. The attributes of the fill element can used to describe a powerful set of image or gradient based fill patterns. Extensions to the VML fill definition may be encoded as sub-elements offill.

Table properties

Name Space Attribute TypeDefault Value

Description

VML id string nullA unique ID that identifies the shape. Used by script to reference the

shape in a collection.

VML type string "solid"

May be "solid | gradient | gradientradial | tile | pattern | frame" "Tile", "pattern" and "frame" require the image attributes to be supplied.

"Gradient", "gradientradial" and "gradienttitle" requires the gradient attributes to be supplied. Types beyond these are specified

using sub-elements..

VML on boolean trueTurns fill display on. Same as fill attribute in shape.  This overrides

the <shape> fill attribute.

VML color color "white"The main fill color. Same as fillcolor attribute in shape. This

overrides the shape fillcolor attribute.

VML opacity number 1.0 Opacity of the fill.

VML color2 color "white"The secondary color for fill when imageType="pattern" or for gradient

fills.

Table properties

Attributes related to image fills.

VML src string null URL to an image to load for image and pattern fills.

VML size Vector2D "auto"The size of the image. Default is pixel size of the image. May be

specified in CSS absolute units or as a fraction of the path bounding box.

VML origin Vector2D "auto"Point relative to upper left corner of the image that is treated as the

origin of the image, specified as a fraction of the image size.  Default is the center of the image.

VML position Vector2D "auto"Point in the reference rectangle of the shape to position the origin of the image, specified as a fraction of the image size.  Default is the

center of the containing block.

VML aspect string "ignore"

"ignore" – ignore aspect issues, "atleast" – image is at least as big as the imageSize, "atmost" – image is no bigger than imageSize. In each case, the imageSize attribute will be adjusted to preserve the aspect of

the image.

VML alignshape booleantrueIf "true", align the image with the shape else align the image with

the window.

Table propertiesAttributes related to gradient fills.

VML colors string null

Intermediate colors in the gradient and their relative positions along the gradient. e.g. "30% red, 70% blue, 90% green".  Primary color

(fillcolorattribute in shape) is 0% and secondary color (color2 attribute) is 100%.

VML angle number "0" The angle along which the gradient goes

VML focus number "0" Focus point for linear gradient fill. Values go from –100 to +100.

VML focussize Vector2D 0,0 Size of the inner most rectangle for radial gradients

VMLfocuspositio

nVector2D 0,0 Position of the inner most rectangle for radial gradients

VML method string "sigma""none", "linear", "sigma" or "any"

Description Attribute

ID Attribute: A name that provides a unique identifier for a fill. Read/write. String.

Tag Syntax : <v: element id="expression">Script Syntax:element.id="expression"expression=element.idRemarks:Use ID to refer to a specific fill. Once you have created a fill and given it an ID, you can use the ID name when you want to manipulate the fill.

ExampleThe shape has a fill ID called "myfill".<v:shape id="rect01"    coordorigin="0 0" coordsize="200 200"    strokecolor="red"    style="top:1;left:1;width:50;height:50"    path="m 1,1 l 1,200, 200,200, 200,1 x e">    <v:fill id="myfill"/>    </v:shape>

Description Attribute

Type Attribute : Determines the type of fill. Read/write. VgFillType.Tag Syntax : <v: element type="expression">Script Syntax :element.type="expression"expression=element.typeRemarks: Values include:

Type Description

solid The fill pattern is solid. Default.

gradient The fill colors blend together in a linear gradient from bottom to top.

gradientradial The fill colors blend together in a radial gradient.

tile The fill image is tiled.

pattern The image is used to create a pattern using the fill colors.

frame The image is stretched to fill the shape.

.

ExampleA red foreground and blue background fill is created using the pattern of the image myimage.gif   <v:shape id="rect01"    coordorigin="0 0" coordsize="200 200"    strokecolor="red"    style="top:1;left:1;width:50;height:50"    path="m 1,1 l 1,200, 200,200, 200,1 x e">    <v:fill color="red" color2="blue" type="pattern" src="myimage.gif"/>    </v:shape>

Description Attribute

Src Attribute: Defines the image to load for a fill. Read/write. String.Tag Syntax : <v: element src="expression">Script Syntax:element.src="expression"expression=element.srcRemarksURL to an image to load for image and pattern fills. This attribute must always be present and point to valid image data for a picture to appear. If this attribute appears alone (that is, no HRef or Title

attribute), then the image is linked.

  

ExampleA tiled image using the file myimage.gif as a source is displayed.<v:shape id="rect01"    coordorigin="0 0" coordsize="200 200"    strokecolor="red"    style="top:1;left:1;width:50;height:50"    path="m 1,1 l 1,200, 200,200, 200,1 x e">    <v:fill type="tile" src="myimage.gif"/>    </v:shape>

Description AttributeColor Attribute: Defines the color of a fill. Read/write. VgColor.Tag Syntax : <v: element color="expression">Script Syntax:element.color="expression"expression=element.colorRemarks:

Overrides the FillColor attribute of a shape. The default value is White.

ExampleThe fill color of the shape is green

   <v:shape id="rect01"    coordorigin="0 0" coordsize="200 200"    strokecolor="red"    style="top:1;left:1;width:50;height:50"    path="m 1,1 l 1,200, 200,200, 200,1 x e">    <v:fill color="green"/>    

</v:shape>

Description AttributeAngle Attribute: Defines the angle of a gradient fill. Read/write. VgAngle.Tag Syntax : <v: element angle="expression">Script Syntaxelement.angle="expression"expression=element.angleRemarksThe vector of a gradient is perpendicular to the vector of the blend direction from one color to another. The default value is 0 (zero) degrees, which is a horizontal vector from left to right. Positive angles rotate the gradient in a counter-clockwise direction.

ExampleThe fill of the shape is composed of a gradient of two colors, running from blue to red at an angle of 45 degrees. Red will be in the top left corner and blue will be in the bottom right corner.   <v:shape id="rect01"    coordorigin="0 0" coordsize="200 200"    strokecolor="red"    style="top:1;left:1;width:50;height:50"    path="m 1,1 l 1,200, 200,200, 200,1 x e">    <v:fill type="gradient" color="blue" color2="red" angle="45"/>    </v:shape>

Description Attribute

Method Attribute: Defines the method used to generate a gradient fill. Read/write. VgSigmaType.Tag Syntax : <v: element method="expression">Script Syntax :element.method="expression"expression=element.methodRemarks:Values include:

Value Description

None No sigma fill.

Linear Linear sigma fill.

Sigma Sigma fill. Default.

Any Any sigma fill.

 ExampleThe shape will have a red linear gradient fill.<v:shape id="rect01"    coordorigin="0 0" coordsize="200 200"    strokecolor="red"    style="top:1;left:1;width:50;height:50"    path="m 1,1 l 1,200, 200,200, 200,1 x e">    <v:fill color="red" type="gradient" method="linear"/>    </v:shape>

The Background Element

VML

Presented: HoangVQ

Contents

What is VML1

Description background element2

Attribute3

Answer and question4

Hot Tip

• What is VML– Vector Markup Language (VML) is a

deprecated XML language used to produce vector graphics.

– VML is used by most Microsoft Office applications, such as Microsoft Word, Microsoft Visio, etc. within its HTML files, created using the 'Save As HTML' option (plain HTML or MHT). Such files retain complete vector information, and can be reopened for editing using other Microsoft applications, such as Microsoft PowerPoint.

Background element

This element describes the fill of the background of a page using vector graphics fills.

Description

<background  id=null  fill="true"  fillcolor="white"/>

Attribute

1

Id attribute

Provides a unique identifier for an element.

2

Fill Attribute

Determines whether the

closed path will be filled.

3

FillColor Attribute

Defines the brush color that fills the closed path of a

shape.

Attribute

1

Id attributeTag Syntax

<v:elementname id= "idname">

Script Syntaxelementname.id=

"idname"expression=

elementname.id

2

Fill AttributeTag Syntax

<v:element filled="expression">

Script Syntaxelement.filled="expression"expression=element.filled

3

FillColor AttributeTag Syntax

<v:element fillcolor="expression">

Script Syntaxelement.fillcolor=

"expression"expression=

element.fillcolor

VECTOR MARKUP LANGUAGE

Presented: KhuongNT

ShapeType Elements

WHAT IS SHAPETYPE ELEMENT

For cases where a shape is to be used multiple times on a web page, VML provides the shapetype element. A shapetype is essentially a shape element which is given an id that can then be referenced within another shape element. The shape element which references the shapetype id is drawn per the attributes of the shapetype unless overidden within the shape element itself.

USING SHAPETYPE

If you wanted to draw many shapes that have the same or similar properties, it would be tedious if you had to repeatedly type the same property attributes for each shape. VML provides the <shapetype> element so that you can define a prototype of a shape. You can then use the <shape> element to instantiate many copies of shapes from the same shapetype.

3 STEPS TO DEFINE A SHAPETYPE

1. Type a <shapetype> element and give it a name by specifying the id attribute.

2. Describe the shapetype by using its property attributes or sub-elements.

3. Instantiate a shape by typing a <shape> element, and refer the type attribute

CREATE SHAPETYPE WITH ID

- Type a <shapetype> element and give it a name by specifying the id attribute.

DESCRIBE THE SHAPETYPE

- Then, you alter the shapetype by setting some property attributes, such as fillcolor="red" strokecolor="blue". Or, you can use sub-elements inside the shapetype, Such as <path>, <fill>, <stroke> (we will talk about those sub-elements in later topics).

INSTANTIATE & OVERWITE

- Then, you instantiate a shape from the shapetype "MyShape" by specifying type="#MyShape", as shown in the following VML representation. This shape inherits all properties from the shapetype "MyShape", and is displayed within its containing box at a size of 100 by 80.

USING IN MUTIL GROUPS

CODE VML DEMO

VML DEMO WITH IE

Thank you!