QML VS SwiftUI (Appendix)

In the previous stories we shown the main difference between the QML and SwiftUI, both are declarative, QML has a lot of components becuase is more older but also becuase it used on a lot of platforms. Honestly (also if i like Qt) build a mobile application with Qt having the native look&feel sometime can require a bit of work, i want consider in this moment only the GUI side (i know that i can reuse the base code also for other platform). For this topic and for the people that prefer Qt how cross-platform tool i suggest a solution created on Qt: Felgo. I’m not Felgo employe! I would show an example, take the code from previous story (remove current item with right swipe action). List, with right swipe action, in swift:

struct People: Identifiable {
    var id = UUID()
    var name: String
    var image: String
}struct ContentView: View {
    @State var peoples = [People(name:"Albert", image: "albert.png"), People(name: "Tom", image: "tom.png"),People(name: "Jeff", image:"jeff.png"),People(name: "Jennifer",image: "jennifer.png"), People(name: "Steve", image: "steve.png"), People(name: "Bob", image: "bob.png")]
    var body: some View {
        List {
            ForEach(peoples, id: \.id) { people in
                HStack {
                    Text(people.name)
                    Image(people.image)
                }
            }
            .onDelete { (indexSet) in
                self.peoples.remove(atOffsets: indexSet)
            }
        }
    }
}

In pure Qt

ListView {
    id: listView
    anchors.fill: parent
    model: ListModel {
        ListElement { img: "bob.png"; name: "Bob" }
        ListElement { img: "jennifer.png"; name: "Jennifer" }
        ListElement { img: "tom.png"; name: "Tom" }
        ListElement { img: "denise.png"; name: "Denise" }
    }
    delegate: SwipeDelegate {
        id: swipeDelegate
        text: model.name
        width: parent.width
        
        ListView.onRemove: SequentialAnimation {
            PropertyAction {
                target: swipeDelegate
                property: "ListView.delayRemove"
                value: true
            }
            NumberAnimation {
                target: swipeDelegate
                property: "height"
                to: 0
                easing.type: Easing.InOutQuad
            }
            PropertyAction {
                target: swipeDelegate
                property: "ListView.delayRemove"
                value: false
            }
        }
        
        contentItem: Item {
            RowLayout {
                Text {
                    text: swipeDelegate.text
                    font: swipeDelegate.font
                    elide: Text.ElideRight
                    visible: swipeDelegate.text
                    horizontalAlignment: Text.AlignLeft
                    verticalAlignment: Text.AlignVCenter
                }
                Image {
                    source: model.img
                    visible: swipeDelegate.text
                    horizontalAlignment: Text.AlignLeft
                    verticalAlignment: Text.AlignVCenter
                }
            }
        }
        
        swipe.right: Label {
            id: deleteLabel
            text: qsTr("Delete")
            color: "white"
            verticalAlignment: Label.AlignVCenter
            padding: 12
            height: parent.height
            anchors.right: parent.right
            
            SwipeDelegate.onClicked: listView.model.remove(index)
            
            background: Rectangle {
                color: deleteLabel.SwipeDelegate.pressed ? Qt.darker("tomato", 1.1) : "tomato"
            }
        }
    }
}

Now with Felgo

AppListView {
    id: listView
    anchors.fill: parent

    model:  ListModel {
        ListElement { img: "bob.png"; name: "Bob" }
        ListElement { img: "jennifer.png"; name: "Jennifer" }
        ListElement { img: "tom.png"; name: "Tom" }
        ListElement { img: "denise.png"; name: "Denise" }
    }
   
    delegate: SwipeOptionsContainer {
        id: container
        SimpleRow {
            text: modelData.name
            imageSource: modelData.img
        }
        rightOption: IconButton {          
            color: "red"

            icon: IconType.trash
            height: row.height
            onClicked: {
                  listView.model.remove(index)
            }
        }
}

Using Felgo the number of lines of code are near to that of Swiftui and this code run also on Android!
From my point of view, if you want develop with Qt/QML and you must speed-up Felgo is a must for real project. I presented only the advantage from the GUI side, if we talk about notification, integration with social SSO with Qt prepare you to write a lot of native code and integrate it in your c++. It’s nice and cool from geek side (and i’m) but it’s could not cool from business side.

QML vs SwiftUI (Part 3)

In this article we’ll see the different use of the lists that is a very most used components in the mobile apps. We starting with SwiftUI, code the example show how create a simple list and the right swipe action to delete a row.

struct ContentView: View {
    @State var names = ["Albert", "Tom", "Jeff", "Jennifer", "Steve", "Bob"]
    var body: some View {
        List {
            ForEach(names.indices, id: \.self) { index in
                Text(self.names[index]) // Delegate
            }
            .onDelete { (indexSet) in
                self.names.remove(atOffsets: indexSet)
            }
        }
    }
}

The list is created with the keyword List, with ForEach for every elements of the array names is created an object Text that show the single name. If the model is more complex that a simple list of name and we have to show also an image we can add in the ForEach block the Image object. The instruction “id: .self” is necessary to identify every single row in unique way, in this case this identifier is the index of the array. Other important keyword is “@State” with this we say to SwiftUi to monitoring the variable names and update the ui when it changes. In the onDelete function we do the action the we want doing the right swipe, in this case delete the element. Before to switch to QML, we see an example a bit more complex:

struct People: Identifiable {
    var id = UUID()
    var name: String
    var image: String
}struct ContentView: View {
    @State var peoples = [People(name:"Albert", image: "albert.png"), People(name: "Tom", image: "tom.png"),People(name: "Jeff", image:"jeff.png"),People(name: "Jennifer",image: "jennifer.png"), People(name: "Steve", image: "steve.png"), People(name: "Bob", image: "bob.png")]
    var body: some View {
        List {
            ForEach(peoples, id: \.id) { people in
                HStack {
                    Text(people.name)
                    Image(people.image)
                }
            }
            .onDelete { (indexSet) in
                self.peoples.remove(atOffsets: indexSet)
            }
        }
    }
}

In this case we have the struct People that implements the protocol Identifiable, so we have am unique identifier for any instance of the struct. In the ForEach we now use it do identify the row also added a horizonthal stack to create a row with text and image. Now see that same example in QML:

ListView {
    id: listView
    anchors.fill: parent
    model: ListModel {
        ListElement { img: "bob.png"; name: "Bob" }
        ListElement { img: "jennifer.png"; name: "Jennifer" }
        ListElement { img: "tom.png"; name: "Tom" }
        ListElement { img: "denise.png"; name: "Denise" }
    }
    delegate: SwipeDelegate {
        id: swipeDelegate
        text: model.name
        width: parent.width
        
        ListView.onRemove: SequentialAnimation {
            PropertyAction {
                target: swipeDelegate
                property: "ListView.delayRemove"
                value: true
            }
            NumberAnimation {
                target: swipeDelegate
                property: "height"
                to: 0
                easing.type: Easing.InOutQuad
            }
            PropertyAction {
                target: swipeDelegate
                property: "ListView.delayRemove"
                value: false
            }
        }
        
        contentItem: Item {
            RowLayout {
                Text {
                    text: swipeDelegate.text
                    font: swipeDelegate.font
                    elide: Text.ElideRight
                    visible: swipeDelegate.text
                    horizontalAlignment: Text.AlignLeft
                    verticalAlignment: Text.AlignVCenter
                }
                Image {
                    source: model.img
                    visible: swipeDelegate.text
                    horizontalAlignment: Text.AlignLeft
                    verticalAlignment: Text.AlignVCenter
                }
            }
        }
        
        swipe.right: Label {
            id: deleteLabel
            text: qsTr("Delete")
            color: "white"
            verticalAlignment: Label.AlignVCenter
            padding: 12
            height: parent.height
            anchors.right: parent.right
            
            SwipeDelegate.onClicked: listView.model.remove(index)
            
            background: Rectangle {
                color: deleteLabel.SwipeDelegate.pressed ? Qt.darker("tomato", 1.1) : "tomato"
            }
        }
    }
}

In this case the QML is a bit more complex because we have to customize the label to have the same look & feel of iOS but in QML we don’t need to use any “@State” keyword to force the gui update. At the end i think that it’s simple for QML developer to use SwiftUI, a lot of things are similar and both the languages ​​are declaratives. Instead i think that for iOS developer is not simple to use both, is necessary more experience in the declarative world.

QML vs Swift (part 2)

In this part we’ll see how use the Button in both the languages.

In QML we define the button in this way:

Button {  text: "A button"  id: control  onClicked: {
   // Your action  }}

Where in the “text” property we set the label of the button and in the onClicked is executed what we need when the button is tapped/clicked. Instead in SwiftUI we have:

Button(action: {       // Your action
      }){
        Text("button")
             
      }

For the SwiftUI button the code to execute when the user clicks the button go in the action block. Instead for the property about the text can be changed modifying the properties of the object Text. A example to customization the button with QML:

Button {
    text: "A button"
    id: control

    onClicked: {
        
    }
    contentItem: Text {
            text: control.text
            font: control.font
            opacity: enabled ? 1.0 : 0.3
            color: control.down ? "#17a81a" : "#21be2b"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight
    }
    
    background: Rectangle {
        implicitWidth: 100
        implicitHeight: 25
        border.width: control.activeFocus ? 2 : 1
        border.color: "#888"
        radius: 40
        gradient: Gradient {

            orientation: Gradient.Horizontal
            GradientStop { position: 0 ; color: control.pressed ? "red" : "red" }
            GradientStop { position: 1 ; color: control.pressed ? "blue" : "blue" }
        }
    }
}

To change the properties of the text we must assign an Text Object to the contenrItem (in this case QML and SwiftUI are similar) and to change the bacground we can assign a rectangle with solid color or with gradient. It’s possible also use other object (i.e. image) for the background. A example to customization the button with SwiftUI:

Button(action: {}) {
            Text("Button")
                .fontWeight(.bold)
                .font(.title)
                .padding()
                //.background(Color.red)
                .background(LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .leading, endPoint: .trailing))
                .cornerRadius(40)
                .foregroundColor(.white)
                .padding(10)
        }

In SwiftUI we change the background color (solid or not) modifying only the properties of the Text object because the Text object is used to “show” the button. If we want use an image for the button we must replace the Text object with the Image object.

QML VS. SwiftUI (part 1)

In this serie i’ll show the difference between QML and SwiftUI. Both are declarative language, the first on is part of the Qt cross-platform library, the second is from Apple, introduced in the last summer. The idea that is at the base of these languages is simplify the design of the GUI, with the dream that the designer can draw the interface with tools as Photoshop, Sketch or gimp and with some plugin have the code in some programming language, for both the languages we have some attempt in this direction. Done this introduction, let’s start to see a bit of code.

// QML TEXT
import QtQuick 2.12
import QtQuick.Window 2.12Window 
{
   title: qsTr("Hello World")   
   Text {     
       id: name     
       text: qsTr("text")     
       anchors.verticalCenter: parent.verticalCenter
       anchors.horizontalCenter: parent.horizontalCenter     
       font.family: "Helvetica [Cronyx]"    
    }
}

In the previous code, we show a the text “text” centered vertically and horizontally in window. To default in QML the object are positioned in the left/top corner.

In SwiftUI we have:

import SwiftUI

struct ContentView: View {
    var body: some View {
           Text("Hello, World!")
           .fontWeight(.bold)
    }
}

In SwiftUI the widgets are showed already centered in the View, so we have not specify the alignment how in QML, but if we want the Text in the left/top corner we must specify:

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            HStack{
                Text("Hello, World!")
                .fontWeight(.bold)
                Spacer()
            }
            Spacer()
        }
    }
}

In the HStack (horizontal stack) we have the Text and the Spacer that fill the space not covered from the Text, so the Text is pushed on the left, in dual way for the Vertical Stack (VStack) the Spacer push on top the HStack.

The first visible difference between QML and SwiftUI is how the properties are set for the objects, in QML we have propertyName: value within the {} block of the element, instead in SwiftUI ther properties are set with .property after the {} block (when present).

Nutella & C.

In riferimento ai Biscotti Nutella, sarebbe interessante vedere anche l’incremento di vendita che stanno avendo i biscotti simili. Mi spiego, ogni volta che vado al supermercato osservo cosa le persone fanno, vanno allo scaffale dei biscotti, non trovano i Nutella e comprano quelli (che secondo loro) sono più simili. Questo dimostra che la sindrome del palio di Siena è dannosa e che invece il successo di un nostro competitor può portare vantaggi.

Maven and Keytool

Sometimes using Maven you can have this error:

> Unable to load Maven meta-data from https://example.com/maven-metadata.xml.

> Could not HEAD ‘https://example.com/maven-metadata.xml’.

> sun.security.validator.ValidatorException: PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target

I resolve in this way:

  1. Download the cert of the site https://example.com/ using the browser
  2. Reset my keytool password as reported here https://docs.oracle.com/cd/E19957-01/817-3331/6miuccqo3/index.html (note the changeit password)
  3. sudo keytool -import -alias YOURALIAS -keystore $JAVA_HOME/jre/lib/security/cacerts -file file.crt

Where file.crt is the file downloaded at point 1)

The occasion makes man distracted

Today I saw that one of my favorite tools, Trello, created the Desktop version; the slogan of this choice is “Eliminate Distractions”. In fact, web tools have increased the usability of the tools (just use a web browser) but if we are honest we must admit that the browser is a source of distractions; is it really so easy to check mail every time we open that “blessed” window? Is it easy to resist the temptation to read that news? By paraphrasing an old proverb: “The occasion makes the thief man” (and considering that wasting time is a theft to ourselves) we could say that “The occasion makes man distracted.” The return to desktop applications could help (even grandma’s methods are sometimes the most effective)

Not only robot

In this period the figure of Isaac Asimov is very present, for the laws of robotics. There is another book That I think is very timely: “The Nacked Sun”. In this book, in addition to being present robots with their problems, there is a world where humans communicate only look through a screen, trying to bother even to not stay in the same room with other people, because they do not want to breathe the same air. The same procreation is just artificial. Is it a science fiction book?

Are we all copies?

In these days i see a lot of peoples that want to think as Jobs or Gates or others, but these are originals because are themselves, no copy. I see a lot of books to think as Jobs or similar, with all the respect for Jobs, but i think that he is not the best mind of the world. Copernico, Galileo, Leonardo, Einstein, Turing, Tesla. Ritchie, were stupids? Don’t have they improved the world? Maybe we think what Genius does not require effort, but Edison told: “Genius is one percent inspiration, ninety-nine percent perspiration”, it is harder than reading a book.

Philosophy?

In these days we talk a lot of coding as the new critical thinking and as new literature. I want to go besides, perhaps with the coding you are back to the old science, That before the French Revolution (from That moment onwards Scientists have always Been More classified in sectoral almost confused with the “technical” disciplines). Prior to this  (the two World Conflicts completed this change) the Scientists were multidisciplinary, think of Galileo, Leonardo And Others; they were philosophers, inventors, hackers (curious) Today with the coding maybe we again individually purchasing this multidisciplinarity,  Returning to take care of the diversity of Humanity aspects (the software must Solve a Problem (reduced to mathematical formulas – pure coding) but must interface with Being Human (psychology visual, emotional, etc.), dropped in the context (sociology.) What the machines push us to rediscover humanity That we were losing?