1 / 34

Creating a Visual Catalog with Maintain

Creating a Visual Catalog with Maintain. Mark Derwin and Mark Rawls Information Builders Information Builders Summit 2011 User Conference June 2011. Creating a Visual Catalog with Maintain Overview. Create dynamic displays for images with thumb nails.

ivory
Download Presentation

Creating a Visual Catalog with Maintain

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Creating a Visual Catalog with Maintain Mark Derwin and Mark Rawls Information Builders Information Builders Summit 2011 User Conference June 2011

  2. Creating a Visual Catalog with MaintainOverview • Create dynamic displays for images with thumb nails. • Display larger image and allow for update and include. • The Maintain language is perfect for creating these catalogs. • Create databases to dynamically build the forms. • Once deployed, users can access them from any browser: • IE, Firefox, Safari, Opera or Chrome • And any smart device: • iPad, iPhone, Droid, Blackberry, etc…

  3. Creating a Visual Catalog with MaintainOverview – Display the Catalog

  4. Creating a Visual Catalog with MaintainOverview – Update Existing Information

  5. Creating a Visual Catalog with MaintainCatalog Master • The database is a single segment file, so suffix can be anything. In this case, FOCUS. • File has 3 keys. If you have more or less categories, you can change this.

  6. Creating a Visual Catalog with MaintainMaintain Commands – Data Structures • Variables in Maintain can be Computed and have 1 value: • Compute var/fmt = val; • All formats (except TXT available) • Or be part of a Stack. • A stack is a checker board where • The columns are the database or computed fields. • You can Compute non-database fields into a stack. • The rows are multiple values. • Access a stack row, column or cell. • Can be named anything and there is no limit to the amount of stacks in an application.

  7. Creating a Visual Catalog with MaintainMaintain Commands – Data Structures • You can load a stack from: • The Database – NEXT • Another Stack – COPY • A TABLE procedure – EXEC • A Winform – User Entry • You can Clear a Stack – STACK CLEAR stkname • Sort a stack – STACK SORT stkname by val • Create a Stack without loading it – INFER • Loop through a Stack – REPEAT • Stacks have 2 system variables: • Stkname.FOCINDEX – This is the current stack row • Stkname.FOCCOUNT – Total rows in the stack

  8. Creating a Visual Catalog with MaintainLaunching the Maintain Development Environment MDE • In Dev Studio locate the summitlab11 project • Expand the Maintain Files folder • Double click on demo to open the MDE

  9. Creating a Visual Catalog with MaintainDisplaying the Code • Code created for you. • First step in Top case is to set path to the images • Second step is to load up the Category drop down • Use Exec

  10. Creating a Visual Catalog with MaintainLoading the Drop Down boxes • Use Exec to perform Non-Maintain procedures. • Here we use Table with DST. To get ONLY unique values. • Pass variables and receive stacks. • Variables retrieved sequentially. • Must create the stack to retrieve the data.

  11. Creating a Visual Catalog with MaintainDisplaying the Form • Expand the Demo folder • Expand the Forms folder • Click on Form1 to display • All objects have Properties and Events

  12. Creating a Visual Catalog with MaintainAdding a Category Selection Box • Click on the Combo Box icon. • Draw a rectangle on the form. • Click on the rectangle. • Select From a Variable • Assign Catstk.Category as the List Source. • Click Ok

  13. Creating a Visual Catalog with MaintainAdding a Sub Category Selection Box • Click on the Combo Box icon again. • Draw another rectangle on the form. • Click on the rectangle. • Select From a Variable • Assign SubCatstk.SubCategory as the List Source. • Click Ok

  14. Creating a Visual Catalog with MaintainAdding HTMLTable to the form • Click on the HTMLTable icon • Draw a rectangle under the combo boxes • Select Prodstk • Select Prodname, itemno, price and thumb. • Do not click Ok yet

  15. Creating a Visual Catalog with MaintainAdding HTMLTable to the form • Double-click on thumb • Change title to Image • Change Width to 10 • Justification to Centered • Change Content to HTML • Click Ok • Double-click on Prodname. • Change Link to Body Only • Click Ok

  16. Creating a Visual Catalog with MaintainAdding HTMLTable to the form • Click OK to return to the form. • Click on Form and change BackColorto white. • Click on HTMLTable • Find the HTMLTable properties • Select AlternateRowColor • Change Border to 0 – None • Change Font to: • MS Sans Serif 12 • Change GridLines to 0 – None • Change HeaderFont to: • MS Sans Serif Bold 14

  17. Creating a Visual Catalog with MaintainAdding Events to the form • Events determine what happens when something happens on your form. • All form objects have events. • Events can be: Maintain cases, JavaScript, Web Links, Form Close or Application close. • Types of events are: Click, Change, Open, Focus, Blur, Double Click, etc… • All events for a form are displayed on one events page. • Many ways to get to this page: • Click on an event on the events sheet of any object. • From the Form menu – Edit event handlers • Click on the Edit Events icon.

  18. Creating a Visual Catalog with MaintainAdding Events to the form • Click on the first ComboBox (ComboBox1) • Click on the Events Tab • Click on Change and the Events form opens • Drag getsub from Functions into ComboBox1 Change Event

  19. Creating a Visual Catalog with MaintainAdding Events to the form • Select ComboBox2 from the dropdown and Change • Drag Loader from Functions into ComboBox2 Change Event • Save and Run the procedure.

  20. Creating a Visual Catalog with MaintainAdding Events to the form • We take the criteria selected in the first Combo Box and use it to populate the second. Then we load up the HTMLTable.

  21. Creating a Visual Catalog with MaintainLoading the HTMLTable • We take the selections from the Combo Boxes and use them as criteria in our NEXT statement. • Catstk().category = Selected Category • We then loop through the stack and create the HTML to display in the HTMLTable column Thumb. • When the user makes a selection, we copy THAT row into detstk, create a larger image and display form2.

  22. Creating a Visual Catalog with MaintainAdding Buttons • Clicking on the hyperlink allows you to update a row, but we want include as well. • Create two buttons on your form. • Addbtn and Xbtn • Click on the button icon on the Controls Palette • Draw a rectangle. Change the text to Add New and the name to Addbtn • Repeat for the Exit Button. Name it Xbtn

  23. Creating a Visual Catalog with MaintainAdding Events and Links • Go to the Events page by clicking on Events Click for either button. • Select HTMLTable1 and Clicklink- Drag and drop show_detail into event • Select Addbtn and Click - Drag and drop Addnew1 into event. • Select Xbtn and Click - Click on the Close project icon on the top row • Save and Click on Form2.

  24. Creating a Visual Catalog with MaintainCreating Form2 • Change the BackColor of the form. • Expand the Stacks folder. • Drag detstk onto the form and click Select All • Deselect Pic and Description • Click Ok to place forms on field.

  25. Creating a Visual Catalog with MaintainAdding Description • Select the Multi-Edit box from the Control Palette. • Draw a wide rectangle under the Image field. • Double-click on the rectangle and assign the variable detstk.Decription • Click Ok • Find the Wrap property on the Properties sheet and change it to 2 – Hard.

  26. Creating a Visual Catalog with MaintainAdding Image • Select the HTML icon from the Controls Palette. • Draw a rectangle next to description. Click on the rectangle. • Select the variable Detstk.pic to display the image. • We COULD use the image control but this gives us control over the size. • Otherwise image would appear as the size it is save as.

  27. Creating a Visual Catalog with MaintainAdding Browse Button • The Browse button allows us to Grab an image from disk or network • Click on the HTML icon on the Controls Palette and draw a rectangle. • Add the text exactly as below, not from a variable. • <td><input type="file" name="INPUTFL" value=""></td> • Click Ok to save.

  28. Creating a Visual Catalog with MaintainFinishing the Form • Add three buttons under HTML2 • First: Update, name: UpBTN • Second: Include, name: InbBTN • Third: Close, name: CloseBTN • Expand the Variables folder. • Drag Val onto the form under the buttons. • Go to the Events page.

  29. Creating a Visual Catalog with Maintainform2 Events – Please note the lower case “f” • Select UpBTN and Click. Select the J-Scroll to add a JavaScript trigger • This code grabs the Browsed value, places it in Val2 & performs Updater1 • document.form2.Val_Edit.value=document.form2.INPUTFL.value; • IWCTrigger("updater1"); • Select IncBTNand Click. Select the J-Scroll to add a JavaScript trigger • document.form2.Val_Edit.value=document.form2.INPUTFL.value; • IWCTrigger(“Include1"); • Select CloseBTN and Click. Click on the Close form icon

  30. Creating a Visual Catalog with MaintainDynamic Winform Commands • Click on Demo to display the code. • Uncomment the Winform Set commands in Show_detail and addnew1. • Most winform properties are dynamic. • If form is not displayed, MUST use SHOW_INACTIVE before setting. • These commands toggle the Update and Include buttons.

  31. Creating a Visual Catalog with MaintainThe rest of the code • First grab ONLY the image name by using MNTGETTOK. • Update or include the record to the database. • Copy the record to your image directory – Exec Newimage. • If Update – Display new information to HTMLTable on Form1. • If Include – Clear information on Form1. • Save and Run.

  32. Creating a Visual Catalog with MaintainMoving the Image file • Since we are only storing the image name, we have to move the file. • This EXEC’d procedure takes the name of the file, &1, and copies it to the location of the images. • My example is local, if you have permissions, you can copy to Networks. • We MAY be on the D drive now.

  33. Creating a Visual Catalog with MaintainFinishing Touches • Open Form1. • Select Image from the Controls Palette and draw a rectangle in the corner. • Select New and navigate to the Summitlab11 folder. • Select logo.jpg and click Open, Next, and Finish. • Click Overwrite Existing, Ok and OK to place the image on the Form. • Repeat for form2.

  34. Creating a Visual Catalog with MaintainFinishing Touches • Select the Text icon from the Controls Palette. • Add Text above each of the Drop Down Boxes on Form1 • Change the Font to Bold 12.

More Related