94 LXF257 December 2019 http://www.linuxformat.comCODING ACADEMY Proton
(parseInt(this.state.project, 10) + 1)}
onSelect={project => this.setState( {project} )}
row ={0} column = {1}
expand={{h:false, v:false}}>
<RadioButtons.Item>Project 1</RadioButtons.Item>
<RadioButtons.Item>Project 2</RadioButtons.Item>
{console.log(this.state)};
</RadioButtons>
The values are row , column and expand. The first
two you use as expected to make a grid. The expand
value denotes if the component is allowed to expand in
the direction that you mention. Make sure you use an
object – the double curly braces are easy to forget.
There are also other values available, experiment with
them to get to know them.
To be able to save your data to a file, you need to
add some code to the file save and open options.
index.js (File menu)
...
save() {
const filename = Dialog(‘Save’);
if (filename) {
let data = (JSON.stringify(this.state));
console.log(data);
fs.writeFileSync(filename, data );
}
}
open() {
const filename = Dialog(‘Open’);
if (filename) {
let data = fs.readFileSync(filename);
// Data is a string, parsing with JSON);
this.setState(JSON.parse(data));
// Make interface update
this.forceUpdate();
console.log(this.state);
}
}
Now you have the data saved as a string which is
saved to whatever file you choose to use. When you
open the file, you only get the first part of the string
back into the application. The chosen project is not
transferred since setState does not read it out.
The functions we want to use are JSON.stringify
and JSON.parse. They are each other’s counterparts –
stringify makes a string of a JavaScript object. In our
code, we do that when we want to save our file. Next,
when we want to load the file back in, we parse the
JSON file. In production code, you will need to handle
files that do not contain JSON, but that is a bigger issue.
Now we have to make the interface update after we
load it in. We make sure of this with the forceUpdate
function of our main application. When you start getting
serious, your code will start looking messy. It will
become hard to read and each time you have a new
idea, it is hard to find your way around the code. To
solve this, we can use components.Make a component
When you want to make a component, you will use the
object-orientated power of JavaScript. In the file, you
define a class and export it at the end of the file. You
can export by name if you want several modules, or use
the default keyword to add it to your import. Combining
this with React, you get a method to add JSX to your<RadioButtons.Item>Project 1</
RadioButtons.Item>
<RadioButtons.Item>Project 2</
RadioButtons.Item>
</RadioButtons>
</Box>
This code adds how the application reacts when an
item has been selected. For it to work, you must add
project to the state at the top of the class. To style the
buttons, you need some CSS. In Proton Native, this is
achieved with the built-in functions.Make a grid
When you just add buttons in your code, you can
change very few aspects of where the parts go. Your
components will appear somewhere on the screen
without any special order. In this case, you can use
Grid. Grid encapsulates your graphical elements, giving
you the opportunity to set them on the screen where
you want them. When you have done this, every
component has new values they can use to place them
in relation to each other. The RadioButtons code
changes like the code below.
<RadioButtons color=”blue” selected={Your default “Hello
world” application
can be run as soon
as you have set
the files. Whether
Proton actually
rocks is a matter
of opinion.REACT NATIVE FOR DESKTOP
As an alternative to this, you could use the regular React Native and
add a new target. This is what the React Native Desktop team has
done. To use it, you need to download it from GitHub or run a
modification script that adds the ‘desktop’ option: http://bit.ly/
lxf257native. This package modifies the react-native-cli by adding
the react-native-desktop version. You can do this for one project or
globally with react-native init MyDesktopApp --version status-im/
react-native-desktop.
Either way, you have the full development environment ready to
make mobile and desktop applications. Once you have done that, you
have a development server available and you can program as if you
were making mobile applications.
This package compiles using C++ to Qt, making the final binary a
native application. While you are developing, you will have a JavaScript
server running that sends JS files to the Qt application. The
application is your code that was built when you start ‘react-native
desktop’. During development, you also have the ‘Bundler’ running.
This part creates a single package of all JS files to QtApplication so
execution can be in a single file.
The approach with this package is different but results in a Qt
application that goes on your desktop.Make sure you
consider the
property type
extra-carefully
when you use a
new component.
You can be
stuck for hours
just figuring out
that you should
have used an
object instead
of a string.94 LXF257December 2019 9992Decmbr 01ta2k 1
CODING ACADEMY Proton
(parseInt(this.state.project, 10) + 1)}
onSelect={project => this.setState( {project} )}
row ={0} column = {1}
expand={{h:false, v:false}}>
<RadioButtons.Item>Project 1</RadioButtons.Item>
<RadioButtons.Item>Project 2</RadioButtons.Item>
{console.log(this.state)};
</RadioButtons>
The values are row , column and expand. The first
two you use as expected to make a grid. The expand
value denotes if the component is allowed to expand in
the direction that you mention. Make sure you use an
object – the double curly braces are easy to forget.
There are also other values available, experiment with
them to get to know them.
To be able to save your data to a file, you need to
add some code to the file save and open options.
index.js (File menu)
...
save() {
const filename = Dialog(‘Save’);
if (filename) {
let data = (JSON.stringify(this.state));
console.log(data);
fs.writeFileSync(filename, data );
}
}
open() {
const filename = Dialog(‘Open’);
if (filename) {
let data = fs.readFileSync(filename);
// Data is a string, parsing with JSON);
this.setState(JSON.parse(data));
// Make interface update
this.forceUpdate();
console.log(this.state);
}
}
Now you have the data saved as a string which is
saved to whatever file you choose to use. When you
open the file, you only get the first part of the string
back into the application. The chosen project is not
transferred since setState does not read it out.
The functions we want to use are JSON.stringify
and JSON.parse. They are each other’s counterparts –
stringify makes a string of a JavaScript object. In our
code, we do that when we want to save our file. Next,
when we want to load the file back in, we parse the
JSON file. In production code, you will need to handle
files that do not contain JSON, but that is a bigger issue.
Now we have to make the interface update after we
load it in. We make sure of this with the forceUpdate
function of our main application. When you start getting
serious, your code will start looking messy. It will
become hard to read and each time you have a new
idea, it is hard to find your way around the code. To
solve this, we can use components.Make a component
When you want to make a component, you will use the
object-orientated power of JavaScript. In the file, you
define a class and export it at the end of the file. You
can export by name if you want several modules, or use
the default keyword to add it to your import. Combining
this with React, you get a method to add JSX to your<RadioButtons.Item>Project 1</
RadioButtons.Item>
<RadioButtons.Item>Project 2</
RadioButtons.Item>
</RadioButtons>
</Box>
This code adds how the application reacts when an
item has been selected. For it to work, you must add
project to the state at the top of the class. To style the
buttons, you need some CSS. In Proton Native, this is
achieved with the built-in functions.Make a grid
When you just add buttons in your code, you can
change very few aspects of where the parts go. Your
components will appear somewhere on the screen
without any special order. In this case, you can use
Grid. Grid encapsulates your graphical elements, giving
you the opportunity to set them on the screen where
you want them. When you have done this, every
component has new values they can use to place them
in relation to each other. The RadioButtons code
changes like the code below.
<RadioButtons color=”blue” selected={Your default “Hello
world” application
can be run as soon
as you have set
the files. Whether
Proton actually
rocks is a matter
of opinion.REACTNATIVEFORDESKTOP
As an alternative to this, you could use the regular React Native and
add a new target. This is what the React Native Desktop team has
done. To use it, you need to download it from GitHub or run a
modification script that adds the ‘desktop’ option: http://bit.ly/
lxf257native. This package modifies the react-native-cli by adding
the react-native-desktop version. You can do this for one project or
globally with react-native init MyDesktopApp --version status-im/
react-native-desktop.
Either way, you have the full development environment ready to
make mobile and desktop applications. Once you have done that, you
have a development server available and you can program as if you
were making mobile applications.
This package compiles using C++ to Qt, making the final binary a
native application. While you are developing, you will have a JavaScript
server running that sends JS files to the Qt application. The
application is your code that was built when you start ‘react-native
desktop’. During development, you also have the ‘Bundler’ running.
This part creates a single package of all JS files to QtApplication so
execution can be in a single file.
The approach with this package is different but results in a Qt
application that goes on your desktop.Makesureyou
considerthe
propertytype
extra-carefully
whenyouusea
newcomponent.
Youcanbe
stuckforhours
justfiguringout
thatyoushould
haveusedan
objectinstead
ofa string.