That is, when the web app user clicks the button it will call the method in charge of hiding the Menu. Next, add the Action Event Handlerto it and write the following line of code in the associated Code Editor: Now select the button added to the WebContainer and change its name to Closefrom the Inspector Panel. That is, it will call the previously created private method passing along the Truevalue, so it will instruct to display the menu.Īdd the second method, using these values: Add thus the first of such methods to the WebContainer CCMenuusing the following values in the associated Inspector:Īnd put this line of code in the associated Code Editor: While this is the method in charge of doing the real work, we will add a couple of convenient public methods to make more explicit the task of displaying and hiding the menu. we compose the JavaScript sentence to execute Sa.Append "st.right = '-" + str(me.width) + "px' " we will hide the menu, sliding it outside Sa.Append "st.transitionTimingFunction = 'ease-in-out' " Sa.Append "st.transitionDuration = '1s' " Sa.Append "st.transitionProperty = 'right' " we set the position and animation properties that means that we want to display the menu If the 'show' variable is set to True, then Sa.Append "var el = document.getElementById('" + Me.ControlID + "') " We get the unique ID for the WebContainer Then, write the following snippet of code in the associated Code Editor: Dim sa() As String The next step is adding the behavior to the WebContainer, so it is hidden or displayed when directed from our web app so add the a new method to the CCMenuWebContainer using the following signature:Īnd set its Scopeto Private. Don’t forget to set the property Styleto TextWhite(or the name set in the previous step) to the WebLabels using the Inspector.Īt this point, the WebContainer CCMenushould be similar to the one displayed in this screenshot: The next control that we add to the WebContainer is the button that will hide the menu, and also the WebLabels that will link to the webpages we want to drive from the menu. You don’t need to modify the size of the control this is something we will set using the control locking options in the Inspector once we add it to our template webpage. With the WebContainer selected in the Navigator, use the Inspector to set the following properties: Of course, you can easily change these UI controls to other ones that fits better in your app design. This is the control that will include all the links to the webpages of the web app and also will contain the button responsible of closing the menu using a sliding animation on the right side of the webpage. Creating the WebContainer-based menuĪdd now a WebContainer from the Library to the Navigator. This is the style to be applied on the WebLabelcontrols of the menu. Maybe you want to set the Opacity property so it is not 100% solid when the menu is displayed over the webpages.Ĭhoose the second style in the Navigator and change its Nameproperty to TextWhite(or other name of your election) in the Inspector, setting the Text Colorproperty to the one you want (white in the example). Now, add the Backgroundproperty using the Style editor and set the background color to the one you want to use. Select the first of the just added styles in order to access the Styles Editorand change the Nameproperty to MenuStylein the Inspector. With Xojo running with a new Web project, we will start adding a couple of styles ( WebStyle) to the project from the Library. ![]() For this particular example, a couple of WebLabelcontrols that when clicked, will display the associated web page a templateweb page ( WebPage), that will be used to create all the web pages driven by the menu so they can display all the common elements a couple of Web styles, to set the menu opacity and menu items text color and a bit of JavaScriptto animate the menu itself. We’ll start with a WebContainer, responsible for including all the menu elements. After some investigation (and the invaluable help of Greg O’Lone), the answer is: yes, you can do that! If you are interested in seeing how to achieve this, continue reading! Sometime ago a Xojo user asked if it is possible to use Xojo Web to create the kind of animated menus seen in several regularwebsites. ![]() pre> En la imagen de abajo, puedes accionar la accion "Cambio de Imagen " en tu menú contextual. ![]() En este elemento específico de la lista, puedes cambiar el tamaño del texto usando las acciones "Incremenrar/Decrementar" de tu menú contextual. En cualquier parte del ejemplo puedes compartir la página en twitter y Facebook usando el menú de compartir de tu menú contextual. HTML table advanced features and accessibility.From object to iframe - other embedding technologies.Assessment: Structuring a page of content.
0 Comments
Leave a Reply. |