language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-08-04 18:58:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Fixes obvious grammar errors (#7229)

Browse source
This commit is contained in:
Maksym Hazevych 2024-12-30 17:44:51 +02:00 • committed by GitHub
parent 3ea8be06e8
commit 7293bbea97
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 16 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

32
docs/astro/src/content/docs/guide/language/concepts/slint-language.mdx
View file

@ -7,7 +7,7 @@ description: Slint Language
import Link from '/src/components/Link.astro';
The objective of the concepts section of the guide is to give you an overview of the language from a high level. If you want to
dive straight in then the details check out the the <Link type="slintFile" label="coding section"/> and language reference
dive straight in the details then check out the <Link type="slintFile" label="coding section"/> and the language reference
sections.
This section gives you an insight into the thinking behind the language and the core concepts it is made up from.
@ -36,7 +36,7 @@ document.body.appendChild(button);
Take this simple web example. A button is created. Then a property to show 'Click me' text is text. At this point
technically the button exists, but it won't show up as its not attached to anything. So the final line
makes it a parent of the main view.
makes it a child of the main view.
```js
const buttonWithListener = document.createElement('button');
@ -48,16 +48,16 @@ document.body.appendChild(buttonWithListener);
```
In this second example a button is created and an event listener is added. Within that is a callback
function to log out that the button is pressed. It's a lot of code to so simple things.
function to log out that the button is pressed. It's a lot of code to do simple things.
Its quite abstract. For example once a few more buttons and components are added its almost impossible
It's quite abstract. For example once a few more buttons and components are added its almost impossible
to be able to think how the real interface would look. It's hard to think about the design of a UI
using this kind of code.
It's also too complex to edit without understanding how to code. This means UI designers cannot work
hands on to ensure all their design intent is implemented. They are forced to use other tools and frameworks
to crate prototypes and design guides that may look or behave differently to the software used to implement
the production UI. It should not have to be this way.
to create prototypes and design guides that may look or behave differently to the actual UI implementation.
It doesn't have to be this way.
## Declarative Style
@ -87,9 +87,9 @@ struct ContentView: View {
These languages take normal code and let it be used in a declarative way. But it's
still functions with arguments that act as properties. It is simpler and behavior
such as parent child relationships can be inferred.
such as parent child relationships can be inferred.
For Slint instead of tweaking a normal language to be more declarative we instead
For Slint, instead of tweaking a normal language to be more declarative, we
created a pure declarative language from the ground up.
@ -97,7 +97,7 @@ created a pure declarative language from the ground up.
One attempt to solve the problem of describing a UI in code has been to create a separate static markup language.
Platforms such as Android and [WPF](https://docs.microsoft.com/en-us/dotnet/desktop/wpf/) have done this. The UI
is described in an XML like format. While the rest of the code is written in both a separate language and also
is described in an XML-like format. While the rest of the code is written in both a separate language and also
separate files. Known as a code behind file. The issue here is that XML, despite claims to the contrary, is not
human readable or editable. It's also too static and rigid and it can be frustrating to jump between the UI file
and the separate code behind file to describe the behavior of the UI.
@ -105,13 +105,13 @@ and the separate code behind file to describe the behavior of the UI.
Meanwhile the React web framework has solved this problem by using JSX. HTML, CSS and JavaScript can be mixed
together in a single file. On one hand this is great as it means you can use the same language to describe the UI
layout and behavior. On the other hand there is no limit to what code you can put in a JSX file. Logic for handling
network requests, processing data and pretty much anything quickly ends up mixed in with UI code. It leads to an
issue where it can be fast to create an initial application, but it becomes so hard to maintain that it's too
network requests, processing data and pretty much anything quickly ends up mixed in with UI code. It leads to the
issue where it can be fast to create an initial application, but it becomes so hard to maintain it that it's too
slow or costly to evolve the application.
## A True Declarative UI Language
Slint provides a declarative language to describe an applications user interface
Slint provides a declarative language to describe an application's user interface
```slint showLineNumbers=true no-test
Rectangle {
@ -124,16 +124,16 @@ Rectangle {
}
```
If you can understand this Slint code you already have grasped a majority of how simple to use the language is.
If you can understand this Slint code — you've already grasped a majority of how simple to use the language is.
On line 2 we declare a `Button`. On line 3 we set its `text` property to `"Click me!"` and on line 4
we set a callback to print out "Button clicked!" to the console via the built in `debug` function.
The Slint compiler will take this code and see it needs to generate a Rectangle that has a Button as a child.
The Slint compiler will take this code and see that it needs to generate a Rectangle that has a Button as a child.
Similarly, when the clicked callback activates, it will run the `debug` function. There is no need to think
about component and even listener life cycles.
about component and event listener life cycles.
With the Slint language you can think much more closely to how a user interface looks and behaves. Instead of
describing the 'how', the how should the details be implemented in traditional code, you instead "declare" how
describing the 'how', the how should the details be implemented in traditional code, you "declare" how
the interface should look and behave. Hence Slint being a 'declarative UI language'.
It's not only simpler for software developers to use, it's also now something designers can potentially edit or