Smart GWT Training Agenda

Smart GWT Training Become productive & start building cutting edge applications

Training Course: Introduction to Smart GWT The Introduction to Smart GWT training course is designed to get you up and running, productive, and able to start building powerful, cutting-edge applications. It typically lasts three full days, spanning a weekend (Thurs, Fri, Mon) OR six half days. This allows time for you to try out what you have learned, and be able to ask more

informed questions on the �inal day.

Course topics are:

Java / JavaScript and CSS Prerequisites Client-Server Communication Installation & Deployment Event Handling UI Components Basic Branding Data Binding Extending UI Components Developer Tools Performance Data Integration Animation Metadata Management JPA, Hibernate, SQL Connectors Optional Modules Custom Server Data Integration

The training was excellent ... we were in awe of Paul's technical ability, he just seems to know everything." “ Northrup Grumman

Courses do �ill up. Early booking will secure your place.

© Isomorphic Software. All rights reserved. DETAILED AGENDA #1 Welcome a) Brief overview of Isomorphic Software b) What is SmartClient? c) What is Smart GWT? #2 Setting up your machine for Smart GWT / SmartGWTEE development a) Installation Requirements: • Java JDK • GWT • SmartGwtEE (useful to have SmartGwt LGPL too for samples) • apache ant (included in SGWTEE download) For ease of development we recommend: • Eclipse • GWT Plugin for Eclipse b) Resources Documentation: • Sample index.html • JavaDocs (online and local) o note the special “docs” package

• documentation embedded in live sample • per-sample readme �iles Support: • Forums (include some sticky starter-guides / how-to's) o note the “FAQ’s” topic • ([email protected])

1 © Isomorphic Software. All rights reserved. DETAILED AGENDA #2 Introducing the SmartClient SDK (Continued) c) Running the samples • Can use ant to run directly from command line • Import sample project(s) to Eclipse and run using the GWT plugin. • Note: Showcase war also included for simple deployment d) Anatomy of a Smart GWT project • Src directory • War directory o Startic versus generated content Note that the GWT site http://code.google.com/ has extensive docs GWT projects

• Setup / troubleshooting steps to import a sample into Eclipse: o Use the “File” / “New Java Project” option to create a new project o Instead of the default location, browse to the existing sample directory and import. (A number of warnings will show up. This is usual.) o Use the “Properties” context menu item to edit the project: o Ensure the Google / Use Google Web Toolkit option is enabled with an appropriate version of GWT. • Can use the latest version available, supplied by the GWT plugin, or a downloaded version. • 2.7.x is recommended for “SuperDevMode”, but not essential o Under Java Build Path, set up the SGWTEE_HOME environment variable to point to the downloaded package. Used to retrieve the jars on the classpath.

o Use the “Run As” / “Run Con�igurations…” context menu to customize the GWT run app locally. I recommend increasing the available VM memory to 1G. con�iguration for the project. The “Arguments” tag allows various options when you run the

SuperDev Mode (more on this later). o To launch the app, use the context menu “Run As…” option to view as a web app in Classic or

2 © Isomorphic Software. All rights reserved. DETAILED AGENDA #3 Coding in Smart GWT a) Creating a �irst application (See also: /docs/SgwtEESetup.html in javadoc) • 2 possibilities: o Create a new GWT application and add SmartGWT functionality to it o Copy an existing sample.

We usually recommend starting with an existing sample for a SGWTEE app unless you already have a running app you are adding SGWT functionality to.

However, steps to create a new Smart GWT app from scratch: SmartGWT (client side functionality only): • create a gwt application • add smartgwt libraries to build path • inherit the SmartGwtEE module(s) or (Includes SmartGwt / SmartGwtEE functionality and Enterprise skin). No script version:

Speci�ic themes: Tools:

- modify bootstrap �ile. Set isomorphic dir variable SmartGWTEE • start by importing a sample with similar functionality to what you need. • include all jars under SGWTEE_HOME/lib for complete server-side functionality • merge or copy the following resources to your project (modifying app names if appropriate)

*See also: /docs/SgwtEESetup.html in javadoc web.xml, taglib, server.properties, log4j con�ig, and all WEB-INF/lib jars b) SmartGwt Classes and components: • existing classes / APIs o Widget classes (E.G: Canvas) and utility classes (E.G: SC) • SmartClient (JS) vs SmartGwt (Java)

Note: Exercises may require APIs not explicitly covered up to this point. The SmartClient Reference and the existing examples in the Feature Explorer are an excellent source of additional information.

Exercise 1

Reminder: to create a new SmartGWTPower project from built-in-ds: (Also see the readme.txt �ile per sample)

• copy the built-in-ds sample (in your �ile system) • in Eclipse select New > Java Project • select “from existing source” and browse to the copied project • under project / properties o enable google/use gwt o add the SGWT_POWER_HOME environment variable (import all the .jars from the lib dir of the package)

• Create a new SmartGwtEE project called “Scratch”, using the “built-in-ds” sample as a template • build a class “SayButton” that displays its “message” property when clicked. • use this project for all further exercises

4 © Isomorphic Software. All rights reserved. DETAILED AGENDA #4 SmartClient User Interface Components a) Canvas • Base UI Component • Simple properties: o contents o backgroundColor, border, styleName

• draw() / show() • Events o sizing, positioning, over�low o click, doubleClick, right click, dragResposition o focus and key events b) Grids • ListGrid o Fields and Records (data List - array) o Events o User Interactions • sorting • editing

• grouping • �iltering (query by example) • header drag • freezing �ields • selection • autoincremental �it data loading

o Additional • custom features cell /values, customization styling • �ieldprinting type display (text, images, links, dates) • nested components

• grid / group summaries • formulaview state / summary �ields

o Header and body properties o Introduction • advanced to AutoChild �ilter concept

• TreeGrid o Inherits from ListGrid o Hierarchical data (Tree object)

Exercise 2

• Create a grid with two �ields "TextValue", "Remove" and two rows of data • Clicking in "Remove" �ield should delete the record • Remove �ield should show an “X” character in it (should not be included in record data)

5 © Isomorphic Software. All rights reserved. DETAILED AGENDA #4 SmartClient User Interface Components (Continued) c) Forms • DynamicForm vs HTML Form • Fields and values (single records) • Item types o data items vs control items o data type and editor type o valueMap and valueIcons o canvasItems • Appearance o layout, hint, titles, icons, valueIcons • Features o appearance (layout, titles, hint, icons, hover) o show / hide, enable / disable o validation o events o mask / keypressFilters • ValuesManager o Similar APIs to forms but allows separated presentation d) Additional Data Components • TileGrid • ColumnTree (Miller Columns) • DetailViewer • Calendar • Charts (Optional module) o explicit creation vs DataBoundComponent chartData() API o chartType o data model • facet-based, similar to cubeGrid • inlined facets (values declared within each facet) • support for multiple facets, to display related values on a chart • may be bound to a DataSource o Zoom o User interactions: • contextMenu, pointClick, valueClick, showValueOnHover, hoverHTML o Charts may be exported in PDF or image format o DrawPane subclass - can use drawing APIs to customize appearance e) Layout Components • Nesting of components. • Canvas children • Layout members o positioning,Stack vs Layout sizing, over�low o Nesting Layouts o LayoutSpacers o margins, alignment o dragReposition within layouts • Windows o member resizeBars o items o header / footer controls o modality • Tabsets / Tabs o eventstabs and (minimize, panes close) o align / orientation o selection events o tab bar controls • SectionStacks o sections and items o visibility mode o interactions (expand, drag) • SplitPane o sectiondesigned customization for navigation (showHeader, / list / detail title,data icon,presentation header controls) o navigationPane, detailPane, listPane o device-dependent appearance (revisited in “Mobile Development”) o navigatePane / autoNavigate o showDetailPane() / showListPane() / showNavigationPane() o dynamic pane titles (see listPaneTitleTemplate)

6 © Isomorphic Software. All rights reserved. DETAILED AGENDA #4 SmartClient User Interface Components (Continued) f) Control Components • Buttons o action, click o Statefulness and styling o ImgButtons, StretchImgButton, IButton class • Menus o menubutton / menubar vs context menus o dynamic content (Title, checkmark, enabled/disabled)

o shortcut keys o customsubmenus �ields (inherits from ListGrid) o tree menus/ tree menu item • Other control components: o Slider, ToolStrip Exercise 3

• Create a Button that creates a Window with title "My Window" containing a TabSet with a single Tab "My Tab" containing a DynamicForm with a button and text input in a row.

Suggestion:• Clickingstart with on either the button the DynamicForm should append or the "Foo" Window to the and current add eachvalue additional of the text component �ield. one at a time. g) Drawing • standard API for drawing shapes beyond traditional HTML • approaches: HTML5

Note: FacetChart makes use of the Drawing module #5 Extending Smart GWT a) SmartGWT components and inheritance • Existing components o superclasses o automatically created children (auto-child pattern) b) Creating custo components

• Component lifecycle • Applying o JavaScript customizations widget in creation constructor o implicit vs explicit component creation, isCreated()

o initHandler, drawHandler o reclaimingcon�iguration memory properties (destroy(), (such asmarkForDestroy(), global ID) isDestroyed(), explicit dereferencing)

c) ComponentXML• screenLoader servlet / RPCManager.loadScreen() • accessingXML format loaded for components components - usedin Java by code (but not restricted to) Visual Builder • dynamic screen generator d) Dashboard and Tools, EditMode • registering classes for re�lection (see also DataSourceField.editorType)

• Support for user-driven UI creation and modi�ication

• How to de�ine / load a dataSource o Inline • Java loadDS de�inition jsp tag o XML de�inition •