Application Program

Component: At application structural level, component is a closely related piece of code, like class of Object-Oriented application program

Connector: Parameter-passing function as link between classes, so connector is common parameter of different classes.

Interface:

Link:

Example: Back to our previous example, suppose we use the following Java code to implement to JavaScript function, function MsgBox (textstring) {alert (textstring)}. A couple of lines Java code that implement the above form and submission may look like:

Coding example:

int n = JOptionPane.showConfirmDialog(frame,null,null, JOptionPane.YES_NO_OPTION); // generate a form

            …

            public String getValidatedText()  {

                        return typedText;

            }

// get user input text string

            typedText = textField.getText();

String ucText = typedText.toUpperCase();

…

//using Java Socket to transmit user input text string to web server

            Socket user = new Socket(“www.amazon.com”,80);

PrintWriter pout = new Printwriter(user.getOutputStream(),true);

Pout.println(ucText.toString());

From the above, we can see sequential structural diagram:

<!- - Namespace declaration - - >

<?xml version = “1.0”  encoding = “UTF-8” ?>

<xArch  xmlns = “http://www.ics.uci.edu/pub/arch/xArch/instance.xsd”

xmlns:instance = “http://www.ics.uci.edu/pub/arch/xArch/instance.xsd”

xmlns:types = “http://www.ics.uci.edu/pub/arch/xArch/types.xsd”

xmlns:xlink = “http://www.w3.org/1999/xlink”

xmlns:xsi = “http://www.w3.org/2000/10/XMLSchema-instance”>

<types:archStructure xsi:type = “types:ArchStructure”>

      <!- - Component: GenerateForm Description- - >

      <types:component instance:id = “GenerateFormComp” xsi:type = “types:Component”>

                  <types:description xsi:type = “instance:Description”>GenerateForm</types:description>

                  <types:interface instance:id = “GenerateFormCompRight” xsi:type = “types:Interface”>

                  <types:description xsi:type = “instance:Description”> GenerateForm.Right </types:description>

                  <types:direction xsi:type = “instance:Direction” >out</types:direction>

                  <types:type xlink:type = “simple” xlink:href = “ #tRightType”/>

                  </types:interface>

                  <types:type xlink:type = “simple” xlink:href = “#tGenerateForm” />

      </types:component>

<!- - Component: GetUserInput scripting Description- - >

      <types:component instance:id = “GetUserInputscriptingComp” xsi:type = “types:Component”>

                  <types:description xsi:type = “instance:Description”>GetUserInputscripting</types:description>

                  <types:interface instance:id = “GetUserInputscriptingLeft” xsi:type = “types:Interface”>

                  <types:description xsi:type = “instance:Description”> GetUserInputscripting.Left</types:description>

                  <types:direction xsi:type = “instance:Direction” >in</types:direction>

                  <types:type xlink:type = “simple” xlink:href = “ #tLeftType”/>

                  </types:interface>

                  <types:interface instance:id = “GetUserInputscriptingRight” xsi:type = “types:Interface”>

                  <types:description xsi:type = “instance:Description”> GetUserInputscripting.Right </types:description>

                  <types:direction xsi:type = “instance:Direction” >out</types:direction>

                  <types:type xlink:type = “simple” xlink:href = “ #tRightType”/>

                  </types:interface>

                  <types:type xlink:type = “simple” xlink:href = “#tGetUserInputscripting” />

      </types:component>

<!- - Component: TransmitString Description- - >

      <types:component instance:id = “TransmitString” xsi:type = “types:Component”>

                  <types:description xsi:type = “instance:Description”>TransmitString</types:description>

                  <types:interface instance:id = “TransmitStringLeft” xsi:type = “types:Interface”>

                  <types:description xsi:type = “instance:Description”> TransmitString.Left </types:description>

                  <types:direction xsi:type = “instance:Direction” >in</types:direction>

                  <types:type xlink:type = “simple” xlink:href = “ #tLeftType”/>

                  </types:interface>

                  <types:type xlink:type = “simple” xlink:href = “#tTransmitString” />

      </types:component>

<!- - Connector: Con1(GenerateForm - GetUserInput) Description- - >

      <types:connector instance:id = “Con1” xsi:type = “types:Connector”>

                  <types:description xsi:type = “instance:Description” > pipe Operator</types:description>

                  <types:interface instance:id = “Con1Left” xsi:type = “types:Interface”>

                  <types:description xsi:type = “instance:Description”>Con1.Left</types:description>

                  <types:direction xsi:type = “instance:Direction:>in</types:direction>

                  <types:type xlink:type = “simple” xlink:href = “#tLeftType”/>

                  </types:interface>

                  <types:interface instance:id = “Con1Right” xsi:type = “types:Interface”>

                  <types:description xsi:type = “instance:Description”>Con1.Right</types:description>

                  <types:direction xsi:type = “instance:Direction:>out</types:direction>

                  <types:type xlink:type = “simple” xlink:href = “#tRightType”/>

                  </types:interface>

                  <types:type xlink:type = “simple” xlink:href= “#tCon1” />

      </types:connector>

<!- - Connector: Con2 (GetUserInput - TransmitString) Description- - >

<types:connector instance:id = “Con2” xsi:type = “types:Connector”>

                  <types:description xsi:type = “instance:Description” >Con2</types:description>

                  <types:interface instance:id = “Con2Left” xsi:type = “types:Interface”>

                  <types:description xsi:type = “instance:Description”>Con2.Left</types:description>

                  <types:direction xsi:type = “instance:Direction:>in</types:direction>

                  <types:type xlink:type = “simple” xlink:href = “#tLeftType”/>

                  </types:interface>

                  <types:interface instance:id = “Con2Right” xsi:type = “types:Interface”>

                  <types:description xsi:type = “instance:Description”>Con2.Right</types:description>

                  <types:direction xsi:type = “instance:Direction:>out</types:direction>

                  <types:type xlink:type = “simple” xlink:href = “#tRightType”/>

                  </types:interface>

                  <types:type xlink:type = “simple” xlink:href= “#tCon2” />

      </types:connector>

<!- - Link: GenerateForm - Con1 Description- - >

<types:link instance:id = “link1” xsi:type = “types:Link”>

                  <types:description xsi:type = “instance:Description”>GenerateForm-Con1</types:description>

                  <types:point xsi:type = “types:Point”>

                  <instance:anchorOnInterface xlink:href = “#Con1Left” xsi:type = “instance:XMLLink” xlink:type = “simple”/>

                  </types:point>

                  <types:point xsi:type = “types:Point”>

                  <instance:anchorOnInterface xlink:href = “#GenerateFormRight” xsi:type = “instance:XMLLink” xlink:type = “simple”/>

                  </types:point>

</types:link>

<!- - Link: GetUserInput - Con1 Description- - >

<types:link instance:id = “link2” xsi:type = “types:Link”>

                  <types:description xsi:type = “instance:Description”>GetUserInput – Con1</types:description>

                  <types:point xsi:type = “types:Point”>

                  <instance:anchorOnInterface xlink:href = “#Con1Right” xsi:type = “instance:XMLLink” xlink:type = “simple”/>

                  </types:point>

                  <types:point xsi:type = “types:Point”>

                  <instance:anchorOnInterface xlink:href = “#GetUserInputLeft” xsi:type = “instance:XMLLink” xlink:type = “simple”/>

                  </types:point>

</types:link>

<!- - Link: GetUserInput – Con2 Description- - >

<types:link instance:id = “link3” xsi:type = “types:Link”>

                  <types:description xsi:type = “instance:Description”>GetUserInput-Con2</types:description>

                  <types:point xsi:type = “types:Point”>

                  <instance:anchorOnInterface xlink:href = “#Con2Left” xsi:type = “instance:XMLLink” xlink:type = “simple”/>

                  </types:point>

                  <types:point xsi:type = “types:Point”>

                  <instance:anchorOnInterface xlink:href = “#GetUserInputRight” xsi:type = “instance:XMLLink” xlink:type = “simple”/>

                  </types:point>

</types:link>

<!- - Link: TransmitString –Con2 Description- - >

<types:link instance:id = “link4” xsi:type = “types:Link”>

                  <types:description xsi:type = “instance:Description”>Con2-TransmitString</types:description>

                  <types:point xsi:type = “types:Point”>

                  <instance:anchorOnInterface xlink:href = “#Con2Right” xsi:type = “instance:XMLLink” xlink:type = “simple”/>

                  </types:point>

                  <types:point xsi:type = “types:Point”>

                  <instance:anchorOnInterface xlink:href = “#TransmitStringLeft” xsi:type = “instance:XMLLink” xlink:type = “simple”/>

                  </types:point>

</types:link>

</types:archStructure>

… …