Your comments
Still believe a text template would be the ideal solution, just a matter of how that content will be delivered to that text template. Will the content, that you mentioned will be housed in the app, be within a database? As having all the content managed within the WIRE would be cumbersome.
Regardless, you can really call your data into the text template in a variety of ways, really will depend on the volume and how that data is stored in the app. The example below would be using vars that would be reassigned each time a user selected a new block of dataset to read.
Regardless, you can really call your data into the text template in a variety of ways, really will depend on the volume and how that data is stored in the app. The example below would be using vars that would be reassigned each time a user selected a new block of dataset to read.
<texttemplate name="reader" ><![CDATA[
<html>
<head>
<meta content="width=100%, minimum-scale=1, maximum-scale=1, initial-scale=1" name="viewport">
<meta name="apple-mobile-web-app-capable" content="no">
</head>
<body>
<h1>[var:currentHeadline]</h1>
<h2>[var:currentSub]</h2>
<h3>[var:currentAuthor] <span> | [var:currentDate]</span></h3>
[var:currentBody]
</body>
</html>
]]></texttemplate>
iOS is actually very intelligent in handling and serving up the appropriate image for your app. As the developer, all you must do is ensure that your corresponding retina images are in the same location with the non-retina and contain the amendment of '@2x' on the filename. *Notice that it is a lowercase 'x', iOS is case sensitive in this situation.
So in your example and in all situations within your wire, you only have to declare the non-retina image. iOS will do the rest.
Hope this helps!
So in your example and in all situations within your wire, you only have to declare the non-retina image. iOS will do the rest.
Hope this helps!
I'll give a generic example below, however if this doesn't fill your needs, please let us know how and what you are looking at achieving and we'll craft a working example to those needs.
Text templates have a wide variety of uses, from injecting your feed content that may not be HTML encoded into a 'template' of sorts that contains all of your HTML and styling definitions, as well as using text-templates within text-templates to facilitate reuse of blocks of content that may be shared, i.e. having style-definitions (css) that are uses across different data injections.
If you are grabbing HTML content from a feed and placing that within a object (uiwebview), you might use something like this.
You'll notice in the example above, I am referencing my class parameters being used to inject the feeds content.
Then to make use of this text-template, I use an action like the following:
The assign action is looking for the object with an alias of MyWebObjectAlias, so this would be whatever you have named/aliased your web object and then telling the assign to place the content of the value attribute within the 'html' attribute of the named object MyWebObjectAlias.
Breaking down the [template:reader.content], we are calling for a text-template object with the name 'reader' and asking for it's content.
Again, this is the first of many things you can do with the text template. Let us know if we can refine this example for your needs
Text templates have a wide variety of uses, from injecting your feed content that may not be HTML encoded into a 'template' of sorts that contains all of your HTML and styling definitions, as well as using text-templates within text-templates to facilitate reuse of blocks of content that may be shared, i.e. having style-definitions (css) that are uses across different data injections.
If you are grabbing HTML content from a feed and placing that within a object (uiwebview), you might use something like this.
<texttemplate name="reader" ><![CDATA[
<html>
<head>
<meta content="width=100%, minimum-scale=1, maximum-scale=1, initial-scale=1" name="viewport">
<style> body{width:80%;margin:0 auto;color:#222222;font-family:Georgia;font-size:17px;line-height:1.5em;background-color:#eeeeee;padding:50px 20px 50px 10px;} h1 {color:#3b3b3c;font-size:28;line-height:1.15em;margin-top:0px;text-align:center;} h2{margin-bottom:10px;color:#d7554b;font-size:15;font-weight:bold;font-family:helvetica;text-transform:uppercase;text-align:center;} h3{font-size:15px;font-weight:normal;color:#898989;text-align:center;border-top:1px solid #bbb;border-bottom:1px solid #bbb;padding:5px 0px;} h3 span{white-space:nowrap;font-style:italic;} p {text-align:justify;}img {max-width:100% !important;} a {color:#444444;border-bottom:1px solid #b2372c;text-decoration:none;} img {display:block;margin:0 auto;margin-bottom:25px;} span.image-rss {display:none;} </style>
</head>
<body>
<h2>[param:category]</h2>
<h1>[param:title]</h1>
<h3> <span>by [param:creator] </span> </h3>
[param:content]
</body>
</html>
]]></texttemplate>
You'll notice in the example above, I am referencing my class parameters being used to inject the feeds content.
Then to make use of this text-template, I use an action like the following:
<action name="assignContent">
<assign property="object:MyWebObjectAlias.html" value="[template:reader.content]" />
</action>
The assign action is looking for the object with an alias of MyWebObjectAlias, so this would be whatever you have named/aliased your web object and then telling the assign to place the content of the value attribute within the 'html' attribute of the named object MyWebObjectAlias.
Breaking down the [template:reader.content], we are calling for a text-template object with the name 'reader' and asking for it's content.
Again, this is the first of many things you can do with the text template. Let us know if we can refine this example for your needs
A panel is a lot like a div in the HTML world. It can be a container, a point of interaction or be used alone or in tandem with other objects to create graphical elements.
When you create a panel you must define a 'name' attribute along with dimensions.
Wire objects all start at 0,0 (top left) of their parent, in order to make them aware of siblings you can use attribute like 'bottomof', 'topof'...to make them aware of the stack.
It might be helpful to empty or comment out your main.wire file and try simply starting with a blank wire and build and experiment from there.
When you create a panel you must define a 'name' attribute along with dimensions.
Wire objects all start at 0,0 (top left) of their parent, in order to make them aware of siblings you can use attribute like 'bottomof', 'topof'...to make them aware of the stack.
It might be helpful to empty or comment out your main.wire file and try simply starting with a blank wire and build and experiment from there.
Customer support service by UserEcho
One trick I like to use within Wire when I need to animatie a sequence of images is a combination of load, conditional statements and an action that loops over itself to give me optimal control of my sequence.
First the finish action blocks of code we'll be using:
<main>
<image name="AnimatedSeq" alias="ANIMATED-SEQ" />
</main>
<action oninit="yes">
<assign property="var:frameCount" value="0" />
</action>
<action name="loop">
<if lhs="[var:frameCount]" operator="lte" rhs="26">
<sync delay="0">
<load source="graphics/mySeq[var:frameCount].jpg" target="ANIMATED-SEQ"/>
<assign property="var:frameCount" value="[eval: [var:frameCount] + 1]" />
<if lhs="[var:frameCount]" operator="lt" rhs="26">
<play action="loop"/>
</if>
<if lhs="[var:frameCount]" operator="=" rhs="26">
<alert message="I'm Done" />
</if>
</sync>
</if>
</action>
First let's look at the image we will be replacing in the sequence.
<image name="AnimatedSeq" alias="ANIMATED-SEQ" />
Nothing fancy here, we simply just place the first image in the sequence that we want the user to see.
Next we want to create a var that we can use to track the sequence and to use in showing the appropriate image. So we have a simple oninit action that sets the var:frameCount to 0 upon loading the app.
<assign property="var:frameCount" value="0" />This var shows that we want to make sure that our images are sequenced and named appropriately. So instead of the image strip requirement of a prefix and 4 digit number, we can simplify this. We CAN optionally add a prefix, but it's not required, here I used 'mySeq' then just start you numbering at 0.
mySeq0.jpg, mySeq1.jpg mySeq2.jpg, mySeq3.jpg, etc...
In my example above you will see the number '26' in a few places, this is the total images my sequence requires.
Let's take a look at the action 'loop'.
I have a conditional statement that leads off the action and checks the var:frameCount value.
<if lhs="[var:frameCount]" operator="lte" rhs="26">This will make sure that once we kick off this action to animate our sequence that we are within the bounds of our sequence numbering and then using that var: perform a load action on the source of the image.
<load source="graphics/mySeq[var:frameCount].jpg" target="ANIMATED-SEQ"/>Here, since we are starting the animation we will see mySeq0.jpg first be placed in the load. Then immediately following the load (remember we are in a sync) we increment the var:frameCount with an eval: statement:
<assign property="var:frameCount" value="[eval: [var:frameCount] + 1]" />Now we will create two sibling conditional statement to fork the action and decide if we are done with the animation or need to loop the action over itself and continue incrementing the sequence until we hit 26.
<if lhs="[var:frameCount]" operator="lt" rhs="26">The first conditional checks to see if our var:frameCount is less than our last slide, 26. If so, we ask the action to start again. And in doing so the action will now go and load slide mySeq1.jpg and increment the var:frameCount to 2 and continue this pattern until it hits our other conditional statement:
<if lhs="[var:frameCount]" operator="=" rhs="26">Once the var:frameCount hits our ceiling in the sequence, I have placed an alert to just verify the sequence has completed.
While this may initial seem like a complex solution to a control iOS provides, the control and sequencing makes the implementation very repeatable and reliable without losing performance on the device. This also gives a very nice introduction into the power of looped actions and conditional statements.
Please let me know if you have any questions.