Beagle v1.5 is no longer actively maintained. The documented version you are viewing may contain deprecated functionality. For up-to-date documentation, see the latest version .
Live Preview is a visualization resource that helps with layout
development. It allows the screens in development to be rendered and you don’t have to run your backend server to alter the layout, which reduces a screen’s development time.
In other words, when a developer edits a code defining a screen, he can use the plugin so that the updates are communicated to the client and it renders them. This way, it’s possible to view the change without running a back-end server.
WebSocket
on port: 9721
.To use Live Preview
, you must:
BeaglePreview
plugin;You must have a configured BFF with Beagle to use Live Preview. In case you haven’t done it, click here to download an initial project. As an alternative, follow our tutorial on how to implement a Beagle configured backend.
To install BeaglePreview
, See Live Preview plugin for IntelliJ.
The following steps allow you to view a screen defined in the backend using Live Preview:
@BeaglePreview
.After this, Live Preview will be capable of receiving the developed screen to be rendered. Some interesting points on the example below:
ScreenBeagleBuilder
class.buildPreview
function is annotated with @BeaglePreview
and, therefore, the sender of the screen to be rendered by the plugin.@BeaglePreview
fun buildPreview() = ScreenBeagleBuilder()
class ScreenBeagleBuilder: ScreenBuilder {
override fun build() = Screen(
child = Container(
children = listOf(
Text("Live Preview!!!")
)
)
)
}
If your function is recognized by the plugin, Beagle’s logo will appear as a button to the left of the function. When clicking this button, BeaglePreview
will push the layout to the client (frontend application), allowing it to update your layout instantly!
See the example below:
After running the plugin on some function, you only need to save the changes done in your layout so that the Live Preview updates the screen being rendered by the frontend. It does this by compiling your modified code and verifying if there is some change and, if there is, push your new layout to the client.
Once you have configured your backend, the next step is to configure the frontend’s application emulator for a Beagle Android or iOS project.
To make this installation, your gradle
file must contain the following fragment:
The latest Beagle’s version:
// Add in your plugins
apply plugin: 'kotlin-kapt'
// Add in your app level dependency
ext.beagle_version = "${beagle_version}"
dependencies {
implementation "br.com.zup.beagle:android:$beagle_version"
kapt "br.com.zup.beagle:android-processor:$beagle_version"
debugImplementation "br.com.zup.beagle:android-preview:$beagle_version"
}
On ext.beagle_version = "${beagle_version}"
, insert the Beagle’s release version on the place of ${beagle.version}
. That means that you put the Beagle’s version indicated on the blue badge, but without the v character.
For example: undefined-ext.beagle.version = "0.2.8"
Once you made it, you can update your dependencies.
First of all, it’s necessary to state a PreviewActivity
on your application’s manifest to show a preview:
It’s not necessary to create, in fact, an Activity because it’s already internally created on Beagle. You should only refer it on your manifest indicating that it’s part of Activities' hall accessible on this application.
Copy and paste the Activity below on your AndroidManifest
:
...
<application>
...
<activity
android:exported="true"
android:name="br.com.zup.beagle.android.preview.PreviewActivity"
android:theme="@style/AppTheme.NoToolbar"/>
</application>
</manifest>
As well as in BeagleActivity
, you must inform onPreviewActivity
state that the theme has not the ActionBar,
because Beagle already coordinates this component.
Another important point is that you have to enable the exported flag so it can start through ADB
After you finished the previous configurations, you must start the IntelliJ plugin by clicking on Beagle’s symbol next to the function that notes @BeaglePreview
and opensPreviewActivity
to receive the updates sent from BFF to be automatically rendered.
PreviewActivity
through intent
, you just have to call the intent below to see the emulator’s screen:startActivity(PreviewActivity.newIntent(this))
However, if you prefer to start through ADB, just call the method:
adb shell am start -n applicationpackagename/br.com.zup.beagle.android.preview.PreviewActivity
For more information about your package, access the attribute’s package on yourAndroidManifest
’s file
You can also view the screen you’re creating by an Android device
. To do so, it’s necessary to inform your network’s IP
on the intent
that calls the Live Preview screen.
Live Preview’s Activity connects to the Backend
’s screen through the client’s websocket
connection.
This client
needs to know which IP
must be used to establish the connection.
PreviewActivity
through device
, you just have to call the intent
below so you can see the screen on your device:startActivity(
PreviewActivity
.newIntent(
this,
endpoint = "http://myIP:9721"
)
)
To make the installation, your pod file must contain the following fragments:
...
pod 'BeagleUI', :git => 'https://github.com/ZupIT/beagle.git'
pod 'BeagleUI/Preview', :git => 'https://github.com/ZupIT/beagle.git'
...
After that, you can update your dependencies:
$ pod install
The user must present the preview’s controller of any visible UIViewController
with BeaglePreview.present(in:self) code.
Once you made it, the preview controller will connect to a plugin and start to listen the received messages about layout change.
On the hypothetical example below, you can see how the UIViewController must be shown:
import BeagleUI
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
BeaglePreview.present(in: self)
}
}
When using Live Preview, there are two important points to keep in mind:
@BeaglePreview
annotation works with public methods with no parameters outside any class or in a public class that has a constructor with no parameters. See the snippets below.class UnsupportedConstructor(thing: Any) {
@BeaglePreview
fun preview() = Text(":(")
}
class SupportedPrimaryConstructor {
@BeaglePreview
fun preview() = Text(":)")
}
class SupportedBySecondaryConstructor(thing: Any) {
constructor() : this("solved")
@BeaglePreview
fun preview() = Text(":)")
}
class MethodSupport {
@BeaglePreview
fun supportedMethod() = Text(":)")
@BeaglePreview
fun unsupportedMethod(thing: Any) = Text(":(")
}
@BeaglePreview
fun unsupportedFunction(thing: Any) = Text(":(")
@BeaglePreview
fun supportedFunction() = Text(":)")
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.