Web 2.0

Labels
AJAX(112) Apple(1) Application Builder(242) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(11) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) DotNetNuke(12) EASE(20) Email(6) Features(99) Firebird(1) Form Builder(14) Globalization and Localization(6) Hypermedia(2) Installation(4) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(15) OAuth(5) OAuth Scopes(1) OAuth2(6) Offline(14) Oracle(10) PKCE(1) PostgreSQL(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(163) Reports(48) REST(26) RESTful(21) RESTful Workshop(13) RFID tags(1) SaaS(7) Security(75) SharePoint(12) SPA(5) SQL Anywhere(3) SQL Server(26) Stored Procedure(4) Teamwork(15) Tips and Tricks(81) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(331) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(39) Web.Config(9) Workflow(28)
Archive
Blog
Web 2.0
Sunday, June 20, 2021PrintSubscribe
Drawing Pad

Taking photos in business apps often requires the visual annotation of the image. Another common scenario is sketching on the pre-defined template. Touch UI provides a built-in drawing pad that works seamlessly with the BLOB fields of your app. The feature is enabled by default and can be activated with a tap on the “Draw” button.


The drawing pad will be immediately displayed in fullscreen mode in response to the tap. It offers several tools: pen, highlighter, blur, and eraser with multiple levels of undo and redo. You can draw with a finger or a stylus compatible with the touch-screen device. Mouse pointers will also work. 

The “pen” and “highlighter” will impact the image as one would expect. The “blur” tool will blur the image contents. The “eraser” will remove the effect of the other tools.


Developers can handle the blobdrawtoolbox.app event triggered on the document and override the available tools and their properties such as the width of the stroke and the color choices. The toolbox property of the event provides access to the default tool configuration.

The drawing is composed of multiple layers. Saving of the drawing will compose the final image that will be submitted to the server when the data record is saved. The end user can perform multiple sessions of drawing prior to the submission since the layers remain preserved until the record has been saved.


Sketching on the template will require a default image to be provided. Create a custom script to handle the getdefaultblob.app event. The field property will indicate the name of the blob field that does not have a value. If e.blob.url or e.blob.icon properties are assigned in the event handler, then the corresponding image will be downloaded or a material icon will be drawn.


For example, the following handler will cause the framework to create a blue material icon for the category picture in the application.


The default image based on an icon may serve as a blob stub whenever the optional image is required. The end user may tap on the image and have it replaced with their by either taking a photo on the device or choosing a previously created image.



Tapping on the default blob image will always activate the drawing pad if the BLOB data field is tagged as image-user-defined-none. The end user will not be able to replace the template image.

The end users may take real-world photos and provide the visual comments with the drawing pad tools. Keep in mind that the huge photographs taken by modern day cameras will likely be redundant for business purposes. Make sure to specify the image-size-WxH tag to engage the image preprocessor to enforce the pre-defined image photo size and graphical annotations. 


Drawing pad provides a powerful tool for the line-of-business apps. Naturally it may not always be desirable to allow image alteration. Tag the blob data field as image-editor-none to disable the drawing pad.


By default the blob images are rendered as thumbnails. Tag the data fields as image-original-always if the original image must be displayed both when the users are viewing and editing the data. The field with the tag image-original-editing will show the original image if the blob is presented in the “edit” mode. End users may still download the original image when viewing the record.


The drawing pad will work on the small devices, tablets, and huge desktop monitors.
Tuesday, March 5, 2019PrintSubscribe
Build Apps Faster With Maps and Postal Address Verification
Code On Time release 8.7.9.0 brings the upcoming live designer another step closer to reality and introduces various cool features in the application framework including Postal Address Verification, external JavaScript business rules, enhanced batch editing of many-to-many fields, maps in forms, and much more. We also hope that you will notice the significant increase in the code generation speed.

For the past few years we were developing a new innovative development environment to revolutionize Rapid Application Development of custom business applications that work offline, online, and on-premises. This particular release makes your apps ready for Code On Time v9. Today you are starting the Design environment by selecting the corresponding option in the project wizard. In the very near future your own app will be launched with the new design environment  overplayed on top! The upcoming live designer is implemented as addon.appbuilder.dll automatically included in the ~/app/bin folder of apps created with v9. The add-on integrates its own scripts in the application. The design environment is composed of Project Explorer and Object Inspector. Developer can click on user interface elements of their live app to inspect properties of the corresponding elements and have them changed when needed.  Changes to some properties (such as labels), will provide instant feedback in the user interface of the live app. Any significant changes will cause the app to be re-generated and restarted when the developer is ready to see the end result.

The mechanism of code generation has been changed significantly in release 8.7.9.0 to speed-up the code generation and improve the start time of the app. In many cases the app generator will replace only a few files in the source code and eliminate the need for hard restart of the app.

Published app will not include the add-on DLL in the output. App Builder add-on is not required for your apps to work. It is activated only if Code On Time generator is installed on the machine and if your app is accessed via localhost address. Both Touch UI and Classic UI apps will work with the new app builder, when released. You will be able maintain the source code of your apps in Visual Studio and work with the source control systems such as Git. Nothing will change from the development prospective.

Autofill and Postal Address Verification

Postal Address Verification is the new feature built on top of Autofill, the mechanism embedded in the universal input elements of apps created with Unlimited Edition.



An autofill group is created by tagging multiple fields with tags that start with "autofill-" prefix. For example, autofill-address-city. Component "address" in the tag defines the name of the group. Component "city" is the group-specific purpose of the field and does not need to match the physical field name. The trigger field in the group will cause "AutoFill" command to execute. More than one trigger can be declared by tagging multiple fields with autofill-[groupname]-trigger attribute. All trigger fields must have values for "AutoFill" command to execute.

The framework implements processing of autofill-address-, autofill-geocode-, and autofill-map- groups. Group address will verify postal addresses with Google Geocoding API. Addresses in the United States can be also optionally verified with USPS.  Group geocode will perform address lookup from latitude and longitude fields in the group. On-Demand field tagged as autofill-(address|geocode)-map will resolve the address into a static map presented to the user.

Event menuitem.app

New event menuitem.app is triggered on the document to allow a custom script to form. For example, the following script will display a login form if Test item is selected in the menu.

(function () {
    $(document).on('menuitem.app', function (e) {
        if (e.item.url === '/pages/test') {
            $app.touch.show({
                controller: 'MyProfile', 
                view: 'loginForm',
                startCommand: 'New',
                startArgument: 'loginForm'
            });
            return false;
        }
    });
})();

This is how the app will behave in response to the user actions:


External JavaScript Business Rules

It is now possible to create JavaScript business rules without explicit definition in the data controller. Save the file in ~/js folder of the app, put a breakpoint, and hit Ctrl+F5 when the app is loaded in the browser. Your custom business rules will execute in Before phase giving you complete control over various behaviors of the app. This type of business rules is also support in native mode.

This particular sample when force the user to enter USA in the Country field of Suppliers controller for the record to save. This is a perfect example of client-side validation.

Also the user will not be able to execute New command and therefore will not be able to bring up the form to create new records.

(function () {
    $app.rules = {
        'Suppliers': {
            'Update':
                function (dataView, args) {
                    var data = dataView.data();
                    if (data.Country !== 'USA') {
                        $app.input.focus({
                            fieldName: 'Country',
                            message: 'Only USA is allowed in this field.'
                        });
                        return false;
                    }
                },
            'New': function (dataView, args) {
                $app.touch.notify('You are not allowed to create new records.');
                return false;
            }

        }
    };
})();

This how it make look at runtime:


Also Included


The following features and bug fixes are included in this release:

  • (Batch Edit) Many-to-Many fields display "keep original selection" and "delete original selection" options to allow either expanding the set of selected options or to have it replaced with a new set.
  • (EASE) Tracking of created/modify by/on fields does not overwrite the values of Created By/On fields when blobs are uploaded.
  • (EASE) Modified/Created By/On fields are displayed on form views in edit/read mode.
  • (EASE)  Modifed/Created By/On fields are not displayed in form views in "new" mode.
  • (Classic UI) Projects with advanced options and "Classic UI" are correctly generating the theme folder.
  • (Framework) Data access objects based on models without a primary key will not result in compilation error when the app is generated.
  • (Touch UI) Floating category without wrapping will display 2 or 3 columns of fields with the minimal width of the form equal or greater than MD and LG accordingly.
  • (Touch UI) Floating category with wrapping will display 2, 3 or 4 columns of fields with the minimal width of the form equal or greater than SM, MD,  and LG accordingly.
  • (Touch UI) Import treats dates serialized in Excel files as UTC dates and performs de-serialization equivalent to the one performed when getting data from the server.
  • (Touch UI) Smart dates are instantly refreshed if a date value is changed by user via direct input without using the calendar popup.
  • (Touch UI) Map locations on iOS and Mac open via OS-specific URLs.
  • (Touch UI) URLs prefixed with "_blank:" will open in the default OS web browser when running in native mode (Cloud On Time or branded host app).
  • (Classic) Modal forms with conditionally visible content are resized after dragging.
  • (Classic) Initial state of "form" buttons with When Client Script expressions is calculated correctly.
  • (Touch UI) JavaScript expressions specified in When Client Script property of actions are evaluating the current row using the same mechanism as the Visible When and Read Only When expressions of fields and categories. This improves performance and addresses issue of incorrect values tested when form views are opened.
  • (Touch UI) RTF editor toolbar is fully visible whatever the position of the "Rich Text" field in the form view.
  • (Touch UI) RTF fully supports "Dark" theme.
  • (Touch UI) Calendar view does not display "New/grid1" option when user clicks the calendar to create an event.
  • (AppGen) Display name of the projects is used as application name when the app name is not defined in the project features.
  • (Touch UI) ListBox/RadioButtonList/CheckBoxList do not cut the bottom of item in FireFox browser.
  • (Classic)  Dedicated Login page correctly links bootstrap CSS file.
  • (AppGen) It is now again possible to create new projects based on ASPX page model with the framework in the class library.
  • (Framework) Message "unable to load..." with either the name of the resource script of path to the script is reported if there was an exception while enumerating client library scripts.
  • (App Gen) All translated files are created with UTF-8 encoding Byte Order Marker. If the translated resources are the same, then the files are not overwritten.
  • (AppGen)  All files are saved in UTF-8 format with explicit Byte Order Marker during the build process of the project.
  • (AppGen) VB projects with the core framework in the class library are generated correctly.
  • (Touch UI) Confirmation controller will display the value of "data field" of the context record in the header of the form.
  • (Touch UI) Action with confirmation controller will cause explicit validation of field value before execution. If action causes validation error, then the confirmation controller will not execute until all validation errors are fixed.
  • (Action State Machine) Calling BusinessRules.PreventDefault() method will cause action state machine to stop processing of actions unless Result.Continue() was explicitly requested or the command name was Insert|Update|Delete. 
  • (Action State Machine) If a value is assigned to Result.NavigateUrl in business rules, then the framework will stop processing of the actions unless Result.Continue() is called explicitly in business rules.
  • (Touch UI) Event createlayout.dataview.app is triggered on the document whenever a form layout is required. Event generatelayout.dataview.app is triggered once and the output is cached as needed.
  • (Project Wizard)  App generator version is embedded in DataAquairum.Project.xml to ensure regeneration of core framework files when f the project has been cloned/copied after a product update installation.
  • (Project Wizard) Data Model List or Business Entity List is automatically focused when Data Model & Business Logic page is activated.
  • (Project Wizard) Data Model List is fully redrawn after a new model is added.   Business Entity List is fully extended when there are no models.
  • (Client Framework) Method $app.execute accepts filter in the form of an object. For example, filter: {CategoryID:5}.
  • (Client Library) Method DataView.data() returns an object with properties representing current values of fields. New object property "_modified" will have its own properties representing old values of modified fields.
  • (Framework) XmlConverter automatically locates the first element in XML document and takes its name for the root JSON property if the root is not specified.
  • (AppGen) Removed redundant parenthesis for simple "Not" unary expressions in the code of c# projects.
  • (Framework) XmlConverter performs a robust enhanced conversion of XML to JSON to support v9 Project Designer and Inspector.
  • (Framework) User settings embedded in the page do not include "server" section from ~/touch-settings.json. This section is removed before inclusion in the page.
  • (Framework) Developers can implement method ApplicationServices.ValidateBlobAccess to alter the verification of user access to the row with the blob and the blob field itself. The overridden method can return false to disable blob access validation.
  • (Framework) Removed "download done" cookie creation when Blob.DirectAccessMode is true.
  • (Touch UI) Partially visible summary view is not scrolled into view when an option on its toolbar is selected.
  • (Touch UI) Fixed the bug in the implementation of auto focus on the last input when the window is activated.
  • (Framework) Added auto-registration of Code On Time App Builder v9.
  • (Touch UI) Reduced redundant functionality of jQuery Mobile for a more compact code.
  • (Touch UI) JavaScript business rules automatically skip updating values of fields with unchanged values.
  • (Touch UI) JavaScript event menuitem.app is triggered on document object before the menu option is selected. Event property "item" provides access to "url", "description", "title", and cssClass associated with the selected menu item. If an event handler returns false or prevents default then the menu option is not processed by the framework. Use this method to execute custom actions always available in the user interface.
  • (Client Framework) Added support for declarative JavaScript business rules that do not require explicit definition of the rule.
  • (Touch UI) Method $app.touch.show accepts object as "filter" property in the options for simplified syntax of filter definition.
  • (Framework) TLS12 is always enabled in the apps.
  • (Framework) Apps with ASPX page implementation do not serve files with *.json extension over HTTP.
  • (Framework) Denies HTTP access to acl.json, touch-settings.json, ~/permissions, and ~/reports folders in apps with SPA implementation of pages.
  • (Framework) Default settings from ~/touch-settings.json are stored in application cache for improved performance.
  • (Touch UI) Email icon is displayed in context menu as an independent action for "email" fields.
  • (Touch UI) Script error is displayed as notification when an exception is raised in the rendering phase of the view on the client
  • Saturday, May 19, 2018PrintSubscribe
    Home Page and Toolbar

    Let’s explore a few customization ideas for the home page and toolbar of your app.

    The default home page displays a table of contents. The toolbar has “hamburger” button (“bars” icon) of the left side and content menu button (“more” icon) on the right sidebar. The illustration is presented in Light theme with Modern accent.

    The default home page of app based on Touch UI features a table of contents.

    A customized home of an app based on Touch UI may display marketing and informative content to the end users instead of a default table of contents. Let’s remove the table of contents from the home page and replace it with a marketing message for the end users of the app.

    A customized home of an app based on Touch UI may display marketing and informative content to the end users instead of a default table of contents.

    Have you noticed that the new design does not have the Menu and More buttons on the toolbar?

    By default the data pages of the app do display both buttons just like the default home page with the table contents.

    The standard features of the toolbar in apps based on Touch UI are Menu and Context buttons.

    Let’s hide the Menu and More buttons on the toolbar on the data pages as well.

    The toolbar of a Touch UI app without Menu and Context button.

    This is how the data pages will look when the left sidebar is expanded.

    Customized toolbar of a Touch UI with the sidebar expanded.

    Select the project name on the start page of the app generator and locate “Home” page in the Project Explorer on the right hand side of the Project Designer.

    Hierarchy of pages in Project Explorer of Code On Time app builder.

    Right-click and delete both containers on the page.  This will remove the table of contents displayed to the authenticated users and the welcome message displayed to anonymous users.

    Double-click the home page, select Jumbotron as the Template, save changes, and generate the app. Inspect the home page. It will look similar to the one in the picture. Try other templates to find the best fit for your app.

    Sample customization of the home page in an app based on Touch UI.

    Lock the page from being overwritten during the code generation before making any changes to the content of the template. Double-click the home page in the Project Explorer and specify First Time Only in the Generate property. Save the changes. The home page icon will display with the “lock” indicating that any changes to the app will be preserved if the page exists already.

    Locked icon of a page in Project Explorer indicates that the page will not be ovewritten.

    Click Develop on the toolbar of the Project Designer and add a new stylesheet with the name of choosing under ~/app/css/ folder.

    Custom stylesheet in an app based on Touch UI created with Code On Time app generator.

    Enter the following CSS rules in the file app/css/StyleSheet.css.

    /* 1. Hide "hamburger" button when the toolbar does not have the "Back' button  */
    
    .app-bar-toolbar:not(.app-has-back) #app-btn-menu {
        visibility: hidden;
    }
    
    /* 2. Hide the context button with "more" icon*/
    
    .app-bar-toolbar #app-btn-context {
        visibility: hidden;
    }
    
    /* 3. Align the logo area of the page with the content when there is no sidebar on the left side */
    
    body:not(.app-has-sidebar-left) .app-bar-toolbar .app-logo {
        left: 16px;
    }
    
    /* 4. Shift the logo text more to the left in the expanded sidebar */
    
    body.app-has-sidebar-left:not(.app-has-minisidebar-left) .app-bar-toolbar .app-logo {
        left: 20px;
    }
    
    /* 5. Move the "icon" buttons of the toolbar to the right */
    
    .app-bar-toolbar .app-btn-cluster-right .app-btn {
        margin-right: -28px;
    }
    

    The comments provided next to the CSS rules explain their effect on the User Interface of the app.

    Rules (1) and (2) are hiding Menu and More buttons on the toolbar. Rule (3) shifts the text in the Logo area to the left when the sidebar is not visible.

    Customized home page of an app based on Touch UI presented on a narrow device.

    The same rules also apply to data pages. A data page of an app based on Touch UI with customized toolbar on a narrow screen is shown next.

    A data page of an app based on Touch UI with customized toolbar on a narrow screen.

    If the screen of the device is narrow then modal pages will be automatically replaced with fullscreen pages. In that case rule (1) does not apply and the Back is visible next to the name of the previous view.

    A fullscreen page in an app based on Touch UI.

    In this screenshot the user continues to drill into data and views the Category information of a product. Button Back remains visible and button More is not displayed. Rule (4) shifts context actions to the right of the toolbar.

    A fullscreen page in an app based on Touch UI with the image preview in the page header.

    Here is how the same changes will look in Dark theme with Construction accent.

    This is the home page without Menu and More buttons on the toolbar.

    A customized toolbar and home of an app based on Touch UI created with Code On Time app generator.

    This is the data page with the expanded sidebar.

    Expanded siderbar on app based on Touch UI.

    This is the data page with the collapsed sidebar in inline editing mode.

    Inline Editing mode of a data row in an app based on Touch UI created with Code On Time app builder.

    This is the same app on a small device without More button in the toolbar. A fullscreen page of an app created with Code On Time application generator presented on a narrow screen.

    A fullscreen page of an app created with Code On Time application generator presented on a narrow screen.

    Touch UI is entirely CSS-driven and allows customization of various aspects of user interface.