I have a question about the state attribute.

Let's say I have several sibling objects and they all use the same class. A style is defined in the class (for example, text color). Can you define different text color for the object that has state=on? Or do you have define text color in the object and then change it in the action that changes the state?

One of the key advantages of Wire is it's ability to do so much in so few lines of code as well as crafting code that is reusable across multiple devices.

With the introduction of the tag you may be tempted to code multiple images in your Wire to achieve serving the right image to the right device.

<platform device="iPad">


    <image name="myButton" source="myiPadImage.png" xpos="5%" valign="center"></image>


</platform>


<platform device="iPhone">


    <image name="myButton" source="myiPhoneImage.png" xpos="5%" valign="center"></image>


</platform>   

*please note that iOS takes care of delivering your retina images internally. Simply amend your file names with a '@2x' (myipadimage@2x.png) and iOS will substitute these as requested.

While this will work, this requires you to manage two individual image objects that will share very similar attributes and you will have a wire with a multitude of tags.

The best approach we have found internally at RareWire is the use of to source our images across multiple platforms. This allows us to consolidate our use of the tag as well as keep all of you image needs in a nice tidy block for easy management.

First we will create two platform blocks within our block to single out the use of iPad or iPhone.

<styles>


<platform device="iPad">



</platform>


<platform device="iPhone">



</platform> 


</styles>  

Next, we will create a style that we will place in both blocks.

<styles>


<platform device="iPad">


  <style name="myButton-image" />


</platform>


<platform device="iPhone">


  <style name="myButton-image" />


</platform> 


</styles>  

Then we will source the image within these styles with the appropriate image for the device.

<styles>


<platform device="iPad">


  <style name="myButton-image" source="myiPadImage.png" />


</platform>


<platform device="iPhone">


  <style name="myButton-image" source="myiPhoneImage.png" />


</platform> 


</styles>  

Next all we need to do is remove the reference from the image objects, reference this new style we created and remove the platform tags and extra image object from our first example.

    <image name="myButton" style="myButton-image" xpos="5%" valign="center"></image> 

The final code will look like this

<wire>


  <styles>


    <platform device="iPad">


       <style name="myButton-image" source="myiPadImage.png" />


    </platform>


   <platform device="iPhone">


       <style name="myButton-image" source="myiPhoneImage.png" />


   </platform> 


  </styles> 


  <main>


       <image name="myButton" style="myButton-image" xpos="5%" valign="center"></image> 


  </main>


</wire> 

I now have a nice manageable block of all my universal images as well as simple reuse and simplification of my wire. If I need to alter shared attributes, I can change it once in the section instead of across two image objects.

I have found that I feel I have a better grasp on my image management within the app with this method as well.

Using a combination of the tag and an object you can load additional .wire files into your main.wire file.

The include tag acts as the container for the secondary wire to live while the load action can be used to load the wire file into the include object.

Check out the wire definition for more information on these tags.


<main>
<panel name="issue1" width="45%" height="100%" xpos="10%" ypos="2%" onclick="launch-issue" _wire="ISSUE1.wire" _wirename="Issue1"></panel>
<include name="issue" alias="ISSUE" width="100%" height="100%" background="#000000" alpha="0"></include>
</main>
<actions>
<action name="launch-issue">
<load file="_wire" wirename="_wirename" target="ISSUE" />
</action>
</actions>


where can I find the studio templates to build the app in the beta testing version?

While working on my first app, I've noticed that there are two types of alignment tags. "Alignment" and "align" seem to work on different things. What are the correct use cases for both?

You may use Preview to embed all your links and page jumps within your PDF before you upload it into the studio. Doing so will allow you to add a couple default classes into your wire and instantly have active links and page jump within your app.

Creating your Links in the PDF:

1. Within Preview, open the Annotions Toolbar and select the Link tool.


2. Draw the geometry around the desired area


3. Select 'Page' or 'URL' from the popup as well as entering your URL or page number


4. Repeat for every Link or Page Jump for your TOC

video example

Now with your annotated PDF uploaded into the studio, open your main.wire and add the following two classes to your block.

<class name="weblink">


<panel name="[param:objname]" width="[param:w]" height="[param:h]" xpos="[param:x]" ypos="[param:y]" onclickup="show-web" _url="[param:url]"></panel>


</class>



<class name="pagelink">


<panel name="[param:objname]" width="[param:w]" height="[param:h]" xpos="[param:x]" ypos="[param:y]" onclickup="scroll-to" _page="[param:topage]"></panel>


</class>

Next on your PDF object insert the two following attributes to call the two classes we just created.

<pdf name="mag" alias="MAG" source="myPDF.pdf" height="100%" width="100%" valign="center" spreads="no" covertile="no" tile="yes" orientation="horizontal" pagelinkclass="pagelink" weblinkclass="weblink"></pdf>

You will now have active, tappable areas within your PDF to introduce interactions with your URLs and Page jumps.

The last step will be to create the 's you wish to invoke when a user taps the weblink or pagelink class by editing or creating the appropriate onclick/onclickup event.

Please see the following examples for more detail on those actions:
Action a WebPage

The stack order of wire code is set so that objects living below (lower in the code) their siblings within the main tag are behind in the Z order. If you want to bring an object to the top of the Z order, you can use an attribute called "tofront".

For example:

<panel name="red" width="10%" height="10%" ypos="200">
<panel name=blue" width="10%" height="10%">


The blue box would be in front of the red box according to the Z order.

You asked for it and we delivered. Head over to your portfolio settings and invite anyone to collaborate on your App. Now non-beta users will be sent an invite to join the App Creation Studio and collaborate on your portfolio.

This is really exciting for us as we open the doors to more users in the Studio. Please take advantage of this chance to bring your friends and colleagues on board your projects!

Trouble formatting text. I'm having trouble adding things like italics and breaks to my text. I have limited xml experience so I'm really just trying to apply html tags like words in italics and then making breaks like
. These aren't working though. Is there a way to do this right?

I cannot log into Conduit but I can get into the App creation studio. I've installed Conduit on my iPhone 3gs.

Conduit acts as though it has authenticated but stays stuck on the login screen.

These will live within the Developer Resources sometime in the future, but for now, check them out here.

Intro to The App Creation Studio

Intro to Wire Language

Does RareWire support access to native iOS components such as the accelerometer and camera?

On the "Add a PDF" tutorial, in the fifth snippet of code, you've got the wrong type of quotation marks around the 2 in the onpage command. It causes an error.

Thanks for the webinar today, I do have a couple of questions.

For some reason when I'm in portrait (not landscape) my pdf is getting cut off at the top and the bottom of the page. The width seems to be fine. I've tried a bunch of different things to fix this with no luck. Any ideas? Also, the resolution on my pdfs isn't all that great. Is there anything you suggest that your publishers do to get the best pdf rendering possible?

Also, I'm wondering if you have any suggestions on how to tease out the exact location that I want to place panels on my table of contents page to link to other pages. My initial idea is to create some sort of guideline line panels, is that the best solution?

Thanks so much for all your help.

When you sign into the App Creation Studio and navigate to the Community, you will automatically sign in and have the ability to post as your Studio user. You can also log into the Studio from the Community as well. It is the best of both worlds.

You're Welcome.

RareWire