Microsoft released new programming language “Bosque”

Recently Microsoft have launched a new programming language Bosque. Mark Marron is the man behind developing this great language. Some feature of the app are:

For more information along with code examples, check out the official Bosque GitHub page.

All the best to an experimental language from Microsoft Research.

React Native – Constants

I will use my previous tutorial code which uses state concept in react native.

The existing code is :

  • Notice ‘red’, ‘green’ are scattered all over, and there can be typo error possible.
  • Also we can provide various variant to red and green just from one place that is constant named Colors.

So we can use constant:

and whereever we are using hard coded test we can just replace it with  Colors.red or Colors.green.

update code below:

Done!

 

React Native – Networking

Requirement – We are provided with a URL/web-service (https://jsonplaceholder.typicode.com/todos/1) which returns json response:

We have to show these information like userId, id, title, completed values in user interface. Output:

Let’s star by creating a new app:

This command will automatically create the folder structures necessary for iOS, Android and java script files.

Let’s change your App.js file as per mine:

Some Important part of the code is:

fetch – we can use the fetch method to get data from close/server. This fetch() guarantees of giving callback/completion handler of work done.

componentDidMount – This function is called when component is just about to be visible to screen. Also this is best place to get data and update UI. In this function we are call web service as well as setting state named as datasource.

And then in render function we are just using this state in our JSX. A part of code sample:

Thanks!

React Native – Using State to update style

Requirement – We have a button on the screen and when user tap on this button we want to change background color of another view.

Approach – Obviously we need a reference to a color say mBackgroundColor variable. Use this variable as backgroundColor for view’s background color. Now when ever user click on the view, refresh mBackgroundColor variable, and update view.

In react native we have state which can be used as variable and state is also mutable. We just have to set some default value of mBackgroundColor in constructor (kind of initializer)

And then when ever our button click event is called just updated state variables.

And this is how we are using

as style of one of the view:

Complete App.js file:

Output:

And below is the output after clicking on “Learn More” button.

So here we have acheive the requirement. By default the color of button is green and when user clicks on the button color changes to red.

Done! Good job!

Take a break and let’s make it little bit interesting.

Now what I want is color should keep on toggling, means from green to red, then again on click of button green then again red.

Approach to solve the problem, is we have already below function:

Just put conditional which says if user clicks on button then toggle color as : ‘if color is red make is green and if color is green make it red’.

Our new onPress() implementation:

Amazing isn’t.

Complete code:

Done! Good Job.

 

Android – Gallery Project

Agenda we will learn android basics with this project.

Project Description – Open android image gallery, pick image from gallery and show it on android image view.

Start by creating a new android project and giving it some name.

Some Basics – 

Every app project must have an AndroidManifest.xml file (with precisely that name) at the root of the project source set.

One of the most important part of above snippet is:

here we are saying that MainActivity.java is the launching screen or very first screen/activity of our app.

The manifest file describes essential information about your app to the Android build tools, the Android operating system, and Google Play.

The manifest file is required to declare the following:

  • The app’s package name, which usually matches your code’s namespace. The Android build tools use this to determine the location of code entities when building your project. When packaging the app, the build tools replace this value with the application ID from the Gradle build files, which is used as the unique app identifier on the system and on Google Play.
  • The components of the app, which include all activities, services, broadcast receivers, and content providers. Each component must define basic properties such as the name of its Kotlin or Java class. It can also declare capabilities such as which device configurations it can handle, and intent filters that describe how the component can be started.
  • The permissions that the app needs in order to access protected parts of the system or other apps. It also declares any permissions that other apps must have if they want to access content from this app.
  • The hardware and software features the app requires, which affects which devices can install the app from Google Play.

An Android activity is one screen of the Android app’s user interface.

import statements in an Android application

In an Android application class file which extends the Activity class, you might see the following import statements:

Difference Between Package And Import – 
The statement “package” is used to indicate that the class being implemented is part of a group of related classes placed in the same folder, in our example:
indicates that the class is in a folder named “myapplication”, and this folder is inside the folder “example”, and so on.
On the other hand, the statement “import” is used to indicate that the class being implemented uses a class or a group of classes from some “package”. This instruction helps to locate the libraries used in our class.
In our example:

AppCompatActivity – Base class for activities that use action bar features(? you would have seen in some android apps top right there are menu options), indicates that the class being implemented

can inherit features from AppCompatActivity. What features? Obviously some life cycle methods like onCreate(), onResume(), onPause() being some of the features.

Bundles is used to share data between activities , and to save state of app in oncreate(Bundle savedInstanceState) method so that app will come to know where it was stopped

Now let’s look at class implementation:

Let’s try to understand what is going on:

Here we can see inheritance in action. class MainActivity inherits from AppCompatActivity, which inherits from Activity and so on. Our class will be able to override in built method of AppCompatActivity and Activity.

Here we can see we are overriding onCreate function. Now the question is what is onCreate()?

When you launch android activity/screen this function works like initialization point.

This function is called very first time on activity load. It means if you press home button and then again resume the app, onCreate will not be called.

Also this function uses the bundle parameter from which app can resume it’s previous state in case it was force terminated.

Let’s drag drop a ImageView and a Button. I have also set a default background image on image view named “ic_launcher_foreground”.  It’s just simple drag drop and below is xml code:

At this point of time the output is:

android training in Kanpur, best job oriented courses in kanpur, best java training in kanpur

Some important points and concepts from xml:

androidx.constraintlayout.widget.ConstraintLayout : We are following constraint based or if you are from iOS background say it autolayout or if you are from react native it’s Flex or if you are from flutter it’s Box layout.

android:id : This must be unique, so that we can refer it in our code.

wrap_content : It means the view/button/image width or height should be enough to wrap content completely.

For our button constraints are as below:

layout_constraintTop_toBottomOf=”@+id/textView”: That means button will start from the bottom of textView.

For our text view constraints are as per below:

layout_constraintBottom_toBottomOf=”parent” : That means space in relative to bottom of container.

layout_constraintLeft_toLeftOf=”parent” : That means space in relative to left of container.

Similarly we can say for right and top.

This is a very basic example of constrained based system, which we will do in detail at some point of time.

When user will clicks the button we will open content gallery, choose image and show it on Image View.

Have some tea, relax and we will start with implementing gallery part.

First of all we need to create a variable for button, action for opening a gallery and  image view.

Let’s create button object, image view object and initialize it in onCreate():

At this point if you run app you will see image view with basic default image in it and “hello world” and a button named “Choose Image”. If you click on button you should see “clicked” being print on log cat console under debug area. All Good till now.

Let’s open image gallery on click of our button:

As we are using:

We have to implement callback:

Complete MainActivity.java file looks like this:

And here is the complete source code.

iOSDose is best android training provider. Join us to learn android app development.

Thanks.

React Native – Navigation

Navigation Controller works like stack data structure. Let’s say I have three screen and I want to navigate from A -> B -> C. In this case A will be at the bottom of the stack, B will be stacked on top of A and C will be at the top of B.

In case you want are on C and we popped C out from stack (obviously cleared from memory), we will remain with B and A only.

In case you want are on C and we want to reach A, we have to pop both C and B together to reach on A. Memory for both C and B will be deallocated.

When we open a new screen it is “PUSH”, always create new memory area.

When we resume already existing screen known as “POP”. Always memory of “POPPED” screens will be released from memory.

Above description was for layman language where I have used word screen. For Android it will be Activity object and for iOS it will be View Controller Object.

Let’s create a new react native project” by typing in terminal:

Auto generated code of App.js looks like below:

 

After that run it and it should look like below:

Great let’s start Navigation logic:

Open new terminal window and run:

We are installing react-navigation latest version:

Now in App.js:

Then let’s create navigation component, MainNavigator which looks like below code:

createStackNavigator
Provides a way for your app to transition between screens where each new screen is placed on top of a stack.createStackNavigator is a function that returns a React component. It takes a route configuration object and, optionally, an options object. Because the createStackNavigator function returns a React component, we can export it directly from App.js to be used as our App’s root component.

createAppContainer returns react component, it is root of the app and takes care of navigation logic for iOS and Android.

Let’s create home screen:

Two Most important part of this code are:

The title to be shown on top of Home screen is ‘Welcome’

AND

Here we are saying navigate to ‘ProfileScreen’ with parameters as itemId : 86 and otherParam : ‘anything you want here’

let’s create detail screen:

Two Most important part of this code are:

AND

See how we have accessed itemId and otherParam.

The complete code of App.js is below:

Run it and you should see below output:

 

React Native Web View Example

Webview example:

Replace App.js code with below:

React Native – Scroll View

We will try to acheive below out put using scrollview :).

 

Scroll View is a content view that can contain a number of subviews and user can scroll up down.

We can use ScrollView component for this purpose. And the other child component will be child/subviews/subcomponent of scrollView.

Lets’ start creating new project:

On terminal/command line type it:

Open App.js with “Atom” or “VSCode” and replace App.js code as per below:

Thanks!!

Blogging Rule

First read all steps and then start actions on these steps 🙂

Step 1 :

Please register at:

Quick Register

Fill Form as per below example:

Step 2-

You have to wait for confirmation from our side/iOSDose side, as we will make you author on our reputed blog, for life time blogging opportunity with us.

Step 3-

Start writing blog 🙂

Step 4 – 

Please send us email at meiosdose@gmail.com, that you are done writing so that we can start reviewing it.

Rules:

  • Article should be 600-1000 words length.
  • Please do not just copy and paste content, use your own thoughts.
  • You can pick any thing you want to write on Travel, Education, Life Experience, Life Style, Tech, Blockchain, python, Arduino, C, C++, embeded, Agriculture, Civics, Machine Learning, java, Finance, Hindi/English Literature, reasoning, means any appropriate contentwhatever you are good at.
  • You can use images, videos, text whatever to make your blog competent.

Benefits:

Win win situation for everyone, learn writing blog on our reputed channel. Show your contribution in your resumes. Enhance your employability. Win exciting offers cash and prizes.

For any query:

Mail – meiosdose@gmail.com

Mobile – +91-7838552946, +91-9711874933

iOSDose Sotware Development And Training Company.

117/N/24, Kakadeo, Kanpur, Near Bank Of Baroda Kanpur.