BBj 24.02+ DWC Training

Topic outline

• 

  General

  • Announcements Forum
  • Prerequisites - READ FIRST! Book

    This page lists the prerequisites for the BBj DWC Training course.  It also contains several links to free online courses that cover the basics for HTML, CSS, and even responsive layouts using CSS.

  • Useful Resource Links Page

    This page contains several useful links that will come in handy during the course including the BASIS Online Help, the DWC-specific documentation, as well as links to reference material for the browser's Developer Tools, CSS, CSS Custom Properties, and more.

• 

  1. GUI to BUI to DWC

  Concepts Covered in This Chapter:

  1A. Registering and Launching a DWC App

  • Registering and launching BBj GUI apps in the BUI and DWC clients using Eclipse and Enterprise Manager

  
  
  

  1B. Running a "Hello World" App in BUI and DWC

  • Registering and launching BBj GUI apps in the BUI and DWC clients
  • Using the INFO(3,6) to identify the client
  • Using BBjSysGui constants with the BBj message box
  • Specifying custom DWC modes with the BBj message box

  
  
  

  1C. Taking an App From GUI to BUI to DWC

  • Running a complete graphical BBj app in the thin client (GUI), the Browser User Interface (BUI), and the Dynamic Web Client (DWC)
  • Changing the window to use flow layout, ignoring the x, y, width, and height parameters, and then applying a CSS Grid layout strategy
  • Setting attributes on a BBjButton to affect its size and appearance
  • Making our app look and act like a real web app instead of a desktop app running in the browser
  • Handling runtime errors in the browser's Developer Tools console

  
  
  

  • 1A. Registering and Launching a DWC App Page
  • 1B. Running a "Hello World" App in BUI and DWC Page
  • 1C. Taking an App From GUI to BUI to DWC Page
  • Exercise: GUI to BUI to DWC Assignment
• 

  2. Browser Developer Tools, CSS Styles, CSS Custom Properties, and DWC Themes

  Concepts Covered in This Chapter:

  2A. Introduction to CSS
  

  • What is CSS?
    
  • What do you apply styles to?
    
  • How to use CSS Selectors
  • CSS Selector Combinators
  • CSS Pseudo-Classes
    
  • Shadow DOM's
    
  • Apply Classes and inject CSS Files in BBj
    

  
  

  2B. Introduction to the Browser's Developer Tools

  • Accessing the browser's Developer Tools 
    
  • A brief tour of the Developer Tools and their major features
  • Modifying the text and style of a BBjControl in the Developer Tools
  • An introduction to the DWC's CSS custom properties

  
  

  2C. CSS Styles and CSS Custom Properties

  • The DWC's CSS custom properties
  • The DWC's App Themes
  • Modifying a BBjControl's Style Properties
  • Using Directives to Inject JavaScript and CSS Dynamically
  • The Web Component Architecture and the Shadow DOM
  • Font Size Compatibility

  
  
  

  2D. DWC Themes

  • Adding a Light/Dark Mode Toggle to an App
    
  • Using the DWC Themer to Create CSS Themes
  • Applying Saved CSS Themes to DWC Apps

  
  

  • 2A. Introduction to CSS Page
  • 2B. Introduction to the Browser's Developer Tools Page
  • 2C. CSS Styles and CSS Custom Properties Page
  • 2D. DWC Themes Page
  • Exercise: Add Theming Support Assignment
• 

  3. Upgrading an Existing GUI or BUI App to DWC

  Concepts Covered in This Chapter:

  
  
  

  3A. Working with ARC Files

  • Useful information about how to upgrade GUI programs that are based on .arc files to DWC.

  
  
  

  3B. Upgrading BBjGrids

  • Because the  DWC does not offer a 1:1 API compatible implementation of a data grid, this section teaches you how to use the BBjGridExWidget Plug-In to upgrade existing code that was written for the BBjStandardGrid.

  
  
  

  • 3A. Working with ARC Files Page
  • 3B. Upgrading BBjGrids Book

    Learn about the steps needed to upgrade existing code written for BBjStandardGrid to BBjGridExWidget.

  • Exercise: BBjGridExWidget Assignment
• 

  4. DWC Controls With Extended Attributes

  • 4A. DWC Controls With Extended Attributes Page
  • Exercise: Adding search capabilities to a BBjTree Assignment
• 

  5. Flow Layouts and Using CSS for Responsive Design

  • 5A. CSS Layout Options Page
  • Exercise: Converting a DWC app to use CSS grid layout Assignment
  • Exercise: Converting a simple form to use CSS Flexbox for layout Assignment
• 

  6. Icon Pools

  • 6A. Icon Pools Page
  • Exercise: Adding an icon to a static text control Assignment
• 

  7. Control Validation

  • 7A. Control Validation Page
  • Exercise: Adding validation to an email field Assignment
• 

  8. Browser Constraints

  • Handling Client Files Page

    The Browser does not support the direct access to client files. This section describes how to implement file uploads and downloads with DWC.

  • Printing and Print Preview in the Client Page

    The browser does not offer direct access to printers. In a modern webapp printing is typically done after displaying the printout in the client, using the printer selection of the browser. This chapter discusses the options for printing using SYSPRINT, BBjPrinter and Jasper.

• 

  9. Embedding 3rd Party Components

  • Embedding a JavaScript Chart Component Page

    DWC can embed 3rd party components like charts, maps and widgets, that have been written in JavaScript or TypeScript and run in the browser. This chapter explains how to embed a chart from the Charts.js library. 

  • Receiving Events from JavaScript in BBj Page

    Sometimes a component you are using allows for interactivity with the user. In many cases this interactivity would need to trigger action inside your BBj program. 
    

  • Working with Slots Page
  • Embed a 3rd party component Assignment
• 

  10. Advanced Responsive Design

  • 10A. Media Queries Page
  • 10B. Transitions Page
  • Exercise: Media Queries Assignment
  • Exercise: Transition on Button Assignment
• 

  Feedback

  Please leave your feedback!
  

  • Feedback