Smart UML Sketch enabled multiuser UML Diagram designer

Smart UML – Sketch enabled multiuser UML Diagram designer Architecture & Overview Presented By ¢Omar Al Zabir ¢Shahedul Huq Khandkar ¢Mehfuz Hossain ¢Awnik Raihan 1

Smart UML Application 2

Innovative User Interface Design shorthand, create connected from one click In-place convenient editor withand fullsymbols pen support Create colorful lively symbols great looking diagrams! 3

Ink support Seamless natural drawing and editing with pen Freehand using Microsoft Tablet PC SDK Draw on existing diagrams with ink to make simple changes Arrow Head Diamond 4

Enhanced Mouse support Faster drawing using the “Design prediction” feature. Auto introduce design elements whenever itsmouse necessary. Drawing and editing at the same time. Right button is always It Draw predicts what you will draw next and automatically selects the right a connector, it automatically adds the right symbol the handy pointer. Never select the pointer tool again tool for you 5

Collaboration Transfer/Share with using team mates quickly over Firewall friendlydiagrams plain (HTTP) communication Draw diagrams in a. English team the network LAN, WANfeature. and. SP 2 Internet (Windows XP -It’s No an problem) drawing electronic whiteboard! 6

Sketch Recognition 7

Basic Architecture Drawing Board This layer works with UI. It collect strokes in buffer and pass to parser layer Sketch Recognition Parser A parser can have input strokes in UI dependant format and convert it to a generic stroke format Generic Geometric Shape Recognizer A Shape Recognizer recognize the basic geometric shape from input strokes (i. e. Line, triangle. . . ) Context specific Symbol Recognizer A Symbol Recognizer detects a context specific symbol from a collection of basic geometric shape. For ex: a UML Symbol Recognizer will detect ‘Note’ if the basic shape is Rectangle and context is Use Case. Object Model 8

Drawing Board A drawing board is a place where user can draw freehand diagrams using pen interface. The drawing board collects the user strokes using Microsoft Table PC ‘s Ink interface. After a certain interval it passes the collected strokes for detection. For use case diagram, it passes the collection when ever a stroke is generated. 9

Parser This is the first layer of sketch recognition. It converts the input data (i. e. strokes) to a common format ( Point array ) which is compatible with other layers. By replacing only this Parser layer the recognition layer can be reused in any other purpose. UI Shape Recognizer Parser Array of Microsoft. Ink. Stroke Common data format (Point array) 10

Detecting a Symbol This layer detects the basic geometric shapes from Point array. For multiple strokes, it will be an array of Point array Iteration 1 Symbol Recognizer Shape Recognizer No match found Shape. Line Common data format (Point array) No symbol found for shape in current context, so save in stake Iteration 2 Symbol Recognizer Shape Recognizer Common data format (Point array) Shape. Line No symbol found for shape in current context so match combinations with stack value Object of Object. Model. Actor 11

Generic Geometric Shape Recognizer Is. Line Is. Rectangle Is. Diamond Is. Angle Is. Triangle Is. Ellipse Is. Zigzag Is. Circle No Yes Create Object with values 12

Recognizing basic Shapes Basic Calculations: Length of a stroke = sum of distance between every two points Length of enclosed rectangle [(height + width) x 2] = LER Ratio of ( length. Of. Stroke / length. Of. Convex. Hull ) = Lsc Ratio of ( Area of Convex Hull and Enclosing Rectangle) = ACE Perimeter. Of. Enclosing. Rectangle = PER 13

Recognizing basic Shapes Zig. Zag: Ratio of ( length. Of. Stroke / length. Of. Convex. Hull ) should be between 1. 6 and 4. 2 Circle: Two end met false Yes Lsc > 1. 3 false Yes . 7<Ace<. 8 false Yes true 14

Recognizing basic Shapes Rectangle: Two end met false Yes Ace>=. 8 false Yes true Diamond: Two end met false Yes PER/LER >1. 3 false Yes. 7<Ace<. 8 Yes true false 15

Recognizing basic Shapes Line: A = distance. Between 2 End / Length. Of. Stroke Two end met B = Enclosing. Rec. Height>Enclosing. Rec. Width Yes C = height / width > 6 D = convex. Hull. Area / enclosing. Rec. Area E = Average. Slope. Variation false X < 0. 8 false Yes false B Yes false C Yes D < 0. 3 false E<5 Yes True 16

XUML Persistence 17

XUML Overview XUML = XML for UML New human readable application independent generic format named “XUML” Easier for XML Transformation using XSL in order to build custom import/export to other formats. For ex, Rose XMI Supports first ever “XSD” validation technique for dynamic UML syntax and semantics checking. 18

Simple Diagram A simple use case diagram( using a well-known UML tool ) *John Logs in , he requires to have an user name and a password 19

XMI – Unreadable, too complex Generate tones of unreadable xml <? xml version="1. 0" encoding="UTF-8"? > <XMI xmi. version="1. 0"> <XMI. header> <XMI. documentation> <XMI. exporter>Novosoft UML Library</XMI. exporter> <XMI. exporter. Version>0. 4. 20</XMI. exporter. Version> </XMI. documentation> <XMI. metamodel xmi. name="UML" xmi. version="1. 3"/> </XMI. header> <XMI. content> <Model_Management. Model xmi. id="xmi. 1" xmi. uuid="-84 -16 -2 -12 -1 e 1 be 92: 10122353358: -7 ffe"> <Foundation. Core. Model. Element. name>untitled. Model</Foundation. Core. Model. Element. name> <Foundation. Core. Model. Element. is. Specification xmi. value="false"/> <Foundation. Core. Generalizable. Element. is. Root xmi. value="false"/> <Foundation. Core. Generalizable. Element. is. Leaf xmi. value="false"/> <Foundation. Core. Generalizable. Element. is. Abstract xmi. value="false"/> <Foundation. Core. Model. Element. name>Login</Foundation. Core. Model. Element. name> <Foundation. Core. Model. Element. is. Specification xmi. value="false"/> <Foundation. Core. Generalizable. Element. is. Root xmi. value="false"/> <Foundation. Core. Generalizable. Element. is. Leaf xmi. value="false"/> <Foundation. Core. Generalizable. Element. is. Abstract xmi. value="false"/> <Foundation. Core. Model. Element. namespace> <Foundation. Core. Namespace xmi. idref="xmi. 1"/> </Foundation. Core. Model. Element. namespace> //----- More to Continue--------------------------- 20

XUML Format Use Case Diagram ( Smart UML ) <Project> <Use. Case. Diagram> <actor id=“actor 1”> <label>John</label> <associated. With id=“usecase 1” /> </actor> <use. Case id=“use. Case 1”> <includes id=“use. Case 2” /> <includes id=“use. Case 3” /> </use. Case> <use. Case id=“use. Case 2” > <label>Password</label> </use. Case> <use. Case id=“use. Case 3” > <label>User. Name</label> </use. Case> </Use. Case. Diagram> </Project> 21

XSD Validation for XUML Actor- Use case association validation <actor guid="aco"> <label>corporate customer</label> <generalization> <to> <usecase guid="uc 0"></usecase> </to> </actor> 22

Valid Diagram using XUML Final Diagram after “XSD” validation 23

Class Diagram validation Class – Note Association <association> <label>order. Association</label> <from multiplicity="1" from. Label="places"> </from> <to multiplicity="n" to. Label="placed"> <note guid="cls 1"></note> </to> </association> 24

Distributed Command Pattern 25

Distributed Command Pattern Executing same command in same process, out-of-process, and over the network in another running process It is used to perform the same action on multiple running application producing the same result in each application For example, in a chat server, if one client sends a message, it shows the message on its own screen and also on all the clients connected to the same server 26

Overview of Command Pattern Invokes Invoker ICommand Implements Target Action Concrete Command Sample Code: ICommand command = new File. Save. Command( File. Content ); Command. execute(); 27

Another variant of Command Pattern Creates Invoker Command. Context Calls Target Execute Command. Facade ICommand Make Implements Executes Command. Context File. Data ); Command. Factorycontext = new File. Save. Context( Concrete Command Instantiate Command. Factory. Execute( context ); 28

Distributed Command Pattern Command needs to be executed on the same process and also on other processes simultaneously Hi File. Save. Command Hi Hi 29

Architecture Invoker Execute Message Bus Command. Bus Creates Context ICommand. Executor Distributed Command Executor Receive Serialize Context and Send Local Command Executor Action Execute Network Target Locally Command. Context context = new File. Save. Context( File. Data ); Target Command. Bus. Execute( context ); 30

Interfaces Command. Bus Execute( Command. Context ) ICommand. Executor Execute( Command. Context ) Execute. Locally( Command. Context ) Command. Pipeline Add( ICommand. Executor ) Remove( ICommand. Executor ) 31

Distributed Command Executor Abstract transportation layer Remoting. Transporter Distributed Command Executor Send Receive ITransporter TCPTransporter HTTPTransporter SMTPTransporter 32

Collaboration in Smart UML Transfer/Share with (HTTP) team mates Firewall friendlydiagrams plain Draw diagrams in a. English team using the quickly over LAN, drawing WAN (Windows andfeature. Internet communication XPIt’s SP 2 an - No problem) network electronic whiteboard! 33

The End 34