- App Creation Studio
-
Ідеї
+1
Виконано
How to include richly formatted text in your app
Wire provides a simple, yet effective <text> tag for displaying text anywhere in your app. However, the underlying native component that the engine uses to render the text does not support rich text formatting such as bolding, underlining etc. So what is a developer to do when complex text formatting is required?
HTML!
The <web> tag has some important attributes that can be provided that make it great for rednering all sorts of complex text- anything you can see in a browser can be replicated. Keep in mind- <web> tags are not locked in to the full dimensions of the device screen like Safari- you can provide size, width, and position just like any other object tag in Wire.
The key to making beautiful text that blends in seemlessly with your app is the transparent="yes" and ignoretouches="yes" parameters. This makes the <web> regions see-through and it won't scroll and zoom (because of the ignoretouches). Lets take a look at a simple Wire and the HTML file that drives the text:
First the wire. This one is a little fancier that just some simple text on the screen. It waits for the user to tap somewhere on the screen and then slowly scales up the web object while fading it in and spinning it around for a dramatic effect:
Here is the HTML file that I included in my app in the root folder called formatted.html (notice the file parameter in the <web> tab).
The HTML renders a nice drop cap- and you might see how you could add any other type of formatting required.
And that's pretty much it! You have a nicely formatted piece of text that you can manipulate in the same manner as you would any other object it wire.
HTML!
The <web> tag has some important attributes that can be provided that make it great for rednering all sorts of complex text- anything you can see in a browser can be replicated. Keep in mind- <web> tags are not locked in to the full dimensions of the device screen like Safari- you can provide size, width, and position just like any other object tag in Wire.
The key to making beautiful text that blends in seemlessly with your app is the transparent="yes" and ignoretouches="yes" parameters. This makes the <web> regions see-through and it won't scroll and zoom (because of the ignoretouches). Lets take a look at a simple Wire and the HTML file that drives the text:
First the wire. This one is a little fancier that just some simple text on the screen. It waits for the user to tap somewhere on the screen and then slowly scales up the web object while fading it in and spinning it around for a dramatic effect:
<wire>
<datasources>
<!-- datasources go here -->
</datasources>
<styles>
<!-- styles go here -->
</styles>
<classes>
<!-- classes go here -->
</classes>
<main>
<panel name="background" width="100%" height="100%" background="#888888" onclick="test" clicktarget="../text"></panel>
<web name="text" file="formatted.html" width="75%" height="100" align="center" valign="center" pagetofit="no" ignoretouches="yes" transparent="yes" shadowradius="3" shadowopacity=".6" shadowxoffset="3" shoadowyoffest="3" alpha="0"></web>
<!-- main wire hierarchy -->
</main>
<actions>
<action name="test">
<scale width="100%" height="100%" time="3"/>
<scale width="1" height="1" align="center" valign="center"/>
<scale width="75%" height="100" align="center" valign="center" time="3" delay=".1"/>
<alpha value="1" time="3" delay=".1"/>
<rotate degrees="720" time="3" delay=".1"/>
</action>
<!-- actions go here -->
</actions>
</wire>
Here is the HTML file that I included in my app in the root folder called formatted.html (notice the file parameter in the <web> tab).
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Drop Caps 1</title>
<style type="text/css" media="all">
body {
font: 100%/1.5 arial, helvetica, sans-serif;
}
.firstletter {
float: left;
font-size: 3em;
line-height: 1;
font-weight: bold;
margin-right: 0.2em;
}
</style>
</head>
<body>
<p><span class="firstletter">O</span>nce upon a time in a blueberry bubblegum land covered in pink violets that swayed to the rhythm of "My Baby Just Cares for Me" there lived a podgy yet attractive raspberry fairy called Bedooda. Bedooda was as tall as a button bush and as intelligent as a peach mystic from the Unscented Hills (not the Scented Hills - the mystics there were not too bright) and was an adored member of the raspberry family but she was an unhappy raspberry fairy. As unhappy as a lost sunfish from the Sweet Spaghetti River.</p>
</body>
</html>
The HTML renders a nice drop cap- and you might see how you could add any other type of formatting required.
And that's pretty much it! You have a nicely formatted piece of text that you can manipulate in the same manner as you would any other object it wire.
Служба підтримки клієнтів працює на UserEcho
