TS 73 MobilitySVGComponents

SVG Components Test Specification

Author: Fabiola Galleros Rios, updated by Martin Kanak
Version: 3.2
Lastupdate: 25.10.2012
Introduction: With the JSR-226 support included in the Netbeans Mobility Pack for CLDC/MIDP, you can now use Scalable Vector Graphics (SVG) files to add vector-based graphics to your mobile applications. SVG files are compact and give you a way to provide high-quality graphics on resource-limited handheld devices. SVG also supports scripting and animation, so it is ideal for interactive, data-driven, personalized graphics.
Comment:

Contents


Test suite: Drag&Drop SVG Components from the Palette to the Flow

Purpose: Specifies behavior of the SVG components when you Drag&Drop into the Flow Design.
Setup: Open Visual Design document and click in Flow Design.

  1. SVG Screens
    1. Click and drag each SVG screen (SVG Splash screen ,SVG Wait Screen, SVG Player) from the SVG Components palette category to the Flow Design.
    • EXPECTED RESULT: The Screens have to appear in the Flow Design and the Navigator Window will displays all screens that have been added to the visual design in a tree formation. Selection has to be synchronized with the selection in the Navigator Window and Property Sheet window.
  2. Menu Element
    1. Drag&Drop List Element from the component palette to List Screen in Flow Design.
    2. Drag&Drop List Element from the component palette to Form, TextBox, Alert, SplashScreen, WaitScreen, PIMBrowser, FileBrowser, Login Screen, SMScomposer screens and background in Flow Design.
    • EXPECTED RESULT:
      Action 1: The List Element have to appear next to the SVG Menu screen in the Flow Design. The Navigator Window will displays all List Elements that have been added to the List Screen in a tree formation.
      Action 2: The action must be denied for each Alert, List, TextBox, SplashScreen, WaitScreen, PIMBrowser, FileBrowser, Login Screen, SMScomposer screens and Mobile Device in the Flow Design
  3. Menu Action
    1. Drag&Drop all Command components from the Palette to the SVG Menu screen.
    2. Drag&Drop Menu Action from the component palette to the commands assigned to the SVG Menu screen in Flow Design.
    3. Drag&Drop Menu Action from the component palette to SVG screens(SVG Splash, SVG Wait Screen, SVG Player) and to the follow screens: Form, TextBox, Alert, SplashScreen, WaitScreen, PIMBrowser, FileBrowser, Login Screen, SMScomposer screens and finally to background in Flow Design.
    • EXPECTED RESULT:
      Action 1: New "menu-action" method is added to the source code. Each menu component (which is using Menu Action) has its own method.
      Action 2: The Menu Action icon have to appear next to the each command assigned to the Menu Screen in the Flow Design. The Navigator Window will displays all List Actions that have been added to the Menu screen in a tree formation.
      Action 3: The action must be denied for each commands of an Alert, List, TextBox, SplashScreen, WaitScreen, PIMBrowser, FileBrowser, Login Screen, SMScomposer screens and Mobile Device in Flow Design
  4. SVG Image
    1. Drag&Drop SVG Image from the component palette to the Screens (TextBox, List, Alert, PIMBrowser, FileBrowser, Login Screen, SMScomposer, WaitScreen and SplashScreen)in Flow Design.
    2. Drag&Drop SVG Image from the component palette to SVG Splash screen, SVG Wait screen, SVG Player and SVG Menu.
    • EXPECTED RESULT:
      Action 1: The action must be denied for the all these screens.
      Action 2: The action must be allow for these SVG Screens. The Navigator Window will displays all the SVG Image Resources that have been added to the Flow Design in a tree formation.


Test suite: Screen Design

Purpose: Verify the behavior of the SVG components in the Screen Design Area Setup:

  1. SVG Screens
    1. Drag&Drop components from the follow palette categories(Displayables, Items, Flow, Elements, Resources) to the SVGScreens (SVG Splash screen, SVG Wait screen, SVG Player and SVG Menu) in Screen Device.
    • EXPECTED RESULT:
      Action 1: The action must be denied for all the components from these categories in the Screen Device.
  2. SVG Screens&Commands
    1. Drag&Drop Commands from the component palette to different SVGScreens in Screen Design.
    • EXPECTED RESULT: The Commands have to appear in the Assigned Commands Area in Screen Design panel. Flow Design will display the commands in the right side of the component. The Navigator Window will displays all Commands that have been added to the FormItems in a tree formation.
  3. SVG Menu Element
    1. Drag&Drop SVG Menu Element from the component palette to SVG Menu Screen in Screen Device.
    2. Drag&Drop SVG Menu Element from the component palette to another screen in the Screen Device.
    • EXPECTED RESULT:
      Action 1: The SVG Menu Element will not appear in the Screen Design only will be reflected in the Flow Design. The Navigator Window will displays all SVG Menu Elements that have been added to the List Screen in a tree formation.
      Action 2: The action must be denied for any other screen in the Screen Design
  4. SVG Image
    1. In the Form Screen drag&drop SVG Image from the component palette to the Screens (TextBox, List, Alert, PIMBrowser, FileBrowser, Login Screen, SMScomposer, WaitScreen and SplashScreen Screens) in Screen Device.
    2. Drag&Drop SVG Image from the component palette to SVG Splash screen, SVG Wait screen, SVG Player and SVG Menu.
    3. Drag&Drop Image Resource from the component palette to the WaitScreen and SplashScreen Screens in Screen Device.
    • EXPECTED RESULT:
      Action 1: The action must be denied for the all these screens.
      Action 2: The action must be allowed for these Screens. The Navigator Window will displays all the SVG Image that have been added to the Screen Design in a tree formation.
      Action 3: The action must be allowed for all these screens


Test suite: Working with SVG files

Purpose: Work with svg images.
Setup: First add the SVG file to the <project_home>/src directory of your project.

  1. Adding SVG File in the Flow Desing
    1. To add an SVG graphic to the application flow, drag an SVGMenu, SVGSplashScreen, or SVGWaitScreen component from the Component Palette into the Flow Designer. Then drag and drop the graphic from the Projects window into the component.
    • EXPECTED RESULT: The action must be allow for these Screens. The Navigator Window will displays all the Image Resources that have been added to the Screen Design in a tree formation. NOTE: This action must be denied for all the screen from the Displayable palette category.
  2. Adding SVG File in the Screen Desing
    1. Drag and drop the SVG graphic from the Projects window into the open screen.
    • EXPECTED RESULT: The SVG graphic will be display in the screen Device. The Navigator Window will displays all the Image Resources that have been added to the Screen Design in a tree formation. NOTE: This action must be denied for all the screen from the Displayable palette category.
  3. Adding SVG File to the SVG Image component
    1. Drag&Drop SVG Image to the SVGMenu, SVGSplashScreen, SVGWaitScreen or SVGPlayer.
    2. Go to Windows Navigator select SVG Image from Resource node, right click and select Image Properties.
    3. To invoke the Resource Path Window by clicking the Elipsis (...) button.
    4. Select the Image's path and press OK.
    • EXPECTED RESULT: The SVG graphic will be display in the screen Device. The Navigator Window will displays all the Image Resources that have been added to the Screen Design in a tree formation. NOTE: This action must be denied for all the screen from the Displayable palette category.


Test suite: SVG Editor - Toolbar

Purpose: Work with svg Images Editor through its toolbar.
Setup: First add the SVG file to the <project_home>/src directory of your project. Double click in the SVG file to open it in Editor mode.

  1. View button
    1. Use some representative set of svg images - open them both from a project and as a standalone file.
    2. Error Reporting - Try some invalid svg file(s)
    • EXPECTED RESULT:
      Action 1: Verify that the svg images are displayed correctly.
      Action 2: Verify that error reports are meaningfull
  2. Zoom buttons
    1. The toolbar has 4 differents Zoom Buttons: Zoom in/out, Zoom to fit (on screen) and Zoom control combo box. Select a SVG file and press Zoom in/out.
    2. Select a SVG file and press Zoom to fit (on screen).
    3. Select a SVG file select a percentage from Zoom control combo box
    • EXPECTED RESULT:
      Action 1: Zoom in/out from on a selection.
      Action 2: It will zoom the canvas to fill the screen.
      Action 3: SVG image zoom will be set from 25 to 400 percent.
  3. Toogle buttons
    1. The toolbar has 4 differents Toggle Buttons: Toggle Show Tooltip, Toggle Highlight, Toggle Scale, Toggle Show ViewBox. Select a SVG file and press Toggle Show Tooltip.
    2. Select a SVG file and press Toggle Highlight button
    3. Select a SVG file and press Toggle Scale button
    4. Select a SVG file and press Toggle Show ViewBox button
    • EXPECTED RESULT:
      Action 1: It will show a tooltip.
      Action 2: Highlight hovered svg element - only when this button is selected.
      Action 3: Scale to configuration.
      Action 4: Verify that according to this selection either
      - only area defined as image "view box" is visible, or
      - all area containg all the element is visible
  4. Layer control buttons
    1. The toolbar has 4 differents Layer control Buttons: Move to top, Move to bottom, Move backward, Move forward. Select a SVG file and press one of this buttons.
    • EXPECTED RESULT: It will move the svg element to the top or bottom or backward or forward of the image NOTE: Shuffles only sibling nodes, does NOT move the node up or down the tree hierarchy.
  5. Insert graphics button
    1. Press Insert Graphic Button.
    • EXPECTED RESULT:
      Action 1: Select the svg file from your directory. The inserted image is locked (or trapped) so that whole subtree behaves as one object (in the sense that user cannot click and select individual elements in the view. However it is still possible to use navigator to do so.)


Test suite: SVG Editor - Animation

Purpose: Work with svg Animations in the Editor.
Setup: First add the SVG Animation file to the <project_home>/src directory of your project. Double click in the SVG file to open it in Editor mode.

  1. start/pause/stop animation Buttons
    1. Set svg animation, press start/pause/stop button
    • EXPECTED RESULT: Verify that the animation starts from the beginning, If you stop the animation verify that the animation starts from the very beginning
  2. Animation slider
    1. Set svg animation, and try to use animation slider
    • EXPECTED RESULT: Check that the slider position and current time is update during animation. Verify that user can use animation slider or current time spinner to change current animation time and finally verify that animation slider range is controlled by the "End time" spinner value.



Test suite: Source XML Editor

Purpose: Work with svg files in XML Editor.
Setup: First add the SVG Animation file to the <project_home>/src directory of your project. Double click in the SVG file to open it in Editor mode and click Source button from the toolbar.

  1. Source XML Editor & Palette
    1. Try to drag various shapes from the "Shapes" palette into XML source view.
    2. Try to add axl code.
    • EXPECTED RESULT:
      Action 1: Synchronization - verify that the shapes in the "Source view" are reflected in the "View view" and vice-versa.
      Action 2: Synchronization - verify that changes done in the "Source view" are reflected in the "View view" and vice-versa.



Test suite: SVG Composer

Purpose: Work with svg composer.
Setup: First add the SVG Animation file to the <project_home>/src directory of your project. Double click in the SVG file to open it in Editor mode and click Source button from the toolbar.

  1. Add a element to svg image
    1. Try to drag various shapes from the "Shapes" palette into opened svg image.
    • EXPECTED RESULT: Shape appears at the image view. The source code is generated in Source view.
  1. Add a folder to the palette
    1. Right click the SVG palette
    2. Choose "Add Folder" action
    3. Add a folder
    • EXPECTED RESULT: New category appears in the palette. Category is named as the folder that user added. All (only) svg files in the folder are shown as new elements in new category. You can d'n'd these new element to opened svg file.


Test suite: SVG Navigator

Purpose: Work with svg navigator.
Setup: First add the SVG Animation file to the <project_home>/src directory of your project. Double click in the SVG file to open it in Editor mode. Click the svg image in editor and there is xml tree visible in Navigator (left bottom corner of IDE)

  1. Show Attributes
    1. Right click the svg tree in Navigator
    2. Choose Show Attributes
    • EXPECTED RESULT: Attributes of tags are either visible or not in the tree.
  1. Show SVG Tags with ID Only
    1. Right click the svg tree in Navigator
    2. Check Show SVG Tags with ID Only
    • EXPECTED RESULT: Only tags with attribute ID are visible in the tree.
  1. Show SVG Animation Tags Only
    1. Right click the svg tree in Navigator
    2. Check Show SVG Animation Tags Only
    • EXPECTED RESULT: Only animation tags are visible in the tree.



Test suite: Export SVG

Purpose: Exporting SVG file as PNG/JPG etc..
Setup: First add a SVG Animation file to the <project_home>/src directory of your project. Double click in the SVG file in Project/Files to open it in Editor.

  1. Save As PNG Image
    1. Righ click the file node or right click the image in SVG composer
    2. Choose _Export as Image__
    3. Exporting as image dialog opens. Set up Image format to PNG. Select a image size, compression, start time. If you have more configurations in project select For All Configurations.
    • EXPECTED RESULT: Frame is exported to the image according to the setting. If there is more configurations in project then the image is generated for every configuration. The image size then depends on the settings in the configuration. Look at Abilities SCREEN_WIDTH, SCREEN_HEIGHT
  1. Save Animation As PNG Image
    1. Righ click the file node or right click the image in SVG composer
    2. Choose _Export Animation as Image__
    3. Exporting Animation dialog opens. Set up Image format to PNG. Select a image size, compression, start and end time, frames per second. If you have more configurations in project select For All Configurations.
    • EXPECTED RESULT: animation frames are exported to the image according to the setting. Every Xth frame is exported - depends on frames per second. The exported animation frames starts and ends on chosen start and end time.
  1. Save Element As PNG Image
    1. Select an svg element in an svg image in SVG Composer
    2. Right click the element and choose Export SVG Element as Image
    3. The Exporting as image dialog opens. Set up Image format to PNG.
    • EXPECTED RESULT: Only the selected element is exported.
  1. Save Animation As JPG Image
    1. Righ click the file node or right click the image in SVG composer
    2. Choose _Export Animation as Image__
    3. Exporting Animation dialog opens. Set up Image format to JPG. Select a image size, compression, start and end time, frames per second. If you have more configurations in project select For All Configurations.
    • EXPECTED RESULT: animation frames are exported to the image according to the setting. Every Xth frame is exported - depends on frames per second. The exported animation frames starts and ends on chosen start and end time.


  1. Save Element As JPG Image
    1. Select an svg element in an svg image in SVG Composer
    2. Right click the element and choose Export SVG Element as Image
    3. The Exporting as image dialog opens. Set up Image format to JPG.
    • EXPECTED RESULT: Only the selected element is exported.
  • more variations...



Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo