Code, InfoSec and Server Stuff
Views are personal and not my employers.
This is quick guide explaining how I created my first JavaFX application using the Gluon Scene Builder in the IntelliJ IDEA IDE.
Read the full article here: https://fearby.com/article/creating-your-first-java-fx-app-and-using-scene-builder-in-the-intellij-idea-ide
This is quick guide explaining how I created my first JavaFX application using the Gluon Scene Builder in the IntelliJ IDEA IDE.
Advertisement:
I have a number of guides on moving away from CPanel, Setting up VM’s on UpCloud, AWS, Vultr or Digital Ocean along with installing and managing WordPress from the command line. I created this blog post on creating a Java GUI app with the older Swing technology (Java FX replaces Swing). I now want to create a JavaFX app to control my UpCloud VM’s.
If you have not read my previous posts I have now moved my blog etc to the awesome UpCloud host. Sign up using this link to get $25 free credit.
Do read: Preparing for JavaFX Application Development: https://wiki.openjdk.java.net/display/OpenJFX/Building+OpenJFX#BuildingOpenJFX-Mac
Downloading Java
Download and install Java SE 8 or higher from http://www.oracle.com/technetwork/java/javase/downloads/index.html
Download Intelli J IDEA IDE
Goto https://www.jetbrains.com/idea/
Click Download
Download the community edition
Install Intelli J IDEA IDE
Install Scenebuilder
I downloaded the Java Scene Builder (1.1 or 2.0) from here.
Install the Scene Builder (open the installer and drag it to your applications folder).
Configure the Scene Builder in IntelliJ IDEA IDE
You can now create a JavaFX project an have a workign scene builder GUI.
After you create a JavaFX project open your JavaFX fxml file in Scene Builder (right click on the .fxml file and select Open in Scene Builder)
Extended Scene Builder from Gluon
I read that there is a better Scene builder GUI available from https://gluonhq.com/products/scene-builder/
Read some of the Java Scene Builder v Gluon Scene Builder history here at Reddit for the latest on why.
I am going to download the Gluon Scene Builder from http://gluonhq.com/products/scene-builder/
Download and install the Gluon Scene builder (at the time of writing requires Java 9 or higher).
Now open IntelliJ IDEA IDE and open the preferences and change the scene builder path from “/Applications/JavaFX Scene Builder 2.0.app/” to “/Applications/SceneBuilder.app/“.
Save the IntelliJ IDEA preferences and Right click on your projects “fxml” file again and click “Open In Scene Builder” , do verify it is indeed the Gluon Scene builder by opening the about menu.
Designing your first JavaFX app
Now you can design and code a JavaFX application with Gluon Scene Builder.
I am not an expert at java apps so i’d highly recommend you follow this guide to learn how to build a well-structured JavaFX panel layout (just ignore that it is using the standard Scene Builder, it works with the gluon one).
You should now have a working Java FX App
The scene builder will save changes to your fxml file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | <?xml version="1.0" encoding="UTF-8"?> <?import javafx.geometry.Insets?> <?import javafx.scene.control.Button?> <?import javafx.scene.control.Label?> <?import javafx.scene.control.Menu?> <?import javafx.scene.control.MenuBar?> <?import javafx.scene.control.MenuItem?> <?import javafx.scene.control.TextArea?> <?import javafx.scene.control.TextField?> <?import javafx.scene.control.TreeView?> <?import javafx.scene.layout.BorderPane?> <?import javafx.scene.layout.HBox?> <?import javafx.scene.layout.Region?> <?import javafx.scene.layout.VBox?> <BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/9.0.4" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller"> <top> <VBox BorderPane.alignment="CENTER"> <children> <MenuBar> <menus> <Menu mnemonicParsing="false" text="File"> <items> <MenuItem mnemonicParsing="false" text="Close" /> </items> </Menu> <Menu mnemonicParsing="false" text="Edit"> <items> <MenuItem mnemonicParsing="false" text="Delete" /> </items> </Menu> <Menu mnemonicParsing="false" text="Help"> <items> <MenuItem mnemonicParsing="false" text="About" /> </items> </Menu> </menus> </MenuBar> <HBox spacing="8.0"> <children> <TextField promptText="ip" /> <TextField promptText="Username" /> <TextField promptText="Password" /> <Button mnemonicParsing="false" onMouseClicked="#loginButtonClicked" prefHeight="27.0" prefWidth="68.0" text="Login" /> <Region HBox.hgrow="ALWAYS" /> <Button mnemonicParsing="false" onMouseClicked="#settingsButtonClicked" text="Settings" /> </children> <padding> <Insets bottom="8.0" left="8.0" right="8.0" top="8.0" /> </padding> </HBox> </children> </VBox> </top> <left> <TreeView prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER" /> </left> <center> <TextArea prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER" /> </center> <bottom> <HBox BorderPane.alignment="CENTER"> <children> <Label text="Label" /> </children> <padding> <Insets bottom="2.0" left="2.0" right="2.0" top="2.0" /> </padding> </HBox> </bottom> </BorderPane> |
Advertisement:
You can add functions into your controller class
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | package sample; public class Controller { public void loginButtonClicked(){ System.out.println("Login"); } public void settingsButtonClicked(){ System.out.println("Settings"); } } |
Instaling Gluon JavaFX Templates
Close your test project and create a new project, but before you do click Configure then Plugins
Now lets open In the following screen click Browse Repositories.
Search the repository for and install the “Gluon” plugin
Restart IntelliJ IDEA IDE then you can use templates when creating a project.
Get your own VM
If you have not read my previous posts I have now moved my blog etc to the awesome UpCloud host. Sign up using this link to get $25 free credit.
Packaging a Java app for distribution on OSX
I will show how you can package your app to run on a Mac by using this.
Coming Soon
I will add more guides soon on using a custom JavaFx app to allow you to manage your own UpCloud server and perform Deploy/Init/Setup/Configure/Operate actions. Running CLI commands to deploy and manage a server is fun but is very tedious.
I blogged recently about using the UpCloud API and setting up a subdomain recently (I will use this server to test and prove the Javmanagementnt app).
Advertisement:
Links
I hope this guide helps someone.
Ask a question or recommend an article
Revision History
V1.6 Jenkov Tutorials
V1.5 Reddit java help
V1.4 added java widgets link
V1.3 added javafx examples link.
V1.2 added Java learning paths
V1.1 added offical Javafx examples
v1.0 Initial post
Here is a quick guide that shows how you can create and compile your first Java app with Net Beans.
Advertisement:
I have a number of guides on moving hasting away form CPanel, Setting up VM’s on AWS, Vultr or Digital Ocean along with installing and managing WordPress from the command line. Updating the serves is a pain so I am writing a java app for Windows and OSX to help me manage the server by telnetting in on port 22 and performing routine actions from a button click in Java.
Installing Java and NetBeans IDE
Goto https://netbeans.org/downloads/index.html and click “JDK with NetBeans IDE Java SE bundle”
Download Netbeans and Java SE bundle
Install Netbeans and Java SE bundle
Creating your first GUI Java Application
Create New Project (Java Application) in NetBeans, Click Next
Name the project and set the main class as “main”
Add a new file, a “Swing GUI Form/JFrame form“.
Name the J Frame Form and click Finish.
Adding GUI elements in NetBeans IDE
In the Net Beans IDE, you can simply drag and drop elements. I like to move my properties screen to the bottom centre.
Set the panel at the default startup element
Add the following code to the main.java file
> framemain form = new framemain();
> form.setVisible(true);
Compile the App
The app compiles 🙂
Add an action to a button
You can add button actions (events) in the design mode.
Add Hello World alert box code to the button
Add the following to the Panel code file
> public static void infoBox(String infoMessage, String titleBar)
> {
> JOptionPane.showMessageDialog(null, infoMessage, “InfoBox: ” + titleBar, JOptionPane.INFORMATION_MESSAGE);
> }
Add this to the action (event)
System.out.println(“Hello World”);
> frame1.infoBox(“Hello World”, “Hello World”);
Build
To build right-click on the project and click Clean and Build
The result is an app you can run by double-clicking the jar file.
I hope this helps someone.
Making an OSX APP file from the JAR file
Coming soon
Making a Windows EXE file from the JAR file
Coming soon
I hope this guide helps someone.
Ask a question or recommend an article
Revision History
v1.0 Initial post
Below is my blog post on setting up a hello world app on Heroku that is powered by a database (e.g Client requests a page, the page reads a database and return hello world).
Advertisement:
I found IBM/Cloudant would cost multiple thousands a month to run a good NoSQL database backend, I moved to a self-managed server on Digital Ocean in Singapore but the distance of the server killed latency and maximum throughput in Australia. I moved to a dedicated AWS EC2 instance with a Mongo DB cluster on AWS in Australia and it was great but pricey. A self-managed server (on Digital Ocean or Vultr) allows you to install whatever you want (e.g PHP, MySQL, MongoDB, Redis, SSL Certificate, Mail or WordPress) and configure what you want (but at what cost?).
Heroku say: “Get straight to building apps – Setting up, operating and maintaining your own platform is not where the race is won. Avoid the risk and complexity, and dedicate your energy to what really matters: building great apps.”.
Having setup serves on IBM Cloudant, Digital Ocean, AWS and Vultr (and even managing with RunCoud and Webmin) and not focusing on a self-managed server-issues like security, backup, security audits, upgrading PHP, updating ssl, setting up distributed mysql, updating https certificates etc sounds like the holy grail.
Let’s put that to the tets and build a Hello World App.
About Heroku
Heroku have a page here about what they offer.
Sign up for Free: https://signup.heroku.com
Programming Languages (Ruby, PHP, Python, NodeJS, Java, Cloujure, Scala, Go etc). I so wanted to select “I’m not a developer” but I won’t. I selected NodeJS.
Next: Verify your email, enter a password and you’ll find yourself here.
Now we can create an app?
Help
Ok, let’s skim the NodeJS help before we start: https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up
Let’s download the Command Line tools
Installing Heroku CLI on OSX was uneventful
I clicked the “I have installed the Heroku CLI” button.
Heroku wanted me to clone a repo but I logged in to Heroku the Heroku CLI and created a local Heroku folder first (in my local Terminal).
1 2 3 4 5 6 7 8 9 10 | Last login: Sat Nov 25 18:54:43 on ttys000 192-168-1-200:~ username$ mkdir ~/Desktop/heroku 192-168-1-200:~ username$ cd ~/Desktop/heroku 192-168-1-200:heroku simon$ pwd /Users/username/Desktop/heroku 192-168-1-200:~ username$ heroku login heroku-cli: Updating to 6.14.38-9bfc11a... 12.7 MB/12.7 MB Enter your Heroku credentials: Email: removed@removed.com Password: ******************************************************* |
I checked the Heroku Version
1 2 | heroku --version heroku-cli/6.14.38-9bfc11a (darwin-x64) node-v9.2.0 |
I checked Heroku Help
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | heroku --help Usage: heroku COMMAND Help topics, type heroku help TOPIC for more details: access manage user access to apps addons tools and services for developing, extending, and operating your app apps manage apps auth heroku authentication authorizations OAuth authorizations buildpacks manage the buildpacks for an app certs a topic for the ssl plugin ci run an application test suite on Heroku clients OAuth clients on the platform config manage app config vars container Use containers to build and deploy Heroku apps domains manage the domains for an app drains list all log drains features manage optional features git manage local git repository for app keys manage ssh keys labs experimental features local run heroku app locally logs display recent log output maintenance manage maintenance mode for an app members manage organization members notifications display notifications orgs manage organizations pg manage postgresql databases pipelines manage collections of apps in pipelines plugins manage plugins ps manage dynos (dynos, workers) redis manage heroku redis instances regions list available regions releases manage app releases run run a one-off process inside a Heroku dyno sessions OAuth sessions spaces manage heroku private spaces status status of the Heroku platform teams manage teams update update CLI webhooks setup HTTP notifications of app activity |
I ran the advised commands
1 2 | git clone https://github.com/heroku/node-js-getting-started.git cd node-js-getting-started |
At this point, I followed the steps at https://devcenter.heroku.com/articles/getting-started-with-nodejs#deploy-the-app
Ran
1 2 3 | heroku create Creating app... done, ⬢ fathomless-anchorage-##### https://fathomless-anchorage-##removed##.herokuapp.com/ | https://git.heroku.com/fathomless-anchorage-70974.git |
The website is up
Where is this app located
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | traceroute fathomless-anchorage-70974.herokuapp.com traceroute: Warning: fathomless-anchorage-70974.herokuapp.com has multiple addresses; using 54.243.121.236 traceroute to us-east-1-a.route.herokuapp.com (54.243.121.236), 64 hops max, 52 byte packets 1 192-168-1-1 (192.168.1.1) 1.045 ms 1.121 ms 0.727 ms 2 10.20.23.227 (10.20.23.227) 34.415 ms 30.378 ms 26.927 ms 3 syd-gls-har-agr11-be-12 (202.7.205.13) 42.363 ms 42.957 ms 35.670 ms 4 203-221-3-3 (203.221.3.3) 37.517 ms 203-221-3-4 (203.221.3.4) 29.832 ms 203-221-3-67 (203.221.3.67) 29.412 ms 5 10ge4-11.core1.sjc1.he.net (72.52.101.37) 208.270 ms 213.679 ms las-b24-link.telia.net (213.248.95.232) 181.162 ms 6 las-b21-link.telia.net (62.115.136.46) 173.171 ms 100ge1-1.core1.sjc2.he.net (184.105.65.114) 208.705 ms 10ge7-2.core1.sjc2.he.net (72.52.92.118) 212.061 ms 7 dls-b21-link.telia.net (62.115.137.106) 205.615 ms 100ge2-1.core4.fmt2.he.net (184.105.213.158) 204.186 ms dls-b21-link.telia.net (62.115.123.136) 204.317 ms 8 a100us-ic-303626-dls-bb1.c.telia.net (62.115.36.38) 332.192 ms 205.536 ms 100ge11-1.core1.dal1.he.net (184.105.64.222) 241.649 ms 9 176.32.125.172 (176.32.125.172) 209.481 ms 176.32.125.212 (176.32.125.212) 223.887 ms 176.32.125.164 (176.32.125.164) 205.608 ms 10 176.32.125.169 (176.32.125.169) 205.849 ms 176.32.125.150 (176.32.125.150) 274.887 ms 176.32.125.167 (176.32.125.167) 230.285 ms 11 * 176.32.125.241 (176.32.125.241) 232.125 ms * 12 * * 54.240.229.175 (54.240.229.175) 231.710 ms 13 * 54.240.229.171 (54.240.229.171) 239.321 ms * 14 * * * 15 *^C |
Traceroute times out but appears to be in the eastern United States (AWS).
Q1) Can I change to Sydney Australia?
Waiting for an answer from Twitter.
Virginia is a long way away.
It’s all good apart from on weak cipher (“TLS_RSA_WITH_3DES_EDE_CBC_SHA (0xa) WEAK (112)“).
A shodan scan of the IP reveals an open port 80 and 443 (as expected, nothing out of the ordinary)
Pushing Changes
I ran this to push the app.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | cd /Users/username/Desktop/heroku/node-js-getting-started git push heroku masterCounting objects: 488, done. Delta compression using up to 8 threads. Compressing objects: 100% (367/367), done. Writing objects: 100% (488/488), 231.76 KiB | 231.76 MiB/s, done. Total 488 (delta 86), reused 488 (delta 86) remote: Compressing source files... done. remote: Building source: remote: remote: -----> Node.js app detected remote: remote: -----> Creating runtime environment remote: remote: NPM_CONFIG_LOGLEVEL=error remote: NPM_CONFIG_PRODUCTION=true remote: NODE_VERBOSE=false remote: NODE_ENV=production remote: NODE_MODULES_CACHE=true remote: remote: -----> Installing binaries remote: engines.node (package.json): 8.9.1 remote: engines.npm (package.json): unspecified (use default) remote: remote: Resolving node version 8.9.1... remote: Downloading and installing node 8.9.1... remote: Using default npm version: 5.5.1 remote: remote: -----> Restoring cache remote: Skipping cache restore (not-found) remote: remote: -----> Building dependencies remote: Installing node modules (package.json) remote: added 49 packages in 1.686s remote: remote: -----> Caching build remote: Clearing previous node cache remote: Saving 2 cacheDirectories (default): remote: - node_modules remote: - bower_components (nothing to cache) remote: remote: -----> Build succeeded! remote: -----> Discovering process types remote: Procfile declares types -> web remote: remote: -----> Compressing... remote: Done: 17.7M remote: -----> Launching... remote: Released v3 remote: https://fathomless-anchorage-#####.herokuapp.com/ deployed to Heroku remote: remote: Verifying deploy... done. To https://git.heroku.com/fathomless-anchorage-#####.git * [new branch] master -> master |
I ran this to ensure the app was running
1 2 | heroku ps:scale web=1 Scaling dynos... done, now running web at 1:Free |
I ran this to open the app
1 | heroku open |
This opened the apps URL in a browser.
A nice help page was pushed to my app.
I changed the contents of “node-js-getting-started/views/pages/index.ejs” and repushed.
1 2 3 | git push heroku master heroku ps:scale web=1 heroku open |
It reported “Everything up-to-date“???
I tried to force a push (just in-case something on the server was changed)
1 2 | git push --force heroku master Everything up-to-date |
???
Ok, let’s pull and see what’s new?
1 2 3 4 | git pull heroku master From https://git.heroku.com/fathomless-anchorage-##### * branch master -> FETCH_HEAD Already up-to-date. |
I edited “./index.js” and made the entry point “pages/index2.ejs” and tried to push and no luck.
1 | Everything up-to-date |
I tried running push under sudo too (no luck)
Googling revealed I can go to https://dashboard.heroku.com/apps/YOUR-APP/deploy/heroku-gi and see what the issue is.
I logged into the app and could not find how to delete or edit it?
At this point, I would have just ssh’ed in and restarted the node process in pm2 or node on my own self-managed server and edited remote files locally in sublime on my local machine.
Personally, I like to know where files live and not delve into another designers management interface.
I’ll come back to this guide later until then I’ll stick with Digital Ocean or Vultr
Linking to your own Domain on Heroku
It looks like I can use custom domains via Namecheap to link a domain to a heroku app.
Or you can setup a domain sub domain to point to a heroku app with a DNS C Name record.
Database Setup
Todo..
Node talking to the database.
Todo..
App Cost on Heroku
todo: After Hello World is deployed. Digital Ocean (is as low as $5 a month) or Vultr (is as low as $2.5 a month)
Donate and make this blog better
Ask a question or recommend an article
Revision History
v1.4 added custom domain, database, CNAME info
etc
Below is my quick post showing how you can create your own Hello World Android app using the new Kotlin language on OSX. More will be added to this blog post over time.
Advertisement:
What is Kotlin
Kotlin is a statically-typed programming language that runs on Java Virtual Machines (the syntax is not compatible with Java but interoperates with it). Kotlin is Google’s default language for deveAndroid Android Apps.Kotlin is now the offimoremorecial language supported by Google for Android development. Kotlin v JAVA: http://androiddeveloper.galileo.edu/2017/10/16/kotlin-vs-java-what-is-the-difference/
The official Kotlin language page can be found here: https://kotlinlang.org/ (Wikipedia has a page here).
Kotlin has a “Try Kotlin” page here ( https://try.kotlinlang.org/ ) where you can the language out in a browser. Android Studio 3 is the latest IDE from Google that allows you to develop apps in JAVA pr Kotlin for Android.
Learn Kotkin: Hello World Demo
Kotlin Hello World Code:
1 2 3 4 5 6 7 8 | /** * We declare a package-level function main which returns Unit and takes * an Array of strings as a parameter. Note that semicolons are optional. */ fun main(args: Array<String>) { println("Hello, world!") } |
fyi: Other Kotlin Code Examples:
Kotlin Language Reference: http://kotlinlang.org/docs/reference/
Tutorials: http://kotlinlang.org/docs/tutorials/
Books: http://kotlinlang.org/docs/books.html
More Resources: http://kotlinlang.org/docs/resources.html
Installing Android Studio on OSX
You will need to install the latest Android Studio 3 IDE from the link below. This will allow you to download the latest Android SDK, Android Emulator, tools and Documentation from Google.
Download Android Studio from here: https://developer.android.com/studio/index.html?utm_source=android-studio
You should now have a 750MB (or there about’s) file (called something like android-studio-ide-171.4408382-mac.dmg )
You are now ready to run the setup dmg and install the app.
“Replace” Earlier Versions (if you had 1.x or 2.x installed)
You may be asked to choose the default Android emulator ram size
Congratulations, Android Studio 3 should now be installed
Congratulations you now have the Android Studio 3 IDE Installed.
Android Studio Tips and Tricks: https://medium.com/@mmbialas/50-android-studio-tips-tricks-resources-you-should-be-familiar-with-as-an-android-developer-af86e7cf56d2
Android Studio 3 User Guide: https://developer.android.com/studio/intro/index.html
Official getting started guide: https://developer.android.com/training/basics/firstapp/index.html
Setting Android Studio Defaults
Don’t forget to download updates and set auto updates “to enabled” in the Android Studio preferences screen.
Goto the “SDK Manager” menu item under the “Tools” then “Android” menu.
You can Download additional Android SDK versions, updates and emulator environments. I would recommend you pre-download the Android 3.x to 8.x environments.
You can also download and create Emulated Android Devices in the Android Virtual Device (AVD) Manager menu.
You can choose an existing Android Device (emulated)
Create Your Own Virtual Device
You can also create your own Android virtual device (Emulated) for testing.
I have a physical Huawei Mate 9 device (for physical testing), I will set up a similar virtual device (but stick with 2GB ram instead of 4GB as my development Mac only has 8GB total ram).
You can choose an emulators device skin if you so desire. Many phone skins can be found online (e.g here, here and here). Samsung Developer page has a skins page here. Managing AVD user guide here: https://developer.android.com/studio/run/managing-avds.html. I don’t use emulator device skins as this uses much-needed memory and screen real estate.
When you are done configuring your virtual device image you may be prompted to download missing images (e.g in my case I need to download API 27/ Android 7.1.1).
Physical Device Setup (Enable Developer Mode)
You should always code on physical devices where possible (emulators are ok but have a handful of physical devices on hand to test on). I find the emulator crashes a lot on me.
How to enable developer mode on a physical Android device: https://developer.android.com/studio/debug/dev-options.html. When you have enabled developer mode you can enable advanced developer options (I like these options).
When you have a physical Android device setup and connected, you can choose to run the app on the physical device.
Creating Your first Hello World Kotlin Project
By now you will have Android Studio 3 installed, Configured Updates, Configured an Emulator device and hopefully a real test device. Now you can open Android Studio and select.
1. “Start a New Android Studio Project”
2. Name your project (e.g “My Kotlin Test App 001”)
3. Ensure your company name is unique (e.g “com.fearby.testgithub001android”
4. Tick “Include Kotlin Support” (not ticked by default).
5. Click “Next“.
6.You will need to choose the minimum API and Android version to support. If you choose a new API you may limit the potential users that can run your app and if choose an old API you will limit the potential features. In my case, I will choose 7.0 for my test project (but will choose 4.1 in public apps). Click “Help me choose” to see the percentage of users and features in each API version.
7. Clik “Next”
8. Choose “Empty Activity” and click “Next“.
9. Take note of Activity name of “MainActivity” and Layout Name of “activity_main” and click “Finish“.
Now that you have a new project you can start Emulatorkator (Tools, Android, AVD Manager then press Play next to your emulator of choice).
10. Now click Run and choose the Emulator to start.
Before we add a button to the test app, let’s add a Anko dependency to the project ( https://github.com/Kotlin/anko ) to make coding easier.
11. Open your “app/Gradle Scripts/build.gradle (Module: app)” node in the Android Project treeview.
12. View add the following line to the dependencies section (refer to https://github.com/Kotlin/anko and replace “0.10.2” with the version listed at thGitHubub site). Then click “Sync Now”.
1 2 | // Anko Commons compile "org.jetbrains.anko:anko-commons:0.10.2" |
13. Goto “app/res/layout/activity_main.xml” (1) and add a button to the layout (2) and name the button (3)
14. Goto “app/java/%projectname%/MainActivity” (1) and add the following two lines (2)(3) below.
Add the following at the top of “MainActivity”
1 | import org.jetbrains.anko.toast |
Add the following in the “onCreate” function (ensure your button name is the same as you called it).
1 | buttonhello.setOnClickListener { toast ("Hello World (www.fearby.com)") } |
15. You can now build and deploy the app to a device (or emulator, real devices are faster).
Add a Button to change activity screens
The official documentation on changing activity screens can be found here.
1. Rename the button from above from”Button” to ‘Hello World”
2. Add a new button can call it “buttonnextscreen” (set constraints if you wish to match the hello world button left and width).
3. Now you can add and a new target activity screen ( e.g Open your project in the treeview (1), select “New” (2), select “Activity” (3) and then choose the activity type you want (e.g “Empty Activity” (2) ).
4. Name the “Activity Name” and “Layout Name” and click “Next“.
More info on Kotlin fragments: https://www.raywenderlich.com/169885/android-fragments-tutorial-introduction-2
5. In “MainActivity.kx” I edited the following (time to use Anko Intents and not just Anko toast )
1 2 | //import org.jetbrains.anko.toast import org.jetbrains.anko.* |
I also wired up the new “Next Activity” Button
1 2 3 | buttonnextscreen.setOnClickListener { startActivity(intentFor<NextActivity>().singleTop()) } |
Now you have wired up a button to change Activity Screens. The Android back button will fire the previous screen so there is no need to wire up a returning button (like on iOS).
This is the Next Activity screen that was called from a button (exciting eh).
Set and Read Textbox
After adding a textbox and button this is how I set and red text in a textbox control.
1 2 3 4 | textbox.setText("Sample Text") buttongettext.setOnClickListener{ toast(textbox.text.toString()) } |
Create, Set and Read Local Class
I added a button (ID) called “buttoncreateclass” and setup a “setOnClickListener” (in onCreate) to create a class, fill it then output the data from the class to three textboxes (“textfirstname”, “textsurname” and “textage”)
1 2 3 4 5 6 7 8 9 10 | class Person(val Firstname: String, val Surname: String, var Age: Int) {} buttoncreateclass.setOnClickListener { var cbob = Person("Bob", Surname = "Smith", Age = 41) // Read textfirstname.setText("Firstname: " + cbob.Firstname.toString()) textsurname.setText( "Surnmae: " + cbob.Surname.toString()) textage.setText("Age: " + cbob.Age.toString()) } |
Adding Application Icons.
Read the official guidelines here: https://developer.android.com/studio/write/image-asset-studio.html
I use the free cions generator here: https://romannurik.github.io/AndroidAssetStudio/
Ensure you replace the following files (with your project closed)..
You may also need to remove the res/drawable XML files to prevents the automatically genrated im,ages from loading.
You may need to force a delete (Right Click then “Delete” then “OK” then “Delete Anyway“).
I had a number of errors related to removing references to the automatically generated images.
File “anydpi-v26/ic_launcher.xml” and “anydpi-v26/ic_launcher_round.xml” had this contents.
1 2 3 4 5 | <?xml version="1.0" encoding="utf-8"?> <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android"> <background android:drawable="@drawable/ic_launcher_background"/> <foreground android:drawable="@drawable/ic_launcher_foreground"/> </adaptive-icon> |
I replaced the contents of the file “anydpi-v26/ic_launcher.xml” and “anydpi-v26/ic_launcher_round.xml” with
1 2 3 4 5 | <?xml version="1.0" encoding="utf-8"?> <application> android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" </application> |
Then you will need to click the “Build” menu then “Clean Project” to remove references to the files.
“Build“, “Clean” results.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | Executing tasks: [:app:assembleDebug] Configuration 'compile' in project ':app' is deprecated. Use 'implementation' instead. :app:preBuild UP-TO-DATE :app:preDebugBuild UP-TO-DATE :app:compileDebugAidl UP-TO-DATE :app:compileDebugRenderscript UP-TO-DATE :app:checkDebugManifest UP-TO-DATE :app:generateDebugBuildConfig UP-TO-DATE :app:generateDebugResValues UP-TO-DATE :app:generateDebugResources UP-TO-DATE :app:mergeDebugResources UP-TO-DATE :app:createDebugCompatibleScreenManifests UP-TO-DATE :app:processDebugManifest UP-TO-DATE :app:splitsDiscoveryTaskDebug UP-TO-DATE :app:processDebugResources UP-TO-DATE :app:compileDebugKotlin UP-TO-DATE :app:prepareLintJar UP-TO-DATE :app:generateDebugSources UP-TO-DATE :app:javaPreCompileDebug UP-TO-DATE :app:compileDebugJavaWithJavac UP-TO-DATE :app:compileDebugNdk NO-SOURCE :app:compileDebugSources UP-TO-DATE :app:mergeDebugShaders UP-TO-DATE :app:compileDebugShaders UP-TO-DATE :app:generateDebugAssets UP-TO-DATE :app:mergeDebugAssets UP-TO-DATE :app:transformClassesWithDexBuilderForDebug UP-TO-DATE :app:transformDexArchiveWithExternalLibsDexMergerForDebug UP-TO-DATE :app:transformDexArchiveWithDexMergerForDebug UP-TO-DATE :app:mergeDebugJniLibFolders UP-TO-DATE :app:transformNativeLibsWithMergeJniLibsForDebug UP-TO-DATE :app:processDebugJavaRes NO-SOURCE :app:transformResourcesWithMergeJavaResForDebug UP-TO-DATE :app:validateSigningDebug :app:packageDebug UP-TO-DATE :app:assembleDebug UP-TO-DATE BUILD SUCCESSFUL in 1s 26 actionable tasks: 1 executed, 25 up-to-date |
Now you can build an APK with static icons (yes, that’s my face).
Read move on “realtime generated/adaptive” v “image” icons here: https://medium.com/@ianhlake/vectordrawable-adaptive-icons-3fed3d3205b5
Official guide on Adaptive Icons: https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive.html
Displaying Alerts
Displaying a hard-coded option with Anko
1 2 3 4 | alert("Coffee?", "Would you like another coffee?") { yesButton { toast("OK, go and get a coffee.") } noButton { toast("OK, go and get a glasss of water.") } }.show() |
Displaying a list with options with Anko
1 2 3 4 | val fruit = listOf("Apple", "Banana", "Mango") selector("Go..", fruit, { dialogInterface, i -> toast("Go: ${fruit[i]}.") }) |
Making Phone Calls, Sending Text, Browing the web and sending Emails
Anko has some cool helper methods to allow you to send and share content.
As long as you add the appropriate buttons, text fields you can add these button listeners.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | override fun onCreate(savedInstanceState: Bundle?) { ... buttonmainscreen.setOnClickListener { startActivity(intentFor<MainActivity>().singleTop()) } buttonmakeacall.setOnClickListener { makeCall(textphonenumber.text.toString()) } buttonsendatext.setOnClickListener { sendSMS(phonenumber2.text.toString(), textsendthistext.text.toString()) } buttonbrowsetheweb.setOnClickListener { browse(texturl.text.toString()) } buttonsharesometext.setOnClickListener { share(textsharethis.text.toString(), textsharethis2.text.toString() ) } buttonsendanemail.setOnClickListener { email(textemail.text.toString(), textsubject.text.toString(), textbody.text.toString()) } } |
Layout
Background Async Calls
You can call background calls and then invoke the UI thread when the call has returned.
1 2 3 4 5 6 7 8 9 10 11 12 | buttondoasync.setOnClickListener { fun runLongTask(): String { Thread.sleep(3000) return "Waited 3 seconds" } doAsync { var result = runLongTask() uiThread { toast(result) } } } |
App Manifest Permissions
Edit the file “app/src/mainAndroidManifest.xml” and add the following two lines above the “<applications” node
1 2 | <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> <uses-permission android:name="android.permission.INTERNET"/> |
View all permission options here: https://developer.android.com/reference/android/Manifest.permission.html
By default your app will not ask for permissions (unless you set them).
Downloading data from the Internet (API Endpoint)
Add the following to a button to make a anetwork call.
1 2 3 4 5 6 7 8 | buttoncallapiinthebackground.setOnClickListener { doAsync { val result = URL("https://www.yoursite.com/api/yourappname/v1").readText() uiThread { longToast("Request performed: " + result) } } } |
Example Result:
1 | Request performed: {"API Status": "OK"] |
More soon.
Adding soon: Network (submit data).
Adding soon: Plan Sound.
Adding soon: Animations.
Adding soon: String Encryption.
Adding soon: Basic Security.
Updating your Android Studio IDE (do this often)
Don’t forget to download updates (and enable auto updates) in the Android Studio IDE. At the start of this draft blog post, I installed Android Studio 3.0 (Four hours later a large 1.3 GB sized update was available), I had to download many smaller updates too.
This is a frequent update that would not go away for me.
Copying the app to an Android Device.
Once you have enabled debug mode you can copy apps to and from the physical device. You can build an APK by going to the “Build” then “Build APK’s” menu and build the file to your project folder (e.g “/Users/simon/AndroidStudioProjects/MyKotlinTestApp001/app/build/outputs/apk/debug/app-debug.apk“). You can then copy this file to your Android device (via the Android File Transfer app) and you can now run the app anytime you want away from your Mac.
Also before you copy and unsigned apps to your test device tyoiu will need to enable developer mode then enable the running of apps from “unknown sources“.
If you have any security apps instaled like Sophos you will be told that yiour app has a low rating.
APK living on your device 🙂
The Android Studio also has a real device debugger.
Monitor output from a show stats from a real device
Android Security 101 (you need to know this)
You can define network configuration per these instructions: https://developer.android.com/training/articles/security-config.html
Coming from developing iOS and desktop apps I decided on researching the current state of Android Security. I would strongly suggest you watch this video from Marcos Placona ( https://twitter.com/marcos_placona Developer Evangelist @ Twilio).
Takeaway’s from this video
My Suggestions
Deploying your app to the Android/Google Play store
To publish an app to the Google Play store you will need to create a Google Play Developer Account, pay $25 USD and you are free to publish an app on the Google Play store. Read more here: https://play.google.com/apps/publish/
Publishing an app is as simple as filling in the blanks in the publish app screen.
Troubleshooting
Read More
Kotlin Community: http://kotlinlang.org/community/
Android Studio ~ Android Central Blog: https://www.androidcentral.com/tag/android-studio
Huawei Developer Page: http://developer.huawei.com/en/
Samsung tips on using Android Studio: http://developer.samsung.com/galaxy/emulator-skin/guide#tips
Create a custom emulator skin https://developer.android.com/studio/run/managing-avds.html#skins
Follow Android Dev on Twitter: https://www.twitter.com/AndroidDev
Read: https://androidsecurity.info/
An Introduction to Kotlin: https://code.tutsplus.com/tutorials/an-introduction-to-kotlin–cms-24051
Reddit: https://www.reddit.com/r/androiddev/
Create Non XML based layouts (with ANKO):
Kotlin v JAVA: http://androiddeveloper.galileo.edu/2017/10/16/kotlin-vs-java-what-is-the-difference/
Read more about Android Studio 3: http://www.technoblogpost.com/android-studio-3-0/
Jetbrains Android Studio Guidelines: https://www.jetbrains.com/help/idea/2016.2/general-guidelines.html
Donate and make this blog better
Ask a question or recommend an article
v1.57 added Async calls, app icon, misc screenshots, Anko alert, email, sms, share code, permissions, network download etc.
A