Skip to content

Commit

Permalink
update: example of applyStyle and applyFlex on the get started pages (#…
Browse files Browse the repository at this point in the history 
…583)

* update example of applyStyle and applyFlex on the get started pages

* Update content/en/get-started/creating-a-project-from-scratch/case-backend.md

Co-authored-by: carlossteinzup <60155378+carlossteinzup@users.noreply.github.com>

* remove json space

Co-authored-by: carlossteinzup <60155378+carlossteinzup@users.noreply.github.com>
  • Loading branch information
@luisoliveirazup @carlossteinzup
luisoliveirazup and carlossteinzup committed May 27, 2021
1 parent 4a5732a commit 3350a73
Show file tree
Hide file tree
Showing 8 changed files with 268 additions and 260 deletions.
17 changes: 7 additions & 10 deletions ...eating-a-project-from-scratch/case-android/design-system-with-beagle-android.md
View file
Expand Up @@ -137,16 +137,13 @@ Hold the crtl button and put the mouse over the `Text` component and you will se

```kotlin
Text(
text = "Hello Beagle",
styleId = "Title.Text.Orange"
).applyStyle(
Style(
margin = EdgeValue(
top = 16.unitReal()
),
flex = Flex(alignSelf = AlignSelf.CENTER)
)
),
text = "Hello Beagle!",
styleId = "Title.Text.Orange"
).setStyle {
margin = EdgeValue.only(top = 16)
}.setFlex {
alignSelf = AlignSelf.CENTER
}
```
Don't worry about other configurations and elements like `.applyStyle`. Just make sure that nothing else is modify on the example and keep it as showed here.

Expand Down
134 changes: 62 additions & 72 deletions content/en/get-started/creating-a-project-from-scratch/case-backend.md
View file
Expand Up @@ -75,45 +75,27 @@ The first class that we will create is the Builder. It is in this file that the
4. In this step, you can copy and paste the code below into your class:

```kotlin
import br.com.zup.beagle.core.Style
import br.com.zup.beagle.ext.applyStyle
import br.com.zup.beagle.ext.unitReal
import br.com.zup.beagle.widget.Widget
import br.com.zup.beagle.widget.action.Alert
import br.com.zup.beagle.widget.core.AlignSelf
import br.com.zup.beagle.widget.core.EdgeValue
import br.com.zup.beagle.widget.core.Flex
import br.com.zup.beagle.widget.core.TextAlignment
import br.com.zup.beagle.widget.layout.Container
import br.com.zup.beagle.widget.layout.Screen
import br.com.zup.beagle.widget.layout.ScreenBuilder
import br.com.zup.beagle.widget.ui.ImagePath
import br.com.zup.beagle.widget.ui.Text

object ScreenBeagleBuilder : ScreenBuilder {
override fun build() = Screen(
child = Container(
children = listOf(
Text(
text = "Hello Beagle!"
).applyStyle(
Style(margin = EdgeValue(top = 16.unitReal()),
flex = Flex(alignSelf = AlignSelf.CENTER)
)
),
Text(
text = "Beagle is a cross-platform framework which provides usage of the " +
"Server-Driven UI concept, natively in iOS, Android and Web applications. " +
"By using Beagle, your team could easily change application's layout and" +
" data by just changing backend code."
).applyStyle(
Style(margin = EdgeValue(
left = 16.unitReal(),
right = 16.unitReal(),
top = 20.unitReal()
)
)
)
text = "Hello Beagle!",
styleId = "Title.Text.Orange"
).setStyle {
margin = EdgeValue.only(top = 16)
}.setFlex {
alignSelf = AlignSelf.CENTER
},
Text(
text = "Beagle is a cross-platform framework which provides usage of the " +
"Server-Driven UI concept, natively in iOS, Android and Web applications. " +
"By using Beagle, your team could easily change application's layout and" +
" data by just changing backend code.",
styleId = "Description.Text.Orange"
).setStyle {
margin = EdgeValue.only(top = 20, left = 16, right = 16)
}
)
)
)
Expand Down Expand Up @@ -182,44 +164,52 @@ A JSON structure must appear on your screen similar to the structure below:

```kotlin
{
"_beagleComponent_" : "beagle:screenComponent",
"child" : {
"_beagleComponent_" : "beagle:container",
"children" : [ {
"_beagleComponent_" : "beagle:text",
"text" : "Hello Beagle!",
"style" : {
"margin" : {
"top" : {
"value" : 16.0,
"type" : "REAL"
}
},
"flex" : {
"alignSelf" : "CENTER"
}
}
}, {
"_beagleComponent_" : "beagle:text",
"text" : "Beagle is a cross-platform framework which provides usage of the Server-Driven UI concept, natively in iOS, Android and Web applications. By using Beagle, your team could easily change application's layout and data by just changing backend code.",
"style" : {
"margin" : {
"left" : {
"value" : 16.0,
"type" : "REAL"
},
"top" : {
"value" : 20.0,
"type" : "REAL"
},
"right" : {
"value" : 16.0,
"type" : "REAL"
}
}
}
} ]
}
"_beagleComponent_":"beagle:screenComponent",
"child":{
"_beagleComponent_":"beagle:container",
"children":[
{
"_beagleComponent_":"beagle:text",
"text":"Hello Beagle!",
"style":{
"cornerRadius":{},
"size":{},
"margin":{
"top":{
"value":16,
"type":"REAL"
}
},
"flex":{
"alignSelf":"CENTER"
}
}
},
{
"_beagleComponent_":"beagle:text",
"text":"Beagle is a cross-platform framework which provides usage of the Server-Driven UI concept, natively in iOS, Android and Web applications. By using Beagle, your team could easily change application's layout and data by just changing backend code.",
"style":{
"cornerRadius":{},
"size":{},
"margin":{
"left":{
"value":16,
"type":"REAL"
},
"top":{
"value":20,
"type":"REAL"
},
"right":{
"value":16,
"type":"REAL"
}
},
"flex":{}
}
}
]
}
}
```

Expand Down
54 changes: 21 additions & 33 deletions ...arted/creating-a-project-from-scratch/case-ios/defining-styles-on-beagle-ios.md
View file
Expand Up @@ -189,35 +189,26 @@ class FirstScreenBuilder : ScreenBuilder {
child = Container(
children = listOf(
Text(
text = "Hello Beagle",
text = "Hello Beagle!",
styleId = "Title.Text.Orange"
).applyStyle(
Style(
margin = EdgeValue(
top = 16.unitReal()
),
flex = Flex(alignSelf = AlignSelf.CENTER)
)
),
).setStyle {
margin = EdgeValue.only(top = 16)
}.setFlex {
alignSelf = AlignSelf.CENTER
},
Text(
text = "Beagle is a cross-platform framework which provides " +
"usage of the Server-Driven UI concept, natively in " +
"iOS, Android and Web applications. By using Beagle, " +
"your team could easily change application's layout " +
"and data by just changing backend code.",
text = "Beagle is a cross-platform framework which provides usage of the " +
"Server-Driven UI concept, natively in iOS, Android and Web applications. " +
"By using Beagle, your team could easily change application's layout and" +
" data by just changing backend code.",
styleId = "Description.Text.Orange"
).applyStyle(
Style(
margin = EdgeValue(
left = 16.unitReal(),
right = 16.unitReal(),
top = 20.unitReal()
)
)
)
).setStyle {
margin = EdgeValue.only(top = 20, left = 16, right = 16)
}
)
)
)
}
```

To add a style to a text element, you must list the style name within the text component, as shown below. Don't forget to separate the components with a comma. Hold the `Ctrl` button and place the mouse over the Text component and will see the list of attributes that this component can receive here on the backend. For now, we will only use `Style`.
Expand All @@ -228,16 +219,13 @@ To add a style to a text element, you must list the style name within the text c

```swift
Text(
text = "Hello Beagle",
styleId = “Tille.Text.Organge”
).applyFlex(
Flex(
margin = EdgeValue(
top = 16.unitRal(Real)
),
alignSelf = Alignment.CENTER
)
),
text = "Hello Beagle!",
styleId = "Title.Text.Orange"
).setStyle {
margin = EdgeValue.only(top = 16)
}.setFlex {
alignSelf = AlignSelf.CENTER
}
```

And done, that's all we're gonna do on our backend so far.
Expand Down
60 changes: 44 additions & 16 deletions content/en/get-started/creating-a-project-from-scratch/case-web.md
View file
Expand Up @@ -176,25 +176,53 @@ On your react project, navigate to the `/public` folder and create a new file na

```text
{
"_beagleComponent_": "beagle:container",
"children": [
{
"_beagleComponent_":"beagle:screenComponent",
"child":{
"_beagleComponent_":"beagle:container",
"children":[
{
"_beagleComponent_":"beagle:text",
"text":"Hello Beagle"
},
{
"text":"Hello Beagle!",
"style":{
"cornerRadius":{},
"size":{},
"margin":{
"top":{
"value":16,
"type":"REAL"
}
},
"flex":{
"alignSelf":"CENTER"
}
}
},
{
"_beagleComponent_":"beagle:text",
"text":"Beagle is a cross-platform framework which provides usage of the Server-Driven UI concept, natively in iOS, Android and Web applications. By using Beagle, your team could easily change application's layout and data by just changing backend code.",
"_beagleComponent_":"beagle:text",
"style":{
"padding":{
"top":{
"value":10,
"type": "REAL"
}
}
},
"text":"Beagle is a cross-platform framework which provides usage of the server Driven UI concept,natively in iOS, Android and Web applications. By using Beagle, your team could easily change application's layout and data by just changing backend code"
}
]
"cornerRadius":{},
"size":{},
"margin":{
"left":{
"value":16,
"type":"REAL"
},
"top":{
"value":20,
"type":"REAL"
},
"right":{
"value":16,
"type":"REAL"
}
},
"flex":{}
}
}
]
}
}
```

Expand Down
17 changes: 7 additions & 10 deletions ...eating-a-project-from-scratch/case-android/design-system-with-beagle-android.md
View file
Expand Up @@ -132,16 +132,13 @@ Segure o botão Ctrl e coloque o mouse sobre o componente `Text` e você verá a

```kotlin
Text(
text = "Hello Beagle",
styleId = "Title.Text.Orange"
).applyStyle(
Style(
margin = EdgeValue(
top = 16.unitReal()
),
flex = Flex(alignSelf = AlignSelf.CENTER)
)
),
text = "Hello Beagle!",
styleId = "Title.Text.Orange"
).setStyle {
margin = EdgeValue.only(top = 16)
}.setFlex {
alignSelf = AlignSelf.CENTER
}
```

Por enquanto, não se preocupe com os outros elementos, como `.applyStyle` e demais configurações. Apenas garanta que nada mais seja modificado no exemplo e procure mantê-lo como mostramos agora.
Expand Down

0 comments on commit 3350a73

Please sign in to comment.