Content Developer Kit - MOTOR 3 XAML 3.1 Brief Overview of XAML Files Extensible Markup Language (XAML)

  • View
    1

  • Download
    0

Embed Size (px)

Text of Content Developer Kit - MOTOR 3 XAML 3.1 Brief Overview of XAML Files Extensible Markup Language...

  • Proprietary and Confidential © Copyright 2015 Hearst Business Media. All Rights Reserved 1 of 19

    Table of Contents

    1 Overview .................................................................................................................................... 3

    2 SVG ........................................................................................................................................... 3

    2.1 Brief Overview of SVG Files .........................................................................................................3

    2.2 SVG Web Resources ......................................................................................................................4

    2.3 MOTOR SVG File Structure ........................................................................................................5

    3 XAML ........................................................................................................................................ 5

    3.1 Brief Overview of XAML Files .....................................................................................................5

    3.2 XAML Web Resources ..................................................................................................................6

    4 Key Concepts for understanding MOTOR SVG & XAML Parts Files .................................. 7 4.1.1 Callouts ................................................................................................................................................... 7 4.1.2 Groups ..................................................................................................................................................... 8 4.1.3 Top-level groups and their relationships ................................................................................................. 9 4.1.4 Shared Components ................................................................................................................................ 9 4.1.5 Solid Filled Components ....................................................................................................................... 12 4.1.6 XML files are “data” ............................................................................................................................. 12

    5 Business Rules ........................................................................................................................ 13

    6 Samples ................................................................................................................................... 14

    6.1 Sample SVG Files .........................................................................................................................14 6.1.1 CDK - 4450142 - Script.svg .................................................................................................................. 14 6.1.2 CDK - 1451190 - Script.svg .................................................................................................................. 15

    6.2 Sample XAML File.......................................................................................................................15

    V1.7 ..1

    Content Developer Kit Part Graphics in SVG & XAML

  • Proprietary and Confidential © Copyright 2015 Hearst Business Media. All Rights Reserved 2 of 19

    6.2.1 CDK - 8522017.xaml ............................................................................................................................ 15

    6.3 Sample TIF Images ......................................................................................................................15

    6.4 Sample Code / Queries (SVG) .....................................................................................................16 6.4.1 Identify all solid-white filled elements directly contained within a tag ......................................... 16 6.4.2 Identify transparent hidden text elements and relate them to the included components ....................... 16

    7 Appendix A: SVG & XAML Viewer Technology .................................................................. 17

    7.1 Overview .......................................................................................................................................17

    7.2 SVG Specification Flavors ...........................................................................................................17

    7.3 SVG Viewers .................................................................................................................................18

    7.4 SVG within WPF (Windows Presentation Foundation) Applications .....................................18

    7.5 XAML graphics within WPF or Silverlight Applications ........................................................19

    8 Document History ................................................................................................................... 19

  • Part Graphics in SVG & XAML

    Proprietary and Confidential Page 3 © Copyright 2015 Hearst Business Media All Rights Reserved

    1 Overview The introduction of Scalable Vector Graphics represents a great opportunity for MOTOR and its customers. Historically, the complexities of identifying automotive parts and components have been greatly simplified by graphic images that represent various components, assemblies and reference elements. Images of this nature have been available for some time. However, the need for more detailed, richer and better quality graphic information is a growing trend. Here, scalable graphics represent a progressive step forward in automotive part illustrations, not only providing crisp detail when magnified but also allowing for interactive and responsive feedback within the image, as well as embedded component / assembly relationships directly within the graphics files.

    2 SVG

    2.1 Brief Overview of SVG Files SVG is an industry standard, “open” file format. Simply stated, an SVG file is merely a set of instructions that describe how to draw an image. The image files are actually XML files that follow the standard SVG “schema”, or structure. The XML tags within the file contain all the information necessary for an SVG viewer to draw the image either on screen or on a printer. For example, the element

    instructs an SVG viewer to draw a line from location (10,10) to (50,50). It also tells the SVG viewer to draw the line in the color black (#000000) and to use a 0.3pt weight line. The SVG standard includes an expressive set of primitives such as lines, polygons, rectangles, ellipses, and other elements to support the presentation of virtually any line drawing. Many SVG elements support a fill color. With current SVG technology, it is possible to change these fill colors dynamically at run time, as demonstrated below:

  • Part Graphics in SVG & XAML

    Proprietary and Confidential Page 4 © Copyright 2015 Hearst Business Media All Rights Reserved

    Later, we will show how this solid filling is important not only for representing components, but also for responding to user interaction. Some SVG elements can be grouped together. To represent grouping, the SVG file includes a parent XML element called a group tag ():

    Although these groupings have no impact on the display of the image, the group tag allows for the handling of a collection of graphic elements (here a line and a rectangle element) as a single entity. Groups can themselves contain groups, as in the example below.

    2

    Note that the top-level group has an ID attribute. Later we will see how, in the MOTOR Part Graphics, only top-level groups will contain IDs, and these IDs group the elements into a single callout.

    2.2 SVG Web Resources While a complete description of the SVG file format is outside the scope of this document, there are several online resources that can be leveraged to aid adoption and understanding of the file format. Below is a brief list of some helpful online resources.

    Web Page Description

    http://www.w3.org/Graphics/SVG/ The W3C home page for the SVG format specification.

    http://en.wikipedia.org/wiki/Scalable_Vector_Graphics The Wikipedia page for SVG.

    http://www.adobe.com/svg/ The Adobe SVG Viewer home page. The Adobe SVG viewer is a popular viewer, although other viewer implementations are available.

    http://www.adobe.com/svg/examples.html Several examples from Adobe representing the capabilities of the SVG file format and the Adobe SVG Viewer.

    http://www.mobiform.com/products/svgviewplus/svgviewplus.htm Mobiforms .Net SVG View Plus component (commercial offering).

    http://www.inkscape.org An open source SVG editing tool.

    http://www.w3.org/Graphics/SVG/ http://en.wikipedia.org/wiki/Scalable_Vector_Graphics http://www.adobe.com/svg/ http://www.adobe.com/svg/examples.html http://www.mobiform.com/products/svgviewplus/svgviewplus.htm http://www.inkscape.org/

  • Part Graphics in SVG & XAML

    Proprietary and Confidential Page 5 © Copyright 2015 Hearst Business Media All Rights Reserved

    2.3 MOTOR SVG File Structure The MOTOR Information Systems SVG files fully comply with the SVG standard format specification. With that said, there are MOTOR-specific constructs within the SVG files. Consumers of these files will need to know the structure and meaning of these constructs in order to successfully digest the file cont