TDMobile Architecture & Overview of the TD Mobile IDE. Horst de Lorenzi

Transcription

1 TDMobile Architecture & Overview of the TD Mobile IDE Horst de Lorenzi

2 TD Mobile Devices Agenda Application Architecture TDMobile IDE

3 TD Mobile Devices Application Architecture

4 Client Side - overview Page design Client-side scripting Javascript Displays Languages

5 Page design: JQuery Mobile control library TDMobile uses the jquery Mobile open source library for its client-side controls. jquery Mobile library stable and tested with adoption by many major companies: United Airlines Rolex IKEA Disney Many, many more

6 Page design: JQuery Mobile control library Jquery Mobile offers a wide variety of powerful controls, heavily tested on all major platforms: Windows: Chrome, IE, Firefox Apple: ipad, iphone, Desktop Android: Phone and tablets Nook, Kindle, and more!

7 Page design: WYSIWYG page editor TDMobile s IDE offers an innovative Layout design tool, harnessing the Power of WPF and XAML to model the behavior of our HTML controls Simply drag controls from the toolbox onto the webpage and build your page

8 Page design: Automatic layout Unlike Team Developer which uses absolute coordinate positioning, TDMobile features automatic layout where each control snaps into position and expands to fit the size available In this way, its more like HTML and WPF and the layout can be more responsive to the various client device screen sizes and aspect ratios.

9 Page design: Page editor & automatic layout DEMO: Building a simple page

10 Page design: Containership All TDMobile controls are hosted within a container. At the top level, the page itself is a container which acts like a WPF StackPanel Notice how the controls stack vertically as you drop them on the page, each occupying the full width

11 Page design: Containership In addition to simple, standard controls like buttons, checkboxes, background text, etc, TDMobile offers several container controls: ListView Group Layout grid

12 Page design: Containership ListView: Maybe the most powerful control, the ListView is designed to bind to an array of data, where each element may be a UDV Each record in the ListView may consist of multiple controls

13 Page design: Containership Group: The Group is a container which glues together its children into a single mass The group may hold buttons, radio buttons, checkboxes, and combo boxes

14 Page design: Containership LayoutGrid: The LayoutGrid offers a matrix of rows and columns each of which can contain a control Each cell in the grid can contain another layout grid, leading to powerful design possibilities

15 Page design: Containership DEMO: Using containers

16 Page design: Other controls Flip Switch on/off switch Image your images Link intelligent links to maps, phone numbers, addresses, etc Navigation bar horizontal array of buttons for use as a toolbar HTML anything!

17 Page design: Theming The TDMobile IDE comes with built-in support for the default jquerymobile theme, which offers 5 swatches, or groups of colors

18 Page design: Theming Each control can choose individually from among the five swatches, or just use a specific color In addition, an entirely new theme can be created using the free tool ThemeRoller (jquerymobile.com/themeroller). This theme can then be imported into your TDMobile project, offering complete customization. See Talk: Introduction to HTML/CSS formatting and theming for TD Mobile

19 Client-side scripting Design Goal: Enable users to be productive on day 1 without needing Javascript or jquery expertise The Solution: New high-level client-side macros supporting the most common tasks: Invoking server-side Operations Navigating between pages Branching on Bind values

20 Client-side scripting TDMobile scripting language: Example: Alert pops open a message box Call Calls a client-side Javascript fcn If branches based on a Bind value Navigate navigates to another page Invoke invokes a server-side Operation Set sets the value of a Bind Store stores a bind in the browser db And many, many more!

21 Javascript Very complex applications? Power user? TDMobile still offers the ability to directly code your own client-side logic in Javascript

22 Javascript Define functions within your Web Pages Call them directly from your control event actions

23 Javascript Import Javascript libraries Use your own libraries Customize binding logic We supply hooks for customizing Binding behavior with your own Javascript TDMobile Javascript library We include a library to make interacting with our framework easier See Talk: Introduction to JavaScript and to the TD Mobile clientside code, incl. the new TD JavaScript API

24 Displays TDMobile allows you to offer different looks to your pages depending on the client device being used Phone Tablet

25 Displays *All* visual properties tracked separately per display Texts Colors Locations Containership/parenting!

26 Phone Tablet See talk: Supporting Multiple Display Sizes with TDMobile apps

27 Languages Text properties of controls, like caption, are stored separately per language Error messages for binding validation stored separately per language Create multiple language versions of your application without recoding or designing! See talk: Multi-Language Apps with TD Mobile

28 Server Side - overview Business logic State Management Authentication

29 Business logic: pure.net Each page in your application can supply server-side logic in 2 ways: Functions internal to server Operations callable from client All code written in standard SAL

30 Business logic: pure.net Leverage your existing business logic by including your: functional classes global functions Variables constants

31 State Management All global variables are automatically generated in a special session object in IIS The use of global variables then makes it easy for the end user to manage application state See talk: State Management: How to manage the "state" of your application, including persisting data between pages

32 Authentication TDMobile has its own built-in, integrated login system Invoke operation To have a user log in, call the SAL function SalWebLogin in your server code A special ASP.NET encoded security cookie is placed on the client machine Security cookie Call SalWebLogin

33 Authentication For each page in your application, you can specify if it requires authentication or not If it requires authentication, the security cookie is requested Invoice Page? ID please? No, sorry If the cookie isn t present, the client is redirected to a specified Login Page Login Page

34 Authentication You can also group your users into Roles and specify for each page which roles are required If user doesn t have the role needed for a page, he is redirected to an Unauthorized page Define your own roles Administrator Group Manager Unit Leader Normal User

35 Client Side Server Side To handle the data transfer between the client and server halves of each page, TDMobile introduces the concept of Bindings

36 Client Side Server Side Bindings take care of collecting data from the page s fields and passing them to an Operation on the server

37 Client Side Server Side Certain properties of controls, like Enabled and IsVisible, can be tied to a binding, allowing Bindings to affect page behavior too See Talk: Bindings: How they work, validation, formatting, binary states, etc.

38 TD Mobile Devices TDMobile IDE

39 TDMobile IDE TDMobile IDE New IDE focused on the mobile programming experience Keeps the outline loved by TD programmers Adds new, modern features

40 TDMobile IDE Ribbon Bar

41 TDMobile IDE IDE Pane Types Outline Pane Traditional TD outline Listview Pane For lists of app objects WebPage Pane For editing an web page

42 TDMobile IDE Outline Pane Select any individual object in the explorer tree and the Outline Pane will display that object

43 TDMobile IDE ListView Pane Select a category of objects in the explorer tree and the ListView Pane will show those objects Select between 3 different views on the list

44 TDMobile IDE WebPage Pane For editing an web page Three tabs along bottom: Outline the code of the page Layout one layout tab for each supported display Preview to view the actual HTML preview

45 TDMobile IDE WebPage Pane Layout tab Visual editing of the web page

46 TDMobile IDE WebPage Pane Preview tab View how your page will look at runtime, including custom stylesheets, etc

47 TDMobile IDE Integrated Library System Edit the code from all files at once All source presented as a seamless whole

48 TDMobile IDE Integrated Library System View the libraries in the explorer Or, in the Files ListView pane

49 TDMobile IDE Integrated Library System Special icons alert you to file status changes Edited Not found Modified outside IDE

50 TDMobile IDE Debugger Debug sessions use IIS Express to host the application IIS Express installed free with TDMobile IDE Debugger IIS Express

51 TDMobile IDE Debugger All normal debug features supported: - Step in, over, and out - Break, continue - Examine variable values - Set breakpoints

52 TDMobile IDE Find/Replace tool New IDE features powerful find/replace tool Results update as you type shown in a dockable pane

53 TDMobile IDE Many, many more features Multi-threaded Partial compilation support Many internationalized versions: German, French, etc New XML-based file format

54 TDMobile IDE Conclusion: TDMobile offers you a modern web application development system that s easy to use, gives you quick results, and lets you leverage your existing business logic