XML Based Layout Managers

Size: px

Start display at page:

Download "XML Based Layout Managers"

Paulina Phelps
6 years ago
Views:

1 XML Based Layout Managers Danijel Radošević 1, Denis Bračun 2, Nikola Mrvac 3 1,2 Faculty of organization and Informatics, Pavlinska 2, Varaždin, Croatia danijel.radosevic@foi.hr denis.bracun@foi.hr 3 The Faculty of Graphic Arts, Getaldićeva 2, Zagreb, Croatia nikola.mrvac@grf.hr ABSTRACT GUI is today a usual way of human-computer interaction and different layout managers are developed with a purpose of easier specifying of GUI. Some of them are incorporated into programming libraries, while others define separated documents, like XML based layout managers. The advantages of usage XML are clearly separated GUI layout from programming code and connection with application object model, including the possibility of specifying event handlers for different GUI events. An example of usage XAML, as an XML based layout manager, is included. Key words: layout manager, XML, GUI

2 1 INTRODUCTION Usage of Graphic User Interface (GUI) is today a usual way of human-computer interaction. GUI consists of standard user controls (like buttons, menus etc.), event dispatcher (to handle events like click on button etc.) and layout manager. The role of layout manager is to define arrangements of user controls on GUI. There are many layout managers in use, depending on different kinds of devices, operating systems and software platforms. In recent years, some attempts to make cross-platform layout managers have been done. Many of them are connected with Java programming language and.net platform, in a form of programmer's frameworks. In recent years, these frameworks usually include XML-based documents to specify GUI layout. Usage of XML variants clearly separates GUI layout from other parts of programmer's framework, which enables usage of same XML document in some other hardware or software environment. For now, this cross-platform usage of XML-based layout managers usually requires some software adaptation, because existing software frameworks don't share the same XML variant, i.e. there are several XML based layout managers in use. 2 THEORETICAL PART XML (extensible Markup Language) was designed to transport and store data, unlike HTML (HyperText Markup Language) that was designed to display data [9]. But, GUI layout is defined by data (like type of controls and their coordinates) and so XML is a suitable form to define layouts. Transformation of the XML data into HTML is easily possible via XSLT (extensible Stylesheet Language Transformations). XSLT is the style sheet language of XML [9] and offers some structures for reading and displaying data from assigned XML dociment. For example, this structure reads and displays data using HTML in formatting: <xsl:for-each select="menu/dinner"> <div style="background-color:blue;color:white"> <xsl:value-of select="name"/>-<xsl:value-of select="price"/> </div> <div style="font-size:10pt"> <xsl:value-of select="desc"/> <span style="font-style:bold"> <xsl:value-of select="cal"/> </span> </div> </xsl:for-each>

XSLT tags are shown in bold. Structure for-each is similar to loops in programming languages and it is used here for reading XML nodes (here: main node = menu, subnode = dinner).

3 XSLT tags are shown in bold. Structure for-each is similar to loops in programming languages and it is used here for reading XML nodes (here: main node = menu, subnode = dinner). Tag value-of-select is used for fetching value of appropriate node. But, XSLT is not suitable for defining GUI layout of complex web applications with interface similar to desktop applications, because it requires more complex layout managers. Some of layout managers are not XML based. For example, the GridLayout class, from Java standard class library, AWT, is a layout manager that lays out a container's components in a rectangular grid. Such solution is easy, but doesn't offer precise specification of complex layouts. Some layout managers use coordinates to specify exact positions of controls to be arranged. The following example is written in Swing library for Java [6]: JFrame frame = new JFrame("Laying Out Components Using Absolute Coordinates"); frame.setdefaultcloseoperation(jframe.exit_on_close); JPanel panel = new JPanel(); panel.setlayout(null); JLabel label1 = new JLabel("RoseIndia.Net"); JTextField field = new JTextField(20); JButton button1 = new JButton("OK"); JButton button2 = new JButton("Cancel"); label1.setbounds(100, 50, 100, 50); field.setbounds(75, 100, 200, 25); button1.setbounds(40, 200, 75, 25); button2.setbounds(200, 200, 75, 25); panel.add(label1); panel.add(field); panel.add(button1); panel.add(button2); frame.add(panel); frame.setsize(400,400); frame.setvisible(true); The resulted GUI layout is shown in Fig. 1: Fig.1. Resulted GUI layout [6]

4 As shown in the example, coordinates are explicitly specified as argument values of appropriate methods. XML based layout managers separate GUI design from other parts of applications, enabling usage of different 'skins' of the applications, without changes in the application code. Most of such XML-based documents specify types of controls to be used, together with their coordinates and other parameters and, sometimes, methods to be invoked in case of events like mouse click. XF (Extensible Formatting language) is a generic high-level formatting language that serves as a mediator for contemporary, powerful formatting languages such as CSS and XSL [8]. XUL is the model used by the Mozilla family of browsers and has a rich notation for creating widgets, and uses Box, Grid and other layout models [1]. EXtensible Application Markup Language (XAML) is a user interface mark-up language for Windows Presentation Foundation (WPF) and consists of features from both Microsoft desktop applications and web applications [5]. There are some other examples of XML variants used for defining of GUI layouts, like XForms and LZX [5]. The following example defines GUI by XUL [3]: <box orient="horizontal"> <box orient="vertical"> <description>apples</description> <description>oranges</description> </box> <box orient="vertical"> <description>html</description> <box orient="horizontal"> <description>xul</description> <description>xbl</description> </box> </box> </box> Instead of using coordinates, XUL arranges GUI elements using boxes, so, this code contains as many <box> tags as real objects to be shown. Resulted GUI is shown in Fig. 2: Fig. 2: Displayed results for box-structured code [3]

Another example uses LZX (within OpenLaszlo, an open source platform for the development and delivery of rich Internet applications), XML based layout that uses coordinates and other numeric values

5 Another example uses LZX (within OpenLaszlo, an open source platform for the development and delivery of rich Internet applications), XML based layout that uses coordinates and other numeric values to specify arrangement of GUI elements [2]: <canvas height="60"> <view x="0" y="0" bgcolor="silver" width="20" height="20"/> <view x="40" y="0" bgcolor="gray" width="20" height="20"/> <view x="80" y="0" bgcolor="black" width="20" height="20"/> </canvas> Resulted GUI is shown in Fig. 3: Fig. 3: Example of absolute positioning using LZX [2] The example uses canvas and view nodes to specify display area and containers for different multimedia elements. 3 EXAMPLE IN XAML XAML is similar to other markup languages designed for rendering in web browsers, like XML and HTML, and uses mechanisms similar to CSS (Cascade Style Sheets) for designating properties of XAML elements [4]. Its objects represent CLR classes and enables specifying methods to be performed in case of events like mouse click. This example uses XAML to define the layout of Silverlight web application that is written in C#, enabling editing database table content, using input/edit form. The screenshot of the example application is shown in Fig. 4:

6 Fig. 4: Screenshot of the example application XAML document that defines layout of the example application has the following overall structure: <UserControl x:class="practice.main" xmlns=" xmlns:x=" xmlns:d=" xmlns:mc=" mc:ignorable="d" d:designheight="300" d:designwidth="400" xmlns:sdk="http: <UserControl.Background> <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1"> <GradientStop Color="#FF800E0E" Offset="0.352"/> <GradientStop Color="White" Offset="1"/> <GradientStop Color="#FF350505" Offset="0.004"/> <GradientStop Color="#FFE8D3D3" Offset="0.694"/> </LinearGradientBrush> </UserControl.Background> <ScrollViewer x:name="layoutroot"> <ScrollViewer.Background> <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1"> <GradientStop Color="#FFA90000" Offset="0.423"/> <GradientStop Color="White" Offset="1"/> <GradientStop Color="#FF350505" Offset="0.004"/> </LinearGradientBrush> </ScrollViewer.Background> <sdk:frame x:name="frame1" Height="500" Width="764" Margin="50,0" Source="/MainPage.xaml"/> </ScrollViewer> </UserControl> Main tag UserControl is a container for all controls defining properties of background, and area to be used for controls. User controls are defined as follows (example of DataGrid control):

7 <Grid x:name="layoutroot" Background="{x:Null}"> <StackPanel> <sdk:datagrid AutoGenerateColumns="False" Height="101" Margin="158,31,158,0" Name="dgStudenti" VerticalAlignment="Top" IsReadOnly="True"> <sdk:datagrid.columns> <sdk:datagridtextcolumn x:name="idcolumn" Binding="{Binding Id}" Header="ID" CanUserSort="True" CanUserReorder="False"/>... </sdk:datagrid.columns> </StackPanel> </Grid> Buttons are defined together with their properties and a method to be invoked in case of user mouse click: <Button x:name="savebutton" Width="75" Height="25" Margin="4,0,0,0" Content="Save" Click="SaveButton_Click"/> The example shows integration of XAML within application object model. Also, there is not necessary to make changes in programming code to change GUI layout and features of particular controls (like text on button). 4 CONCLUSION This paper presents several layout managers with emphasis on XML based layout managers, especially XAML. An example of usage XAML in specification of GUI layout is given. It was shown that usage of XML based layout managers clearly separates program code in some of standard programming languages (like C# in the example) from specification of GUI. This enables definition of different 'skins' for the application, without changing programming code. Also, some XML based layout managers, like XAML are closely associated to application object model, enabling specifying methods to be performed in case of events like mouse click. So, further development of XML based layout managers could be expected, because of their usability in development of GUI based applications and separation of GUI from other application features. 5 REFERENCES 1. Bishop, J. (2006). Multi-platform User Interface Construction a Challenge for Software Engineering-in-the-Small, Proc. 28th Int. Conf. on Software engineering, Shanghai, China, 2006.

8 2. Coremans, C. (2006). AJAX and Flash Development with OpenLaszlo, BrainySoftware, ISBN: , pp eschew.org (2011). XUL Layout, Available at: Last access:2011/08/13 4. Macvittie, L. A. (2006) XAML in a Nutshell, O'Reiley, ISBN: , pages Pohja, M. (2010). Comparison of common XML-based Web user interface languages, Journal of Web Engineering, volume 9, number 2, pages Rose India Technologies (2007), Laying Out Components Using Absolute Coordinates, Available at: Last access:2011/08/13 7. Smart, J.; Hock, K. & Csomor, S. (2005). Cross-Platform GUI Programming with wxwidgets, Prentice Hall, ISBN: , New Jersey 8. Tervo, H.; Honkaranta, A. & Leinonen, P. (2006) Towards Generic Layouts for Multi- Channel Publishing: "XF Extensible Formatting", 5th International Conference ISTA'2006, May 30-31, 2006, Klagenfurt, Austria 9. w3schools.com (2011) Introduction to XML, Available at: Last access:2011/08/11

Graphical User Interfaces. Swing. Jose Jesus García Rueda

Graphical User Interfaces. Swing Jose Jesus García Rueda Introduction What are the GUIs? Well known examples Basic concepts Graphical application. Containers. Actions. Events. Graphical elements: Menu