Results 1 to 3 of 3

Thread: JavaScript Canvas and Custom section UI layouts

  1. #1
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    5,769

    JavaScript Canvas and Custom section UI layouts

    There have been a few folks asking how to handle responsive UI when using Canvas and Custom sections in JavaScript for web and mobile Apps.

    This forum post will explain layouts and some new functionality added into v2.0.2 to simplify the process of building responsive UIs with Canvas and Custom sections.

    Canvas and custom sections now have a "resize" delegate that will allow you to adjust the geometry of the UI elements inside those sections.

    Tip: The resized delegate is also called just after the ready delegate when an App is loaded.

    If you are a VFP developer you should feel right at home as the VFP9 core UI classes can be used in JavaScript running in a web browser or on a mobile device.

    Lets have a quick look at laying out a simple UI with three vertical CommandButtons that adjust their position responsively as the browser window is resized or the App runs on a phone or tablet.

    Firstly let's look at a JavaScript Canvas section. This App is included in the v2.0.2 distribution called example_canvaslayoutjs.

    Name:  Screen Shot 2015-12-18 at 10.57.56 AM.jpg
Views: 81
Size:  81.0 KB

    Notice how you can use the CSS-style top, left, right, and bottom properties to anchor the UI elements relative to their parent containers.

    Name:  Screen Shot 2015-12-18 at 10.58.19 AM.jpg
Views: 75
Size:  48.7 KB

    Now lets see how it looks on a phone.

    Name:  Screen Shot 2015-12-18 at 10.55.52 AM.jpg
Views: 73
Size:  93.9 KB

    Now let's take a look at doing a similar thing using a JavaScript Custom section. This App is included in the v2.0.2 distribution called example_customlayoutjs.

    Name:  Screen Shot 2015-12-18 at 11.04.46 AM.jpg
Views: 73
Size:  98.6 KB

    Name:  Screen Shot 2015-12-18 at 12.24.25 PM.jpg
Views: 74
Size:  91.6 KB

    You can see from the code that I have provided that laying out a UI with nested containers is simple and straightforward. The real power lies in the use of layouts which can layout UI elements either vertically or horizontally and can be nested inside of each other.

    Enjoy.
    Last edited by barrymavin; 2015-12-18 at 07:16.
    Principal developer of Lianja, Recital and other products

    Follow me on:

    Twitter: http://twitter.com/lianjaInc
    Facebook: http://www.facebook.com/LianjaInc
    LinkedIn: http://www.linkedin.com/in/barrymavin

  2. #2
    Senior Member
    Join Date
    Feb 2012
    Posts
    1,210
    WOW!!!!!!!

    This is fantastic! Beautiful! Useful!

    I am super excited !!!

    Thank you very much.

    Herb

  3. #3
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    5,769
    I'll write another post with an example of using the OData functions to manually handle CRUD operations when I get a free moment.
    Principal developer of Lianja, Recital and other products

    Follow me on:

    Twitter: http://twitter.com/lianjaInc
    Facebook: http://www.facebook.com/LianjaInc
    LinkedIn: http://www.linkedin.com/in/barrymavin

Bookmarks

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Journey into the Cloud
Join us