Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Graphic sb


Published on

Graphic sb

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Graphic sb

  1. 1. Graphic Voice Page Control Tool Michael
  2. 2. Requirements1. 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 toWhy graphic tool?In order to get better user experience, we suggest the graphic tool for solvethose requirements. It has easily operation in UI design, more powerfulexpansibility. We can get a directly view of a voice page and easily for downloadselected voice pages’ construct Excel, XML, ER Diagram
  3. 3. Implementation Using SVG for create image Using AJAX for data communication by SB API. Database Changes Add an new table for store the relation ship information and the node of line’s position. targetPageId destinationPageId domId node1 node2 0ac53296-02- 0ac53296-02-133afe940d6- pageTypeSe M595.4 M695.409 133afe940d6- 9af5e7c2-b95 lection 096767 67675352 9af5e7c2-b95 535219 19,668.71 ,668.71For 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
  4. 4. Mockup Work Flow for better understanding what it is Click for show diagram Click for choice voice page
  5. 5. It will spend a bit time for initialize system and loadingjs or image files in frist time
  6. 6. Home page and selected page Drag-able Drag-able Drag-able Normal page Double clickpage Selected for edit End pageAll of relation with selected voice pages will display here with links
  7. 7. Delete
  8. 8. Maybe we can do following expandable features in future
  9. 9. Home page Minimizecan drag a page item for create hidewe tool panelTool panel, tool panel Node for change the line’s position Page comment will popup when mouse over buttons for print page and save as image or xml file End the call
  10. 10. float Check out phone number and assign an new one
  11. 11. float
  12. 12. float
  13. 13. Click the button for edit goto relation Click for select a voice page item
  14. 14. Click button for add exist relation Highlight for relationwith destination object
  15. 15. Drag the arrows for createrelation with the destinationvoice page
  16. 16. Destination page will be selected button for add relation Clickin drop down box when clicked with destination object ship
  17. 17. Double click the voice page item
  18. 18. for change type Change page numberClick Change page name Change home page detail of voice page Copy voice voice page Delete page Show