graphic sb

25
Graphic Voice Page Control Tool Michael

Upload: xscconan

Post on 07-Jul-2015

328 views

Category:

Technology


3 download

DESCRIPTION

Graphic sb

TRANSCRIPT

Page 1: Graphic sb

Graphic Voice Page Control Tool

Michael

Page 2: Graphic sb

In order to get better user experience, we suggest the graphic tool for solve those requirements. It has easily operation in UI design, more powerfulexpansibility. We can get a directly view of a voice page and easily for download selected voice pages’ construct Excel, XML, ER Diagram

Why graphic tool?

Requirements

1. Ability to download a searchable/read-only version of Voice Site (Ex: Excel, XML, ER Diagram Hendy Putra etc)2. Show parent pages for a page3. Error Pop-Up if trying to delete a page that other pages point to

Page 3: Graphic sb

Implementation

Using SVG for create image Using AJAX for data communication by SB API.

Database Changes

targetPageId destinationPageId domId node1 node2

0ac53296-02-133afe940d6-9af5e7c2-b95

0ac53296-02-133afe940d6-9af5e7c2-b95

pageTypeSelection

M595.4096767535219,668.71

M695.4096767535219,668.71

Add an new table for store the relation ship informationand the node of line’s position.

For compatible old voice page, API will be execute in fist time system initialization, data will be inserted into the table, data is parsed from the voice xml.And the table will be updated, when relation changed

Page 4: Graphic sb

Mockup Work Flow for better understanding what it is

Click for choice voice page

Click for show diagram

Page 5: Graphic sb

It will spend a bit time for initialize system and loading js or image files in frist time

Page 6: Graphic sb

Drag-ableDrag-able

Double click for editDrag-able

Home page and selected page

End page

Normal page Selected page

All of relation with selected voice pages will display here with links

Page 7: Graphic sb
Page 8: Graphic sb

Delete

Page 9: Graphic sb

Maybe we can do following expandable features in future

Page 10: Graphic sb

Tool panel, we can drag a page item for create

buttons for print page and save as image or xml file

Minimize tool panelhide tool panel

Node for change the line’s position

Home page

End the call

Page comment will popup when mouse over

Page 11: Graphic sb

Check out phone number and assign an new onefloat

Page 12: Graphic sb
Page 13: Graphic sb
Page 14: Graphic sb
Page 15: Graphic sb
Page 16: Graphic sb

float

Page 17: Graphic sb

float

Page 18: Graphic sb
Page 19: Graphic sb

Click for select a voice page item

Click the button for edit goto relation

Page 20: Graphic sb

Highlight for exist relationClick button for add relation with destination object

Page 21: Graphic sb

Drag the arrows for create relation with the destination voice page

Page 22: Graphic sb

Click button for add relation ship with destination object

Destination page will be selected in drop down box when clicked

Page 23: Graphic sb

Double click the voice page item

Page 24: Graphic sb

Click for change typeChange page nameChange page number

Change home pageCopy voice pageDelete voice pageShow detail of voice page

Page 25: Graphic sb