Wygląd wydruku

Wydruk do pdf

Poniższy dokument składa się z opisu trzech części składających się na wygląd wydruku:

  • Atrybuty zawężające
  • Selektory
  • Reguły

Dostosowanie wygląd wydruku możliwe jest poprzez pliki #style#.xml, np. standardowym plikiem definiującym wygląd Faktury Sprzedaży jest plik 7#SalesInvoice#style#Wydruk_domyślny.xml. Głównym elementem tego pliku jest style, który zawiera elementy określające wygląd poszczególnych elementów wydruku zdefiniowanych w pliku layout.

Jednym z elementów podrzędnych elementu style jest element fonts, który określa wszystkie czcionki, które zostaną wykorzystane w wydruku. Może on zawierać, jeden lub więcej elementów font, który definiuje krój, wielkość, wygląd oraz styl fontu.

Przykład
<font name=”title” face=”Arial” size=”20″ color=”#9fc54c”/>

Atrybuty elementu font to:

  • name – określa nazwę fontu, przez którą możemy się do niego odwołać
  • face – nazwa kroju fontu
  • size – rozmiar w punktach
  • color – kolor
  • style – style fontu. Może zawierać jedną (lub więcej wartości oddzielonych znakiem spacji) z wartości bold, italic, underline.

Wewnątrz elementu fonts powinien znaleźć się także jeden element font z pominiętym atrybutem name. Font ten będzie stosowany jako font domyślny dla wydruku.

Przykład
<fonts>
<font face=”Trebuchet MS” size=”10″/>
<font name=”title” face=”Arial” size=”20″ color=”#9fc54c”/>
<font name=”header” face=”Tahoma” size=”8″ color=”#999999″/>
<font name=”summary_value” face=”Trebuchet MS” size=”15″ color=”#9fc54c” style=”bold”/>
</fonts>

 

Oprócz elementu fonts w pliku Styles.xml mogą znajdować się elementy w schemacie:

<selektor>
<reguła/>
<reguła/>
[...]
</selektor>

Gdzie selektor decyduje o tym, czy podległe mu reguły zostaną zastosowane dla danego elementu. Większość selektorów ma taką samą nazwę jak element, który stylują. Np. w celu ostylowania paragrafu (element p w pliku Layout.xml ) należy zastosować selektor p.

 

Przykład
<p>
<margin top=”5″/>
</p>

Powyższy przykład wszystkim paragrafom wydruku ustawi margines górny na 5 punktów. Selektor może wybrać do ostylowania tylko wybrane elementy danego typu. W tym celu do elementu w pliku Layout.xml oraz selektora w pliku Styles.xml należy dodać atrybut class. Selektor wybierze wtedy tylko te elementy, które mają identyczną wartość atrybutu class.

 

Przykład
<p>
<text font=”normal”/>
</p>
<p class=”title”>
<text font=”title”/>
</p>

Powyższy przykład ustawi font wszystkich paragrafów na normal ale te, których atrybut class to title zostanie ustawiony font title. Dokładny opis innych atrybutów selektorów oraz spis reguł stylujących znajduje się w sekcji Wygląd. Lista selektorów oraz reguł, które można zastosować dla danego elementu znajduje się w opisie poszczególnych elementów w sekcji Układ. Reguły z pliku style stosowane są od góry do dołu tzn. jeżeli dwa selektory dopasują ten sam element i zawierają one takie same reguły z innymi wartościami to zostanie zastosowana wartość występująca później.

 

Atrybuty zawężające

Opis każdego selektora zawiera listę elementów, które styluje oraz listę reguł, jakie można w nim umieścić. Opis każdej reguły zawiera listę atrybutów jakie można w niej zastosować.

Każdy selektor może zostać zawężony poprzez atrybut class. Dodatkowo selektory elementów związane z tabelami mogą zostać zawężone poprzez atrybut index, który może zawierać liczbę całkowitą lub wyrażenie postaci An+B, gdzie A oraz B to liczby całkowite. Selektor taki dopasuje element, jeżeli zgadza się on z indeksem wiersza tabeli (wiersze tabeli numerowane są od 0 z góry na dół).

Przykłady:

  • index=”0″ – dopasuje pierwszy wiersz w tabeli
  • index=”first” – dopasuje pierwszy wiersz w tabeli
  • index=”last” – dopasuje ostatni wiersz w tabeli
  • index=”5″ – dopasuje szósty wiersz w tabeli
  • index=”2n” – dopasuje parzyste wiersze tabeli tzn. z indeksem równym 0,2,4… czyli wiersze pierwszy, trzeci, piąty…
  • index=”3n+1″ – dopasuje wiersze z indeksem 1, 4, 7…
  • index=”3n+2″ – dopasuje wiersze z indeksem 2, 5, 8…

 

Selektory

Nazwa Body
Opis Selektor dla głównego elementu wydruku
Elementy stylowane
  • Body
Parametry zawężające
  • class
Reguły
  • page
  • margin
Przykład
<body>
<page size=”a4″ orientation=”portrait”/>
<margin left=”20″ right=”20″ top=”27″ bottom=”27″/>
</body>

 

Nazwa Footer
Opis Selektor dla stopki dokumentu
Elementy stylowane
  • Footer
Parametry zawężające
  • class
Reguły
  • margin
  • text
Przykład
<footer>
<text align=”right”/>
</footer>

 

Nazwa DataCell
Opis Selektor dla komórki w tabeli dynamicznej
Elementy stylowane
  • Column
Parametry zawężające
  • class
  • index
Reguły
  • border
  • background
  • text
Przykład
<dataCell class=”index”>
<background color=”#26437E”/>
<text font=”header” align=”right”/>
</dataCell>

 

Nazwa HeadCell
Opis Selektor dla komórki nagłówka w tabeli dynamicznej
Elementy stylowane
  • Column
Parametry zawężające
  • class
Reguły
  • border
  • background
  • text
Przykład
<headCell>
<background color=”#26437E”/>
<border left=”0.5″ right=”0.5″ top=”0.5″ bottom=”0.5″ color=”#E4F0F7″/>
<text font=”header” align=”center”/>
</headCell>

 

Nazwa Hr
Opis Selektor dla linii poziomej
Elementy stylowane
  • Hr
Parametry zawężające
  • class
Reguły
  • line
Przykład
<hr>
<line style=”dotted”/>
</hr>

 

Nazwa Image
Opis Selektor dla obrazka
Elementy stylowane
  • Image
Parametry zawężające
  • class
Reguły
  • fit
Przykład
<image class=”signature”>
<fit width=”80″ height=”80″ />
</image>

 

Nazwa P
Opis Selektor dla paragrafu
Elementy stylowane
  • P
Parametry zawężające
  • class
Reguły
  • margin
  • text
  • border
  • background
Przykład
<p class=”title”>
<text font=”title”/>
</p>

 

Nazwa Section
Opis Selektor dla sekcji
Elementy stylowane
  • Section
Parametry zawężające
  • class
Reguły
  • border
  • background
  • text
Przykład
<section class=”header”>
<background color=”#26437E”/>
<border left=”0.5″ right=”0.5″ top=”0.5″ bottom=”0.5″ color=”#E4F0F7″/>
</section>

 

Nazwa Table
Opis Selektor dla tabeli dynamicznej
Elementy stylowane
  • Table
Parametry zawężające
  • class
Reguły
  • width
  • border
  • background
  • text
Przykład
<table>
<width percentage=”100″/>
</table>

 

Reguły

 

Nazwa Background
Opis Reguła określająca tło elementu
Atrybuty
  • color – kolor tła elementu. Może on być w formacie #RRGGBB lub 0xRRGGBB lub
    0xAARRGGBB

 

Nazwa Border
Opis Reguła określająca obramowanie elementu
Atrybuty
  • left – szerokość lewego obramowania.
  • right – szerokość prawego obramowania.
  • top – szerokość górnego obramowania.
  • bottom – szerokość dolnego obramowania.
  • color – kolor obramowania elementu. Może on być w formacie #RRGGBB lub
    0xRRGGBB lub 0xAARRGGBB
  • borderStyle – styl obramowania. Może przyjmować jedną z wartości:
    o dashdot
    o dashdotdot
    o dashlargegap
    o dashsmallgap
    o dot
    o none
    o single
Uwagi Szerokość obramowania może być podana w różnych jednostkach m.in.: cm, in, mm, pt. Domyślną jednostką są punkty.

 

Nazwa borderLeft,
borderRight,
borderTop,
borderBottom
Opis Reguły określające poszczególne części obramowania elementu
Atrybuty
  • width – szerokość obramowania
  • color – kolor obramowania
  • borderStyle – styl obramowania

 

Nazwa Fit
Opis Reguła określająca rozmiar elementu
Atrybuty
  • width – szerokość elementu
  • height – wysokość elementu
Uwagi Szerokość i wysokość może być podana w różnych jednostkach m.in.: cm, in, mm, pt. Stylowany
element zachowa swoje proporcje przyjmując mniejszy z podanych wymiarów.

 

Nazwa Margin
Opis Reguła określająca marginesy elementu
Atrybuty
  • left – lewy margines
  • right – prawy margines
  • top – górny margines
  • bottom – dolny margines
Uwagi Szerokość marginesu może być podana w różnych jednostkach m.in.: cm, in, mm, pt.

 

Nazwa Text
Opis Reguła określająca styl tekstu
Atrybuty
  • align – wyrównanie tekstu. Przyjmuje jedną z wartości:
    o right – wyrównanie do prawej
    o left – wyrównanie do lewej
    o justify – wyjustowanie tekstu
    o center – wyśrodkowanie tekstu
  • indent – wcięcie pierwszej linii tekstu.
  • leftIndent – wcięcie tekstu z lewej.
  • rightIndent – wcięcie tekstu z prawej.
  • font – nazwa fontu zdefiniowana wcześniej w sekcji fonts .
  • color – kolor tekstu. Może on być w formacie #RRGGBB lub 0xRRGGBB lub
    0xAARRGGBB

 

Nazwa Width
Opis Reguła określająca szerokość elementu
Atrybuty
  • percentage – procentowa szerokość elementu bazująca na szerokości elementu-rodzica

Czy ten artykuł był pomocny?