DEV Community: Olanrewaju Olakunle

Building a Cross-Platform eBook App in SCADE

Olanrewaju Olakunle — Wed, 02 Aug 2023 15:18:49 +0000

This tutorial aims at introducing mobile developers to developing a cross-platform e-reader app solely using Swift and SCADE.

The user interface of the eBook is inviting, and accessing it is quite simple. On the home page, it shows you four categories of books to make a selection from. Its navigation bar at the bottom also allows for an easy transition from one page to another. Users can also search for books and check out their overviews offline before proceeding to read the books online within the app.

Most importantly, in this tutorial, we will detail the step-by-step method of building this eBook app with SCADE. This is an excellent attempt to start with if you're new to SCADE development.

Prerequisites

Download and install SCADE on your machine. You can find SCADE's latest version here
Learn how to create a SCADE project from scratch and give it any name of your choice.

In the event that you are absolutely uninitiated with the framework, click here to install SCADE on your computer using the official documentation, and click here to learn how to create your first project.

Getting Started

Place the images in this link into the Assets folder of your newly created project.

Additionally, create a folder named managers inside the project's root folder to hold all the necessary resources, including the classes (Book class, Genre class, and CategoryManager) and API callers that are required to complete the app's development.

Step One: Let´s build our manager folder

Now, create the following three files inside the managers folder:

Make sure to create the Genre class, Book class and TrendingBookResponse struct with each of them with their much-needed inheritance inside the Book.swift file.

Check this link in the project folder to see the full code of the code snippet given below:

The next thing is to connect our Book class model to the API callers in the ApiCaller.swift file to generate data for each of our four book categories (such as Adventurous Books, Fantasy Books, Horror Books, and Health Books) and searched books.

View the full code for the provided code snippet:

Create inside the CategoryManager.swift file a CatalogManager class to house the loadDataAsync and fetchGenre methods that we'll use in loading our books images and connect book categories data to our main view (main.page) respectively.

Check out the full code for the code snippet provided below.

Lastly, in this step, all the necessary methods we want for easy back-and-forth navigations of various pages of our app project are created inside the Navigation.swift file.

Check out the complete code of the Navigation.swift file's code sample supplied below:

Step Two: Design the Launch Screen

Create another folder named login inside the root folder of the project. The login folder is where we are going to be putting the newly created login page:

We'll configure the login page inside the start.swift file to be the first screen visible to the users when the application's launched.

We designed the login page to display a logo sitting centrally on an orange background, while some data for the next pages are being fetched:

Next is to write the logic that will make this page work. Inside the Login.page.swift file, we created the postDisplayActions() method to help users automatically navigate to the main page from the login page whenever the app is launched.

That's not all, to make postDisplayActions() method effective, we ensured that it's called inside the show() method and not inside the load()method:

Step Three: Build the Main Page

Let’s build our main page. The main page is divided into three rows. The first row is occupied by the heroImage and it works by randomly displaying the images of all books in each book category at a time.

This heroImage is given a 300 height. The ctrlListBookCatalog in the second row is a List-Control designed to accommodate all our four book categories. The toolBar, set to the far end of the page, is set to help users navigate to the Search page and More page:

Below you have the MainPageAdapter class that binds data from the model to the ctrlListBookCatalog and heroImage.

We also have to initialize the items property of the ctrlListBookCatalog with data from every book category method declared inside the MainPageAdapter class so that all the visual controls defined inside the ctrlListBookCatalog element, via the elementProvider object, can display data assigned to them in the way they are configured.

heroImage is defined inside the showRandomBook() method to depend on the random image data assigned to selectedBook variable from randomBooks array. Finally, we have to call the showRandomBook() method inside the onEnter() method so that heroImage can change to a different book image anytime a user enters the main page.

Check out the complete code for the code snippet provided below:

Step Four: Let's work on the Book's Pages

Once more, we'll create a new folder called book pages inside the project's root folder. This newly created folder will have a subset of folders that includes the bookDetail page, bookWebview page, and search page. Then, we'll create a page each into these subsets and call it BookDetail.page, bookWebview.page, and search.page respectively:

4a. Design and define the Logic for BookDetail.page

The BookDetail.page is designed into a navigationBar, listBookDetails, viewBookDescription:

the navigationBar contains a backButton and a detailsLabel
listBookDetails is set up to retain vital information about a book, including the book's cover image, title, author, page count, read-book button, etc.
viewBookDescription is intended to only hold each book's overview and description labels
Three toolBarItems created inside the toolBar allow users to go to the search page, the More page, or return to the main page.

We declared a book named variable of the type Book class inside the BookDetailPageAdapter class in the BookDetail.page.swift file. The show() method uses the book variable as a medium to pass data to all the needed properties on the BookDetail.page. However, if we don't downcast the data parameter of the show() method as an object of the Book model and also assign it to the data parameter of super.show(), these properties won't display their respective assigned values on the BookDetail.page.

View the full code for the provided code snippet:

4b. Set up the bookWebView.page and provide its logic

Only two rows make up the BookDetail.page, which contains the navigationBar and webView controls:

The navigationBar, which contains a doneButton, titleLabel and a reloadButton, occupies the first row
The doneButton is for returning to the books' detail page while the reloadButton is for reloading the webpage of a book
The webView control holds the second. We'll be using this webView to load our books webpages whenever a user clicks on the readBookButton on the BookDetail.page:

As we did for the BookDetail.page.swift file, we will also use the show() method inside the bookWebView.page.swift file. This simply means we'll need to connect the webView control to books' webpage data inside the show() method in order to successfully load the webpages of our books inside our app when a user clicks the readBookButton on the BookDetail.page:

4c. Establish the search.page's layout and logic.

The search.page is divided into four rows, with the horizontalTextboxView in the first row, the searchLabelTitle in the second, the ctrlListBooks in the third, and the toolBar in the fourth, respectively:

The horizontalTextboxView houses the textbox control that listens to text changes when typing text into the keyboard to search for a particular book.
The ctrlListBooks loads all books in every category before it then loads the results of the related searched book in the textbox
The toolBarItems generated inside the toolBar enable users to return to the main page as well as access the More page

We are going to use the elementProvider object to access and assign values to all the listed elements inside the ctrlListBooks. That's not all, there is also a need to initialize the items property of the ctrlListBooks with the results of all the books categories API data so that we can have a list of all our books categories on the ctrlListBooks of the search.page during launch time.

Secondly, we also need to call the onTextChanged() method on the textbox control on the search.page so as to listen and use its textbox.text to fetch searched book results from the getBook() method and add the results to the items property of the ctrlListBooks.

Check out the full code for the code snippet shown below:

Conclusion

Now you can run the app and enjoy the newly built eBook app using SCADE! This is just a little bit of what you can do with SCADE.

The full source code of this tutorial can be found here.

Authentication using FireBase in Cross-Platform Swift Apps

Olanrewaju Olakunle — Fri, 20 Jan 2023 17:10:37 +0000

An essential component of developing a new mobile app is creating the user onboarding flow, which includes the landing page, login and registration pages, etc. One of FireBase's major features, authentication, is very handy in navigating users through these opening screens of a mobile app.

Notably, Firebase handles everything you need to handle on the server side (user management, OAuth, security, password storage, etc.), so you won't need to worry about the underlying server codes. You may protect your app's data and restrict access to only its users with the help of FireBase Security Rules.

Firebase offers a variety of authentication options, including Email/Password, Google Sign-In, Facebook Sign-In, and Sign in with Apple, to name a few.

We will go through implementing Email/ Password Authentication with a SCADE app in this first FireBase SCADE tutorial.

Getting Started

To get started, click on this link to download our starter SCADE Project, build and run the app in any simulator of your choice.

You can also follow this link to download the SCADE IDE if you haven't already done so.

The following is the structure breakdown of our starter project:

Sources – this folder houses the login, main, and signUp Page Builders that hold the login, landing page, and signUp UI screens respectively, along with their corresponding page.swift and page.svg files.

Most importantly, the Sources folder also contains the start.swift file that represent the runtime entry point of any SCADE project. If you open this file, you would notice we set the root view controller of the current window to be the loginPage. In other words, this simply means the loginPage becomes the first screen we see anytime our app is run.

build.yaml - this file sets the path to both Android and iOS specific settings of our app project. It includes the bundle id that we will require later on in this tutorial for FireBase Integration.

Package.swift - This Package manifest file will house the FireBase dependencies we'll be needing later on for this tutorial.

Note: The navigation into each screen is done programmatically on each page's page.swift file. Also, these screens are more or less currently static as we are yet to add the FireBase support.

Diving to FireBase Integration

Go to Firebase Console using your Gmail address and create a new project (name it as you wish). Once you’ve created a new Firebase project, go to its Firebase Dashboard, by simply clicking on it in Firebase. You ought to arrive at this screen:
Click on the first button below the text "Get started by adding Firebase to your app" to add a new iOS app to your project. Next, go to the iOS section of your project's build.yaml file in SCADE and copy the bundle Id and paste it as the input value of the Apple bundle ID to register your app. If you’d prefer to use your own bundle ID, make sure you update the Bundle Identifier of your project in SCADE:
After clicking on the Register-app button, FireBase will generate a GoogleService-Info.plist file, which you need to download and add to the Sources folder of your project in SCADE:
The Google Firebase iOS SDKs are a collection of libraries that are primarily used to integrate FireBase into mobile app projects. These Swift SDKs serve as bridges between your SCADE apps and the FireBase backend, to put it simply.

To install FireBase using SPM, open your project's Package.swift file and add the FireBase package details under dependencies. Also, add Firebase Auth as the product target under the targets path:
Next, we import FireBase to our already established start.swift file and add an initializer in FirebaseApp.configure() to the onFinishLaunching method that would help in configuring FireBase for us:

FireBase Authentication

In the sidebar, from the Build section drop-down menu, click on Authentication and navigate to the Sign-In Method tab to select Email/Password as your provider. Next, toggle the option that says "Allow users to sign up using their email address and password..." on the next screen before finally clicking on the "Save" button to enable selection:

Registering a new User to FireBase Server

The next step is to connect our SignUp screen to FireBase as the starter project only has the UI part done.

For this project, the signUp screen handles the whole registration process. We have already created a signUpButtonTapped method inside the signUp.page.swift file to trigger the signUpButton when pressed by a user. But only the logic that binds its textboxes was created for the starter project.

The textboxes logic is checking that both the e-mail and password fields are not empty and that the password is at least 8 characters long. And if all the above is not met, a text indicating that all details must be entered correctly is shown below the password textbox.

We needed to import FirebaseAuth to have access to the Auth.auth().createUser method that helps in creating and securing authenticating users to FireBase and also error handling just to mention a few.

Below the textboxes logic, inside the signUpButtonTapped method, we added the Auth.auth().createUser method to collect both the email and password values needed for creating a new user account in FireBase. We used its completion handler to determine the status of the operation by retrieving the result if successful and printing the newly created user information to the console or by returning an error message depending on the type of auth error received to the console if it fails:

Going by the above method, you sure know that you have just created a new user on your FireBase project when an instance of the newly created user is printed on the console and the clicked button navigate you to the main.page screen:

To see the registration details of the new user that just got created, navigate to the Users tab of the Authentication section of your FireBase Console:

Logging in an existing User on FireBase

Now that the mechanism for creating new users is successfully accomplished, the next thing is to head to the login.page.swift file and add a Firebase Auth method inside the already created loginButtonTapped method that is responsible for allowing users to sign into the app with their credentials.

Similar to the signUpButtonTapped method, the loginButtonTapped method only currently contains the logic that controls its textboxes as at the time the starter project was created. The textboxes logic is the same as the one for the signUpButtonTapped method.

Again, we are leveraging Firebase Auth SDK to communicate with the Firebase instance and make a login request via the provided email and passowrd values by users.

The completion handler for the Auth.auth().signIn call returns an error that describes why the authentication fails which is depended on the type of auth error code received (e.g. AuthErrorCode.invalidEmail).

If there are no errors, a print statement indicating a successful sign-in of the user is sent to the terminal before finally navigating the signed-in user to the main.page screen.

Note that the login.page.swift file manages the login screen. Locate the loginButtonTapped method and add the following lines of code below the textboxes logic:

Signing Out a User on FireBase

The logOutButtonTapped method is created to clear the current user information and token locally while printing to the terminal a "Sign Out" statement and navigating the signed-out user back to the login page if successful. The method also throws an error if the sign-out process is not successful.

Note, it's of good practice to check and make the currentUser property nil to always have users signed out successfully before calling the FireBase sign-out method responsible for signing out authentication:

Conclusion

This FireBase tutorial shows a step-by-step way of integrating Firebase Auth into SCADE projects. We made use of some of the Firebase Auth methods to implement the sign-up, sign-in, and sign-out features for our app project for this tutorial.

The Firebase integration in this tutorial is basic, so it will need many more features to build a complete standard mobile app.

The complete source code for this tutorial is available on GitHub: Messenger.

How to Build and Run a Vapor Project on Native Open-Source MacOS Nimble Editor

Olanrewaju Olakunle — Mon, 05 Dec 2022 16:06:04 +0000

Vapor is an open-source Swift web framework built for developers interested in creating web apps and Restful APIs just to mention a few. Vapor's simplicity and flexibility make it simple to create a new project on the go thanks to its handy command line tool.

The first part of this tutorial will take you step by step through creating a new Vapor project, and building and running it through the Native Open-Source MacOS Nimble Editor.

Lastly, In the second part of this tutorial, we will also look at learning and creating our routes.

Requirements:

You'll need the following given below for this tutorial:

Nimble Code Editor - Download Here.
Swift 5.6 or later - Including command line. Vapor-4 requires this.
MacOS - We choose this operating system for this tutorial to create a Vapor project.
Homebrew - It's needed for installing the Vapor Toolbox. Run the installation command in this link if you are yet to install Homebrew.

Installation

After downloading and installing the Nimble editor from the aforementioned link, run the swift --version command on your computer to verify that you have the most recent swift version installed:

Let's install the Vapor Toolbox using Homebrew as previously indicated before we can create our first Vapor project.

The Vapor Toolbox is a special CLI tool that comprises handy utilities that we can use to create new Vapor projects. Though it's not required for using Vapor, it automatically helps to install all the dependencies that are required for vapor to run.

Run the following command in the terminal to install Vapor:

brew install vapor

After the complete installation of Vapor, enter the vapor --help command on the terminal to double-check that it's correctly installed on your machine.

And if it's correctly installed, the output of the vapor --help command would be as follows:

Create your first Vapor project

To create a new Vapor project from a template on your machine, enter into the terminal with the Vapor Toolbox's new project command:

vapor new [ProjectName]

Vapor will by default ask you if you want to use Fluent and/or Leaf. We recommend you enter an n for both questions. It would also ask and give you options on the type of database to work with:

Alternatively, run the command with the -n option to create a Vapor project:

vapor new [ProjectName] -n

This will create a new folder in the current directory containing the project. The -n flag added in the above method gives you a fundamental template to build on. It also saves you the stress of answering a no to the respective questions and does it automatically for you.

You should see the resemblance of the screenshot below in your terminal if your project was created successfully:

Open the created project with the Nimble Editor

Open your newly created project folder with Nimble and click the large rectangular "project launch selector button" (found to the right of the Play and Stop buttons at the upper left of the window). Check that Mac is chosen as the launch runtime. Press the play button to build and run your project:

Alternatively, you can also use the Command + R keyboard shortcut to run your project.

While your project is building, the required dependencies needed for the vapor project to successfully work are automatically downloaded and saved in the generated Package.resolved file:

Please note that it will take some time to fetch and resolve the dependencies the first time you run your project.

Visit localhost:8080/hello and http://127.0.0.1:8080 in any browser of your choice while your project is running to see the responses shown in the screenshots below:

You should also be able to see each request you make to the server in your console as your project is running:

Creating our own GET and Post Routes

Now that we have successfully created our first app, let's delete the contents in the routes.swift file of our project folder and add new routes with Vapor:

1. Creating our Get Route

Replace the content of the routes.swift file with the following code in the screenshot below:

Use the play button or the build and run commands to build and run the project again. You should see the response shown in the screenshot below when you visit http://localhost:8080/name in your preferred browser:

2. How to create a Route that takes a Parameter

When not required, it becomes redundant to always establish a new route for every response. We can use a new route as a parameter and process it to provide a response as required by the parameter. We must always include a parameter after a route in any request URL we are creating.

For instance, we use :name to create a dynamic parameter for our route. The idea here is to extract the user's name that is passed in the Request object else an error should be thrown if the name parameter can't be found. Finally, we return a string with a Hello greeting together with the extracted user's name as the main response:

Rebuild and run the Vapor project after the above is accomplished. Use John as the parameter value example in the request URL. You should see the response shown in the screenshot below when you visit http://localhost:8080/hello/John in your preferred browser:

3. Returning JSON

We can still check out a lot more aspects of Vapor outside just creating a route with or without a parameter. It's quite an easy task to use Vapor to return JSON objects in route handlers. Most importantly, Vapor uses the Content protocol to encode a response as a JSON object. The Content protocol is a wrapper around Codable.

If we need to return a JSON object as the response of a route, we may first need to create a struct that conforms to Content protocol.

For instance, we created both DataCollection and IndividualData objects to represent the JSON API response. Also, as previously mentioned, we ensured both objects conform to the Content protocol as this will come in handy when encoding the API response json to DataCollection object:

Next, We created a method that returns the DataCollection object. Finally, our "/json" endpoint now returns the data object which contains an array of different names with their respective ages:

Build and run the Vapor project once more. Visit http://localhost:8080/json in your preferred browser simultaneously, and you ought to see the response displayed in the screenshot below:

4. Handling POST request

A POST request has a body that accepts an object as input. In other words, a POST method does the work of creating an object and saving it in a server database. We are going to use Postman to pass some data via a POST request.

We are going to use a client like postman to pass the request object with the gender property in our created DataKind struct object:

When we send a post request using Postman, this request object will be received on our server. Check the screenshot below to see the added code we used in getting the incoming request. Its processing and how we returned the DataCollection object:

Next, build and run the Vapor project one more time, and simultaneously open Postman to set the request to be POST and the URL to http://localhost:8080/gender-group. That's not all, under the Body tab, select form-data as the type. Afterward, create a gender key and set its value to males.

You should be able to see the response in the POST's body request after pressing the Send button:

Conclusion

This tutorial gives a general overview of how to get started with Vapor and how to use the Nimble editor to create basic GET and POST routes.

The source code for this tutorial is available on GitHub: VaporDemo.

Textbox Control Guide on Native CrossPlatform Swift Mobile Apps

Olanrewaju Olakunle — Tue, 18 Oct 2022 14:35:49 +0000

The Textbox control's fundamental concept is to accept user input. By default, it writes on its textfield the word "Enter" and also takes a single line of text. However, you can make it accept multiple texts too.

A Textbox in SCADE collects inputs from the keyboard into an app. We can use Textbox Control in many mobile apps to build forms, send messages, create search experiences, and many more. Use it as an input element.

The Textbox control in SCADE has a lot of properties and a few methods that we can use to configure it to the taste of our mobile app project - we'll go over a number of them in this tutorial.

Some Key Textbox Control's Properties

Name: The name of a given Textbox control.
Text: a default text value shown by the textfield.
Placeholder: It's used for displaying the hint text inside the textfield.
Secure: makes use of iOS and Android masking characters to hide texts.
Accessability: accepts texts to help impaired.
Tab Index: order of the textfields.
Keyboard: It has two attributes (OnTop and Resize) that you can use to configure how the keyboard is displayed.
Keyboard type: it provides an option to have the keyboard set numerically or alphabetically. Note that you can only do this using the keyboardType property (the page builder currently has no support for this).

Some Key Textbox Control's Properties

onEditFinished: thanks to this method, you can capture when a user presses return or the tab key or leave the control to show that they are done editing a text.
onTextChanged: you can simply use this to listen to the changes made to the value of a textfield.
hideKeyboard: it simply does the work of hiding the keyboard for us via code.

Note: Both the onEditFinished and onTextChanged methods have two important properties known as newValue and oldValue for listening and capturing a textfield value.

Implementation

In this tutorial, we are going to learn how to use the textbox control by creating two textboxes that require users to enter their names and unique password.

Setting an Initial Text for the Textboxes

After adding textboxes to your page builder (via the Widget Palette), click on any of them to have access to the textbox control properties. The Text attribute, found at the top-right side of your page builder, is used to set a default value for textboxes. A textbox control displays these initial text values first whenever an app is launched.

See the screenshot below as a guide:

Also, depending on the layout container you decided to work with, you can use a layout container's properties to configure each of your textbox to the size and position you want them displayed on your mobile page.

For instance, we built this tutorial on an Autolayout container and use its constraints property to set the two textboxes (named nameTextbox and passwordTextbox) horizontally centered and give them the same height and width. It also allows us to set the top-constraint of the nameTextbox and that of the passwordTextbox to just 40-points and 30-points below the NavBar and nameTextbox respectively:

Output on iOS:

Output on Android:

Creating a Multiline Textbox

Textbox control has a multiline property that allows users to input text over multiple lines. You can easily activate this feature on the textbox(es) of your mobile app project by checking the Multiline attribute just underneath the Text property of the Textbox control you are working on in the page builder of your SCADE IDE:

Adding Placeholder on Textfield in SCADE

Placeholders are used to provide users with a notion of the input values that the textfield will take. In other words, the Placeholder property may offer a hint to users of the input that is expected of them in a Textbox control. The hint text disappears when users click inside the textbox and start inputting texts. The default color is grey, however, you may change it through the color element of the Text Property:

Output on iOS:

Output on Android:

How to retrieve the value of a TextField?

SCADE has two main methods you can use to retrieve users' text value:

onEditFinished method: The onEditFinished method is of type SCDWidgetsEditFinishEventHandler and it basically listens when a user clicks on the return key or tab key on the keyboard. Another way the onEditFinished method can be called in SCADE is when users leave a Textbox control completely after inputting or editing a text.

Below is the sample code:

For instance, in the screenshot below, the onEditFinshed method prints to the IDE terminal the textfield value of the nameTextbox each time either the return key or tab key is pressed:
onTextChanged method: This second method is of type SCDWidgetsTextChangeEventHandler and it works in a completely different way compared to the aforementioned. The onTextChanged method captures a changed textfield value when called upon.

Below is the sample code:

For example, as shown in the illustration below, the onTextChanged method prints to the IDE terminal each time the textfield value of the nameTextbox changes:

Changing from an Alphabetical to a Numeric Keyboard

SCADE Textbox control has a keyboardType property that you can use to change the default keyboard type of a textfield from alphabetical to numeric in your app project. For example, we switched the keyboard type of passwordTextbox in our project sample from accepting alphabetical input to numeric.

Below is the sample code:

Output on iOS:

Output on Android:

Masking Textfield Values inside a Textbox Control in SCADE

Another important SCADE Textbox control attribute is the Secure property. Its function is to obscure textfield values from being easily readable or understandable and it's commonly used on a textfield that contains a password.

We activated this feature on the passwordTextbox of our sample project by checking on the Secure box beneath the Placeholder property of the Textbox control in the page builder of SCADE IDE:

Output on iOS:

Output on Android:

Conclusion

This tutorial has taught us how to use a Textbox control in a Cross-Platform Swift mobile app that requires user input. Most importantly, we covered all the important properties and methods of SCADE Textbox control that can make the aforementioned possible.

The source code for this tutorial is available on GitHub: Textbox-Control.

Slider Feature on Native CrossPlatform Swift Mobile Apps

Olanrewaju Olakunle — Fri, 07 Oct 2022 15:16:31 +0000

Slider control, commonly known as Carousel Slider on iOS and Android, is one of the most often used image sliders in most mobile apps such as eCommerce apps, social media apps, etc. nowadays. Slider Control is used in these mobile apps mostly for showing products, images, advertisements, and other content.

Thanks to SCADE, mobile developers can now simply implement an image slider from scratch into their app projects with ease. This alone can help improve user experience as users can easily use this interesting feature to swipe left and right to see different items of their choice.

In this article, you will learn how to use the Page Editor to implement and customize the Slider Control feature for your SCADE project.

Slider Control's Properties:

Items: This property contains the data we want the slider to display. We use it to store the asset images for this project.
elementProvider: It is of type SCDWidgetsElementProvider responsible for mapping data to the slider's elements' visual controls.
elements: serve as a container for the slider's visual controls.
onSlide: It has an event handler that uses its to-and-from properties to detect slide events.
selected: used for sliding to a specific item.

Implementation

You must follow the steps below to implement this feature in your SCADE project:

Step1: Bind the slider's element to data from a defined Class

You can simply use a simpler data type or a class to describe the data container. Mind you, if you are going with the latter, you will need to make your newly created class a subclass of the EObject class.

The screenshot below shows how to achieve this with a named class called Pic created in the main.page.swift file of our project:

Step2: Design the Page Editor

Firstly, use the Show Widget Palette attribute of the SCADE-IDE to add (drag and drop) and center (if you want it centered on your app screen) the slider control widget to the main.page:

Step3: Define the logic for connecting data to Visual Controls

Next, use the slider's elementProvider property to define a provider object that is of type SCDWidgetsElementProvider. The defined provider object (of type SCDWidgetsElementProvider) is tasked with the duty of populating data to the slider's display element controls.

For instance, we use the provider object we created inside SCDWidgetsElementProvider to connect the image1 control that we added inside the slider control in the previous step to the data container:

Step4: Provide the Data Container with the image data

Ensure the Data Container we have created in the first step has valid access to the data we want the slider control to have an effect on.

As an illustration for this tutorial, we added the images we want the slider control to have an effect on to the Assets folder since that's what we initially provided in the Data Container to house the images to be displayed:

That’s not all, the slider's items property also needs to store the list of images (i.e. data) before the slider can get to display them.

For this tutorial, we simply used the created filename parameter (of type String) of the Pic class to collect the correct names of each image and store them as a list to the slider's items property:

Output on iOS:

Output on Android:

Additional Features

Enable Slide Event

You can simply use the slider's onSlide property to listen to sliding events via the to and from attributes of the SCDWidgetsSlideEventHandler:

In other words, this feature enables you to determine the precise position of an item and perhaps use the information to improve your app project.
How to Slide to a Specific Item

Aside from achieving the above output, you can also use another slider property called selected to start the slide from a particular item.

How do you achieve this? It’s simple, initialize the selected property to the index of the item (image) of your choice. For example, you can set selected = 1 so that the slider control can go to the 2nd item since the item count begins at 0:

Note: this can only be achieved in the show method (and not in the load method).
Having access to a more generic elementProvider

We have used the simpler approach of the elementProvider in the earlier part of this tutorial to connect data to the visual control inside the slider control of our project. However, a generic elementProvider can also accomplish the same thing and even give you access to more technical attributes that you can use to configure your slider.

For example, we use the position property of this elementProvider to connect data from the
items property of the slider to the visual control:

Conclusion

I covered how to create and use a slider control in Cross Platform Swift mobile apps in this article. We also learned how to add some new features and adjust the slider control to our liking.

The source code for this tutorial is available on GitHub: Slider Control.

AutoCompletion in Native Open-Source MacOS Nimble Editor

Olanrewaju Olakunle — Tue, 27 Sep 2022 11:56:52 +0000

Autocomplete is a workspace feature normally used to suggest code snippets as developers type in their IDEs and Code Editors. Software developers no longer have to keep track of programming syntax, API method names and details, and other essential information because of this fantastic code editing feature.

This article aims to provide a better understanding of how the Nimble editor autocompletes codes by displaying a completion pop-up as you type to reduce the amount of time you spend typing and allowing you to view and insert potential completions from a list of suggestions to the statement that is currently under your cursor in the code editor.

Understanding the Concept of AutoCompletion

Nimble's AutoCompletion feature is tasked with the responsibility of assisting you finish off the names of classes, methods, fields, and keywords within the visibility scope. Nimble analyses the context in question when invoking Autocompletion and make suggestions that are reachable from the current cursor position (suggestions also include Live templates).

For instance, If AutoCompletion is applied to a part of a named method in a given class, Nimble help display a list of possible results based on the item type:

The Two Methods for Maximizing Nimble's AutoCompletion Feature

This is the default way in which the AutoCompletion system is invoked in the Nimble editor. As you type, Nimble automatically shows suggestions if a language service is aware of possible code completions.

And if you continue typing characters, the list of members (such as variables, classes, constants, methods, and so forth) that is displayed is filtered to only include members containing your typed characters. The selected member will be inserted where your cursor is by pressing the Enter key on your keyboard:

Note: The suggestions widget shown in the editor has support for CamelCase filtering. In other words, you can type the uppercase letters in a constant or method name to limit the suggestions. For example, "myp" will quickly bring up "myPost" as shown in the illustration above.
You can manually trigger the AutoCompletion feature in the Nimble editor by clicking together the Control key and SpaceBar (⌃Space) on your keyboard.

Alternatively, you can choose the "Show Completion" option from the Editor drop-down menu on the Nimble menubar in the top-left corner of the screen:

A crucial benefit of this method is that it helps in displaying inaccessible static fields, keywords, methods, classes, and members.

AutoCompleting Type Names

Possible type names (and classes) are listed in the completion list as user types after placing a full colon in front of a declared variable name, parameters in parenthesises, etc... Importantly, only useful types are suggested, and the names listed are filtered according to the current namespace context:

AutoCompleting Variable Names

Since Swift has a variable declaration statement, the Nimble editor completes variables automatically as the user types. For instance, If a user inputs a word that matches a variable name, the completion list pre-selects the variable:

AutoCompleting Object Members

The Autocompletion feature automatically suggests available object members as soon as a user types ->:

Conclusion

Nimble has many strong features, including AutoCompletion. For more information about the Nimble code editor, continue reading.

How to Copy and Paste Figma Design to Build Cross-Platform Mobile Apps on SCADE

Olanrewaju Olakunle — Wed, 31 Aug 2022 18:24:05 +0000

Developing a successful mobile application is not simple; there are many factors to take into account, including planning, designing, coding, testing, and maintenance.

In this tutorial, we are going to look at one page of an existing app project on Figma and learn how to copy and paste the design into a project on SCADE. Figma is a well-known web-based vector graphics editor and prototyping tool that lets designers and software developers construct the user interface and wireframes for websites and mobile applications.

It's not always advisable to launch SCADE right away while developing an app. You’ll want to work on the app’s look and feel before doing any code. One of the reasons is that design plays a crucial role to get a user-friendly application. It is what makes using the app a seamless experience for the users.
Additionally, by doing this before you start coding, it will enable you to figure out exactly what your app will perform. Once you are done with the design, you can then match the designs on SCADE.

By the end of this tutorial, you should have solid knowledge to do the following:

Work with Figma designs on SCADE.
Use the GridLayout to build a Responsive Mobile UI.
Be able to Create Mobile Apps by Copying and Pasting SVG Contents from Figma into the Button Widget, and that the SVG Designs preserve their Original Size when doing so.

Getting Started

For the Profile & Settings page in this tutorial, we will use the GridLayout, which gives us the flexibility to have complex layouts that are highly responsive without having to worry about working with constraints:

The Profile & Settings page below is the Figma design we'll be replicating on SCADE in this tutorial:

SETTING UP THE BASIC STRUCTURE

Open your project and click on the main.page file to set up the bare bones of our basic structure before we enter the details of our page.

Next, change the Row value of your Grid to 4 under LAYOUT on the right side of your main page. Additionally, paste the Profile & Settings page's background color's hex code copied from the Figma design into the main page background's Fills Hex field:

1. CREATING A CUSTOM NAVIGATION BAR

Looking at our Profile & Settings design, we need to create our custom navigation bar at the top. This is made feasible by adding a horizontal container in the first row of the divided main Grid and having its name updated to NavBar. That's not all, we also need to divide the NavBar into 2 columns, and use its Alignment and Fill properties to ensure that it only occupies a limited amount of space at the top of the screen:

Next, let's add a label with the name profileLabel to the first column of the NavBar. we also need to give it a label text called "Profile". Also, the Alignment and Fill properties are needed here to configure the profileLabel to the top-left side of the screen with 20-padding ensured at the top and left side of it:

In the second column of the NavBar, we add a button widget beside the profileLabel and name it "settingsIcon". Just like the profileLabel, we need the Alignment and Fill properties to set the settingsIcon to the top right corner of the screen. The settingsIcon, however, doesn't require a text title, background image, or fill color. What is needed on the button widget here is to select and right-click on the settingsIcon on the Profile & Settings page of our Figma design, then go to Copy as - Copy as SVG. Once that’s done, you can paste the SVG icon on our settingsIcon button of our project on SCADE by using the keyboard shortcut command + V or the "Paste" option from the Edit dropdown menu on the SCADE menubar placed in the top-left corner of the screen:

2. ADDING AN UPPERSECTION

After finishing the navigation bar, let's add a vertical container and give it the name "UpperSection" to the second row of the divided main Grid. Notably, we are also creating three rows in the Uppersection to accommodate three items: a second SVG icon and two labels. We are using the UpperSection Fill property to configure it to occupy as much space as it can take. Not only that, but we also set its Vertical Indent property to a negative value so it can stack over the space of the preceding navigation bar:

We return to our Profile & Settings page design to select and right-click on the circle star icon, then go to Copy as - Copy as SVG. Once that’s done, we add a button widget, name it "starIcon", in the first row of the UpperSection without a text title, background image or fill color and paste the SVG icon inside it by pressing the shortcut command + V or selecting "Paste" from the Edit dropdown menu on the SCADE menubar in the top-left corner of the screen. Additionally, we use its Fill parameter to make sure it occupies all available space:

We add a label in the second row of the UpperSection named "reviewsAndRatingLabel" that outputs a text about having access to Reviews and Rating. we give it a fontsize, font-type and also use its Text Alignment property to make it centred. Thanks to its Fill property, we ensure the reviewAndRatingLabel occupies all the available space within its control:

The last row of the UpperSection takes another label named "keeptrackLabel" that returns a text emphasizing keeping track of shows and movies to watch. We give it the same treatment as the reviewsAndRatingLabel above except that we make its texts multi-line and reduce its fontsize to 14:

3. ADDING A SIGN-IN BUTTON

We add a Vertical container with the name "SigninActionView" and top padding of 60 in the third row of the divided main Grid to accommodate another button widget. It's important to note that the SigninActionView is also set up to take up the most amount of space possible:

Inside the SigninActionView, we add a button widget and name it "signinButton". We need the signinButton's Alignment and Fill properties to set it to the top center area of the SigninActionView. As usual, like other button widgets used in this tutorial, the signinButton, however, doesn't require a text title, background image, or fill color. All we need do is to select and right-click on the signinButton on the Profile & Settings page of our Figma design, then go to Copy as - Copy as SVG. Once that’s done, we then paste the SVG icon on our project signinButton on SCADE by using the keyboard shortcut command + V or the "Paste" option from the Edit dropdown menu on the SCADE menubar in the top-left corner of the screen:

4. WORKING WITH A TABBAR

We divide a ToolBar named the TabBar into 4 columns to accommodate the home, search, favorite, and profile icons. The TabBar's Fill property is used to configure it to sit at the bottom of the last row of the divided main Grid. How are TabBar's four items added? Just like we have done for all the icons we have used so far, we add a button widget into each of the tabBarItem and simply select the four Icons from the tabbar on our Profile & Settings design page and right-click on them, then go to Copy as - Copy as SVG. Once that’s done, we then paste the copied SVG icons into their respective button widget by using the shortcut command + V or clicking on "Paste" from the Edit drop-down menu on SCADE menubar at the top-left corner of the screen:

Output on iOS:

Output on Android:

Conclusion

This tutorial taught us how to bring a Figma design into SCADE. We’ve also learnt how to look at a design and figure out what components it has. Then, we added all the components of the design into pages (such as main.page as an example) and updated them to match the Figma design. We've also learnt how to use the GridLayout so that the design looks good on any device. Lastly, we also learnt how to copy/paste designs from Figma into the button widget and observe these SVG designs maintain the same size as those on Figma. The source code for this tutorial is available on GitHub.

Please note that this tutorial is based on SCADE 2.0.54, which only supports copyng and pasting designs and icons into the button widget; future releases of SCADE will have support for all widgets.

Create and Link Swift Packages from Nimble to Cross-Platform Native App Projects

Olanrewaju Olakunle — Mon, 25 Jul 2022 11:48:11 +0000

Swift packages are bundles of source files, binaries, and resources that you can reuse in your projects. They can also be seen as a tool, similar to CocoaPods and Carthage, for controlling the distribution of Swift code. It is integrated with Swift's build system to automatically download, compile, and link dependencies.

In this tutorial, we are going to learn:

how we can use the Nimble Code Editor to create swift packages
manage projects and dependencies
how to read and change the Package.swift files.
how can we link the created SPM to an existing SCADE project.

Definition of some Key Terminologies Used

Packages: Packages are basically repositories that house several executables and libraries. A package essentially includes source files and a manifest file.
Manifest File: The manifest file, also known as the Package.swift file, defines the package name and its contents using the PackageDescription module. It is also concerned with managing dependencies, and every package has its Package.swift manifest to handle any dependencies that it may have.
Targets: A package may have one or many targets. Each target identifies a product and has the option to declare one or more dependencies.
README: This file enables you to describe how other developers can use your library.
Source Folder: Location of our swift development files
Tests Folder: Unit tests directory.

Getting Started

This first section of this tutorial explains how to use the Nimble Code Editor to create a swift package that alphabetically returns all the European nations together with their respective capitals. The tutorial's second part focuses on discovering how to link the Swift package we built with our ListControl project:

Section 1 - Using Nimble to Create a New Swift Package

Step One: Create a new Swift Package with Nimble

To begin, launch the Nimble app and click File > New > New Project... from the top-left menu bar. On the following pop-up screen, select the Swift Package template.

As an alternative, you can accomplish the aforementioned using the keyboard shortcut Shift + Command + N.

Type your package name, select your project folder location, then press the Create button to create the swift package folder - you are expected to do all of this after selecting the Next button of the Swift Package template screen.

Step Two: Writing Source Code in the Package

Next is to write/add the source code in our Swift package. Copy all the source files into the Sources\EuropeanCountries folder. If you'd like, you may delete the default Sources/EuropeanCountries.swift template file and replace it with our Country.swift file:

Copy all of your unit test files into the TestsEuropeanCountriesTests folder if you have any.

We completely deleted the Tests folder because we won't need unit tests for this tutorial. Recall that you must remove the .testTarget syntax from your package targets if you wish to delete your swift package Tests folder along with us.

It's also advised that you keep your README.md file meaningfully updated. This makes it easier for other developers to use your Swift package:

Step Three: Edit the Default Manifest (Package.swift) File

You’ll find an array of dependencies in your swift package’s manifest file. There is one example dependency there, but it is commented out because it is solely for reference. If you have dependencies for your Swift package, you can define them under the dependencies tag. Add all the dependencies in your target too.
Most importantly, you need at least the URL info and the name of a library to add it as a dependency in your manifest file.

We implemented inheritance from EObject in this tutorial so that the Country class could be used as a binding in the ScadeKit widget. We also needed the ScadeExtensions library as a dependency using ScadeKit.

Note: If you also require the ScadeExtensions library as a dependency, you must add the ScadeKit information provided below to your SPM package manifest file.

Add header:

And also add this for target:

This tutorial Manifest file together with its minimum iOS Version and Dependency looks like this:

Step Four: Publishing Your Swift Package

There is now just a step left before we can distribute our swift library. Just use the Terminal application to upload your SPM code to your GitHub repository. Developers will be able to access your library when they enter your SPM link.

Section 2 - Using a Package in a SCADE Project

Swift packages can be used in SCADE in two different ways. The SPM package we just created can be used locally in a project or uploaded to a personal Git repository. Both methods will be demonstrated for you in this tutorial section:

1. How to use Swift Package Locally

Open the Package.swift file of your SCADE project, under dependencies, add the path to where your SPM package is located locally in your machine via the .package(path: “/path/to/package”) syntax. Not only that, but you also need to list the name of your package among the targets. Once all of these are done, you have successfully added your package to your project, and can be imported and used!

See an example below:

2. How to add Swift Package to your SCADE Project via Git Repository URL

Similar to the manual way described above, open the manifest file of your SCADE project and paste the GitHub repository URL for your SPM package under dependencies along with the package and branch name using the appropriate syntax. You must also put your package name as a reference under the target panel.

See an example below:

This goes for both methods explained above - import your package's product as a Swift module to utilize its functionality in your SCADE project.

Both classes (Country and Countries) in the following code snippet import the EuropeanCountries module of our Swift package and make use of its features:

SCADE generates the Package.resolved file whenever you include a package dependency in your project. The checksum of each binary dependency is listed along with the exact Git commits that each package dependency corresponds to.

The Package.resolved file is located in your project directory as a standalone file.

See an example below:

Conclusion

This tutorial has taught us how to create SPM packages using the Nimble Code Editor and how to use such packages for cross-platform native app projects. If you have any questions, kindly remark below. Thanks for reading!

How to Display Images in Swift Cross-Platform Native Apps in SCADE

Olanrewaju Olakunle — Fri, 15 Jul 2022 08:00:00 +0000

The image control, just like every other control in SCADE acts as a wrapper around native controls, exposing a fraction of its functionality to users. We'll learn how to display images from within the app or dynamically downloaded from the internet in this tutorial. We can't envision an app these days without images. Although the images are stored in the assets folder, they are loaded during runtime. SCADE currently only supports great image formats like PNG, SVG, and JPG.

Key Properties Needed for Implementation:

content: it stores the images that you would like to display. Not to forget, it has a Data type.
URL: relative path to the image's source. When initializing this attribute, ensure you have its path accurately sorted out. That’s, the image name comes last after you might have spelled out the folder you have the images stored in. See example: Assets/shoe1.png.
isContentPriority: this type-Bool property specifies which incoming source we use in rendering the image. It’s set to false if the URL field is used in getting information to display the image and set to true if the content field is used instead.

There are three (3) possible ways you can use to add an image(s) to your Android and iOS apps in SCADE:

Method One: Static Image Referencing

You can simply achieve this by using the Widget Palette to drag and drop the image control to any .page file of choice (for example main.page). Once this is done, make use of the Path feature, under the Image attribute, found on the right side of your page to find and select the image you want to display in your app from the folder that contains it. Interestingly, using this method, your images get stored automatically in your Assets folder.

See the result below:

Method Two: Adding Images Using Code

Two things you must never forget to do if you want to go with this approach:

Ensure that the path in the URL field is valid.
Initialize the contentPriority attribute value of your images to be false.

Remember, unlike in the above method, you will need to add your images manually to the Assets folder here to complete the phase of displaying your images in your desired area. Additionally, you may also use the Scale Mode built within the Image Control to make adjustments and ensure that your images are properly sized for your app.

See an example below:

See code snippet below:

Output on iOS:

Output on Android:

Method Three: Using raw data from the Internet to display images

Most apps require data to be fetched from a remote server, and downloading images is a frequent activity. This approach makes things convenient for you in the sense that you don’t need to initially store your images on your app before you can render them - all you need to do is to get the image addresses of the images of your choice from the internet or any other source.

The main goal of this method is to teach you how to download images using swift. First, add a third image control with the name image3 underneath image2 on the main page. Make use of the Constraints property to control its size and position just like you have done in the other two methods above.

See an example below:

This method is primarily focused on updating the Image Control on the main thread using Grand Central Dispatch. Creating a URL object that points to the remote image is the first thing we do. The next step is to invoke the init(contentsOf:) initializer on the Data object. We utilize the try? keyword and optional binding to safely access the initialization's result because the initializer is throwing. Lastly, in the body of the if statement, we put the raw image data received from the network call in the content field and also set the value of the contentPriority property to be true.

See code snippet below:

Output on iOS:

Output on Android:

Conclusion

This concludes the tutorial on how to display images in SCADE using Swift for Android and iOS, including all steps and examples. Feel free to use any of the above methods individually or collectively in your next SCADE project - everything depends on how you want your app structuring to be. The source code for this tutorial is available on GitHub.

Nimble - native, open-source, extendable MacOS Code Editor

Olanrewaju Olakunle — Wed, 15 Jun 2022 14:58:38 +0000

Developers use code editors to write code. Code editors format and highlight your code to make it easier to read and understand.

These programming tools are equipped with interesting features such as Language-specific syntax highlighting, automatic code indentation, color schemes to suit your preferences and improve code readability, Plugins for initiating a variety of activities and default packages during the development process, a tree view of your project's folders and files for ease of navigating and many more.

We'll walk you through the steps to install Nimble, one of the best MacOS code editors. By the end of this article, you'll be able to create and edit code written in different languages using Nimble. Not only that, but you'll also learn about some of its unique plugins, which make it extensible, as well as its theming settings, which help you make your code more beautiful.

Understanding the Concept of Nimble

Nimble is a lightweight open-source, extendable Code Editor and IDE exclusively written for MAC. It is a document-based Cocoa application written in the Swift language. Nimble is popularly known for its high performance and easy extensibility. Not only these, but it's also popular for its support of many programming languages.

Thanks to LSP (Language Server Protocol), Nimble also provides programming language-specific features such as auto(completion) and diagnostics for its users. Finally, and most crucially, Nimble makes it simple to maintain, add, and build dependencies/frameworks when working on SPM projects.

Installation

You must have installed macOS 10.15 Catalina or higher, Xcode 12.4 or higher, and Swift 5.3.2 or higher before running the Nimble app because this is the only development environment it supports.

You can download the latest version of Nimble from this GitHub Repo.

Once you have successfully downloaded the .dmg file of Nimble, open it and drag-and-drop in the Applications folder. Afterward, launch the application, and your editor will appear as shown below:

Creating Your First Project on Nimble

Select "New" from the File menu on Nimble menubar to create a new file or project. Alternatively, you can also use command + N and shift + command + N to create a new file and project, respectively.

Note: When you create a new project on Nimble, you can choose from a variety of project types. We will use Type Executable for this tutorial.

Once the new project is created, you can insert your code in the built-in main.swift file, similar to any other code editor, and save the project in your working repository.

The Nimble Code editor also offers a number of options depending on the file format. Aside from creating and running Swift files, the Nimble Code editor also lets you manage files in other languages. For instance, in the project folder created above, create a java file and save it with the .java file extension.


Default Light Theme

Theming

Themes help Code editors seem better by adding colors and beautiful backgrounds. They influence the appearance of the editor's user interface by changing the colors of elements of the editors/IDE.

The Nimble Code editor comes with two default themes - the default light and dark themes. You can simply customize the appearance of your editor by switching between the two inbuilt themes.


Default Dark Theme

However, Nimble's appearance is not limited to just these two themes; you can also add compatible custom themes (.yml files) to your list of options. How do you achieve this? Goto ~/Library/Application Support/Nimble and create a folder called Themes in it. Next, copy and paste your created custom themes files inside this folder - that's all.

Alternatively, you may add a custom theme to your Code editor by right-clicking on it to show its contents before navigating to CodeEditor.plugin->Contents->Resources->Themes folder to add a new theme to the two default themes already in the folder.


Dracula Theme

Great Plugin Systems

Every editor has development plugins that initiate a series of operations and preset packages. The Nimble Code editor is integrated with a handful of plugins that improve the user experience and assist users to increase productivity. This chapter examines each of these built-in plugins and their functions:

Project Navigator

The project navigator plugin divides your project into two sections, labeled "Open Files" and "Folders" respectively. The "Open Files" section contains the files you just navigated to in your Code editor, while the "Folders" section has every file and sub-folder in your project folder. You can't navigate between files and directories on Nimble without this plugin.
BuildSystem

The Nimble-integrated BuildSystem plugin is to compile, build, and run swift codes and packages to the terminal. Not only that, but this plugin also allows you to clean up your code for better performance optimization. Finally, owing to the BuildSytem plugin's minification capability, you may include as many comments and white space as you like to your source code and split it into as many files as you need without worrying about app performance or load times.

The BuildSystem plugin can be located in the top-left corner of your Code editor's Tools menu bar.

The BuildSytem Items Shortcut
- Run - Command + R
- Build - Command + B
- Clean - Command + K
LSPClient

The BuildSystem plugin can be located in the top-left corner of your Code editor's Tools menu bar. The LSP Client plugin uses the Language Server Protocol to provide many language features, such as Auto-Completion, Format-Document, Show-Completion, Diagnostics, Code-Navigation, and finding references.

Some common LSPClient features that support Nimble include:

1. Format-Document: Format the current document or current selection. It may be applied manually by clicking on Format-Document under the Editor menu bar at the top-left corner of the Code editor or through a command invocation (Control + Command + I).

2. Diagnostics: It does the work of showing diagnostics highlights. Diagnostics is a general term for "things that are of interest in the file". It may be syntax errors, warnings from your compiler, or hints about unused variables in a function.

For instance, a comma (,) is purposely placed after the parenthesis on the last line of code in the main.swift file, as shown in the screenshot below, to test Nimble's diagnostic feature.

3. Show-Completion: Displays documentation for a selected completion item in the list. You can also manually trigger Nimble's Show-Completion feature anywhere in your code by pressing the Control + Space command.

4. Auto-Completion: It gives you word completions based on the current buffer. It shows the autocomplete widget synchronously. The LSP package enriches the auto-complete list with language server results.
Language Extensions

Language Extensions in Nimble give clever editing features for a variety of programming languages. Nimble doesn't come with built-in language support, but it gives a set of APIs that enable sophisticated language features. For instance, it comes with a Python extension that allows Nimble to highlight syntax in Python files. Similarly, when you type System. and out shows up in Intellisense, it is the Java Programming Language Features extension at work.

Without the Language Extensions, the code in the Nimble Code editor looks like this:
File-Icons

The file-icons plugin provides missing icons for commonly used file formats. It allocates file extension icons and colors for easier visual grepping. In other words, this plugin is tasked with the responsibility of showing file icons based on file extension.
ImageViewer

The ImageViewer plugin is used for displaying image files on Nimble. To put it another way, without this plugin, you won't be able to view images on Nimble. It supports images with formats such as jpeg, png, and SVG.

Conclusion

This lesson provides you with a thorough understanding of Nimble's fundamentals and prepares you to use it in your software development projects.

Learn how to manage webpages in your Swift Cross-Platform Native Apps with the WebView Control

Olanrewaju Olakunle — Tue, 07 Jun 2022 15:40:21 +0000

The WebView Control is an amazing tool you can use to load interactive web content in your SCADE apps. it's a handy object you can always rely on when trying to view webpages in your mobile apps without having to open a browser. Interestingly, with the WebView control feature integrated into SCADE (www.scade.io), you are also saved from the stress of having to implement again (in your mobile apps) a feature you already have on your website.

WebView Control's Properties

SCDWidgetsLoadEvent: indicates that the page we're trying to load has loaded successfully.
SCDWidgetsLoadFailedEvent: when a failure occurs, this event is triggered.
SCDWidgetsShouldLoadEventHandler: used to block specific pages from loading based on their URL.

In this tutorial, we'll play with the WebView control while creating a basic app that shows webpages and allows us to explore them.

By the end of this tutorial, you'll be able to:

position a WebView control anywhere within the app page
load a webpage
receive events when the page was loaded
prevent pages from loading

Getting Started

To work with the WebView control, create a new project on your SCADE IDE (if you don't already have an existing one) and follow the given steps below:

Step One: Drag and drop the WebView to the desired position on the page

Use the Widget Palette to drag and drop the WebView control to any position on your preferred page. Notably, SCADE allows you to add as many WebView widgets as you like to your page; in our simple app example, we used three WebView widgets on our main.page. You can also take advantage of the LAYOUT attribute that you can find on the page to adjust the height and width of the WebView widget to suit your taste.

Additionally, you can also add constraints to your WebView control to better the look and feel of your webpages when they are displayed on your app.

Step Two: Add logic to reference the WebView control

Open your project main.page.swift file and add the necessary logic when referencing the WebView widgets before loading the UIKit page.

See an example below:

Output: the three URLs in the above code are displayed on top of each other as seen in the result below:

iOS:

Android:

Additional Features

Using events to determine if a webpage is successfully loaded or failed

The SCDWidgetsLoadEvent and SCDWidgetsLoadFailedEvent attributes are more or less the opposite of each other. The SCDWidgetsLoadEvent can be used to indicate whether a page has loaded successfully, but the SCDWidgetsLoadFailedEvent is only triggered when a page has failed to load.

See an example below:

The preceding code snippet will print -OnLoaded: Optional("https://m.youtube.com/")- to the terminal if the page loads successfully, but -NonLoaded: Optional("https://m.youtube.com/")- to the terminal if the page fails to load.
Determining whether or not a page should be loaded

We may wish to prevent some pages from loading based on the URL in some circumstances. This may be done using the SCDWidgetsShouldLoadEventHandler.

See an example below:

The URL in the above code snippet will load when the app is run since it meets the condition of containing "bensound".

Conclusion

You now know more about WebView and, more importantly, when and how to utilize it in your SCADE project. You can now comfortably manage the WebView or specify the URL that should be loaded or stopped from loading in your app when the requirement arises.

Here is the Github link for reference: https://github.com/Cdf-creator/WebView.

How to use SCADE's List Control to build Native Cross-platform Swift Apps

Olanrewaju Olakunle — Fri, 27 May 2022 09:44:03 +0000

You can simply use the List control to display a list of scrollable items in your SCADE project. It allows you to display data in a scrollable list format. Users can then click on any list item to select it. We don't need to utilize scroll view or anything else with the List widget in the Swift cross-platform native development platform like SCADE (www.scade.io) because it is scrollable by default.

The List control is unique and will come in handy when creating cross-platform applications. We'll be using the List control in this tutorial to demonstrate how to use it in a fairly frequent scenario.

List Control's Properties

List Element
List Element's Background: used for controlling visual component.
Clicked Animation Effect: very useful when changing the background when a row has been clicked.

Here, we want to alphabetically display all the European countries and their respective capitals alongside them in our basic SCADE app.

You'll be able to do the following by the conclusion of this tutorial:

correctly list data in a list control
process row click with an event handler
create a list element with a clicked animation effect

Getting Started

Create a new project in your SCADE IDE to work with the List control (if you don't already have one) and follow the steps below:

Step One: Add List Control to the desired position on Page

Once you've successfully dragged and dropped the List control to your preferred page of choice, use the constraints box to ensure that the List widget takes up all the available space.

See the Screenshot below as a Guide:

How you customize the List control's list element determines how your data is displayed. We put a Grid control within the list element in the basic SCADE app we're building in this tutorial, and we configured it to have two rows and a column to accommodate the countryName and countryCapital text labels.

See the Screenshot below as a Guide:

Step Two: Create a Data Model

Create a new class in a new swift file in your SCADE project and define the type of data you want to bind to the List control and its properties, just as the Country class in the Country.swift file we created in this tutorial for displaying European countries and their capitals. Above all, don't forget to inherit the EObject class alongside your new class as well.

See examples below:

Step Three: Define and Bind the Data Source to Controls

The next task is to link the view to the model using the SCDWidgetsElementProvider class. How will this be achieved? Set an instance of SCDWidgetsElementProvider with .elementProvider and add the logic that links the data to the List element's visual controls. After that, set the Items property to define the data source.

See an example below:

Output on iOS:

Output on Android:

Additional Features

Using event handler to activate row click

You may use SCDWidgetsItemSelectedEventHandler to make an item clickable where it's needed in your SCADE app. This event handler is added to the .onItemSelected handler.

See an example below:

The preceding code snippet will print to the terminal -Hello and the name of the country- that has its row clicked by the user.
Adding clicked animation effect on List element

One of the most important things to do before using this awesome feature is to import ScadeUI and ScadeGraphics in addition to ScadeKit, which you initially already have imported into your project.

See an example below:

After that, you'll need to open the Package.swift file, under dependencies, add the ScadeExtensions repo dependency to your project. This is required to use ScadeUI and ScadeGraphics effectively.

Check the code snippets below to see how to add the dependency:

Having correctly followed the above instructions, the next step is to make sure your app's List element's background is set to Fill color. You can't leave or set the background to "None" since there would be no visual component to set the background to.

See an example below:

Finally, as we have done in this tutorial, you may choose to add another onItemSelected handler or go with just one item selected handler to access the List's List element SCDWidgetsListElement and set the animation effect using the event's element attribute.

See an example below:

We were able to apply the animation effect to the background of the List element of our SCADE tutorial project using the aforementioned code snippet. To animate the fill property, we chose gold as the initial color and the original color as the finish color, as you can see in the output below (to fill the background).

Output on iOS:

Output on Android:

Conclusion

In this SCADE Tutorial, we learned how to create and use a List Control in the SCADE Application. The source code for this tutorial is available on GitHub.

DEV Community: Olanrewaju Olakunle

Building a Cross-Platform eBook App in SCADE

Prerequisites

Getting Started

Step One: Let´s build our manager folder

Step Two: Design the Launch Screen

Step Three: Build the Main Page

Step Four: Let's work on the Book's Pages

4a. Design and define the Logic for BookDetail.page

4b. Set up the bookWebView.page and provide its logic

4c. Establish the search.page's layout and logic.

Conclusion

Authentication using FireBase in Cross-Platform Swift Apps

Getting Started

The following is the structure breakdown of our starter project:

Diving to FireBase Integration

FireBase Authentication

Registering a new User to FireBase Server

Logging in an existing User on FireBase

Signing Out a User on FireBase

Conclusion

How to Build and Run a Vapor Project on Native Open-Source MacOS Nimble Editor

Requirements:

Installation

Create your first Vapor project

Open the created project with the Nimble Editor

Creating our own GET and Post Routes

1. Creating our Get Route

2. How to create a Route that takes a Parameter

3. Returning JSON

4. Handling POST request

Conclusion

Textbox Control Guide on Native CrossPlatform Swift Mobile Apps

Some Key Textbox Control's Properties

Some Key Textbox Control's Properties

Implementation

Setting an Initial Text for the Textboxes

Creating a Multiline Textbox

Adding Placeholder on Textfield in SCADE

How to retrieve the value of a TextField?

Changing from an Alphabetical to a Numeric Keyboard

Masking Textfield Values inside a Textbox Control in SCADE

Conclusion

Slider Feature on Native CrossPlatform Swift Mobile Apps

Slider Control's Properties:

Implementation

Step1: Bind the slider's element to data from a defined Class

Step2: Design the Page Editor

Step3: Define the logic for connecting data to Visual Controls

Step4: Provide the Data Container with the image data

Additional Features

Enable Slide Event

How to Slide to a Specific Item

Having access to a more generic elementProvider

Conclusion

AutoCompletion in Native Open-Source MacOS Nimble Editor

Understanding the Concept of AutoCompletion

The Two Methods for Maximizing Nimble's AutoCompletion Feature

AutoCompleting Type Names

AutoCompleting Variable Names

AutoCompleting Object Members

Conclusion

How to Copy and Paste Figma Design to Build Cross-Platform Mobile Apps on SCADE

Getting Started

SETTING UP THE BASIC STRUCTURE

1. CREATING A CUSTOM NAVIGATION BAR

2. ADDING AN UPPERSECTION

3. ADDING A SIGN-IN BUTTON

4. WORKING WITH A TABBAR

Conclusion

Create and Link Swift Packages from Nimble to Cross-Platform Native App Projects

Definition of some Key Terminologies Used

Getting Started

Section 1 - Using Nimble to Create a New Swift Package

Step One: Create a new Swift Package with Nimble

Step Two: Writing Source Code in the Package

Step Three: Edit the Default Manifest (Package.swift) File

Step Four: Publishing Your Swift Package

Section 2 - Using a Package in a SCADE Project

1. How to use Swift Package Locally