zOrder isn't working?


#1

Hi!

I’m trying to write some balsamiq xml to upload a new mockup. Sometimes I have just the feeling that the zOrder isn’t read at all? Is there a documentation about somewhere?

For exemple, is this case, when I upload my .bmml, the browserwindows goes top, despite it’s lower zOrder. But when I import my mockup xml by CTRL-Maj-E (exactly the same content), the browserwindows is behind at it should be.

<mockup fontFace="Balsamiq Sans" measuredH="700" measuredW="1400" mockupH="700" mockupW="1400" skin="sketch" version="1.0">
  <controls>
    <control controlID="0" controlTypeID="com.balsamiq.mockups::BrowserWindow" h="700" isInGroup="-1" w="1400" x="0" y="0" zOrder="0">
      <controlProperties>
        <text>foo...</text>
      </controlProperties>
    </control>
    <control controlID="1" controlTypeID="com.balsamiq.mockups::Title" h="-1" isInGroup="-1" w="-1" x="67" y="85" zOrder="3">
      <controlProperties>
        <text>foo...</text>
        <size>24</size>
        <color>16777215</color>
        <href>connected%26bm%3Bconnected.bmml%26bm%3Bconnected.bmml%26bm%3Bconnected.bmml</href>
      </controlProperties>
    </control>
    <control controlID="2" controlTypeID="com.balsamiq.mockups::Icon" h="-1" isInGroup="-1" w="-1" x="1083" y="85" zOrder="3">
      <controlProperties>
        <color>16777215</color>
        <icon>user%7Csmall</icon>
      </controlProperties>
    </control>
    <control controlID="3" controlTypeID="com.balsamiq.mockups::Label" h="-1" isInGroup="-1" w="200" x="1062" y="88" zOrder="3">
      <controlProperties>
        <text>foo...</text>
        <color>16777215</color>
        <align>right</align>
      </controlProperties>
    </control>
    <control controlID="4" controlTypeID="com.balsamiq.mockups::VRule" h="25" isInGroup="-1" w="10" x="1272" y="85" zOrder="3">
      <controlProperties>
        <color>16777215</color>
      </controlProperties>
    </control>
    <control controlID="5" controlTypeID="com.balsamiq.mockups::PointyButton" h="-1" isInGroup="-1" w="-1" x="1290" y="85" zOrder="3">
      <controlProperties>
        <borderStyle>none</borderStyle>
        <direction>center</direction>
        <color>7317724</color>
        <menuIcon>false</menuIcon>
        <newLayout>true</newLayout>
        <text>foo...</text>
        <href>home%26bm%3Bhome.bmml%26bm%3Bhome.bmml%26bm%3Bhome.bmml</href>
      </controlProperties>
    </control>
    <control controlID="6" controlTypeID="com.balsamiq.mockups::Image" h="40" isInGroup="-1" w="40" x="12" y="77" zOrder="2">
      <controlProperties>
        <text/>
        <src>.%2Fassets%2Flogo_small.png</src>
        <href>connected%26bm%3Bconnected.bmml%26bm%3Bconnected.bmml%26bm%3Bconnected.bmml</href>
      </controlProperties>
    </control>
    <control controlID="7" controlTypeID="com.balsamiq.mockups::Canvas" h="48" isInGroup="-1" w="1397" x="3" y="74" zOrder="1">
      <controlProperties>
        <color>3355443</color>
      </controlProperties>
    </control>
    <control controlID="8" controlTypeID="com.balsamiq.mockups::PointyButton" h="-1" isInGroup="-1" w="-1" x="200" y="85" zOrder="3">
      <controlProperties>
        <borderStyle>none</borderStyle>
        <direction>center</direction>
        <color>3355443</color>
        <menuIcon>true</menuIcon>
        <newLayout>true</newLayout>
        <text>foo...</text>
        <href>activity%26bm%3Bactivity.bmml%26bm%3Bactivity.bmml%26bm%3Bactivity.bmml</href>
      </controlProperties>
    </control>
    <control controlID="9" controlTypeID="com.balsamiq.mockups::PointyButton" h="-1" isInGroup="-1" w="-1" x="300" y="85" zOrder="3">
      <controlProperties>
        <borderStyle>none</borderStyle>
        <direction>center</direction>
        <color>3355443</color>
        <menuIcon>true</menuIcon>
        <newLayout>true</newLayout>
        <text>foo...</text>
        <href>client%26bm%3Bclient.bmml%26bm%3Bclient.bmml%26bm%3Bclient.bmml</href>
      </controlProperties>
    </control>
    <control controlID="10" controlTypeID="com.balsamiq.mockups::PointyButton" h="-1" isInGroup="-1" w="-1" x="400" y="85" zOrder="3">
      <controlProperties>
        <borderStyle>none</borderStyle>
        <direction>center</direction>
        <color>6710886</color>
        <menuIcon>true</menuIcon>
        <newLayout>true</newLayout>
        <text>foo...</text>
        <href>admin%26bm%3Badmin.bmml%26bm%3Badmin.bmml%26bm%3Badmin.bmml</href>
      </controlProperties>
    </control>
    <control controlID="11" controlTypeID="com.balsamiq.mockups::PointyButton" h="-1" isInGroup="-1" w="-1" x="500" y="85" zOrder="3">
      <controlProperties>
        <borderStyle>none</borderStyle>
        <direction>center</direction>
        <color>3355443</color>
        <menuIcon>true</menuIcon>
        <newLayout>true</newLayout>
        <text>foo...</text>
        <href>lang%26bm%3Blang.bmml%26bm%3Blang.bmml%26bm%3Blang.bmml</href>
      </controlProperties>
    </control>
    <control controlID="12" controlTypeID="com.balsamiq.mockups::PointyButton" h="-1" isInGroup="-1" w="-1" x="600" y="85" zOrder="3">
      <controlProperties>
        <borderStyle>none</borderStyle>
        <direction>center</direction>
        <color>3355443</color>
        <menuIcon>true</menuIcon>
        <newLayout>true</newLayout>
        <text>foo...</text>
        <href>config%26bm%3Bconfig.bmml%26bm%3Bconfig.bmml%26bm%3Bconfig.bmml</href>
      </controlProperties>
    </control>
    <control controlID="13" controlTypeID="com.balsamiq.mockups::BreadCrumbs" h="-1" isInGroup="-1" w="-1" x="12" y="133" zOrder="3">
      <controlProperties>
        <size>16</size>
        <text>foo...</text>
        <hrefs>admin%26bm%3Badmin.bmml%26bm%3Badmin.bmml%26bm%3Badmin.bmml%2Cuser_detail%26bm%3Buser_detail.bmml%26bm%3Buser_detail.bmml%26bm%3Buser_detail.bmml</hrefs>
      </controlProperties>
    </control>
    <control controlID="14" controlTypeID="com.balsamiq.mockups::Label" h="-1" isInGroup="-1" w="159" x="12" y="212" zOrder="0">
      <controlProperties>
        <text>foo...</text>
        <size>14</size>
        <align>right</align>
      </controlProperties>
    </control>
    <control controlID="15" controlTypeID="com.balsamiq.mockups::Button" h="-1" isInGroup="-1" w="-1" x="247" y="133" zOrder="4">
      <controlProperties>
        <color>3700253</color>
        <text>foo...</text>
      </controlProperties>
    </control>
    <control controlID="16" controlTypeID="com.balsamiq.mockups::TextInput" h="-1" isInGroup="-1" w="200" x="179" y="212" zOrder="5">
      <controlProperties>
        <text>foo...</text>
      </controlProperties>
    </control>
    <control controlID="17" controlTypeID="com.balsamiq.mockups::TextInput" h="-1" isInGroup="-1" w="200" x="179" y="252" zOrder="6">
      <controlProperties>
        <text>foo...</text>
      </controlProperties>
    </control>
    <control controlID="18" controlTypeID="com.balsamiq.mockups::Label" h="-1" isInGroup="-1" w="162" x="12" y="254" zOrder="3">
      <controlProperties>
        <text>foo...</text>
        <size>14</size>
        <align>right</align>
      </controlProperties>
    </control>
    <control controlID="19" controlTypeID="com.balsamiq.mockups::TextInput" h="-1" isInGroup="-1" w="200" x="179" y="292" zOrder="4">
      <controlProperties>
        <text>foo...</text>
      </controlProperties>
    </control>
    <control controlID="20" controlTypeID="com.balsamiq.mockups::Label" h="-1" isInGroup="-1" w="162" x="12" y="294" zOrder="5">
      <controlProperties>
        <text>foo...</text>
        <size>14</size>
        <align>right</align>
      </controlProperties>
    </control>
    <control controlID="21" controlTypeID="com.balsamiq.mockups::Label" h="-1" isInGroup="-1" w="162" x="12" y="333" zOrder="6">
      <controlProperties>
        <text>foo...</text>
        <size>14</size>
        <align>right</align>
      </controlProperties>
    </control>
    <control controlID="22" controlTypeID="com.balsamiq.mockups::HRule" h="-1" isInGroup="-1" w="963" x="57" y="199" zOrder="7">
      <controlProperties/>
    </control>
    <control controlID="23" controlTypeID="com.balsamiq.mockups::Label" h="-1" isInGroup="-1" w="-1" x="52" y="175" zOrder="8">
      <controlProperties>
        <text>foo...</text>
        <align>left</align>
      </controlProperties>
    </control>
    <control controlID="24" controlTypeID="com.balsamiq.mockups::Label" h="-1" isInGroup="-1" w="-1" x="453" y="175" zOrder="9">
      <controlProperties>
        <text>foo...</text>
        <align>left</align>
      </controlProperties>
    </control>
    <control controlID="25" controlTypeID="com.balsamiq.mockups::Label" h="-1" isInGroup="-1" w="-1" x="751" y="175" zOrder="10">
      <controlProperties>
        <text>foo...</text>
        <align>left</align>
      </controlProperties>
    </control>
    <control controlID="26" controlTypeID="com.balsamiq.mockups::TextInput" h="-1" isInGroup="-1" w="200" x="179" y="331" zOrder="11">
      <controlProperties>
        <text>foo...</text>
      </controlProperties>
    </control>
    <control controlID="27" controlTypeID="com.balsamiq.mockups::Label" h="-1" isInGroup="-1" w="-1" x="819" y="225" zOrder="13">
      <controlProperties>
        <text>foo...</text>
        <size>14</size>
        <align>left</align>
      </controlProperties>
    </control>
    <control controlID="28" controlTypeID="com.balsamiq.mockups::Icon" h="-1" isInGroup="-1" w="-1" x="751" y="212" zOrder="14">
      <controlProperties>
        <color>3700253</color>
        <icon>plus-square%7Clarge</icon>
      </controlProperties>
    </control>
    <control controlID="29" controlTypeID="com.balsamiq.mockups::Label" h="-1" isInGroup="-1" w="-1" x="521" y="225" zOrder="25">
      <controlProperties>
        <text>foo...</text>
        <size>14</size>
        <align>left</align>
      </controlProperties>
    </control>
    <control controlID="30" controlTypeID="com.balsamiq.mockups::Icon" h="-1" isInGroup="-1" w="-1" x="453" y="212" zOrder="26">
      <controlProperties>
        <color>15110456</color>
        <icon>minus-square%7Clarge</icon>
      </controlProperties>
    </control>
  </controls>
</mockup>

Thank you a lot :slight_smile:


#2

Well, this is a super fun one. Thanks for finding it @Annoa.

I’m going to have @Florian_Brauer look at it tomorrow. He or I will post an update as soon as we have one.

Sorry for any hassle this causes you in the interim, my friend. But we will do what we can to get it fixed!


#3

Thank you for the quick answer ! :slight_smile:


#4

Ok Annoa, I was able to catch Florian before he logged off for the day, and we figured it out.

You have a lot of controls on the same zOrder plane, which is causing trouble with the renderer.

This works when you import the XML because we have an integrity check with XML import that is absent when uploading a BMML. That’s because myBalsamiq assumes that a Mockups 2 product created the BMML file, so it just tries to display it. XML can come from other products as well, so we need to run more checks on the imported code.

Your Z order gets fixed on the import, but not on the upload.

If you upload your bmml to one mockup, import it on another, and compare the code, you can see the differences.

Let me know if you have any questions about this, Annoa. It’s close to Latin for me, but I can always rope Florian in to help. :slight_smile:


#5

Wow that was a quick one, thanks Brendan and Florian.

Ok, I think i will just assume that my zOrder = my idcontrol, and create them in a good order, it will be easier :relaxed:

Have a nice day