Forums

OverviewFelgo 2 Support (Qt 5) › What is the basic Felgo App Configuration?

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #17894

    Niyazi

    Hi,

    Felgo documentation and QML documentation are huge for me because of my limited time. I have few simple question. I believe if I get an exact answer than I can look at the detail documentation.

    • What is the beset screen size to build a iOS and android App?
    • How to set every item, rectangle, text, label, picture etc. to my desired screen size so they will not get distorted in different screen size of mobile, landscape or portrait view?
    • How to create a re-usable page so when they load in other page the size is not get distorted.
    • How to load Json data before Qml page is load? So, I don’t get empty values if Qml pages load first and data loads later.

    With this can any one answer the main question? What is the basic Felgo App Configuration?

    Please, don’t give me some link to look at it. When I do I carried on and get lost. My question is simple mobile app and nothing fancy on it. With right answer I will get deeper in the Felgo App. Thank you.

    Kind Regards,

    #17898

    Günther
    Felgo Team

    Hi Niyazi!

    The actual window size of your application is different for every device. Your app will always look different on various devices, as they use screens with different resolutions and pixel densities. This is why it is important to create an app layout with a responsive UI, that supports different screen sizes and densities (and portrait / landscape, if your app should support both).

    I know you are not a fan of documentation links, but I still recommend to have a look at Supporting Multiple Screen Sizes and Densities with Felgo Apps.

    You can for example:

    • Use anchoring and property bindings to align your items on your pages. E.g. to let your item always fill up 50% of the available screen. The actual size of the item will then be different for each device. Of course if you specify e.g. a responsive width, but a fixed height, your item will then “distort” on devices with different resolutions.
    • Use dp() or sp() functions to specify density-independent pixel values. Regardless of the used device, the item then always uses the same physical size on every device. This also means that there might be unused space on bigger devices.

    How you set up the content of your pages depends on your use-case and desired layout, so there won’t be a solution that just works everything you might want to do. In this regard, I also recommend having a look at QML Layout components like Column or Row.

    Every QML Component (each QML file your create) is a re-usable component. You can add public properties and signals that allow different set-ups for each point where you use the component.

    Regarding Data Loading: Felgo and QML do not restrict or require a certain way you load and show data. If you want to load your data before you show the pages, you can do that by not showing the page or certain UI elements, unless you have your data available.

    Hope this helps!

     

    Best,
    Günther

     

     

    #17903

    Niyazi

    Thanks, Günther. Yes, you are right about my feeling of the documentations. Because they don’t support with examples. I red few times the “Supporting Multiple Screen Sizes and Densities with Felgo Apps.” and every time I read it makes me more confuse. Being new to QML its my negative point.

    I was expecting more like this;

     

     

    Import ****
    Import ****
           App{
               
               onInitTheme: {
                   Theme.platform = "ios" // read more about https://felgo.com/doc/vplayapps-theme/ and code snippets
               }
               
               width: screenWidth                        // read more about https://felgo.com/doc/********* and code snippets
               height: screenHeight
               
               property string mainTopColor: "#1AD6FD"                       // read more about https://felgo.com/doc/********* and code snippets
               property string mainBottomColor: "#1D62F0"
           }

     

     

     

    So,

    • What I am not asking means: I don’t want whole project source code.
    • What I am asking for: for my question small example and put some comment for documentation.

    I read the sp, dp and so on… I am asking simple app example to cover the screen size of the mobile and few items on it. Than I can jump to documentation.

    So, with your answer I might ask you another simple question. Do you have any responsive UI code snippest?

     

    Kind Regards

    #17906

    Günther
    Felgo Team

    Hi,

    I understand that learning a new language is not easy. To get a feeling of how a simple app can be set up using anchoring, dp(…) and navigation types pages, I created this short example snippet for you:

    import Felgo 3.0
    import QtQuick 2.0
    
    
    App {
    
      // navigation
      Navigation {
    
        // first menu item
        NavigationItem {
          title: "Home"
          icon: IconType.home
    
          // allow navigation between pages with navigation bar
          NavigationStack {
    
            // initial page
            Page {
              title: "Main Page"
    
              // place child items below each other
              Column {
                anchors.centerIn: parent
    
                // indent
                x: dp(Theme.navigationBar.defaultBarItemPadding)
                width: parent.width - 2 * x
    
                spacing: x
    
                AppText {
                  text: "Felgo"
                  color: "blue"
                  anchors.horizontalCenter: parent.horizontalCenter
                }
                Rectangle {
                  width: parent.width // fill parent width
                  height: dp(50) // fixed height of 50 dp
                  color: "red"
                }
                AppButton {
                  text: "Click ME"
                  anchors.horizontalCenter: parent.horizontalCenter
                  onClicked: console.log("Clicked!")
                }
              }
    
            } // Page
          } // NavigationStack
        } // NavigationItem
    
        // second menu item
        NavigationItem {
          title: "Second Tab"
          icon: IconType.star
    
          // ...
        }
    
        // ...
      }
    }

    Hope this helps!

    #17908

    Niyazi

    🙂 Thanks Günther.

    I will check it.

    Kind Regards

Viewing 5 posts - 1 through 5 (of 5 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support