?
Auiml Toolkit entry?
English original
content:
How does AUIML work? The benefits of using Auiml Toolkit Install and Run Toolkit Create and Run your own AuiML panel Conclusion Reference Author brief introduction to this article
related information:
Auiml Toolkit (Download) Introduction To Xmlintroduction To Web Applications in WebSphere Studio Application Developeribm Developer Kits for the Java Platform (Downloads)
New AlphaWorks Toolkit Accelerate Java GUI development?
Level: primary
Andy Arhelger
(Juggle@us.ibm.com), software engineer, IBM
Andy Hanson
(Ahanson@us.ibm.com), software engineer, IBM
Anthony Erwin
(Aerwin@us.ibm.com), software engineer, IBM 2004 August
The Abstract User Interface Markup Language Toolkit is a quick development tool that helps developers write GUI to run them as a Swing application or run on the web without any changes. In this step-by-step article, the toolkit creator Andy Arhelger, Andy Hanson and Tony Erwin will take you to their technology and detail where to get these technologies, and how to install and use them.
Abstract User Interface Markup Language (Auiml) can be obtained from IBM AlphaWorks, which contains Visual Builder that generates the panel defined with XML dialects. The generator also generates a runtime code stub to transfer data to a panel widget, transmit data from the panel widget and event processing. The application programmer can drive the panel simply adds business logic specifically for the application. You can then transfer AUIML definition to a AuiML Toolkit runtime rendering program that will display the panels described in AuiML and manage data transfer and events. How does AUIML work? AUIML is an XML dialect that is a platform and technical representation of the panel, wizard, attribute table and other components. AUIML captures the relative positioning information of the user interface component and displays these components using a platform-specific rendering program. Depending on the platform or device used, the presentation program can determine the best way to provide the user interface and receive user input. AUIML XML is created using Eclipse-based AuiML Visual Builder, and AuiML Visual Builder provides developers to quickly build and preview user interfaces in Java Swing and HTML Renderer. AuiML Visual Builder can also automatically create data beans, event handler, and help system skeletons for user interface. Because Auiml Visual Builder is inserted into Eclipse, build user interface and application code is a comprehensive process. The benefits of using Auiml Toolkit use AUIML's benefits include:
Rapid Development: Use the drag and drop interface of Visual Builder and automatic generation code for managing data transfer and events. You can quickly create the GUI. This feature allows you to concentrate on business logic specifically for applications without worrying about the specific features of different GUI widgets. • Inter-environmental application: Using AuiML Toolkit, the created application can run a single source data in multiple presentation environments. In order to run Swing as a servlet or portlet and in order to run in the Web, the Auiml Toolkit Kit provides a rendering program. The same binaries can be used in both environments to drive applications; only different deployments of binary files are required. Not affected by technical changes: Because the application code is not intended to run the API of the code, the AUIML rendering program undertakes the update and repair work when updating the core technology. ? Internationalization: The generator automatically stores the convertible string placed in the panel to the Java ResourceBundle. The Locale specific version of these bundles can then be easily generated. • Enter the verification: The rendering program provides built-in and distinguished input verification. Some jobs in this verification are completely automated; for example, if the user enters "ABC" in the value field, the rendering program will capture errors and display the appropriate error message without having to worry about the application code. Various simple data format ranges can be defined in the generator, such as Max Value. The presentation program also verifies the data provided by the user to set the appropriate error message when the input value is out of the range. Applications can also perform more complex verification and display errors. • Accessibility: AuiML Toolkit uses Swing and Web features to support accessibility. There is an inside of the generator to check accessibility, which can detect potential accessibility issues in the panel and how to correct these issues. • Bidirectional (BIDI) Support: Auiml Toolkit presentation program uses its expression environment BIDI support to display panels that are accustomed to reading from right to left. Help: Visual Builder also generates a stub HTML file and other tools to easily develop a help system. Installing and Run Tools In this section, we will show you how to install and run the kit. However, we must first ensure that the platform meets the appropriate requirements. The following list shows the operating systems and software required to run AuiML Toolkit: Operating System AuiML Visual Builder: Windows 2000 or XP. AUIML runtime environment: Windows 2000, XP or Red Hat Linux 9. Client browser: Internet Explorer 6.0, Mozilla 1.4 or Netscape 7.1. ? Software?
For AuiML Visual Builder
Eclipse 2.0 or WebSphere Studio Application Developer 5.0.1. For AuiML HTML rendering procedures: WebSphere Application Server 5.01 or Tomcat 4.0, 4.1
Java JDK 1.4. • Install the toolkit download kit (see Resources) and unpack it to your computer. Follow these steps to add the Visual Builder plugin to Eclipse or WebSphere Studio:
Open the Eclipse Install / Update perspective. • In the Feature Updates view, navigate to the AuiMl.zip to decompress, then turn to the AuiML / VisualBuilder / CSA_5.0.0 directory, as shown in Figure 1: Figure 1. Install the Visual Builder plugin right-click the Eclipse item, Then select Link Product Extension from the pop-up menu. Run Swing Example Sample Source Codes in the Toolkit / Samples / COM / IBM / UI / Samples directory. There are two ways to run examples in the Swing environment: You can use the .bat sample file. Because running time can run on different operating systems, and .bat files are specific to Windows, so we do not provide this file. The following code shows a .bat file that will run an example in the AUIML / TOOLKIT / directory in a Windows environment. You should adjust the AuiML / Toolkit directory specified in the following inventory according to the directory of the decompression toolkit. You can modify this file for other operating systems. ?
Set config = auiml / Toolkit / CSA_Runtime / config
Set settings = auiml / Toolkit / CSA_Runtime / Settings
Set lib = auiml / Toolkit / CSA_Runtime / LIB
SET EXT =% LIB% / EXT
SET SAMPLES = auiml / Toolkit / Samples / LIB / AUIDEMOS.jar
Java -cp "% Sample%;% config%;% settings%;% lib% / auifw.jar;% lib% / auifw.jar;
% Lib% / auii18n.jar;% lib% / auiswing.jar;% ext% / jhall.jar;
% EXT% / SWING11SPINNER_RUNTIME.JAR;% ext% / uil.jar "com.ibm.ui.samples.samplelauncher
Can you use an Ant run example. We provide build.xml files to drive AUIML. First download and install Ant (see Resources), then switch to the Toolkit / Samples directory and enter Ant Run in the command line. The sample window shown in Figure 2 appears. This example can be clicked in the list in the list. Figure 2. Running example Run the HTML example in WebSphere Studio To run an HTML example, you need to deploy the AuiWebDemos.war file to the web server. You can deploy WAR files to WebSphere Application Sever or Tomcat. The following instructions are specifically used to get the Tomcat web server from the Apache Jakarta Web site (see Resources). The process of deploying WAR to WebSphere Application Sever is very similar to the above process.
Create a new web project.
Select File> New> Project from the menu bar. In the New Project Wizard, first select the web from the left panel, then select Dynamic Web Project from the right panel, as shown in Figure 3: Figure 3. Creating a Web Project Click NEXT in the Wizard. Enter the project name Auimltest, then click Finish. • Import the WAR file.
Right click on the AuiMlTest project and select the import option. Select WAR File, then click Next, as shown in Figure 4. Figure 4. Select the import source navigate to the AuiWebDemos.war file, and then click Finish, as shown in Figure 5: Figure 5. Import WAR files Associate the project with the web server. Go to Server Perspective, right-click the Tomcat server and select the Add and Remove Projects option. • Select the AuiMlTest project, click the Add button, and then click the finish button, as shown in Figure 6: Figure 6. Start the project with the web server.
Right click on the Tomcat server again and select Start. • Run the web example.
Start a web browser and enter the URL http: // localhost: 8080 / auimlTest / HTML / SampleLauncher.jsp. A window to display the sample launcher will appear, as shown in Figure 7: Figure 7. Web example Running a web example using Eclipse Because Eclipse has no standard web server, you must install a standard web server. You can choose to use WebSphere Application Server Express or Tomcat. These instructions use Tomcat to get Tomcat from the Apache Jakarta Web site (see Refigu).
Start the Tomcat server and open Tomcat Web Application Manager (at http: // localhost: 8080 / manager / html).
In the Install section, enter the path for AuiWebDemos.war in the "Upload A WAR File To Install box". Figure 8. Tomcat Installation Click the Install button. You should see that the AuiWebDemos file is already in the application list. • Open the browser, point to http: // localhost: 8080 / forbdemos / html / samplelauncher.jsp to display the AuiML Application Launcher window, as shown in Figure 9: Figure 9. Tomcat example creates and run your own AuiML panel now you Examples have been successfully run, the next important step is to create a simple AuiML panel you own. We will introduce how to create panels using Eclipse's plug-in Visual Builder. Visual Builder allows you to drag and drop the control to easily create panels. Design a simple panel to create a simple or complex panel using Visual Builder. When starting the design panel, there should be a basic concept that knows what controls are needed, and how to place these controls in the panel. Moreover, each control has many properties that set these properties to customize controls and specify the initial value. For example, numerical controls allow you to specify a minimum and maximum. These values can be set using the properties of this control. Now we will create a simple panel using a text input field and several buttons.
Open the Visual Builder perspective from WebSphere Studio or Eclipse. • Create a new file by selecting File> New> AuiML file and name it Auimltest. ? In the Contents view of the new Auimltest file, right-click the Panels item and select Create Panel. Now you will see a new item called Panel1, which is listed under Panels. Figure 10 shows this new panel: Figure 10. Creating a AuiML Panel You will get a blank AuiML panel that contains OK, Cancel, and Help buttons, as shown in Figure 11: • Figure 11. The first panel Click on the control panel EditBox> String, then click on the upper right grid in Panel1. Now, the panel should be shown in Figure 12: Figure 12. Panel containing EditBox Go to the Properties view and enter some text in the CAPTION property. Now, the panel should be shown in Figure 13: Figure 13. Each control containing editbox and text can have a title associated with it, which is required for the basic panel. Let us also enter a title in the panel. In the Contents view, click the properties of the Panel1 display panel. • Enter a Some Title in Panel1's CAPTION attribute. Enter the title will not change the Visual Builder view of the panel. • Preview the panel by clicking the arrow buttons next to the Preview button in the toolbar and select IBM Swing. The window shown in Figure 14 should appear: Figure 14. Swing Preview Click the arrow next to the Preview button in the toolbar and select IBM HTML 4.0 (Desktop). You should be able to see the window in Figure 15: • Figure 15. HTML Preview In the menu bar, select File> Save Save File. Then we will create a Java program to run the panel in the Swing environment. Run your panel in Swing To run your panel, complete the following steps:
Switch to Java perspective in Eclipse or WebSphere Studio. • Use the main () method to create a new Java class file, then name Runauimltest.java, as shown in Figure 16: Figure 16. Creating a new Java class Create Runauimltest:?
Import com.ibm.ui.Application.WebApplicationAdapter;
Import com.ibm.ui.framework.capabilities;
Import com.ibm.ui.framework.databean;
Import com.ibm.ui.framework.illegalUserdataException;
Import com.ibm.ui.framework.taskactionevent;
Import com.ibm.ui.framework.taskactionListener;
Import com.ibm.ui.framework.taskmanageRexception;
Import com.ibm.ui.framework.usertaskmanager;
Public Class Runauimltest Extends WebApplicationAdapter Implements DataBean,
TaskactionListener {
Static final string auimlfilename = "auimltest"; // package qualified file nameStatic factory string auimlpanelname = "panel1";
Public static void main (String [] args) {
Runauimltest Runtest = new runauimltest ();
Runtest.Render (WebApplicationAdapter.mode_view);
}
Public runaimltest () {
}
/ *
* @see com.ibm.ui.framework.databean # loading ()
* /
Public void loading () {
}
/ *
* @see com.ibm.ui.framework.databean # verifychanges ()
* /
Public void verifychange () throws illegaluserdataException {
}
/ *
* @see com.ibm.ui.framework.databean # save ()
* /
Public void save () {
}
/ *
* @see com.ibm.ui.framework.databean # getcapabilities ()
* /
Public Capabilities getcapabilities () {
Return NULL;
}
/ *
* @see com.ibm.ui.framework.taskactionListener # actionPerformed
(com.ibm.ui.framework.taskactionevent)
* /
Public void ActionPerformed (TaskActionEvent Event) {
}
/ *
* @see com.ibm.ui.Application.WebApplicationAdapter # render (java.lang.string)
* /
Public void render (string arg0) {
Try {
// Call Load on The DataBean, Which Sets Up The Data To Be Returned
// from the getter method.
THIS.LOAD ();
// We Pass in the name of the auiml file, the parame, the data bean and
// We get the user context
UserTaskManager UTM = New UserTaskManager
(AuimlFileName, New Databean [] {this}, getUserContext ();
// Weimplement TaskActionListener So Add The Listener to To UTM
Utm.addtaskactionListener (this);
Utm.invoke (); // Displays the panel
} catch (taskmanagerexception e) {
E.PrintStackTrace ();
}
}
}
Method LOAD (), VerifyChanges (), Save () and getCapabilities () come from DATABEAN implementation, ActionPerformed () method comes from implementing TaskActionListener. Implementing DATABEAN and TASKActionListener in the primary class may apply to a simple example. For more complex applications, you need to implement DATABEAN in a separate Java class. Visual Builder can be set from the dynamic DATABEAN () method stub. To do this, you need to select the AuiML file in the Directory view of Visual Builder. The property view contains properties called Generate Data Beans, which should be set to true. For a single control, you can specify the binding property. This property allows you to bundle DATABEAN GETTER and SETTER with the control. When you specify a binding for the control, you need to specify the package, class name, and attributes. Class names are DATABEAN class names, and attributes are created in the Getter and Setter method names. Then, when the AuiML file is saved, if the Visual Builder does not find the class that matches it, it will automatically create a DATABEAN class, or update an existing class. ? Save and compile the code. You need to create a run configuration for the RunauiMlTest application, as shown in Figure 17: Figure 17. Running the configuration class path requires the required AuiML JAR file. Figure 18 shows an example: Figure 18. When running the RunauiMlTest program, you should see the test panel we discussed, as shown in Figure 19: Figure 19. Since the operation panel departs and runs the application in the Web Learn about the new AuiML app running in Swing, then we will show you how to run the application in the web application server. To run the app, perform the following steps:
Unzip the AUIWEBDemos.war file (in the AuiML / Toolkit / CSA_Runtime directory) into a temporary directory. • Place the file auimltest.auiml, AuiMlTest.properties, and RunauiMltest.class (this directory should be created within the temporary directory). These files can also be manually exported using WebSphere Studio or Eclipse. (You can also put these files in a new JAR file called Myauiml.jar in WEB-INF / LIB.) • Compact the temporary directory to the WAR file of MyApplication.war. • Use the appropriate instructions for specific application server types to deploy the new WAR file to your selected application server. • Call the AUIML application by pointing the web browser to http: // localhost: 8080 / myapplication / wnservlet & application = runauimltest & WNUserid = Anyuser (assuming the web server is running in the local host). You will see the panel shown in Figure 20: Figure 20. Congratulations on the WEB in the web, you have run the same application in two very different platforms, and have not modified any code! Note that for the sake of simplicity, we let you use the WAR sample file provided with AUIML as the basis. In practical practice, you may want to start from aui_war_template.zip file, custom multiple files, including web.xml, portlet.xml / component.xml (if deployed to portlet or iSC environment), Close.html, logout.html , Generalerror.html and GeneralException.html. Conclusion here, you have roughly browsed some of the features of AuiML technology. Most importantly, you have learned how to make the same code to run in Swing and Web - this is a quite good technology because it makes "WRITE, Run Anywhere" reaches a new level. . However, if you only see this, then you are too underestimated AuiML because it can also provide more features. Auiml is indeed a perfect development package that adds a great value, regardless of whether you want to run the application on multiple platforms. Because this article is limited, we can't introduce all the features of AuiML in detail, but here we give a small example of how to use AUIML to make applications make it easier:
Visual Builder can be used for fast prototyping. At first, you may use it because Visual Builder is part of this article until you start testing all user interface controls (and the different properties of each control), you can truly understand its feature. However, Visual Builder most significant features may be you can design panels, wizards, or attributes, and view their display in Swing and Web without writing any code! • Concentrate concentrate on business logic. Using AUIML, you can focus on the rear end of the application instead of waste time on a low-level user interface widget API. For most important applications, the DataBean implementation will be the only code that needs to be written. ? Built-in data verification. AUIML provides controls for strings, numerical values, and date / time types. So, if you place a value field in the panel, you need to enter the number of the correct formats you specify in Visual Build when running the application. If the value entered by the user does not meet the above requirements, AUIML provides an appropriate error message and requires the user to fix the problem. You do not have to write any verification code, you can perform all such validation. ? Built-in internationalization (including BIDI support). Generally, when running in multiple languages, you need to worry that conversion is the application-specific text. AuiML will assume some monotonous work, such as formatting / analyzing digital and date / time fields based on end user scene rules. • Meet the complex user interface widget for advanced needs:? Table, provide advanced features such as screening, sorting, and search data, no other code. ? Large table, used to handle large data sets. Basic thinking is that the AUIML framework requires DATABEAN to provide this part of the data set when the user needs some data sets. For example, this means that you do not have to load a full log file with 100,000 items before the user starts using the application. • The three tables are used to display table format data in a layered format (such as a directory browser of display file details). • Provide a robust helper system that runs the information you need to run the application. The help system only provides help text. As you can see, in addition to cross-platform operation, Auiml clearly has many other functions. We encourage you to actively test those examples provided with Auiml Toolkit, and access the AuiML Information Center for more information on all of these features. We hope that you feel that using AuiML development Java applications can greatly save time. Reference
