How to manage images within a Universal App

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.