[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,

[GüntherFelgo 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

 

 

[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

[GüntherFelgo 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!

[Niyazi]

🙂 Thanks Günther.

I will check it.

Kind Regards